Navegação

Tabs

/componentes/tabs.mdmarkdown cru, para quem lê com agent em vez de olho

Básico

Doze notas aguardando pagamento.

Com aba desabilitada

Razão social, CNPJ e endereço.

Importar

import { Tabs } from '@rivocode/ui'

Quando usar

Alterna paineis irmaos na mesma página.

Compõe com TabList, Tab e TabPanel, casando value entre aba e painel. O risco que corre até a aba ativa se posiciona sozinho.

TabList tem variant, do tipo TabVariant. O risco embaixo, que é o padrão, diz "esta parte da página". A caixinha, variant="segmented", diz "a mesma coisa, de outro jeito": largura de tela, preview e código, escuro e claro. Trocar uma pela outra faz o controle prometer o que ele não faz.

Quando não usar

Não use para navegação entre páginas: aba sugere que o conteúdo está ali do lado, não em outro endereço. Se o clique troca a URL, é link, e o lugar dele é a NavigationMenu ou a Sidebar.

No React Native

Traduz pela metade, de propósito. O Tabs nativo é só a caixinha (variant="segmented" no web): items, value, onValueChange, sem TabList, Tab nem TabPanel. Aba que troca a seção da página não é peça no celular (é tab bar do router), e insistir numa aba desenhada por cima disso dá duas navegações concorrentes na mesma tela.

API

Prop	Tipo
`defaultValue`0.4.0 The default value.	`any`
`onValueChange`0.4.0 Callback invoked when new value is being set.	`((value: any, eventDetails: TabsRootChangeEventDetails) => void)`
`orientation`0.4.0 The component orientation (layout flow direction).	`Orientation`
`render`0.4.0 Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ComponentRenderFn<HTMLProps, TabsRootState>ReactElement<unknown, stringJSXElementConstructor<any>>`
`value`0.4.0 The value of the currently active `Tab`.	`any`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.

Partes

Tabs se monta com estas peças. Todas vivem nesta página, porque separar cada uma num endereço obrigaria a abrir seis abas para montar uma tela.

Tab

/tab.md

Prop	Tipo
`value`obrigatória0.4.0 The value of the Tab.	`any`
`disabled`0.4.0 Whether the Tab is disabled.	`boolean`
`nativeButton`0.4.0 Whether the component renders a native `<button>` element when replacing it via the `render` prop.	`boolean`
`render`0.4.0 Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ComponentRenderFn<HTMLProps, TabsTabState>ReactElement<unknown, stringJSXElementConstructor<any>>`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.

TabList

/tab-list.md

A fila de abas.

Rola de lado quando não cabe, em vez de espremer ou quebrar linha: aba em duas linhas vira menu disfarçado, e no celular quase nenhuma fila de aba cabe inteira. A barra de rolagem fica escondida de propósito, o gesto continua valendo, e no desktop a aba ativa se traz para a vista sozinha pelo foco do teclado.

Prop	Tipo
`activateOnFocus`0.4.0 Whether to automatically change the active tab on arrow key focus.	`boolean`
`loopFocus`0.4.0 Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.	`boolean`
`render`0.4.0 Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ComponentRenderFn<HTMLProps, TabsListState>ReactElement<unknown, stringJSXElementConstructor<any>>`
`variant`0.4.0 `underline` divide uma pagina em secoes; `segmented` troca a forma de ver a mesma coisa, como largura de tela ou preview e codigo.	`TabVariant`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.

TabPanel

/tab-panel.md

O conteúdo de uma aba.

O value amarra painel e aba. Só o painel ativo fica no documento, então formulário dentro de aba escondida não entra no Tab do teclado.

Prop	Tipo
`value`obrigatória0.4.0 The value of the TabPanel.	`any`
`keepMounted`0.4.0 Whether to keep the HTML element in the DOM while the panel is hidden.	`boolean`
`render`0.4.0 Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ComponentRenderFn<HTMLProps, TabsPanelState>ReactElement<unknown, stringJSXElementConstructor<any>>`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.

Quando usar

Alterna paineis irmaos na mesma página.

Compõe com TabList, Tab e TabPanel, casando value entre aba e painel. O risco que corre até a aba ativa se posiciona sozinho.

Quando não usar

Não use para navegação entre páginas: aba sugere que o conteúdo está ali do lado, não em outro endereço. Se o clique troca a URL, é link, e o lugar dele é a NavigationMenu ou a Sidebar.

No React Native

API

Prop	Tipo
`defaultValue`0.4.0 The default value.	`any`
`onValueChange`0.4.0 Callback invoked when new value is being set.	`((value: any, eventDetails: TabsRootChangeEventDetails) => void)`
`orientation`0.4.0 The component orientation (layout flow direction).	`Orientation`
`render`0.4.0 Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ComponentRenderFn<HTMLProps, TabsRootState>ReactElement<unknown, stringJSXElementConstructor<any>>`
`value`0.4.0 The value of the currently active `Tab`.	`any`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.

Partes

Tabs se monta com estas peças. Todas vivem nesta página, porque separar cada uma num endereço obrigaria a abrir seis abas para montar uma tela.

Tab

/tab.md

Prop	Tipo
`value`obrigatória0.4.0 The value of the Tab.	`any`
`disabled`0.4.0 Whether the Tab is disabled.	`boolean`
`nativeButton`0.4.0 Whether the component renders a native `<button>` element when replacing it via the `render` prop.	`boolean`
`render`0.4.0 Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ComponentRenderFn<HTMLProps, TabsTabState>ReactElement<unknown, stringJSXElementConstructor<any>>`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.

TabList

/tab-list.md

A fila de abas.

Prop	Tipo
`activateOnFocus`0.4.0 Whether to automatically change the active tab on arrow key focus.	`boolean`
`loopFocus`0.4.0 Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.	`boolean`
`render`0.4.0 Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ComponentRenderFn<HTMLProps, TabsListState>ReactElement<unknown, stringJSXElementConstructor<any>>`
`variant`0.4.0 `underline` divide uma pagina em secoes; `segmented` troca a forma de ver a mesma coisa, como largura de tela ou preview e codigo.	`TabVariant`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.

TabPanel

/tab-panel.md

O conteúdo de uma aba.

O value amarra painel e aba. Só o painel ativo fica no documento, então formulário dentro de aba escondida não entra no Tab do teclado.

Prop	Tipo
`value`obrigatória0.4.0 The value of the TabPanel.	`any`
`keepMounted`0.4.0 Whether to keep the HTML element in the DOM while the panel is hidden.	`boolean`
`render`0.4.0 Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ComponentRenderFn<HTMLProps, TabsPanelState>ReactElement<unknown, stringJSXElementConstructor<any>>`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.