Popover
Tipo: Core
- DesignersFigmaAinda não disponível
- Devs · HTML/CSSmds-stylesAinda não disponível
- Devs · Angularmds-angular Storybook com inputs e outputs
Definição Funcional
Seção intitulada “Definição Funcional”O Popover é um painel flutuante que exibe conteúdos informativos ou interativos relacionados a um elemento específico. Ele é ativado por clique ou mouseover e permanece visível até que o usuário interaja com ele ou clique fora da sua área.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Conteúdo Rico: Utilize para exibir resumos, mini-formulários ou grupos de ações que exigem mais contexto do que um Tooltip permite.
- Foco Contextual: O Popover deve estar visualmente ancorado ao elemento que o originou (geralmente através de uma “seta” ou proximidade imediata).
- Interatividade: Pode conter botões de ação. Use Caixa de Título para os botões dentro do painel.
- Exemplo: Ver Detalhes, Confirmar.
- Vá Direto ao Ponto: Não use textos longos. Se a informação for extensa, forneça um link para a página completa.
- Certo: Status: Em trânsito (há 2h) em vez de “O veículo está em trânsito há aproximadamente duas horas”.
- Fechamento: Deve possuir um comportamento claro de saída (clicar fora ou um botão de fechar, se necessário).
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.
Angular (mds-angular)
Seção intitulada “Angular (mds-angular)”Seletor
Seção intitulada “Seletor”mds-popover
| Input | Tipo | Padrão | Descrição |
|---|---|---|---|
className |
string |
'd-inline-block' |
Classe CSS customizada adicionada ao host |
content (obrigatório) |
TemplateRef<any |
— | — |
placement |
MdsPlacement |
'bottom' |
— |
trigger |
'click' | 'hover' |
'click' |
— |
disabled |
boolean |
false |
— |
popoverClass |
string |
— | — |