SClickableChip `<s-clickable-chip>`

クリック、リンクとしての遷移、削除ができるインタラクティブなチップ。フィルターや適用済みのタグに便利です。 SClickableChip は、Shopify Polaris の <s-clickable-chip> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

ラベルは短くする。 「Electronics」や「Summer sale」のように、1〜3 語を目安にします。
重要度に応じて color を選ぶ。 二次的なチップには color="subdued" を使い、標準的な選択にはデフォルトの "base" のままにします。
削除操作をわかりやすくする。 チップが removable の場合は、削除ボタンが見えていて、ホバー時とフォーカス時の状態がはっきりしているかを確認します。
関連するチップをまとめる。 インラインの 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 形式のリスナーで受け取れます。

Slots

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

SClickableChip <s-clickable-chip> ​

ベストプラクティス ​

例 ​

Props ​

Events ​

Slots ​

SClickableChip `<s-clickable-chip>`

ベストプラクティス

例

Props

Events

Slots