SBox `<s-box>`

余白、背景、枠線、角丸、サイズを指定できる汎用コンテナ。 SBox は、Shopify Polaris の <s-box> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

汎用コンテナとして使う。 SBox は、コンテンツをグループ化するための余白、ボーダー、背景を扱います。行や列のような特定の配置が必要な場合は、代わりに SStack または SGrid を使います。
まず、より意味のあるコンポーネントがないか確認する。 SSection や SBanner のように、コンテンツが何であるかをすでに表すコンポーネントがあれば、そちらを優先します。専用のコンポーネントのほうが意図が明確で、アクセシビリティにも優れています。
小さな画面を考慮する。 デスクトップで問題なく見えるレイアウトもモバイルでは崩れることがあるため、固定サイズで決め打ちせず、レスポンシブな値で余白やレイアウトを調整します。
領域やインタラクティブなコンテンツを説明する。 ボックスが独立した領域を表す場合や、インタラクティブなコンテンツを含む場合は、accessibilityRole と accessibilityLabel を設定し、スクリーンリーダーのユーザーが構造を理解して移動できるようにします。
ネストは浅く保つ。 ボックスの中にボックスを重ねると、マークアップが複雑になり、スタイルの保守も難しくなります。よりシンプルな構造や、より適したレイアウトコンポーネントを検討してください。

vue

<SBox accessibilityRole="region" accessibilityLabel="Shipping summary" padding="base" border="base">
  <!-- … -->
</SBox>

詳しいガイダンスについては、<s-box> に関する Shopify のベストプラクティス（英語）を参照してください。

例

background="subdued"

background="strong"

bordered box

vue

<script setup>
import { SBox, SText } from 'polaris-vue-elements'
</script>

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap">
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>background="subdued"</SText>
    </SBox>
    <SBox background="strong" padding="base" borderRadius="200">
      <SText>background="strong"</SText>
    </SBox>
    <SBox
      background="base"
      padding="base"
      borderRadius="200"
      borderWidth="small"
      borderColor="strong"
      borderStyle="solid"
    >
      <SText>bordered box</SText>
    </SBox>
  </div>
</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 値の構文をサポートします。
`display`	`"auto" \| "none"`	コンポーネントの外側の display タイプです。外側のタイプは、コンポーネントがフローレイアウトにどのように参加するかを設定します。 - `auto` はコンポーネントの初期値です。実際の値はコンポーネントとコンテキストによって決まります。 - `none` はコンポーネントを非表示にしてアクセシビリティツリーから削除し、スクリーンリーダーから見えなくします。
`inlineSize`	`"auto" \| "0"`	横書きモードでは幅、縦書きモードでは高さです。テキストの方向に適応するフロー相対のサイズ指定に使用します。詳しくは inline-size を参照してください。
`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` をクエリ値として指定するレスポンシブ値文字列も受け付けます。

上記の一部の型の列は読みやすさのために省略されています。完全な union はライブラリが生成する TypeScript の型（src/lib/generated/types.ts）で確認できます。

Slots

Slot	説明
`default`	ボックスコンポーネント内に表示されるコンテンツです。ボックスは、他のコンポーネントを整理しスタイルを適用するための柔軟なコンテナとして機能します。

SBox <s-box> ​

ベストプラクティス ​

例 ​

Props ​

Slots ​

SBox `<s-box>`

ベストプラクティス

例

Props

Slots