Shell
Base
Anatomia
Cada elemento que compõe a anatomia do Shell está associado a um subcomponente. Estes subcomponentes devem ser inseridos no código de modo que, após a avaliação final, sejam renderizados como filhos imediatos do Shell.
- Identificação do produto: Subcomponente
Shell.Product - Menu principal: Subcomponente
Shell.Primary - Menu secundário: Subcomponente
Shell.Secondary - Menu de produtos: Subcomponente
Shell.Products - Menu da conta: Subcomponente
Shell.Account - Alertas e comunicações: Subcomponente
Shell.Alerts - Conteúdo: Subcomponente
Shell.Content
Identificação do produto
Utilize o subcomponente Shell.Product junto com o componente Brand para identificar o produto associado.
Utilize a propriedade href junto com o subcomponente Shell.Product para torná-lo automaticamente um link. Em aplicações que fazem uso do React Router ou outra lib de roteamento, utilize a propriedade as para definir um tipo específico de elemento para o Shell.Product.
Navegação e itens de navegação
O conteúdo dos menus é intercambiável, ou seja, pode ser reutilizado e reorganizado de diferentes formas, sendo construído pelos subcomponentes Shell.Nav e Shell.Nav.Item. Cada item muda de estilo automaticamente de acordo com o menu em que é exibido, podendo assumir a forma de um dropdown e, em casos de aninhamento, permitir a navegação por submenus.
Label
Utilize a propriedade label para definir o rótulo do item. Trata-se de uma propriedade obrigatória que aparece de formas diferentes dependendo do menu onde o item está sendo exibido.
Com texto auxiliar
Utilize a propriedade auxiliaryText para exibir uma informação adicional. Esta descrição é útil para fornecer mais detalhes sobre o item.
A propriedade auxiliaryText não aparece visualmente quando presente em um item do menu secundário.
Com ícone
Utilize as propriedades prefix e suffix para adicionar ícones no início e no fim do item.
Ícones sempre devem ser adicionados nos primeiros itens dos menus primário e secundário.
Com Avatar
Utilize a propriedade prefix para adicionar o componente Avatar no início do item.
Com Tag
Utilize a propriedade suffix para adicionar o componente Tag no fim do item.
Com Badge
Utilize a propriedade badge para exibir um indicador no item. O tipo dessa propriedade pode ser booleana ou numérica. Para limitar o valor numérico exibido, utilize a propriedade badgeMaxValue.
Item de ação crítica
Utilize a propriedade danger para indicar uma ação perigosa, sinalizando visualmente que essa ação deverá ser executada com atenção.
Como link
Utilize a propriedade href para tornar o item automaticamente um link.
Caracterize links externos com o ícone External em tamanho extra-pequeno ("xs") ao fim do item.
Em aplicações que fazem uso do React Router ou outra lib de roteamento, utilize a propriedade as para definir um tipo específico de elemento para o Shell.Nav.Item.
import { BrowserRouter, Link as LinkRouter } from 'react-router-dom';
import { House } from '@resultadosdigitais/tangram-react-icons';
import { Brand } from '@resultadosdigitais/tangram-components';
import { Shell } from '@resultadosdigitais/tangram-shell';
export default function ShellWithReactRouter() {
return (
<BrowserRouter>
<Shell>
<Shell.Product>
<Brand kind="RDStationMarketing" />
</Shell.Product>
<Shell.Primary>
<Shell.Nav>
<Shell.Nav.Item
prefix={<House title="Início" />}
label="Início"
as={LinkRouter}
to="/"
/>
</Shell.Nav>
</Shell.Primary>
</Shell>
</BrowserRouter>
);
}
Item ativo
Utilize a propriedade active para indicar que o item está ativo.
Item desabilitado
Utilize a propriedade disabled para indicar que o item está desabilitado.
Item não interativo
Utilize a propriedade readOnly para indicar que o item não é interativo.
Com item customizado
Utilize a propriedade renderItem para fornecer um componente customizado no lugar do conteúdo padrão do item.
Para manter a consistência visual dos menus, utilize os subcomponentes Shell.Nav.Item.Prefix, Shell.Nav.Item.Heading, Shell.Nav.Item.Label, Shell.Nav.Item.AuxiliaryText e Shell.Nav.Item.Suffix para compor um item customizado.
Navegação em níveis (Submenus)
O componente suporta menus aninhados de forma nativa. Crie uma navegação multi-nível ao incluir outros itens como filhos de um Shell.Nav.Item, o item pai se torna o gatilho para um novo nível de navegação. Ao clicar em um item com subitens, o conteúdo atual é substituído pelo novo nível.
Visibilidade dos submenus
É possível controlar a visibilidade dos menus exibidos como dropdown a partir de seus respectívos items pais. Não é possível fazer este controle com os menus mais internos.
Por padrão, o submenu não é controlado. Utilize o parâmetro defaultExpanded para indicar que o submenu deve iniciar visível por padrão. Use a propriedade expanded e o callback onToggle para controlar a visibilidade do submenu.
Grupo de itens
Utilize o subcomponente Shell.Nav.Group para agrupar itens de navegação. Use a propriedade label para definir um título para o grupo.
Com título customizado
Quando precisar compor o conteúdo do título com outros elementos, ao invés da propriedade label, utilize o subcomponente Shell.Nav.Group.Label dentro de Shell.Nav.Group.
Menu principal
É o menu responsável por exibir os principais itens da navegação. Utilize o subcomponente Shell.Primary com Shell.Nav para montar os itens do menu.
Contraído/expandido
Por padrão, o menu principal não é controlado. Utilize o parâmetro defaultExpanded para indicar que o submenu deve iniciar expandido por padrão. Use a propriedade expanded e o callback onToggle para controlar a expanção do menu.
Utilize as especificações de produto para definir as configuração do menu principal. Se for preciso, utilize a propriedade hideToggle para omitir o toggle button e evitar que o usuário possa controlar a expanção/contração do menu.
Menu secundário
É o menu responsável por exibir os itens de suporte da navegação. Utilize o subcomponente Shell.Secondary com Shell.Nav para montar os itens do menu.
Menu de conta
É o menu responsável por agrupar informações à respeito da conta, ele é composto por um botão com os dados da conta e um dropdown com os demais itens do menu. Utilize o subcomponente Shell.Account e a propriedade label para definir os dados da conta e o subcomponente Shell.Nav para montar os itens do menu.
Utilize as propriedades avatarSrc, avatarBrand e avatarColor para customizar o Avatar associado a conta. Utilize as propriedades badge e badgeMaxValue para incluir um badge no botão com os dados da conta.
Menu de produtos
É o menu responsável por oferecer acesso fácil a outros produtos da suite. Utilize o subcomponente Shell.Products com Shell.Nav para montar os itens do menu.
Conteúdo
Qualquer filho diferente dos subcomponentes que compõe a anatomia do Shell serão automaticamente renderizados na região do conteúdo. Contudo, é possível definir explicitamente o que irá compor o conteúdo utilizando o subcomponente Shell.Content.
Alertas
A área de alertas serve para adicionar mensagens prioritárias no topo da navegação. Utilize o subcomponente Shell.Alerts para exibir as mensagens junto à barra de navegação.
Caso precise adicionar mensagens a partir de outras partes do código ou de outras aplicações (como micro-frontnend independentes), utilize o componente ShellAlertsPortal para injetá-las na área de mensagens prioritárias da navegação.
Se estiver injetando alertas de diferentes aplicações com ShellAlertsPortal, lembre-se de envolver os alertas com o Theme para evitar conflitos com o tema do Shell.
Feedback
To report a problem or suggest changes, use our improvements form or, if you prefer, open an issue on our Github repository.