Header Component

A customizable React header component.

Estilos

O CSS está incluído no JavaScript do pacote e é adicionado automaticamente à página no navegador. Basta importar o componente, sem importar CSS separado. Ao atualizar, remova imports manuais de CSS deste pacote.

Em aplicações com SSR, os estilos são adicionados quando o JavaScript executa no navegador; não são incluídos automaticamente no HTML gerado pelo servidor.

Installation

Use the package manager npm

npm install @tevui/header

Props

The header component accepts the following properties:

| Name | Type | Default | | -------------- | -------------- | --------------------------------- | | dataTestId | string | Default - tevui-header-datatestid | | title | string | App title - Not mandatory | | welcome | string | Welcome text - Not mandatory | | logo | HeaderLogoProp | First and second logo | | loginName | string | In general User name, if exists | | buttonLogin* | ButtonProps | Tevui Button props | | buttonLogout* | ButtonProps | Tevui Button props | | buttonSignin | ButtonProps | Tevui Button props | | id | string | Default - header-id |

Usage

import React from "react";
import { Header } from "@tevui/header";

const ExampleComponent = () => {
  const handleheaderClick = () => {
    // Logic to handle the header click event
  };

  return (
    <Header
      dataTestId="tevui-header-datatestid"
      title="App Name"
      logo={ logoImage: "./logo.png", logoSize: 40 }
      logo={ logoSecondImage: "./logo2.png", logoSecondSize: 60 }
      welcome="Welcome "
      loginName="User name"
      buttonLogin={
        buttonStyle: "solid",
        borderRadius: 5,
        label: "Login",
        size: "small",
        onClick: () => alert("login"),
      }
      buttonLogout={
        buttonStyle: "solid",
        borderRadius: 5,
        label: "Logout",
        size: "small",
        onClick: () => alert("login"),
      }
      buttonSignin={
        buttonStyle: "ghost",
        borderRadius: 5,
        label: "Signin",
        size: "small",
        onClick: () => alert("login"),
      }
      id="header-id",
    />
  );
};

export default ExampleComponent;