Pular para o conteúdo principal

Shell

Import​

import { Shell } from '@resultadosdigitais/tangram-shell'

Properties​

reservePrimarySpace​

Typebool
Defaultfalse

Description​

Reserva preventivamente o espaço destinado ao menu principal (ShellPrimary).

children​

Typenode

Description​

Filhos do Shell.

<ShellProduct />​

Import​

import { ShellProduct } from '@resultadosdigitais/tangram-shell'

Properties​

as​

TypeelementType | string
Description​

Define o tipo de elemento a ser renderizado para este componente. Por padrão, será renderizado um elemento <div />.

Se o componente tiver a propriedade href, será renderizado como um link <a /> independentemente do valor da propriedade as.

children​

Typenode
Description​

Filhos do ShellProduct.

<ShellPrimary />​

Import​

import { ShellPrimary } from '@resultadosdigitais/tangram-shell'

Properties​

expanded​

Typebool
Description​

Controla a expansão do ShellPrimary (modo controlado).

defaultExpanded​

Typebool
Description​

Define se o ShellPrimary deve iniciar expandido por padrão (modo não controlado).

hideToggle​

Typebool
Defaultfalse
Description​

Quando true, oculta o botão de expandir/recolher do menu primário. Esse comportamento só tem efeito para telas grandes.

expandLabelText​

Typestring
DefaultShellPrimary.translations.en.expand
Description​

Texto customizado para o rótulo do botão de expandir/recolher quando o menu está recolhido. Este texto não será exibido na tela.

Valores pré-definidos para inglês, português do Brasil e espanhol estão disponíveis em ShellPrimary.translations.en.expand, ShellPrimary.translations.ptBR.expand e ShellPrimary.translations.es.expand.

collapseLabelText​

Typestring
DefaultShellPrimary.translations.en.collapse
Description​

Texto customizado para o rótulo do botão de expandir/recolher quando o menu está expandido. Este texto não será exibido na tela.

Valores pré-definidos para inglês, português do Brasil e espanhol estão disponíveis em ShellPrimary.translations.en.collapse, ShellPrimary.translations.ptBR.collapse e ShellPrimary.translations.es.collapse.

children​

Typenode
Description​

Filhos o ShellPrimary.

onToggle​

Typefunc
Paramevent React.SyntheticEvent - A origem do evento que acionou o callback.
ParamnextExpanded boolean - Indica se o menu pretende ser aberto (true) ou fechado (false).
Description​

Callback acionado quando o menu pretende ser expandido ou recolhido.

<ShellSecondary />​

Import​

import { ShellSecondary } from '@resultadosdigitais/tangram-shell'

Properties​

children​

Typenode
Description​

Filhos do ShellSecondary.

<ShellAccount />​

Import​

import { ShellAccount } from '@resultadosdigitais/tangram-shell'

Properties​

as​

TypeelementType
Description​

Define o tipo de elemento a ser renderizado para este componente.

label 📍​

Concerns
📍 Required
Typestring
Description​

Define o nome da conta associada ao perfil.

avatarSrc​

Typestring
Description​

Define a URL da imagem do Avatar associado ao perfil.

avatarBrand​

Typebool
Description​

Quando true, aplica variante de marca ao Avatar associado ao perfil.

avatarColor​

Typestring
Description​

Define a cor do background do Avatar associado ao perfil.

badge​

Typebool | number
Defaultfalse
Description​

Define um Badge associado ao perfil.

Se booleano, aparece sem número; se um número, exibe a contagem.

badgeMaxValue​

Typenumber
Description​

Define o valor máximo exibido na contagem do Badge associado ao perfil.

expanded​

Typebool
Description​

Controla a visibilidade do dropdown associado ao ShellAccount (modo controlado).

defaultExpanded​

Typebool
Description​

Define se o dropdown associado ao ShellAccount deve iniciar visível por padrão (modo não controlado).

