BoardPipe

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 BoardPipe é a unidade estrutural do Kanban que agrupa cartões (cards) por etapas de um processo. Ele representa uma fase específica do fluxo de trabalho, permitindo a visualização clara da distribuição de tarefas e dos gargalos operacionais. Ele suporta personalização visual (ícone e cor) e descritiva para facilitar a identificação de fluxos específicos e regras de operação. ![image]((hosted image))

Diretrizes de Comportamento

Título (Obrigatório): Identifica o status da etapa. Use Caixa de Título.
- Exemplo: Aguardando Carga.
Descrição (Opcional): Texto curto em Caixa de Sentença que explica a função ou critério daquela coluna.
- Exemplo: Cargas com documentação pendente.
Ícone de Apoio: Posicionado ao lado do título para reforçar o reconhecimento visual (ex: ícone de relógio para “Atrasados”).
Personalização de Cor: O usuário pode definir uma cor de destaque para o topo do Pipe.
- Dica UX: Garanta que a cor escolhida mantenha o contraste necessário com o texto (branco ou preto) para legibilidade.

Exemplos de Escrita e Customização

Título (Status)	Descrição (Regra)	Ícone Sugerido	Cor Sugerida
Em Aberto	Aguardando entrar no fluxo.	`clock`	Amarelo
Em Rota	Veículos em deslocamento.	`truck`	Azul
Crítico	Entregas com prazo expirado.	`circle-alert`	Vermelho
Finalizado	Entrega finalizada	`check`	Verde

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-board__pipe mds-board__pipe--default mds-board__pipe--shadow-top mds-board__pipe--shadow-bottom" style="width: 300px;">
  <header class="mds-board__pipe__header">
    <div class="mds-board__pipe__header__info">
      <i data-lucide=""></i>
      <div>
        <h2 class="subtitle mds-board__pipe__header__title" title="Aguardando">Aguardando</h2>
      </div>
    </div>
    <strong class="mds-board__pipe__header__counter subtitle">12</strong>
  </header>
  <ol class="mds-board__pipe__items">
    <li style="padding: 10px; background: #f8f9fa; border: 1px solid #dee2e6; margin-bottom: 8px; border-radius: 4px;">Card Example 1</li>
    <li style="padding: 10px; background: #f8f9fa; border: 1px solid #dee2e6; margin-bottom: 8px; border-radius: 4px;">Card Example 2</li>
  </ol>
  <footer class="mds-board__pipe__footer">
    <button class="mds-btn mds-btn--primary mds-btn--sm mds-btn--block">
      <span class="mds-btn__label">Adicionar card</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
`descriptionText`	—	—
`icon`	—	`clock`
`variant`	`default` `primary` `success` `warning` `danger` `info`	`default`
`counter`	—	`12`
`hasFooter`	`true` · `false`	`true`

Classes CSS

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

