Tabs
O componente Tabs é utilizado para dividir conteúdos entre tabelas horizontais (tabs).
Importação
import { Tabs } from '@escaletech/delta'
Utilização
O componente <Tabs> aceita apenas o componente <Tabs.Panel> como filho. Qualquer outro componente adicionado como filho resultará em um TypeError.
Com o índice inicial definido
No componente <Tabs /> você pode definir qual tab inicialmente ficará ativa colocando um valor na propriedade index. Os valores do índice começa em 0.
No exemplo abaixo, a segunda tab ficará ativa ao invés da primeira tab (padrão).
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({
borderWidths: {
tabsBorderBottomWidth: '1px'
},
colors: {
tabsIndicatorBackgroundColor: '$secondaryMedium',
tabsActiveTextColor: '$neutralDarkest',
tabsTextColor: '$neutralDark',
tabsBorderBottomColor: '$neutralMedium'
},
space: {
tabsItemPaddingBottom: '$xxs',
tabsListMarginBottom: '$xs',
tabsListMarginBottomDesktop: '$sm'
},
sizes: {
tabsIndicatorHeight: '4px'
},
})
Diferenciação de ID
Para páginas que contém mais de um Tabs, é necessário adicionar a props tabKey para que tenha IDs únicos.
Este campo não é obrigatório, mas certifique-se de que os IDs de cada componente esteja diferente.
Tokens
| Token | Descrição |
|---|---|
| borderWidths.tabsBorderBottomWidth | Define o tamanho da borda inferior |
| colors.tabsIndicatorBackgroundColor | Define o tamanho da cor de fundo do indicator das tabs |
| colors.tabsBorderBottomColor | Define a cor da borda inferior |
| colors.tabsTextColor | Define a cor do texto da tab |
| colors.tabsActiveTextColor | Define a cor do texto da tab quando ela estiver ativa |
| space.tabsItemPaddingBottom | Define o espaço entre o texto da tab e o índice |
| space.tabsListMarginBottom | Define o espaço entre a tab atual e o seu conteúdo nos breakpoints de mobile e tablet. |
| space.tabsListMarginBottomDesktop | Define o espaço entre a tab atual e o seu conteúdo no breakpoint de desktop. |
| sizes.tabsIndicatorHeight | Define a altura do indicador das tabs |
Props
Tabs
| Propriedade | Descrição | Tipo | Padrão | Obrigatório |
|---|---|---|---|---|
| children | Conteúdo do componente | ReactNode | - | ✅ |
| index | Índice da tab que inicialmente ficará ativa | number | 0 | ❌ |
| onChange | Função que é executada quando existe uma troca de tab por parte do usuário. Ele retornará o index atual. | Function | - | ❌ |
| tabKey | Chave única | string | - | ❌ |
Aceita todas as propriedades suportadas pela tag div nativa.
Tabs.TabPabel
| Propriedade | Descrição | Tipo | Padrão | Obrigatório |
|---|---|---|---|---|
| children | Conteúdo do componente | ReactNode | - | ✅ |
| title | Título da tab | String | - | ✅ |
Aceita todas as propriedades suportadas pela tag div nativa.