SClickableChip <s-clickable-chip>

Un chip interactivo que se puede pulsar, seguir como enlace o eliminar; útil para filtros y etiquetas aplicadas. SClickableChip es el wrapper de Vue 3 tipado del web component <s-clickable-chip> de Shopify Polaris.

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

Buenas prácticas

• Mantén las etiquetas cortas. El objetivo es de una a tres palabras, por ejemplo "Electronics" o "Summer sale".
• Elige el color según la importancia. Usa color="subdued" para los chips secundarios y conserva el valor predeterminado "base" para las selecciones estándar.
• Haz que la opción de eliminar sea fácil de ver. Cuando un chip sea removable, comprueba que su botón de eliminar sea visible y tenga estados de hover y foco claros.
• Agrupa los chips relacionados. Disponlos en un SStack inline para que se alineen horizontalmente con un espaciado uniforme.

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

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

Ejemplo

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	Descripción
accessibilityLabel	string	Una etiqueta que describe el propósito o el contenido del Chip. Se lee a los usuarios de tecnologías de asistencia, como los lectores de pantalla.
color	"subdued" | "base" | "strong"	Modifica el color para que sea más o menos intenso.
command	"--auto" | "--show" | "--hide" | "--toggle" | "--copy"	Define la acción que debe realizar el commandFor cuando se activa este elemento clicable. Consulta la documentación de cada componente para conocer las acciones que admite. - --auto: una acción predeterminada para el componente de destino. - --show: muestra el componente de destino. - --hide: oculta el componente de destino. - --toggle: alterna el componente de destino. - --copy: copia el ClipboardItem de destino.
commandFor	string	ID de un componente que debe responder a las activaciones (p. ej., clics) en este componente. Consulta command para saber cómo controlar el comportamiento del destino.
disabled	boolean	Si el chip está deshabilitado, lo que impide cualquier interacción del usuario.
hidden	boolean	Si el chip está oculto. Cuando uses el patrón de componente controlado con chips removable, actualiza esta propiedad cuando se dispare el evento remove. Para los chips que no se pueden eliminar, alterna esta propiedad manualmente para mostrar u ocultar el chip.
href	string	La URL a la que navegar al hacer clic. Primero se dispara el evento click y luego se produce la navegación. Si también se establece commandFor, se ejecuta el comando en lugar de la navegación.
interestFor	string	ID de un componente que debe responder al interés (p. ej., al pasar el cursor por encima y al enfocar) en este componente.
removable	boolean	Si el chip muestra un botón de eliminar para descartarlo. Al hacer clic, se dispara el callback remove.

Events

Event	Tipo
afterhide	CustomEvent
click	MouseEvent
remove	CustomEvent

Escúchalos con listeners del estilo @afterhide en <SClickableChip>.

Slots

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