SChip <s-chip>

Un rótulo estático para una etiqueta o un atributo, que opcionalmente se puede eliminar. SChip es el wrapper de Vue 3 tipado del web component <s-chip> de Shopify Polaris.

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

Buenas prácticas

• Usa los chips para describir, no para actuar. Los chips funcionan bien para etiquetas, estados y categorías que informan a los comerciantes sobre el contenido. No son botones, así que cuando un chip deba poder pulsarse o descartarse, usa en su lugar SClickableChip.
• Mantén las etiquetas cortas. Un texto breve como "Featured" u "On sale" se lee de un vistazo, mientras que las etiquetas largas ralentizan la lectura y pueden quedar cortadas.
• Ajusta el peso visual al contenido. Usa color="subdued" para metadatos secundarios y el color predeterminado para etiquetas y categorías comunes.
• Coloca los chips junto a lo que describen. Mantenlos al lado del elemento que etiquetan y, en las listas, ponlos en la misma posición en cada fila para que los comerciantes puedan recorrerlas rápidamente.
• Añade un icono cuando ayude. Un SIcon en el slot graphic puede hacer que un estado o una categoría conocida sea más fácil de reconocer.

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

Consulta las buenas prácticas de Shopify para <s-chip> (en inglés) para ver todas las recomendaciones.

Ejemplo

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	Descripción
accessibilityLabel	string	Una etiqueta que describe el propósito o el contenido del componente para tecnologías de asistencia como los lectores de pantalla. Úsala para aportar contexto adicional cuando el contenido visible por sí solo no transmite con claridad el propósito del componente.
color	"subdued" | "base" | "strong"	El nivel de énfasis de color que controla la intensidad visual.
removable	boolean	Si el chip se puede eliminar.

Events

Event	Tipo
remove	CustomEvent

Escúchalos con listeners del estilo @remove en <SChip>.

Slots

Slot	Descripción
default	La etiqueta de texto que se muestra dentro del componente chip, que normalmente representa un filtro seleccionado, una etiqueta o un elemento que se puede eliminar.
graphic	Un icono opcional que se muestra al inicio del chip. Solo acepta componentes de icono.