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) | コンポーネントのコンテンツの意味的な役割を設定します。設定すると、支援技術がこの role を使用してユーザーのページ内移動を支援します。 |
accessibilityVisibility | "visible" | "hidden" | "exclusive" | 要素の表示状態を変更します。 - visible: 要素はすべてのユーザーに表示されます。 - hidden: 要素はアクセシビリティツリーから削除されますが、表示されたままです。 - exclusive: 要素は視覚的に非表示になりますが、アクセシビリティツリーには残ります。 |
background | "subdued" | "base" | "strong" | "transparent" | コンポーネントの背景色です。 |
blockSize | "auto" | "0" | 標準的なレイアウトにおける要素の垂直方向のサイズ（左から右、または右から左の書字モードでは高さ）です。block size は書字方向に応じて変わります。横書きのレイアウトでは高さを、縦書きのレイアウトでは幅を制御します。これにより、異なるテキスト方向でも一貫した動作が保証されます。詳しくは block-size を参照してください。 |
border | BorderShorthand | 幅、色、スタイルを 1 つのプロパティでまとめて指定するショートハンド構文で適用するボーダーです。 |
borderColor | "subdued" | "base" | "strong" | デザインシステムのカラースケールを使用したボーダーの色です。設定すると、border プロパティで指定された色の値よりも優先されます。必要な視覚的強調に合わせて、subdued、base、strong から選択してください。 |
borderRadius | MaybeAllValuesShorthandProperty<BoxBorderRadii> | デザインシステムの角丸スケールを使用した要素の角の丸みです。角ごとに異なる半径を指定するための 1〜4 値の構文 をサポートします。角丸や完全に丸い要素を作成するために使用します。 |
borderStyle | "" | MaybeAllValuesShorthandProperty<BoxBorderStyles> | すべての辺のボーダーの視覚的なスタイル（solid、dashed、dotted など）です。設定すると、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>> | ブロック方向のパディング（横書きモードでは上下）です。両側に 1 つの値、または block-start と block-end にスペース区切りの 2 つの値を指定できます。 例:* 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>> | インライン方向のパディング（横書きモードでは左右）です。両側に 1 つの値を指定するか、inline-start と inline-end にスペース区切りで 2 つの値を指定します。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 形式のリスナーで受け取れます。
Slots
| Slot | 説明 |
|---|---|
default | クリック可能なコンポーネント内に表示されるコンテンツです。このコンポーネントは、ボタンやリンクの意味的な役割を持たせずに、任意のコンテンツをインタラクティブでクリック可能にします。 |