Toolbar

Tipo: Componente Angular

DesignersFigma Design System 2.0
Devs · HTML/CSSmds-styles Storybook com classes e exemplos
Devs · Angularmds-angular Storybook com inputs e outputs

Definição Funcional

O Toolbar é uma barra de ferramentas persistente que aparece para indicar que a interface entrou em um modo de operação específico (ex: edição, personalização ou seleção em massa). Ele agrupa instruções contextuais e botões de ação necessários para concluir ou cancelar o modo atual. ![image]((hosted image))

Diretrizes de Comportamento

Posicionamento: Geralmente fixado no topo ou rodapé da tela para garantir visibilidade constante enquanto o modo estiver ativo.
Título do Modo: Identifique claramente o que está sendo executado. Use Caixa de Título.
- Exemplo: Configuração das Etapas, Edição de Percurso.
Instrução Contextual: Texto curto que orienta o usuário sobre como interagir com os elementos da tela naquele modo. Use Caixa de Sentença.
- Exemplo: Clique na etapa e arraste para ordenar.
Ações de Conclusão: O botão principal deve ter um destaque semântico (geralmente verde para sucesso/conclusão). Use Caixa de Título.
- Exemplo: Concluir, Salvar Alterações.
Saída e Cancelamento: Deve sempre oferecer um botão de fechar (X) ou “Cancelar” para retornar ao estado normal do sistema.

Exemplos de Escrita (Modos Operacionais)

Contexto	Título (O quê)	Instrução (Como)	Ação (Botão)
Personalização	Configuração do Fluxo	Arraste as colunas para definir a ordem.	Concluir
Seleção em Massa	Ações em Lote	Selecione os fretes que deseja faturar.	Processar (5)
Roteirização	Edição de Rota	Clique nos pontos do mapa para reordenar.	Salvar Rota

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

HTML/CSS (mds-styles)

Exemplo

Story Default do Storybook:

<section class="mds-toolbar mds-toolbar--show">
  <div class="d-flex flex-wrap align-items-center">
    <header class="mds-toolbar__header">
      <h3 class="no-margin--all subtitle">Nome da funcionalidade ativa</h3>
      <p class="no-margin--all small">Descrição da funcionalidade</p>
    </header>
    <div class="mds-toolbar__content">
      Conteúdo adicional ou filtros rápidos
    </div>
  </div>
  <footer class="mds-toolbar__actions">
     <button class="mds-btn mds-btn--transparent mds-btn--icon-only">
        <span class="mds-btn__icon"><i data-lucide="times"></i></span>
      </button>
  </footer>
</section>

Variações e opções

Opções do painel de controles do Storybook — escolha um valor lá para ver o resultado ao vivo. As classes CSS correspondentes estão na lista abaixo.

Opção	Valores	Padrão no exemplo
`description`	—	`Descrição da funcionalidade`
`isVisible`	`true` · `false`	`true`

Classes CSS

Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.

Tipo	Classes
Bloco	`.mds-toolbar`
Elementos	`.mds-toolbar__actions` `.mds-toolbar__content` `.mds-toolbar__header`
Modificadores	`.mds-toolbar--hide` `.mds-toolbar--show`

Angular (mds-angular)

Seletor

mds-toolbar

Barra de ferramentas para modos ou ações ativas na tela

Inputs

Input	Tipo	Padrão	Descrição
`className`	`string`	`''`	Classe CSS customizada adicionada ao host
`show`	`boolean`	`false`	Controla a visibilidade do toolbar
`label`	`string \| null`	`null`	Titulo da toolbar
`description`	`string \| null`	`null`	Descrição da toolbar
`loading`	`boolean`	`false`	Exibe loader no botão de fechar

Outputs

Output	Payload	Descrição
`onClose`	`void`	Evento emitido ao fechar a toolbar

Visão ao vivo

Toolbar — Figma (Design System 2.0) ↗