SLink <s-link>

別のページや URL に移動したり、コマンドを実行したりするテキストリンク。 SLink は、Shopify Polaris の <s-link> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

• 新しいタブで開くのは外部リンクだけにする。 ヘルプドキュメントやパートナーサイトなど、管理画面の外にある URL には target="_blank" を設定します。管理画面内のリンクは同じタブで開き、マーチャントがワークフロー上の現在地を見失わないようにします。

詳しいガイダンスについては、<s-link> に関する Shopify のベストプラクティス（英語）を参照してください。

例

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	型	説明
accessibilityLabel	string	スクリーンリーダーなどの支援技術向けに、コンポーネントの目的や内容を説明するラベルです。表示されているコンテンツだけではコンポーネントの目的が明確に伝わらない場合に、追加のコンテキストを提供するために使用します。
command	"--auto" | "--show" | "--hide" | "--toggle" | "--copy"	このクリック可能な要素がアクティブになったときに commandFor が実行するアクションを設定します。サポートされるアクションについては、各コンポーネントのドキュメントを参照してください。 - --auto: ターゲットコンポーネントのデフォルトのアクション。 - --show: ターゲットコンポーネントを表示します。 - --hide: ターゲットコンポーネントを非表示にします。 - --toggle: ターゲットコンポーネントの表示を切り替えます。 - --copy: ターゲットの ClipboardItem をコピーします。
commandFor	string	このコンポーネントのアクティベーション（クリックなど）に応答するコンポーネントの ID です。ターゲットの動作を制御する方法については command を参照してください。
download	string	ブラウザーにリンク先の URL をダウンロードとして扱わせ、文字列をファイル名として使用します。ダウンロードは同一オリジンの URL、または blob: および data: スキームでのみ機能します。
href	string	リンク先の URL です。 - 設定すると、click イベントの実行後に href で指定された場所へ移動します。 - commandFor が設定されている場合は、ナビゲーションの代わりに command が実行されます。
interestFor	string	このコンポーネントへのインタレスト（ホバーやフォーカスなど）に応答するコンポーネントの ID です。
lang	string	テキストコンテンツの言語です。テキストがページの他の部分と異なる言語の場合に使用し、スクリーンリーダーなどの支援技術が正しい発音を使えるようにします。値は IANA 言語サブタグレジストリ の有効な言語サブタグである必要があります。
target	"auto" | "_blank" | "_self" | "_parent" | "_top"	リンク先の URL を表示する場所を指定します。
tone	"auto" | "neutral" | "critical"	コンポーネントのセマンティックな意味と色の扱いです。 - critical: 緊急の問題や破壊的なアクション。 - auto: コンテキストに基づいて自動的に決定されます。 - neutral: 特定の意図を持たない一般的な情報。

Events

Event	型
click	MouseEvent

これらのイベントは <SLink> 上で @click 形式のリスナーで受け取れます。

Slots

Slot	説明
default	リンクコンポーネント内に表示されるテキストまたは要素です。リンクを有効にすると、ユーザーを別の場所に移動させます。