SClickable <s-clickable>
버튼 스타일을 강제하지 않고 어떤 콘텐츠든 버튼이나 링크처럼 클릭할 수 있게 만듭니다. SClickable은(는) Shopify Polaris <s-clickable> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.
ts
import { SClickable } from 'polaris-vue-elements'모범 사례
- 보이는 텍스트가 없는 요소에 레이블을 붙이세요. 클릭 가능한 영역 안에 읽을 수 있는 텍스트가 없다면
accessibilityLabel을 설정해 스크린 리더 사용자가 용도를 알 수 있게 합니다. - 용도에 맞는 모드를 고르세요. 액션을 실행할 때는 버튼으로 사용하고, 이동할 때는
href를 지정하며, 폼을 제출할 때는type="submit"을 설정합니다. - 비활성 상태를 설명하세요.
disabled를 설정할 때는 그 상태가 시각적으로 분명하게 드러나게 하고, 요소를 사용할 수 없는 이유를 판매자에게 알려 주는 텍스트를 추가합니다.
전체 가이드는 <s-clickable>에 대한 Shopify 모범 사례(영어)를 참고하세요.
예시
vue
<script setup>
import { ref } from 'vue'
import { SClickable, SText } from 'polaris-vue-elements'
const clicks = ref(0)
</script>
<template>
<!-- SClickable is a generic, unstyled-by-default interactive container: box
styling props (background, padding, borderRadius, ...) plus a click event. -->
<SClickable
background="subdued"
borderRadius="200"
padding="base"
@click="clicks++"
>
<SText>Clicked {{ clicks }} times</SText>
</SClickable>
</template>Props
| Prop | 타입 | 설명 |
|---|---|---|
accessibilityLabel | string | 요소의 목적이나 내용을 설명하는 레이블입니다. 설정하면 보조 기술을 사용하는 사용자에게 읽혀 더 많은 맥락을 제공합니다. 요소의 콘텐츠만으로는 보조 기술 사용자에게 맥락이 충분하지 않을 때만 사용하세요. |
accessibilityRole | "generic" | "status" | "main" | "header" | "footer" | "section" | "region" | "aside" … (9 more) | 컴포넌트 콘텐츠의 의미(semantic)를 설정합니다. 설정하면 보조 기술이 이 역할을 사용해 사용자가 페이지를 탐색하도록 돕습니다. |
accessibilityVisibility | "visible" | "hidden" | "exclusive" | 요소의 표시 여부를 변경합니다. - visible: 요소가 모든 사용자에게 표시됩니다. - hidden: 요소가 접근성 트리에서 제거되지만 화면에는 표시됩니다. - exclusive: 요소가 시각적으로는 숨겨지지만 접근성 트리에는 남아 있습니다. |
background | "subdued" | "base" | "strong" | "transparent" | 컴포넌트의 배경색입니다. |
blockSize | "auto" | "0" | 표준 레이아웃에서 요소의 세로 크기(왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽 쓰기 모드에서는 높이)입니다. 블록 크기는 쓰기 방향에 따라 조정됩니다. 가로 레이아웃에서는 높이를, 세로 레이아웃에서는 너비를 제어합니다. 이를 통해 다양한 텍스트 방향에서 일관된 동작을 보장합니다. block-size에 대해 자세히 알아보세요. |
border | BorderShorthand | 단축 구문을 사용해 너비, 색상, 스타일을 하나의 속성으로 지정하는 테두리입니다. |
borderColor | "subdued" | "base" | "strong" | 디자인 시스템의 색상 스케일을 사용하는 테두리 색상입니다. 설정하면 border 속성에 지정된 색상 값보다 우선합니다. 필요한 시각적 강조에 맞게 subdued, base, strong 중에서 선택하세요. |
borderRadius | MaybeAllValuesShorthandProperty<BoxBorderRadii> | 디자인 시스템의 반경 스케일을 사용한 요소 모서리의 둥근 정도입니다. 모서리마다 다른 반경을 지정할 수 있도록 1~4개 값 구문을 지원합니다. 둥근 모서리나 완전히 둥근 요소를 만들 때 사용합니다. |
borderStyle | "" | MaybeAllValuesShorthandProperty<BoxBorderStyles> | 실선, 파선, 점선 등 모든 면의 테두리 시각적 스타일입니다. 설정하면 border 속성에 지정된 스타일 값을 재정의합니다. 면마다 다른 스타일을 지정할 수 있도록 1~4개 값 구문을 지원합니다. |
borderWidth | "" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none"> | 모든 면의 테두리 두께입니다. 설정하면 border 속성에 지정된 너비 값을 재정의합니다. 면마다 다른 너비를 지정할 수 있도록 1~4개 값 구문을 지원합니다. |
command | "--auto" | "--show" | "--hide" | "--toggle" | "--copy" | 이 클릭 가능한 요소가 활성화될 때 commandFor가 수행할 액션을 설정합니다. 각 컴포넌트가 지원하는 액션은 해당 컴포넌트 문서를 참고하세요. - --auto: 대상 컴포넌트의 기본 액션입니다. - --show: 대상 컴포넌트를 표시합니다. - --hide: 대상 컴포넌트를 숨깁니다. - --toggle: 대상 컴포넌트를 전환합니다. - --copy: 대상 ClipboardItem을 복사합니다. |
commandFor | string | 이 컴포넌트의 활성화(예: 클릭)에 응답해야 하는 컴포넌트의 ID입니다. 대상의 동작을 제어하는 방법은 command를 참고하세요. |
disabled | boolean | 컴포넌트를 비활성화하여 클릭과 포커스를 막을지 여부입니다. 비활성화되면 click 이벤트가 발생하지 않으며 자식 요소의 클릭 이벤트도 즉시 전파가 중단됩니다. 인터랙티브 자식 요소는 여전히 포커스를 받고 상호작용할 수 있습니다. 기본적으로 시각적 스타일은 적용되지 않으므로 필요에 따라 비활성화 스타일을 직접 적용해야 합니다. |
display | "auto" | "none" | 컴포넌트의 외부 display 유형입니다. 외부 유형은 컴포넌트가 플로우 레이아웃에 참여하는 방식을 설정합니다. - auto 컴포넌트의 초기값입니다. 실제 값은 컴포넌트와 컨텍스트에 따라 달라집니다. - none 컴포넌트를 화면에서 숨기고 접근성 트리에서 제거하여 스크린 리더에서도 보이지 않게 합니다. |
download | string | 브라우저가 링크된 URL을 다운로드로 처리하게 하며, 문자열은 파일 이름으로 사용됩니다. 다운로드는 동일 출처 URL 또는 blob: 및 data: 스킴에서만 동작합니다. |
href | string | 연결할 URL입니다. - 설정하면 click 이벤트를 실행한 후 href에 지정된 위치로 이동합니다. - commandFor가 설정되어 있으면 이동 대신 command가 실행됩니다. |
inlineSize | "auto" | "0" | 가로 쓰기 모드에서는 너비, 세로 쓰기 모드에서는 높이입니다. 텍스트 방향에 맞춰 조정되는 흐름 상대 크기 지정에 사용합니다. inline-size에 대해 자세히 알아보세요. |
interestFor | string | 이 컴포넌트에 대한 관심(예: 호버 및 포커스)에 응답해야 하는 컴포넌트의 ID입니다. |
lang | string | 텍스트 콘텐츠의 언어입니다. 텍스트가 페이지의 나머지 부분과 다른 언어일 때 사용하면 스크린 리더 같은 보조 기술이 올바른 발음을 사용할 수 있습니다. 값은 IANA 언어 하위 태그 레지스트리의 유효한 언어 하위 태그여야 합니다. |
loading | boolean | 컴포넌트가 로딩 상태인지 여부로, 보조 기술에 작업이 진행 중임을 알리고 상호작용을 막습니다. |
maxBlockSize | "none" | "0" | 가로 쓰기 모드에서는 최대 높이, 세로 쓰기 모드에서는 최대 너비입니다. 요소가 이 크기를 넘어 커지지 않도록 합니다. max-block-size에 대해 자세히 알아보세요. |
maxInlineSize | "none" | "0" | 가로 쓰기 모드에서는 최대 너비, 세로 쓰기 모드에서는 최대 높이입니다. 요소가 이 크기를 넘어 커지지 않도록 합니다. max-inline-size에 대해 자세히 알아보세요. |
minBlockSize | "0" | 가로 쓰기 모드에서는 최소 높이, 세로 쓰기 모드에서는 최소 너비입니다. 요소가 이 크기보다 작아지지 않도록 합니다. min-block-size에 대해 자세히 알아보세요. |
minInlineSize | "0" | 가로 쓰기 모드에서는 최소 너비, 세로 쓰기 모드에서는 최소 높이입니다. 요소가 이 크기보다 작아지지 않도록 합니다. min-inline-size에 대해 자세히 알아보세요. |
overflow | "visible" | "hidden" | 요소의 오버플로 동작을 설정합니다. - hidden: 콘텐츠가 요소의 컨테이너보다 클 때 잘라냅니다. 요소는 스크롤되지 않으며, 사용자는 드래그하거나 마우스 스크롤 휠을 사용해 잘린 콘텐츠에 접근할 수 없습니다. - visible: 요소의 컨테이너를 벗어나는 콘텐츠도 표시됩니다. |
padding | MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>> | 컴포넌트의 모든 가장자리에 적용되는 패딩입니다. 흐름 상대 값을 사용하는 1~4개 값 구문을 지원합니다: - 값 1개는 모든 면에 적용 - 값 2개는 block(위/아래)과 inline(왼쪽/오른쪽)에 적용 - 값 3개는 block-start(위), inline(왼쪽/오른쪽), block-end(아래)에 적용 - 값 4개는 block-start(위), inline-end(오른쪽), block-end(아래), inline-start(왼쪽)에 적용 Examples:* base, large none, base large-100 base small 패딩이 제거된 가장 가까운 컨테이너에서 패딩을 상속하려면 auto를 사용합니다. 지원되는 PaddingKeyword를 쿼리 값으로 사용하는 반응형 값 문자열도 허용합니다. |
paddingBlock | MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>> | 블록 방향 패딩입니다(가로 쓰기 모드에서는 위쪽과 아래쪽). 양쪽에 적용할 값 하나 또는 block-start와 block-end에 적용할 공백으로 구분된 값 두 개를 받습니다. 예시:* large none은 위쪽에 large, 아래쪽에 none을 적용합니다. padding의 블록 값보다 우선합니다. 지원되는 PaddingKeyword를 쿼리 값으로 사용하는 반응형 값 문자열도 받습니다. |
paddingBlockEnd | "base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more) | block-end 패딩입니다(가로 쓰기 모드에서는 아래쪽). paddingBlock의 block-end 값보다 우선합니다. 지원되는 PaddingKeyword를 쿼리 값으로 사용하는 반응형 값 문자열도 받습니다. |
paddingBlockStart | "base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more) | block-start 패딩입니다(가로 쓰기 모드에서는 위쪽). paddingBlock의 block-start 값보다 우선합니다. 지원되는 PaddingKeyword를 쿼리 값으로 사용하는 반응형 값 문자열도 받습니다. |
paddingInline | MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>> | 인라인 방향 패딩(가로 쓰기 모드에서는 왼쪽과 오른쪽)입니다. 양쪽에 적용할 단일 값 또는 inline-start와 inline-end에 대한 공백으로 구분된 두 값을 허용합니다. Example:* large none은 왼쪽에 large, 오른쪽에 none을 적용합니다. padding의 인라인 값을 재정의합니다. 지원되는 PaddingKeyword를 쿼리 값으로 사용하는 반응형 값 문자열도 허용합니다. |
paddingInlineEnd | "base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more) | inline-end 패딩(LTR 쓰기 모드에서는 오른쪽, RTL에서는 왼쪽)입니다. paddingInline의 inline-end 값을 재정의합니다. 지원되는 PaddingKeyword를 쿼리 값으로 사용하는 반응형 값 문자열도 허용합니다. |
paddingInlineStart | "base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more) | inline-start 패딩(LTR 쓰기 모드에서는 왼쪽, RTL에서는 오른쪽)입니다. paddingInline의 inline-start 값을 재정의합니다. 지원되는 PaddingKeyword를 쿼리 값으로 사용하는 반응형 값 문자열도 허용합니다. |
target | "auto" | "_blank" | "_self" | "_parent" | "_top" | 링크된 URL을 표시할 위치를 지정합니다. |
type | "button" | "reset" | "submit" | Button의 동작입니다. - submit: 컴포넌트가 제출 버튼으로 동작함을 나타내며, 가장 가까운 폼을 제출합니다. - button: 컴포넌트가 일반 버튼으로 동작함을 나타내며, 기본 동작이 없습니다. - reset: 컴포넌트가 초기화 버튼으로 동작함을 나타내며, 가장 가까운 폼을 초기화합니다(필드를 기본값으로 되돌림). 컴포넌트가 href 또는 commandFor/command를 지원하고 그중 하나가 설정되어 있으면 이 속성은 무시됩니다. |
위의 일부 타입 열은 읽기 쉽도록 축약되었습니다. 전체 union은 라이브러리에서 생성된 TypeScript 타입(
src/lib/generated/types.ts)에 있습니다.
Events
| Event | 타입 |
|---|---|
blur | FocusEvent |
click | MouseEvent |
focus | FocusEvent |
<SClickable>에서 @blur 형식의 리스너로 이 events를 수신하세요.
Slots
| Slot | 설명 |
|---|---|
default | 클릭 가능한 컴포넌트 안에 표시되는 콘텐츠로, 버튼이나 링크의 의미 없이 어떤 콘텐츠든 인터랙티브하고 클릭 가능하게 만듭니다. |