コンポーネント

62 個の型付き Vue wrapper。Polaris web component ごとに 1 つずつ用意し、Shopify 公式リファレンスと同じ方法で分類しています。

アクション

• SButton<s-button>アクションを実行したりページを移動したりするボタン。primary、secondary、tertiary のバリアント、アイコン、ローディング状態に対応します。
• SButtonGroup<s-button-group>メインのアクションとそのサブアクションなど、関連するボタンをまとめて配置します。
• SClickable<s-clickable>ボタンのスタイルを適用せずに、任意のコンテンツをボタンやリンクとしてクリック可能にします。
• SClickableChip<s-clickable-chip>クリック、リンクとしての遷移、削除ができるインタラクティブなチップ。フィルターや適用済みのタグに便利です。
• SLink<s-link>別のページや URL に移動したり、コマンドを実行したりするテキストリンク。
• SMenu<s-menu>ボタンから開くオーバーレイに表示されるアクションのリスト。
• SPressButton<s-press-button>押された状態と押されていない状態を保持するトグルボタン。モードやフィルターのオン・オフに使います。

フィードバックとステータス

• SBadge<s-badge>注文、支払い、フルフィルメントなど、オブジェクトのステータスを示す小さなラベル。
• SBanner<s-banner>ページやセクションの上部に、重要な情報、警告、エラーを目立つ形で表示するメッセージ。
• SEmptyState<s-empty-state>画面にまだコンテンツがない理由を説明し、マーチャントが最初に行うべきアクションへ誘導します。
• SProgress<s-progress>タスクが最大値に対してどこまで進んだかを示すプログレスバー。
• SSpinner<s-spinner>コンテンツやアクションが読み込み中であることを示すアニメーションのインジケーター。

フォーム

• SCheckbox<s-checkbox>はい・いいえを選ぶ単一のチェックボックス。チェック状態を v-model でバインドできます。
• SChoice<s-choice>選択リスト内の 1 つの選択肢。
• SChoiceList<s-choice-list>1 つまたは複数の選択肢を選ぶための、ラジオボタンやチェックボックスのグループ。
• SColorField<s-color-field>色の値を入力するテキスト入力。アルファチャンネルにも対応できます。
• SColorPicker<s-color-picker>色を視覚的に選ぶためのコントロール。
• SDateField<s-date-field>日付を入力するための入力欄。
• SDatePicker<s-date-picker>単一の日付または日付の範囲を選択するカレンダー。
• SDropZone<s-drop-zone>ドラッグ＆ドロップやファイル選択でファイルを受け付けるアップロード領域。
• SEmailField<s-email-field>メールアドレス用のテキスト入力。
• SMoneyField<s-money-field>金額を入力するための数値入力。
• SNumberField<s-number-field>最小値、最大値、ステップを指定できる数値入力。
• SOption<s-option>セレクト内の 1 つの選択肢。
• SOptionGroup<s-option-group>セレクト内の関連する選択肢を共通のラベルでまとめます。
• SPasswordField<s-password-field>入力内容を伏せ字で表示するパスワード用のテキスト入力。
• SSearchField<s-search-field>検索クエリ用のテキスト入力。
• SSelect<s-select>リストから 1 つの選択肢を選ぶドロップダウン。
• SSwitch<s-switch>設定のオン・オフを切り替えるトグルスイッチ。
• STextArea<s-text-area>メモや説明文など、長いコンテンツ向けの複数行テキスト入力。
• STextField<s-text-field>ラベル、プレースホルダー、バリデーションエラー、ヘルプテキストを備えた 1 行のテキスト入力。
• SUrlField<s-url-field>Web アドレス用のテキスト入力。

レイアウトと構造

• SBox<s-box>余白、背景、枠線、角丸、サイズを指定できる汎用コンテナ。
• SDivider<s-divider>コンテンツを区切る水平または垂直の線。
• SGrid<s-grid>コンテンツを行と列に配置するための CSS グリッドコンテナ。
• SGridItem<s-grid-item>複数の列や行にまたがることができるグリッドの子要素。
• SListItem<s-list-item>順序付きまたは順序なしリスト内の 1 つの項目。
• SOrderedList<s-ordered-list>番号付きリスト。
• SPage<s-page>見出し、ページアクション、コンテンツ領域を持つ最上位のページレイアウト。
• SQueryContainer<s-query-container>要素をサイズコンテナにし、子要素がコンテナクエリでその幅に合わせて変化できるようにします。
• SScrollBox<s-scroll-box>コンテンツがはみ出したときにスクロールさせるコンテナ。
• SSection<s-section>関連するコンテンツをまとめるセクション。見出し、小見出し、アクションを任意で追加できます。
• SStack<s-stack>子要素を行または列に並べ、間隔と配置を揃えます。
• STable<s-table>構造化されたデータ用のテーブル。ページネーション、ローディング状態、小さな画面でのリストレイアウトに対応します。
• STableBody<s-table-body>データ行を格納するテーブルの本体。
• STableCell<s-table-cell>テーブルの行内の 1 つのセル。
• STableHeader<s-table-header>テーブルの 1 つの列見出し。
• STableHeaderRow<s-table-header-row>テーブル上部の列見出しの行。
• STableRow<s-table-row>テーブル内の 1 行分のデータ。
• SUnorderedList<s-unordered-list>箇条書きリスト。

メディアとビジュアル

• SAvatar<s-avatar>人物や事業者の画像を表示します。画像がない場合はイニシャルを表示します。
• SIcon<s-icon>Polaris のアイコンセットからアイコンを名前で指定して表示します。
• SImage<s-image>アスペクト比、フィット、枠線、遅延読み込みを制御して画像を表示します。
• SThumbnail<s-thumbnail>商品やファイルを表す、固定サイズの小さなプレビュー画像。

オーバーレイ

• SModal<s-modal>集中して行うタスクや確認のためのダイアログオーバーレイ。コマンドやメソッド呼び出しで開きます。
• SPopover<s-popover>開くためのボタンに固定して表示されるフローティングコンテンツ。

タイポグラフィとコンテンツ

• SChip<s-chip>タグや属性を表す静的なラベル。削除可能にすることもできます。
• SHeading<s-heading>ページのセクションにタイトルを付ける見出し。
• SNumber<s-number>整形済みの数値を、タイポグラフィ、トーン、色のスタイルを付けて表示します。
• SParagraph<s-paragraph>本文テキストのブロック。
• SText<s-text>トーン、太さ、強調のスタイルを付けられるインラインテキスト。
• STooltip<s-tooltip>別の要素にホバーまたはフォーカスしたときに表示される短いラベル。