SClickableChip `<s-clickable-chip>`

클릭하거나 링크로 이동하거나 제거할 수 있는 인터랙티브 칩으로, 필터와 적용된 태그에 유용합니다. SClickableChip은(는) Shopify Polaris <s-clickable-chip> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

레이블을 짧게 유지하세요. "Electronics"나 "Summer sale"처럼 한두 단어에서 세 단어 정도가 목표입니다.
중요도에 따라 color를 고르세요. 부차적인 칩에는 color="subdued"를 사용하고, 일반적인 선택에는 기본값 "base"를 유지합니다.
제거 버튼을 쉽게 알아볼 수 있게 하세요. 칩이 removable이라면 제거 버튼이 잘 보이고 hover와 focus 상태가 분명한지 확인합니다.
관련된 칩을 묶으세요. 인라인 SStack에 배치해 칩들이 균일한 간격으로 가로로 정렬되게 합니다.

vue

<SStack direction="inline" gap="small-200">
  <SClickableChip>Electronics</SClickableChip>
  <SClickableChip color="subdued" removable>Summer sale</SClickableChip>
</SStack>

전체 가이드는 <s-clickable-chip>에 대한 Shopify 모범 사례(영어)를 참고하세요.

예시

Visit Polaris

Removable chip

vue

<script setup>
import { ref } from 'vue'
import { SClickableChip, SIcon } from 'polaris-vue-elements'

const removed = ref(false)
</script>

<template>
  <!-- SClickableChip is a Chip that can act as a link (href) or command trigger,
       and its `graphic` slot only accepts an SIcon. -->
  <SClickableChip href="https://polaris.shopify.com" target="_blank">
    <template #graphic>
      <SIcon type="external" />
    </template>
    Visit Polaris
  </SClickableChip>

  <!-- removable chips fire `remove`; drive `hidden` from app state to actually hide it. -->
  <SClickableChip removable :hidden="removed" @remove="removed = true">
    Removable chip
  </SClickableChip>
</template>

Props

Prop	타입	설명
`accessibilityLabel`	`string`	Chip의 목적이나 내용을 설명하는 레이블입니다. 스크린 리더 같은 보조 기술을 사용하는 사용자에게 읽힙니다.
`color`	`"subdued" \| "base" \| "strong"`	색상의 강도를 더 강하거나 약하게 조정합니다.
`command`	`"--auto" \| "--show" \| "--hide" \| "--toggle" \| "--copy"`	이 클릭 가능한 요소가 활성화될 때 `commandFor`가 수행할 액션을 설정합니다. 각 컴포넌트가 지원하는 액션은 해당 컴포넌트 문서를 참고하세요. - `--auto`: 대상 컴포넌트의 기본 액션입니다. - `--show`: 대상 컴포넌트를 표시합니다. - `--hide`: 대상 컴포넌트를 숨깁니다. - `--toggle`: 대상 컴포넌트를 전환합니다. - `--copy`: 대상 ClipboardItem을 복사합니다.
`commandFor`	`string`	이 컴포넌트의 활성화(예: 클릭)에 응답해야 하는 컴포넌트의 ID입니다. 대상의 동작을 제어하는 방법은 `command`를 참고하세요.
`disabled`	`boolean`	칩을 비활성화하여 모든 사용자 상호작용을 막을지 여부입니다.
`hidden`	`boolean`	칩을 화면에서 숨길지 여부입니다. `removable` 칩에 제어 컴포넌트 패턴을 사용하는 경우 `remove` 이벤트가 발생할 때 이 속성을 업데이트하세요. 제거할 수 없는 칩의 경우 이 속성을 직접 토글하여 칩을 표시하거나 숨기세요.
`href`	`string`	클릭했을 때 이동할 URL입니다. `click` 이벤트가 먼저 발생한 다음 이동이 일어납니다. `commandFor`도 설정되어 있으면 이동 대신 명령이 실행됩니다.
`interestFor`	`string`	이 컴포넌트에 대한 관심(예: 호버 및 포커스)에 응답해야 하는 컴포넌트의 ID입니다.
`removable`	`boolean`	칩에 제거용 삭제 버튼을 표시할지 여부입니다. 클릭하면 `remove` 콜백이 호출됩니다.

Events

Event	타입
`afterhide`	`CustomEvent`
`click`	`MouseEvent`
`remove`	`CustomEvent`

<SClickableChip>에서 @afterhide 형식의 리스너로 이 events를 수신하세요.

Slots

Slot	설명
`default`	칩 안에 표시되는 텍스트 레이블로, 인터랙티브 필터, 태그 또는 선택 가능한 항목을 나타냅니다.
`graphic`	칩 시작 부분에 표시할 선택적 아이콘입니다. 아이콘 컴포넌트만 받습니다.

SClickableChip <s-clickable-chip> ​

모범 사례 ​

예시 ​

Props ​

Events ​

Slots ​

SClickableChip `<s-clickable-chip>`

모범 사례

예시

Props

Events

Slots