tooltip​

Typestring
DefaultShellAccount.translations.en.tooltip
Description​

Define o texto do Tooltip do menu.

Valores pré-definidos para inglês, português do Brasil e espanhol estão disponíveis em ShellAccount.translations.en.tooltip, ShellAccount.translations.ptBR.tooltip e ShellAccount.translations.es.tooltip.

active​

Typebool
Defaultfalse
Description​

Indica que o perfil está ativo. Defina esta propriedade como true quando um dos itens internos do dropdown associado estiver ativo.

readOnly​

Typebool
Defaultfalse
Description​

Indica que o perfil é apenas de leitura.

children​

Typenode
Description​

Filhos do ShellAccount.

onToggle​

Typefunc
Paramevent React.SyntheticEvent - A origem do evento que acionou o callback.
Paramshow boolean - Indica se o dropdown pretende ser exibido (true) ou escondido (false).
Description​

Callback acionado quando o dropdown associado pretende ser exibido ou escondido.

<ShellProducts />​

Import​

import { ShellProducts } from '@resultadosdigitais/tangram-shell'

Properties​

expanded​

Typebool
Description​

Controla a visibilidade do dropdown associado ao ShellProducts (modo controlado).

defaultExpanded​

Typebool
Description​

Define se o dropdown associado ao ShellProducts deve iniciar visível por padrão (modo não controlado).

tooltip​

Typestring
DefaultShellProducts.translations.en.tooltip
Description​

Define o texto do Tooltip do menu.

Valores pré-definidos para inglês, português do Brasil e espanhol estão disponíveis em ShellProducts.translations.en.tooltip, ShellProducts.translations.ptBR.tooltip e ShellProducts.translations.es.tooltip.

children​

Typenode
Description​

Filhos do ShellProducts.

onToggle​

Typefunc
Paramevent React.SyntheticEvent - A origem do evento que acionou o callback.
Paramshow boolean - Indica se o dropdown pretende ser exibido (true) ou escondido (false).
Description​

Callback acionado quando o dropdown associado pretende ser exibido ou escondido.

<ShellAlerts />​

Import​

import { ShellAlerts } from '@resultadosdigitais/tangram-shell'

Properties​

children​

Typenode
Description​

Filhos do ShellAlerts.

<ShellAlertsPortal />​

Import​

import { ShellAlertsPortal } from '@resultadosdigitais/tangram-shell'

Properties​

children​

Typenode
Description​

Filhos do ShellAlertsPortal que serão transportados para a área de alertas do Shell.

<ShellContent />​

Import​

import { ShellContent } from '@resultadosdigitais/tangram-shell'

Properties​

children​

Typenode
Description​

Filhos do ShellContent.

<ShellNav />​

Import​

import { ShellNav } from '@resultadosdigitais/tangram-shell'

Properties​

children​

Typenode
Description​

Filhos do ShellNav.

<ShellNavGroup />​

Import​

import { ShellNavGroup } from '@resultadosdigitais/tangram-shell'

Properties​

label​

Typestring
Description​

Define o rótulo do grupo.

children​

Typenode
Description​

Filhos do ShellNavGroup.

<ShellNavGroupLabel />​

Import​

import { ShellNavGroupLabel } from '@resultadosdigitais/tangram-shell'

Properties​

children​

Typenode
Description​

Filhos do ShellNavGroupLabel.

<ShellNavItem />​

Import​

import { ShellNavItem } from '@resultadosdigitais/tangram-shell'

Properties​

as​

TypeelementType
Description​

Define o tipo de elemento a ser renderizado para este componente.

Se o componente tiver a propriedade href, será renderizado como um link <a /> independentemente do valor da propriedade as.

label 📍​

Concerns
📍 Required
Typestring
Description​

Define o rótulo, o texto principal exibido pelo componente.

auxiliaryText​

Typenode
Description​

Define o conteúdo complementar mostrado abaixo do rótulo do item.

