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 形式のリスナーで受け取れます。

Slots

Slot	説明
`default`	チップコンポーネント内に表示されるテキストラベルです。通常は選択されたフィルター、タグ、または削除可能な項目を表します。
`graphic`	チップの先頭に表示するオプションのアイコンです。アイコンコンポーネントのみを受け付けます。

SChip <s-chip> ​

ベストプラクティス ​

例 ​

Props ​

Events ​

Slots ​

SChip `<s-chip>`

ベストプラクティス

例

Props

Events

Slots