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
Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.