prefix​

Typenode
Description​

Define o conteúdo da área à esquerda do item.

suffix​

Typenode
Description​

Define o conteúdo da área à direita do item.

badge​

Typebool | number
Defaultfalse
Description​

Define um Badge associado ao item.

Se booleano, aparece sem número; se um número, exibe a contagem.

badgeMaxValue​

Typenumber
Description​

Define o valor máximo exibido na contagem do Badge associado ao perfil.

disabled​

Typebool
Defaultfalse
Description​

Desabilita o item.

active​

Typebool
Defaultfalse
Description​

Indica que o item está ativo.

danger​

Typebool
Defaultfalse
Description​

Indica se o item é visualmente perigoso, isto é, que o usuário deve executar sua ação com atenção.

readOnly​

Typebool
Defaultfalse
Description​

Indica que o item é apenas de leitura.

expanded​

Typebool
Description​

Controla a visibilidade do dropdown associado (modo controlado).

Só tem efeito quando:

  • children não está vazio, isto é, está associado a um submenu
  • O submenu associado for exibido como o primeiro nível em um dropdown e não um nível mais interno

defaultExpanded​

Typebool
Description​

Define se o dropdown associado deve iniciar visível por padrão (modo não controlado).

Só tem efeito quando:

  • children não está vazio, isto é, está associado a um submenu
  • O submenu associado for exibido como o primeiro nível em um dropdown e não um nível mais interno

submenuLabelText​

Typestring
DefaultShellNavItem.translations.en.submenu
Description​

Texto customizado para o rótulo do ícone que indica presença de submenu. Este texto não será exibido na tela.

Valores pré-definidos para inglês, português do Brasil e espanhol estão disponíveis em ShellNavItem.translations.en.submenu, ShellNavItem.translations.ptBR.submenu e ShellNavItem.translations.es.submenu.

backLabelText​

Typestring
DefaultShellNavItem.translations.en.back
Description​

Texto customizado para o rótulo do ícone para retroceder um nível de submenu. Este texto não será exibido na tela.

Valores pré-definidos para inglês, português do Brasil e espanhol estão disponíveis em ShellNavItem.translations.en.back, ShellNavItem.translations.ptBR.back e ShellNavItem.translations.es.back.

renderItem​

Typefunc
Description​

Define um componente customizado à ser renderizado no lugar do conteúdo padrão.

children​

Typenode
Description​

Filhos do ShellNavItem.

onToggle​

Typefunc
Paramevent React.SyntheticEvent - A origem do evento que acionou o callback.
Paramshow boolean - Indica se o dropdown pretende ser exibido (true) ou escondido (false).
Description​

Callback acionado quando o dropdown associado pretende ser exibido ou escondido.

<ShellNavItemPrefix />​

Import​

import { ShellNavItemPrefix } from '@resultadosdigitais/tangram-shell'

Properties​

children​

Typenode
Description​

Conteúdo do componente, geralmente o conteúdo a ser exibido no início do ShellNavItem.

Se o ShellNavItemPrefix não possuir a propriedade children e estiver sendo utilizado para construir o conteúdo de um ShellNavItem com a propriedade prefix definida, o valor desta propriedade prefix será automaticamente utilizada como valor para o conteúdo do ShellNavItemPrefix.

<Shell>
  <Shell.Primary>
    <Shell.Nav>
      <Shell.Nav.Item
        prefix={<Cog title="Cog icon" />}
        label="Configuration"
        renderItem={() => (
          <>
            <Shell.Nav.Item.Prefix />
            <Shell.Nav.Item.Heading>
              <Shell.Nav.Item.Label />
            </Shell.Nav.Item.Heading>
          </>
        )}
      />
    </Shell.Nav>
  </Shell.Primary>
</Shell>

<ShellNavItemHeading />​

Import​

import { ShellNavItemHeading } from '@resultadosdigitais/tangram-shell'

