SChip `<s-chip>`

태그나 속성을 나타내는 정적 라벨로, 선택적으로 제거할 수 있습니다. SChip은(는) Shopify Polaris <s-chip> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

칩은 동작이 아니라 설명에 사용하세요. 칩은 콘텐츠에 관한 정보를 판매자에게 알려 주는 태그, 상태, 카테고리에 적합합니다. 칩은 버튼이 아니므로, 클릭하거나 닫을 수 있어야 한다면 대신 SClickableChip을 사용합니다.
레이블을 짧게 유지하세요. "Featured"나 "On sale" 같은 짧은 텍스트는 한눈에 읽히지만, 긴 레이블은 훑어보기를 느리게 하고 잘릴 수도 있습니다.
콘텐츠에 맞는 시각적 무게를 사용하세요. 부차적인 메타데이터에는 color="subdued"를, 일반적인 태그와 카테고리에는 기본 색상을 사용합니다.
칩은 설명하는 대상 옆에 두세요. 칩을 레이블이 붙는 항목 옆에 두고, 목록에서는 모든 행에서 같은 위치에 배치해 판매자가 빠르게 훑어볼 수 있게 합니다.
도움이 될 때 아이콘을 추가하세요. graphic 슬롯에 SIcon을 넣으면 상태나 익숙한 카테고리를 더 쉽게 알아볼 수 있습니다.

vue

<SChip>
  <SIcon slot="graphic" type="star" />
  Featured
</SChip>
<SChip color="subdued">Imported</SChip>

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

예시

Snowboard

Removable chip

vue

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

const removed = ref(false)
</script>

<template>
  <!-- SChip's `graphic` slot only accepts an SIcon. -->
  <SChip>
    <template #graphic>
      <SIcon type="product" />
    </template>
    Snowboard
  </SChip>

  <!-- SChip has no `hidden` prop (unlike SClickableChip) — use v-if to remove it
       from the DOM when `remove` fires. -->
  <SChip v-if="!removed" color="strong" removable @remove="removed = true">
    Removable chip
  </SChip>
</template>

Props

Prop	타입	설명
`accessibilityLabel`	`string`	스크린 리더 같은 보조 기술을 위해 컴포넌트의 목적이나 내용을 설명하는 레이블입니다. 보이는 콘텐츠만으로는 컴포넌트의 목적이 명확하게 전달되지 않을 때 추가 맥락을 제공하는 데 사용합니다.
`color`	`"subdued" \| "base" \| "strong"`	시각적 강도를 제어하는 색상 강조 수준입니다.
`removable`	`boolean`	칩을 제거할 수 있는지 여부입니다.

Events

Event	타입
`remove`	`CustomEvent`

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

Slots

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

SChip <s-chip> ​

모범 사례 ​

예시 ​

Props ​

Events ​

Slots ​

SChip `<s-chip>`

모범 사례

예시

Props

Events

Slots