Tipo	Classes
Bloco	`.mds-board` `.mds-card`
Elementos	`.mds-board__breadcrumb` `.mds-board__breadcrumb__label` `.mds-board__divider` `.mds-board__group` `.mds-board__group__divider` `.mds-board__pipe` `.mds-board__pipe__action` `.mds-board__pipe__content` `.mds-board__pipe__filter` `.mds-board__pipe__footer` `.mds-board__pipe__header` `.mds-board__pipe__header__counter` `.mds-board__pipe__header__description` `.mds-board__pipe__header__icon` `.mds-board__pipe__header__info` `.mds-board__pipe__header__title` `.mds-board__pipe__items` `.mds-board__pipe__loader` `.mds-board__pipe__nav` `.mds-board__pipe__sub-items` `.mds-board__pipe__sub-items__content` `.mds-card__badge` `.mds-card__compact-hide`
Modificadores	`.mds-board__breadcrumb--first` `.mds-board__breadcrumb--last` `.mds-board__breadcrumb--next` `.mds-board__breadcrumb--order-1` `.mds-board__breadcrumb--order-2` `.mds-board__breadcrumb--order-3` `.mds-board__pipe--active` `.mds-board__pipe--aqua` `.mds-board__pipe--aqua-light` `.mds-board__pipe--aqua-lighter` `.mds-board__pipe--blue` `.mds-board__pipe--blue-light` `.mds-board__pipe--blue-lighter` `.mds-board__pipe--brand` `.mds-board__pipe--brand-light` `.mds-board__pipe--brand-lighter` `.mds-board__pipe--compact` `.mds-board__pipe--dragover` `.mds-board__pipe--green` `.mds-board__pipe--green-light` `.mds-board__pipe--green-lighter` `.mds-board__pipe--minimized` `.mds-board__pipe--orange` `.mds-board__pipe--orange-light` `.mds-board__pipe--orange-lighter` `.mds-board__pipe--pink` `.mds-board__pipe--pink-light` `.mds-board__pipe--pink-lighter` `.mds-board__pipe--primary` `.mds-board__pipe--primary-light` `.mds-board__pipe--primary-lighter` `.mds-board__pipe--red` `.mds-board__pipe--red-light` `.mds-board__pipe--red-lighter` `.mds-board__pipe--show-content` `.mds-board__pipe--teal` `.mds-board__pipe--teal-light` `.mds-board__pipe--teal-lighter` `.mds-board__pipe--yellow` `.mds-board__pipe--yellow-light` `.mds-board__pipe--yellow-lighter` `.mds-board--compact` `.mds-card__compact-hide--block` `.mds-card__compact-hide--flex`

Angular (mds-angular)

Seletor

mds-board-pipe

Os pipes são os agrupadores de cards do nosso Kanban

Inputs

Input	Tipo	Padrão	Descrição
`className`	`string`	`''`	Classe CSS customizada adicionada ao host
`label`	`string`	`''`	Titulo do pipe
`description`	`string`	`''`	Descrição, texto de ajuda do pipe
`total`	`number`	`0`	Contador do total de ítens no pipe
`variant`	`MdsBoardPipeVariants`	`'default'`	Variação do pipe
`additionalClass`	`string`	`''`	Classes adicionais para o pipe
`icon` (obrigatório)	`MdsIconAlias`	—	Icone
`iconType`	`'alias' \| 'svg'`	`'alias'`	Tipo do icone
`hasSubItems`	`boolean`	`false`	Remove espaçamento interno em caso de ter sub-itens
`roundStart` (obrigatório)	`string`	—	Data de inicio do round - DD-MM-YYYY HH:mm:ss
`roundEnd` (obrigatório)	`string`	—	Data do fim do round - DD-MM-YYYY HH:mm:ss
`loading`	`boolean`	`false`	Adiciona loader no pipe
`showFilter`	`boolean`	`false`	Exibe o [pipeFilter]
`contentShow`	`boolean`	`false`	Controla se está exibindo a navegação ou conteúdo no caso do modo=“content”<br> Navegacao: <kbd>ng-container[mdsPipeNav]</kbd><br> Conteudo: <kbd>ng-container[mdsPipeContent]</kbd>
`showActions`	`boolean`	`true`	Exibe o menu de ações do pipe
`customPlacement`	`MdsPlacement`	`null`	Posicionamento customizado do menu de ações do pipe
`compact` (obrigatório)	—	—	Cards internos compactos
`hasCollapseButton`	`boolean`	`false`	Possui botão de visão compacta, mas nao dentro do dropdown
`collapseButtonVariant`	`MdsButtonVariants`	`"transparent"`	Variante do botão de collapse
`hasCompact`	`boolean`	`true`	Possui botão de visão compacta
`minimized` (obrigatório)	—	—	Modo minimizado do pipe
`mode`	`'list' \| 'content'`	`'list'`	Modo do pipe * list: lista de cards * content: conteudo com navegação (pedidos)
`progress` (obrigatório)	—	—	—

Outputs

Output	Payload	Descrição
`toggleEmitter`	`boolean`	—
`togglePipeEmitter`	`boolean`	—
`roundStartedEmitter`	`boolean`	—
`roundEndEmitter`	`boolean`	—
`roundWaitingEmitter`	`boolean`	—

Visão ao vivo

BoardPipe — Figma (Design System 2.0) ↗

Componentes relacionados

Alert