SClickable <s-clickable>

Hace que cualquier contenido se pueda pulsar como botón o enlace, sin imponer el estilo de botón. SClickable es el wrapper de Vue 3 tipado del web component <s-clickable> de Shopify Polaris.

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

Buenas prácticas

• Etiqueta los elementos sin texto visible. Si dentro del área clicable no hay texto legible, define accessibilityLabel para que los usuarios de lectores de pantalla sepan para qué sirve.
• Elige el modo adecuado. Úsalo como botón para desencadenar acciones, dale un href para navegar y define type="submit" cuando envíe un formulario.
• Explica los estados deshabilitados. Cuando definas disabled, deja el estado claro visualmente y añade un texto que explique a los comerciantes por qué no se puede usar el elemento.

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

Ejemplo

Clicked 0 times

<script setup>
import { ref } from 'vue'
import { SClickable, SText } from 'polaris-vue-elements'

const clicks = ref(0)
</script>

<template>
  <!-- SClickable is a generic, unstyled-by-default interactive container: box
       styling props (background, padding, borderRadius, ...) plus a click event. -->
  <SClickable
    background="subdued"
    borderRadius="200"
    padding="base"
    @click="clicks++"
  >
    <SText>Clicked {{ clicks }} times</SText>
  </SClickable>
</template>

Props

