Box
Tipo: Core
- DesignersFigmaAinda não disponível
- Devs · HTML/CSSmds-styles Storybook com classes e exemplos
- Devs · Angularmds-angularAinda não disponível
Definição Funcional
Seção intitulada “Definição Funcional”O Box é um contêiner básico utilizado para agrupar elementos relacionados, criando blocos lógicos de informação. Ele ajuda a organizar o layout, estabelecendo separação visual e hierarquia entre diferentes seções de uma página.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Títulos de Seção: Utilize títulos curtos e diretos no topo do Box para identificar o grupo de dados. Use Caixa de Título.
- Exemplo: Dados do Veículo, Histórico de Entregas.
- Agrupamento Lógico: Coloque dentro do Box apenas elementos que pertençam ao mesmo contexto. Não misture ações globais com dados específicos de um item.
- Espaçamento (Padding): Mantenha um respiro interno consistente para que os textos e campos de entrada não toquem as bordas, garantindo a legibilidade.
- Vá Direto ao Ponto: O título do Box deve ser autossuficiente.
- Ruim: Veja aqui todas as informações sobre o motorista.
- Melhor: Perfil do Motorista
Para desenvolvedores
Seção intitulada “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)
Seção intitulada “HTML/CSS (mds-styles)”Exemplo
Seção intitulada “Exemplo”Story Default do Storybook:
<div class="mds-box mds-box--default mds-box--md"> Conteúdo dentro da mds-Box <div class="mds-box__actions">Ações</div></div>Variações e opções
Seção intitulada “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 |
|---|---|---|
variant |
default gray gray-light gray-lighter info warning danger success |
default |
size |
sm md lg |
md |
hasActions |
true · false |
true |
Classes CSS
Seção intitulada “Classes CSS”Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.
| Tipo | Classes |
|---|---|
| Bloco | .mds-box .mds-table |
| Elementos | .mds-box__actions |
| Modificadores | .mds-box--danger .mds-box--detalhe-modal .mds-box--error .mds-box--gray .mds-box--gray-light .mds-box--gray-lighter .mds-box--info .mds-box--lg .mds-box--neutral .mds-box--neutral-light .mds-box--neutral-lighter .mds-box--no-spacing .mds-box--sm .mds-box--warning .mds-box--xs |