SStack <s-stack>

子要素を行または列に並べ、間隔と配置を揃えます。 SStack は、Shopify Polaris の <s-stack> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

• 余白で関係性を表す。 小さな gap は項目が互いに関連していることを示し、大きなものは別々のグループを区切ります。コンテンツの階層に合った余白を選びます。
• インラインのスタックは折り返すものと考える。 direction="inline" では、スペースが足りなくなると項目が次の行に移ります。通常はそれが望ましい動作ですが、改行位置や複数行を厳密に制御する必要がある場合は、別のレイアウト手法を使います。
• 配置は意図して設定する。 ほとんどのレイアウトにはデフォルトの配置が適しています。項目のサイズが異なる場合や特定の位置に置く必要がある場合は、alignItems や justifyContent を調整します。

<SStack direction="inline" gap="small-200" alignItems="center">
  <SBadge>Draft</SBadge>
  <SText>Last edited today</SText>
</SStack>

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

例

Item 1Item 2Item 3

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

<template>
  <SStack direction="inline" gap="large" alignItems="center">
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>Item 1</SText>
    </SBox>
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>Item 2</SText>
    </SBox>
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>Item 3</SText>
    </SBox>
  </SStack>
</template>

Props

Prop	型	説明
accessibilityLabel	string	要素の目的や内容を説明するラベルです。設定すると、支援技術を使用するユーザーに読み上げられ、より多くのコンテキストを提供します。要素のコンテンツだけでは支援技術を使用するユーザーにとってコンテキストが不十分な場合にのみ使用してください。
accessibilityRole	"generic" | "status" | "main" | "header" | "footer" | "section" | "region" | "aside" … (9 more)	コンポーネントのコンテンツの意味的な役割を設定します。設定すると、支援技術がこの role を使用してユーザーのページ内移動を支援します。
accessibilityVisibility	"visible" | "hidden" | "exclusive"	要素の表示状態を変更します。 - visible: 要素はすべてのユーザーに表示されます。 - hidden: 要素はアクセシビリティツリーから削除されますが、表示されたままです。 - exclusive: 要素は視覚的に非表示になりますが、アクセシビリティツリーには残ります。
alignContent	"normal" | "stretch" | "baseline" | "first baseline" | "last baseline" | "center" | "start" | "end" … (9 more)	コンテンツが複数行に折り返される場合の、ブロック軸に沿った行の分配を制御します。このプロパティは折り返しのあるコンテンツを持つスタックにのみ影響します。1 行のスタックには、代わりに alignItems を使用してください。
alignItems	"normal" | "stretch" | "baseline" | "first baseline" | "last baseline" | "center" | "start" | "end" … (6 more)	ブロック軸（横書きモードでは垂直方向）に沿った子要素の配置を制御します。スタックの方向に垂直な向きにアイテムを揃えるために使用します。インラインスタックでは垂直方向、ブロックスタックでは水平方向です。
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 値の構文 をサポートします。
columnGap	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	インライン軸方向の要素間のスペースを調整します。gap の列の値よりも優先されます。受け付ける値: - 単一の SpacingKeyword 値（例: large-100） - サポートされる SpacingKeyword をクエリ値とする レスポンシブ値 文字列
direction	"block" | "inline"	スタック内で子要素を配置する方向です。以下を受け付けます: - 単一の値（inline または block） - サポートされている方向の値をクエリ値として指定する レスポンシブ値 文字列
display	"auto" | "none"	コンポーネントの外側の display タイプです。外側のタイプは、コンポーネントが フローレイアウト にどのように参加するかを設定します。 - auto はコンポーネントの初期値です。実際の値はコンポーネントとコンテキストによって決まります。 - none はコンポーネントを非表示にしてアクセシビリティツリーから削除し、スクリーンリーダーから見えなくします。
gap	MaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>	要素間のスペースを調整します。受け付ける値: - 両方の軸に適用される単一の SpacingKeyword 値（例: large-100） - インライン軸とブロック軸をそれぞれ設定する値のペア（例: large-100 large-500） - サポートされる SpacingKeyword をクエリ値とする レスポンシブ値 文字列
inlineSize	"auto" | "0"	横書きモードでは幅、縦書きモードでは高さです。テキストの方向に適応するフロー相対のサイズ指定に使用します。詳しくは inline-size を参照してください。
justifyContent	"normal" | "stretch" | "center" | "start" | "end" | "unsafe center" | "unsafe start" | "unsafe end" … (6 more)	インライン軸（横書きモードでは水平方向）に沿った子要素の分配を制御します。スタックの主軸に沿ってアイテムを配置するために使用します。インラインスタックでは水平方向、複数行に折り返されるブロックスタックでは垂直方向です。
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 をクエリ値として指定する レスポンシブ値 文字列も受け付けます。
rowGap	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	ブロック軸方向の要素間のスペースを調整します。gap の行の値よりも優先されます。受け付ける値: - 単一の SpacingKeyword 値（例: large-100） - サポートされる SpacingKeyword をクエリ値とする レスポンシブ値 文字列

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

Slots

Slot	説明
default	スタックコンポーネント内に表示される子要素で、一定のスペースを空けて垂直または水平に配置されます。