SChip <s-chip>

Um rótulo estático para uma tag ou um atributo, que pode ser removível. SChip é o wrapper de Vue 3 tipado do web component <s-chip> do Shopify Polaris.

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

Boas práticas

• Use chips para descrever, não para agir. Chips funcionam bem para tags, status e categorias que dizem algo aos lojistas sobre o conteúdo. Eles não são botões, então, quando um chip precisar ser clicado ou dispensado, use SClickableChip.
• Mantenha os rótulos curtos. Textos breves como "Destaque" ou "Em promoção" podem ser lidos num relance, enquanto rótulos longos atrasam a leitura e podem ser cortados.
• Ajuste o peso visual ao conteúdo. Use color="subdued" para metadados secundários e a cor padrão para tags e categorias comuns.
• Coloque os chips junto ao que descrevem. Mantenha-os ao lado do item que identificam e, em listas, coloque-os na mesma posição em todas as linhas para que os lojistas consigam percorrê-las rapidamente.
• Adicione um ícone quando ajudar. Um SIcon no slot graphic pode tornar um status ou uma categoria conhecida mais fácil de reconhecer.

<SChip>
  <SIcon slot="graphic" type="star" />
  Featured
</SChip>
<SChip color="subdued">Imported</SChip>

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

Exemplo

Snowboard Removable chip

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

const removed = ref(false)
</script>

<template>
  <!-- SChip's `graphic` slot only accepts an SIcon. -->
  <SChip>
    <template #graphic>
      <SIcon type="product" />
    </template>
    Snowboard
  </SChip>

  <!-- SChip has no `hidden` prop (unlike SClickableChip) — use v-if to remove it
       from the DOM when `remove` fires. -->
  <SChip v-if="!removed" color="strong" removable @remove="removed = true">
    Removable chip
  </SChip>
</template>

Props

Prop	Tipo	Descrição
accessibilityLabel	string	Um rótulo que descreve a finalidade ou o conteúdo do componente para tecnologias assistivas, como leitores de tela. Use-o para fornecer contexto adicional quando o conteúdo visível sozinho não transmite com clareza a finalidade do componente.
color	"subdued" | "base" | "strong"	O nível de ênfase de cor que controla a intensidade visual.
removable	boolean	Se o chip pode ser removido.

Events

Event	Tipo
remove	CustomEvent

Escute-os com listeners no estilo @remove em <SChip>.

Slots

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