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 형식의 리스너로 이 events를 수신하세요.

Slots

Slot	설명
default	링크 컴포넌트 안에 표시되는 텍스트 또는 요소로, 활성화하면 사용자를 다른 위치로 이동시킵니다.