Highlight
Highlights são componentes utilizados para destacar palavras ou frases importantes em um determinado contexto.
Quando usar
- Se deseja guiar a atenção do usuário para palavras ou frases específicas na interface (nesses cenários, Highlights animados podem ser ainda mais efetivos que os comuns).
- Estiver implementando alguma feature de diff e precisar indicar elementos que foram substituídos por outros.
Quando não usar
- Se deseja criar hierarquia na página. Para esses casos, use mecanismos de hierarquia tipográfica como peso da fonte, tamanho ou cor.
- O elemento sobre o qual o Highlight será wrapper não for um elemento de texto.
- Forem destacados trechos muito grandes de texto. Isso pode acabar resultando no oposto do que se espera com o uso de Highlights.
Uso
Uso padrão
O comportamento padrão do cds-highligh, quando nenhum valor é indicado na prop highlightedText é o de marcar todo o conteúdo passado por slot.
O rato ROeu A RoUpA do rei de ROMA
vue
<CdsHighlight>
O rato ROeu A RoUpA do rei de ROMA
</CdsHighlight>Highlight em palavras específicas do texto
Caso se deseje marcar apenas uma parte da string passada via slot, é possível indicar na prop highlightedText a substring que receberá o destaque.
vue
<CdsHighlight
highlightedText="RO"
>
O rato ROeu A RoUpA do rei de ROMA
</CdsHighlight>Highlight em palavras específicas do texto (Case Sensitive)
É possível indicar se as comparações feitas com a substring devem maiúsculas e minúsculas (Case Sensitive).
vue
<CdsHighlight
highlightedText="RO"
>
O rato ROeu A RoUpA do rei de ROMA
</CdsHighlight>Preview
O rato ROeu A RoUpA do rei de ROMA com eficácia, força e determinação.
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
variant | string | 'info' | info success danger | A variante do Highlight. São 3 variantes implementadas |
animated | boolean | false | -- | Especifica se o highlight vai ser estático ou animado. |
duration | number | 1 | -- | Especifica a duração da animação. |
delay | number | 0 | -- | O tempo de espera até a animação começar. |
highlightedText | string | null | -- | Define uma substring específica do texto enviada por slot que deve receber o destaque (highlight). |
caseSensitive | boolean | false | -- | Informa se o highlight vai ser Case Sensitive. |
Slots
Nome | Descrição |
|---|---|
#default | Slot usado para especificar o texto que receberá o highlight. |