Header

O componente Header é usado como cabeçalho da página. O Header acompanha o scroll na vertical.

Importação

import { Header } from '@escaletech/delta'

Utilização

Editor de código

<Header logo={{ alt: 'Oi', src: 'https://thc-cms-escale.cdn.prismic.io/thc-cms-escale/6f8f1ed4-4e48-4363-8f59-25a2cda6872f_Group+2.svg', width: 129, height: 31, url: 'www.escale.com.br' }} />

  <Header
    logo={{
      alt: 'Oi',
      src: 'https://thc-cms-escale.cdn.prismic.io/thc-cms-escale/6f8f1ed4-4e48-4363-8f59-25a2cda6872f_Group+2.svg',
      width: 129,
      height: 31,
      url: 'www.escale.com.br'
    }}
  />

Resultado

Loading...

Variações

Use o children do Header para importar o HeaderMenu.

Editor de código

<Header logo={{ alt: 'Oi', src: 'https://thc-cms-escale.cdn.prismic.io/thc-cms-escale/6f8f1ed4-4e48-4363-8f59-25a2cda6872f_Group+2.svg', width: 129, height: 31, url: 'www.escale.com.br' }} > <HeaderMenu currentPath='/internet' menu={[ { label: 'Internet', link: '/internet' }, { label: 'TV', link: '/tv' }, { label: 'Móvel', link: '/movel' } ]} /> </Header>

  <Header
    logo={{
      alt: 'Oi',
      src: 'https://thc-cms-escale.cdn.prismic.io/thc-cms-escale/6f8f1ed4-4e48-4363-8f59-25a2cda6872f_Group+2.svg',
      width: 129,
      height: 31,
      url: 'www.escale.com.br'
    }}
  >
    <HeaderMenu
      currentPath='/internet'
      menu={[
        {
          label: 'Internet',
          link: '/internet'
        },
        {
          label: 'TV',
          link: '/tv'
        },
        {
          label: 'Móvel',
          link: '/movel'
        }
      ]}
    />
  </Header>

Resultado

Loading...

Você também pode adicionar qualquer componente para a propriedade cta, o qual ficará no canto direito do Header.

Editor de código

<Header logo={{ alt: 'Oi', src: 'https://thc-cms-escale.cdn.prismic.io/thc-cms-escale/6f8f1ed4-4e48-4363-8f59-25a2cda6872f_Group+2.svg', width: 129, height: 31, url: 'www.escale.com.br' }} > <HeaderMenu cta={<button type='button'>CTA</button>} currentPath='/internet' menu={[ { label: 'Internet', link: '/internet' }, { label: 'TV', link: '/tv' }, { label: 'Móvel', link: '/movel' } ]} /> </Header>

  <Header
    logo={{
      alt: 'Oi',
      src: 'https://thc-cms-escale.cdn.prismic.io/thc-cms-escale/6f8f1ed4-4e48-4363-8f59-25a2cda6872f_Group+2.svg',
      width: 129,
      height: 31,
      url: 'www.escale.com.br'
    }}
  >
    <HeaderMenu
      cta={<button type='button'>CTA</button>}
      currentPath='/internet'
      menu={[
        {
          label: 'Internet',
          link: '/internet'
        },
        {
          label: 'TV',
          link: '/tv'
        },
        {
          label: 'Móvel',
          link: '/movel'
        }
      ]}
    />
  </Header>

Resultado

Loading...

Customização

Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de tema.

import { extendsTheme } from '@escaletech/delta'

export const theme = extendsTheme({
  colors: {
    headerBackgroundColor: '$primaryDarkest',
    menuColorDesktop: '$neutralUltralight',
    menuColor: '$neutralMedium',
    menuColorActive: '$primaryDarkest',
    menuIconColor: '$neutralUltralight'
  }
})

Tokens

Token	Descrição
colors.headerBackgroundColor	Cor de fundo do header
colors.menuColorDesktop	Cor da fonte do menu em desktop
colors.menuColor	Cor da fonte do menu em mobile
colors.menuColorActive	Cor da fonte do menu ativo
colors.menuIconColor	Cor do ícone de abre e fecha do menu

Props

Header

Propriedade	Descrição	Tipo	Padrão	Obrigatório
logo	URL de redirecionamento ao clicar na imagem, caminho da imagem, alt da imagem, altura e largura.	{ alt: string; src: string, width?: number, height?:number, url?: string }	-	✅
children	Conteúdo do componente	ReactNode	_	❌

HeaderMenu

Propriedade	Descrição	Tipo	Padrão	Obrigatório
menu	Array de itens de menu contendo o link e label	{ link: string, label: string }[]	_	❌
cta	Componente de CTA	ReactNode	_	❌
currentPath	Definição da URL atual para ativar o item do menu	string	/	❌