Properties​

children​

Typenode
Description​

Conteúdo do componente, geralmente os componentes ShellNavItemLabel e ShellNavItemAuxiliaryText.

<Shell>
  <Shell.Primary>
    <Shell.Nav>
      <Shell.Nav.Item
        prefix={<Cog title="Cog icon" />}
        label="Configuration"
        renderItem={() => (
          <Shell.Nav.Item.Heading>
            <Shell.Nav.Item.Label />
          </Shell.Nav.Item.Heading>
        )}
      />
    </Shell.Nav>
  </Shell.Primary>
</Shell>

<ShellNavItemLabel />​

Import​

import { ShellNavItemLabel } from '@resultadosdigitais/tangram-shell'

Properties​

children​

Typenode
Description​

Conteúdo do componente, uma string para o rótulo do ShellNavItemLabel.

Se o ShellNavItemLabel não possuir a propriedade children e estiver sendo utilizado para construir o conteúdo de um ShellNavItem com a propriedade label definida, o valor desta propriedade label será automaticamente utilizada como valor para o conteúdo do ShellNavItemLabel.

<Shell>
  <Shell.Primary>
    <Shell.Nav>
      <Shell.Nav.Item
        prefix={<Cog title="Cog icon" />}
        label="Configuration"
        renderItem={() => (
          <Shell.Nav.Item.Heading>
            <Shell.Nav.Item.Label />
          </Shell.Nav.Item.Heading>
        )}
      />
    </Shell.Nav>
  </Shell.Primary>
</Shell>

<ShellNavItemAuxiliaryText />​

Import​

import { ShellNavItemAuxiliaryText } from '@resultadosdigitais/tangram-shell'

Properties​

children​

Typenode
Description​

Conteúdo do componente, geralmente uma string para o texto auxiliar do ShellNavItem.

Se o ShellNavItemAuxiliaryText não possuir a propriedade children e estiver sendo utilizado para construir o conteúdo de um ShellNavItem com a propriedade auxiliaryText definida, o valor desta propriedade auxiliaryText será automaticamente utilizada como valor para o conteúdo do ShellNavItemAuxiliaryText.

<Shell>
  <Shell.Primary>
    <Shell.Nav>
      <Shell.Nav.Item
        prefix={<Cog title="Cog icon" />}
        label="Configuration"
        auxiliaryText="Configuration options"
        renderItem={() => (
          <Shell.Nav.Item.Heading>
            <Shell.Nav.Item.Label />
            <Shell.Nav.Item.AuxiliaryText />
          </Shell.Nav.Item.Heading>
        )}
      />
    </Shell.Nav>
  </Shell.Primary>
</Shell>

<ShellNavItemSuffix />​

Import​

import { ShellNavItemSuffix } from '@resultadosdigitais/tangram-shell'

Properties​

children​

Typenode
Description​

Conteúdo do componente, geralmente o conteúdo a ser exibido no início do ShellNavItem.

Se o ShellNavItemSuffix não possuir a propriedade children e estiver sendo utilizado para construir o conteúdo de um ShellNavItem com a propriedade suffix definida, o valor desta propriedade suffix será automaticamente utilizada como valor para o conteúdo do ShellNavItemSuffix.

<Shell>
  <Shell.Primary>
    <Shell.Nav>
      <Shell.Nav.Item
        prefix={<Agent title="Agent icon" />}
        label="Agents gallery"
        href="/agents-gallery"
        target="_blank"
        suffix={<External title="External link" size={External.sizes.xs} />}
        renderItem={() => (
          <>
            <Shell.Nav.Item.Prefix />
            <Shell.Nav.Item.Heading>
              <Shell.Nav.Item.Label />
            </Shell.Nav.Item.Heading>
            <Shell.Nav.Item.Suffix />
          </>
        )}
      />
    </Shell.Nav>
  </Shell.Primary>
</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.