Prop	Tipo	Descripción
accessibilityLabel	string	Una etiqueta que describe el propósito o el contenido del elemento. Cuando se define, se anuncia a los usuarios de tecnologías de asistencia y les proporciona más contexto. Úsala solo cuando el contenido del elemento no aporte suficiente contexto a los usuarios de tecnologías de asistencia.
accessibilityRole	"generic" | "status" | "main" | "header" | "footer" | "section" | "region" | "aside" … (9 more)	Define el significado semántico del contenido del componente. Cuando se establece, las tecnologías de asistencia usan el rol para ayudar a los usuarios a navegar por la página.
accessibilityVisibility	"visible" | "hidden" | "exclusive"	Cambia la visibilidad del elemento. - visible: el elemento es visible para todos los usuarios. - hidden: el elemento se elimina del árbol de accesibilidad, pero sigue siendo visible. - exclusive: el elemento se oculta visualmente, pero permanece en el árbol de accesibilidad.
background	"subdued" | "base" | "strong" | "transparent"	El color de fondo del componente.
blockSize	"auto" | "0"	El tamaño vertical del elemento en diseños estándar (la altura en modos de escritura de izquierda a derecha o de derecha a izquierda). El tamaño de bloque se ajusta según la dirección de escritura: en diseños horizontales controla la altura; en diseños verticales controla la anchura. Esto garantiza un comportamiento coherente en distintas direcciones de texto. Más información sobre block-size.
border	BorderShorthand	Un borde aplicado con sintaxis abreviada para especificar el ancho, el color y el estilo en una sola propiedad.
borderColor	"subdued" | "base" | "strong"	El color del borde según la escala de colores del sistema de diseño. Cuando se establece, sobrescribe el valor de color especificado en la propiedad border. Elige entre subdued, base o strong según el énfasis visual necesario.
borderRadius	MaybeAllValuesShorthandProperty<BoxBorderRadii>	El redondeo de las esquinas del elemento según la escala de radios del sistema de diseño. Admite la sintaxis de 1 a 4 valores para especificar radios distintos por esquina. Úsalo para crear esquinas redondeadas o elementos completamente redondeados.
borderStyle	"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>	El estilo visual del borde en todos los lados, como sólido, discontinuo o punteado. Cuando se establece, anula el valor de estilo especificado en la propiedad border. Admite la sintaxis de 1 a 4 valores para especificar estilos distintos por lado.
borderWidth	"" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none">	El grosor del borde en todos los lados. Cuando se establece, anula el valor de ancho especificado en la propiedad border. Admite la sintaxis de 1 a 4 valores para especificar anchos distintos por lado.
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 componente está deshabilitado, lo que impide los clics y el foco. Cuando está deshabilitado, el evento click no se dispara y los eventos de clic de los elementos hijos dejan de propagarse inmediatamente. Los elementos hijos interactivos todavía pueden recibir el foco y usarse. Esto no aplica estilos visuales de forma predeterminada. Debes aplicar los estilos de deshabilitado según sea necesario.
display	"auto" | "none"	El tipo de display externo del componente. El tipo externo determina cómo participa un componente en el flujo de diseño. - auto: el valor inicial del componente. El valor real depende del componente y del contexto. - none: oculta el componente y lo elimina del árbol de accesibilidad, de modo que resulta invisible para los lectores de pantalla.
download	string	Hace que el navegador trate la URL enlazada como una descarga, usando la cadena como nombre de archivo. La descarga solo funciona con URL del mismo origen o con los esquemas blob: y data:.
href	string	La URL a la que enlazar. - Si se establece, navegará a la ubicación especificada por href después de ejecutar el evento click. - Si se establece un commandFor, se ejecutará el command en lugar de la navegación.
inlineSize	"auto" | "0"	La anchura en modos de escritura horizontales, o la altura en modos de escritura verticales. Úsalo para un dimensionamiento relativo al flujo que se adapte a la dirección del texto. Más información sobre inline-size.
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.
lang	string	El idioma del contenido de texto. Úsalo cuando el texto esté en un idioma distinto al del resto de la página, para que las tecnologías de asistencia, como los lectores de pantalla, usen la pronunciación correcta. El valor debe ser una subetiqueta de idioma válida del registro de subetiquetas de idioma de la IANA.
loading	boolean	Si el componente está en estado de carga, lo que indica a las tecnologías de asistencia que hay una acción en curso e impide la interacción.
maxBlockSize	"none" | "0"	La altura máxima en modos de escritura horizontales, o la anchura máxima en modos de escritura verticales. Impide que el elemento crezca más allá de este tamaño. Más información sobre max-block-size.
maxInlineSize	"none" | "0"	La anchura máxima en modos de escritura horizontales, o la altura máxima en modos de escritura verticales. Impide que el elemento crezca más allá de este tamaño. Más información sobre max-inline-size.
minBlockSize	"0"	La altura mínima en modos de escritura horizontales, o la anchura mínima en modos de escritura verticales. Impide que el elemento se reduzca por debajo de este tamaño. Más información sobre min-block-size.
minInlineSize	"0"	La anchura mínima en modos de escritura horizontales, o la altura mínima en modos de escritura verticales. Impide que el elemento se reduzca por debajo de este tamaño. Más información sobre min-inline-size.
overflow	"visible" | "hidden"	Define el comportamiento de desbordamiento del elemento. - hidden: recorta el contenido cuando es más grande que el contenedor del elemento. El elemento no se podrá desplazar y los usuarios no podrán acceder al contenido recortado arrastrando ni usando la rueda del mouse. - visible: el contenido que sobrepasa el contenedor del elemento es visible.
padding	MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>	El relleno aplicado a todos los bordes del componente. Admite la sintaxis de 1 a 4 valores con valores relativos al flujo: - 1 valor se aplica a todos los lados - 2 valores se aplican a block (arriba/abajo) e inline (izquierda/derecha) - 3 valores se aplican a block-start (arriba), inline (izquierda/derecha) y block-end (abajo) - 4 valores se aplican a block-start (arriba), inline-end (derecha), block-end (abajo) e inline-start (izquierda) Ejemplos:* base, large none, base large-100 base small Usa auto para heredar el relleno del contenedor más cercano con el relleno eliminado. También acepta una cadena de valor adaptable con el PaddingKeyword admitido como valor de consulta.
paddingBlock	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	El relleno en la dirección de bloque (arriba y abajo en modos de escritura horizontales). Acepta un solo valor para ambos lados o dos valores separados por espacios para block-start y block-end. Ejemplo:* large none aplica large arriba y none abajo. Sobrescribe el valor de bloque de padding. También acepta una cadena de valor adaptable con el PaddingKeyword admitido como valor de consulta.
paddingBlockEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	El relleno block-end (abajo en modos de escritura horizontales). Sobrescribe el valor block-end de paddingBlock. También acepta una cadena de valor adaptable con el PaddingKeyword admitido como valor de consulta.
paddingBlockStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	El relleno block-start (arriba en modos de escritura horizontales). Sobrescribe el valor block-start de paddingBlock. También acepta una cadena de valor adaptable con el PaddingKeyword admitido como valor de consulta.
paddingInline	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	El relleno en la dirección en línea (izquierda y derecha en modos de escritura horizontales). Acepta un solo valor para ambos lados o dos valores separados por espacios para inline-start e inline-end. Ejemplo:* large none aplica large a la izquierda y none a la derecha. Sobrescribe el valor en línea de padding. También acepta una cadena de valor adaptable con el PaddingKeyword admitido como valor de consulta.
paddingInlineEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	El relleno inline-end (derecha en modos de escritura LTR, izquierda en RTL). Sobrescribe el valor inline-end de paddingInline. También acepta una cadena de valor adaptable con el PaddingKeyword admitido como valor de consulta.
paddingInlineStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	El relleno inline-start (izquierda en modos de escritura LTR, derecha en RTL). Sobrescribe el valor inline-start de paddingInline. También acepta una cadena de valor adaptable con el PaddingKeyword admitido como valor de consulta.
target	"auto" | "_blank" | "_self" | "_parent" | "_top"	Especifica dónde mostrar la URL enlazada.
type	"button" | "reset" | "submit"	El comportamiento del Button. - submit: indica que el componente actúa como botón de envío, es decir, envía el formulario más cercano. - button: indica que el componente actúa como un botón, es decir, no tiene ninguna acción predeterminada. - reset: indica que el componente actúa como botón de restablecimiento, es decir, restablece el formulario más cercano (devuelve los campos a sus valores predeterminados). Esta propiedad se ignora si el componente admite href o commandFor/command y alguno de ellos está establecido.

Algunas columnas de tipo de arriba están truncadas para facilitar la lectura; la unión completa está disponible en los tipos de TypeScript generados de la biblioteca (src/lib/generated/types.ts).

Events

Event	Tipo
blur	FocusEvent
click	MouseEvent
focus	FocusEvent

Escúchalos con listeners del estilo @blur en <SClickable>.

Slots

Slot	Descripción
default	El contenido que se muestra dentro del componente clicable, que hace que cualquier contenido sea interactivo y clicable sin el significado semántico de un botón o un enlace.