SLink <s-link>

Ein Textlink, der zu einer anderen Seite oder URL navigiert oder einen Befehl ausführt. SLink ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-link>.

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

Best Practices

• Nur externe Links in einem neuen Tab öffnen. Setzen Sie target="_blank" für URLs außerhalb des Adminbereichs, etwa Hilfedokumente oder Partnerseiten. Links innerhalb des Adminbereichs sollten im selben Tab bleiben, damit Händler ihren Platz im Arbeitsablauf behalten.

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-link> (auf Englisch).

Beispiel

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	Typ	Beschreibung
accessibilityLabel	string	Ein Label, das den Zweck oder Inhalt der Komponente für assistive Technologien wie Screenreader beschreibt. Damit lässt sich zusätzlicher Kontext bereitstellen, wenn der sichtbare Inhalt allein den Zweck der Komponente nicht klar vermittelt.
command	"--auto" | "--show" | "--hide" | "--toggle" | "--copy"	Legt die Aktion fest, die das commandFor-Ziel ausführen soll, wenn dieses klickbare Element aktiviert wird. Welche Aktionen unterstützt werden, steht in der Dokumentation der jeweiligen Komponente. - --auto: eine Standardaktion für die Zielkomponente. - --show: zeigt die Zielkomponente an. - --hide: blendet die Zielkomponente aus. - --toggle: schaltet die Zielkomponente um. - --copy: kopiert das Ziel-ClipboardItem.
commandFor	string	ID einer Komponente, die auf Aktivierungen (z. B. Klicks) dieser Komponente reagieren soll. Siehe command zur Steuerung des Verhaltens des Ziels.
download	string	Veranlasst den Browser, die verlinkte URL als Download zu behandeln, wobei der String als Dateiname dient. Download funktioniert nur für Same-Origin-URLs oder die Schemata blob: und data:.
href	string	Die URL, auf die verlinkt wird. - Wenn gesetzt, wird nach Ausführung des click-Events zu dem in href angegebenen Ort navigiert. - Ist ein commandFor gesetzt, wird statt der Navigation das command ausgeführt.
interestFor	string	ID einer Komponente, die auf Interesse (z. B. Hover und Fokus) an dieser Komponente reagieren soll.
lang	string	Die Sprache des Textinhalts. Verwenden Sie dies, wenn der Text in einer anderen Sprache als der Rest der Seite verfasst ist, damit Hilfstechnologien wie Screenreader die korrekte Aussprache verwenden. Der Wert sollte ein gültiger Sprach-Subtag aus der IANA Language Subtag Registry sein.
target	"auto" | "_blank" | "_self" | "_parent" | "_top"	Gibt an, wo die verlinkte URL angezeigt werden soll.
tone	"auto" | "neutral" | "critical"	Die semantische Bedeutung und farbliche Gestaltung der Komponente. - critical: Dringende Probleme oder destruktive Aktionen. - auto: Wird automatisch anhand des Kontexts bestimmt. - neutral: Allgemeine Informationen ohne bestimmte Absicht.

Events

Event	Typ
click	MouseEvent

Auf diese Events lauschen Sie mit Listenern im Stil von @click auf <SLink>.

Slots

Slot	Beschreibung
default	Der Text oder die Elemente innerhalb der Link-Komponente, die Benutzer bei Aktivierung zu einem anderen Ort navigiert.