ControlGroup
- Angular:
mds-control-group - CSS/HTML (mds-styles): disponível
- Figma: ❌
- Tipo: Componente Angular
Definição Funcional
Seção intitulada “Definição Funcional”O ControlGroup agrupa uma série de elementos de entrada e ação relacionados em uma única linha contínua. Ele é utilizado para criar controles compostos, como campos de busca com botões de filtro ou inputs com seletores de unidade, reforçando a relação direta entre os componentes.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Unidade Visual: Os elementos dentro do grupo devem compartilhar bordas internas (removendo o arredondamento de cantos que se tocam) para parecerem uma única peça.
- Componentes Suportados: Pode combinar Buttons, Inputs, Selects e demais inputs.
- Ordem Lógica: Posicione a entrada de dados principal à esquerda e a ação ou seletor de apoio à direita.
- Exemplo: Input de busca + Botão de lupa.
- Consistência de Altura: Todos os componentes dentro de um ControlGroup devem ter exatamente a mesma altura para não quebrar a linha visual.
- Vá Direto ao Ponto: Como o espaço é reduzido, evite rótulos longos nos botões agrupados.
- Ruim: [ Buscar agora ]
- Melhor: [ Buscar ] ou apenas o ícone.