SLink <s-link>

Um link de texto que navega para outra página ou URL, ou executa um comando. SLink é o wrapper de Vue 3 tipado do web component <s-link> do Shopify Polaris.

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

Boas práticas

• Abra em nova aba apenas links externos. Defina target="_blank" para URLs fora do admin, como documentação de ajuda ou sites de parceiros. Links dentro do admin devem permanecer na mesma aba para que os lojistas não percam o ponto em que estão no fluxo de trabalho.

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

Exemplo

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	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.
command	"--auto" | "--show" | "--hide" | "--toggle" | "--copy"	Define a ação que o commandFor deve executar quando este elemento clicável é ativado. Consulte a documentação de cada componente para ver as ações compatíveis. - --auto: uma ação padrão para o componente de destino. - --show: exibe o componente de destino. - --hide: oculta o componente de destino. - --toggle: alterna o componente de destino. - --copy: copia o ClipboardItem de destino.
commandFor	string	ID de um componente que deve responder às ativações (por exemplo, cliques) neste componente. Consulte command para saber como controlar o comportamento do destino.
download	string	Faz com que o navegador trate a URL vinculada como um download, usando a string como nome do arquivo. O download só funciona com URLs de mesma origem ou com os esquemas blob: e data:.
href	string	A URL do link. - Se definida, navegará para o local especificado por href após executar o evento click. - Se um commandFor estiver definido, o command será executado em vez da navegação.
interestFor	string	ID de um componente que deve responder ao interesse (por exemplo, passar o cursor e focar) neste componente.
lang	string	O idioma do conteúdo de texto. Use isto quando o texto estiver em um idioma diferente do restante da página, permitindo que tecnologias assistivas, como leitores de tela, usem a pronúncia correta. O valor deve ser um subtag de idioma válido do registro de subtags de idioma da IANA.
target	"auto" | "_blank" | "_self" | "_parent" | "_top"	Especifica onde exibir a URL vinculada.
tone	"auto" | "neutral" | "critical"	O significado semântico e o tratamento de cor do componente. - critical: problemas urgentes ou ações destrutivas. - auto: determinado automaticamente com base no contexto. - neutral: informações gerais sem uma intenção específica.

Events

Event	Tipo
click	MouseEvent

Escute-os com listeners no estilo @click em <SLink>.

Slots

Slot	Descrição
default	O texto ou os elementos exibidos dentro do componente de link, que leva os usuários a outro local quando acionado.