SLink <s-link>

Un enlace de texto que navega a otra página o URL, o ejecuta un comando. SLink es el wrapper de Vue 3 tipado del web component <s-link> de Shopify Polaris.

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

Buenas prácticas

• Abre solo los enlaces externos en una pestaña nueva. Define target="_blank" para las URL fuera del admin de Shopify, como la documentación de ayuda o los sitios de socios. Los enlaces dentro del admin de Shopify deben quedarse en la misma pestaña para que los comerciantes no pierdan su lugar en el flujo de trabajo.

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

Ejemplo

Neutral linkCritical link

<script setup>
import { SLink } from 'polaris-vue-elements'
</script>

<template>
  <SLink href="https://polaris.shopify.com" target="_blank">Neutral link</SLink>
  <SLink href="https://polaris.shopify.com" target="_blank" tone="critical">Critical link</SLink>
</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.
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.
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.
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.
target	"auto" | "_blank" | "_self" | "_parent" | "_top"	Especifica dónde mostrar la URL enlazada.
tone	"auto" | "neutral" | "critical"	El significado semántico y el tratamiento de color del componente. - critical: problemas urgentes o acciones destructivas. - auto: se determina automáticamente según el contexto. - neutral: información general sin una intención específica.

Events

Event	Tipo
click	MouseEvent

Escúchalos con listeners del estilo @click en <SLink>.

Slots

Slot	Descripción
default	El texto o los elementos que se muestran dentro del componente link, que lleva a los usuarios a otra ubicación al activarse.