SClickableChip <s-clickable-chip>

Um chip interativo que pode ser clicado, seguido como link ou removido; útil para filtros e tags aplicadas. SClickableChip é o wrapper de Vue 3 tipado do web component <s-clickable-chip> do Shopify Polaris.

import { SClickableChip } from 'polaris-vue-elements'

Boas práticas

• Mantenha os rótulos curtos. O ideal é de uma a três palavras, por exemplo "Eletrônicos" ou "Liquidação de verão".
• Escolha color pela importância. Use color="subdued" para chips secundários e mantenha o padrão "base" para seleções comuns.
• Facilite a identificação da remoção. Quando um chip for removable, verifique se o botão de remover está visível e tem estados de hover e foco claros.
• Agrupe chips relacionados. Disponha-os em um SStack inline para que fiquem alinhados horizontalmente com espaçamento uniforme.

<SStack direction="inline" gap="small-200">
  <SClickableChip>Electronics</SClickableChip>
  <SClickableChip color="subdued" removable>Summer sale</SClickableChip>
</SStack>

Veja as boas práticas da Shopify para <s-clickable-chip> (em inglês) para todas as recomendações.

Exemplo

Visit Polaris Removable chip

<script setup>
import { ref } from 'vue'
import { SClickableChip, SIcon } from 'polaris-vue-elements'

const removed = ref(false)
</script>

<template>
  <!-- SClickableChip is a Chip that can act as a link (href) or command trigger,
       and its `graphic` slot only accepts an SIcon. -->
  <SClickableChip href="https://polaris.shopify.com" target="_blank">
    <template #graphic>
      <SIcon type="external" />
    </template>
    Visit Polaris
  </SClickableChip>

  <!-- removable chips fire `remove`; drive `hidden` from app state to actually hide it. -->
  <SClickableChip removable :hidden="removed" @remove="removed = true">
    Removable chip
  </SClickableChip>
</template>

Props

Prop	Tipo	Descrição
accessibilityLabel	string	Um rótulo que descreve a finalidade ou o conteúdo do Chip. Ele é lido para usuários de tecnologias assistivas, como leitores de tela.
color	"subdued" | "base" | "strong"	Modifica a cor para que fique mais ou menos intensa.
command	"--auto" | "--show" | "--hide" | "--toggle" | "--copy"	Define a ação que o commandFor deve executar quando este elemento clicável é ativado. Consulte a documentação de cada componente para ver as ações compatíveis. - --auto: uma ação padrão para o componente de destino. - --show: exibe o componente de destino. - --hide: oculta o componente de destino. - --toggle: alterna o componente de destino. - --copy: copia o ClipboardItem de destino.
commandFor	string	ID de um componente que deve responder às ativações (por exemplo, cliques) neste componente. Consulte command para saber como controlar o comportamento do destino.
disabled	boolean	Se o chip está desabilitado, impedindo qualquer interação do usuário.
hidden	boolean	Se o chip está oculto. Ao usar o padrão de componente controlado com chips removable, atualize esta propriedade quando o evento remove for disparado. Para chips não removíveis, alterne esta propriedade manualmente para mostrar ou ocultar o chip.
href	string	A URL para onde navegar ao clicar. O evento click é disparado primeiro e depois ocorre a navegação. Se commandFor também estiver definido, o comando é executado em vez da navegação.
interestFor	string	ID de um componente que deve responder ao interesse (por exemplo, passar o cursor e focar) neste componente.
removable	boolean	Se o chip exibe um botão de remover para dispensá-lo. Ao clicar nele, o callback remove é disparado.

Events

Event	Tipo
afterhide	CustomEvent
click	MouseEvent
remove	CustomEvent

Escute-os com listeners no estilo @afterhide em <SClickableChip>.

Slots

Slot	Descrição
default	O rótulo de texto exibido dentro do chip, que representa um filtro interativo, uma tag ou um item selecionável.
graphic	Um ícone opcional exibido no início do chip. Aceita apenas componentes de ícone.