SScrollBox `<s-scroll-box>`

コンテンツがはみ出したときにスクロールさせるコンテナ。 SScrollBox は、Shopify Polaris の <s-scroll-box> web component 向けの型付き Vue 3 wrapper です。

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

例

Scrollable row 1

Scrollable row 2

Scrollable row 3

Scrollable row 4

Scrollable row 5

Scrollable row 6

Scrollable row 7

Scrollable row 8

vue

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

<template>
  <!-- maxBlockSize only accepts the "none"/"0" keywords, so an arbitrary pixel cap is
       set as a plain style attribute (it passes through untyped, see the quirks guide). -->
  <SScrollBox
    style="max-height: 160px"
    overflow="auto"
    border="base"
    borderRadius="200"
    padding="base"
  >
    <SBox
      v-for="n in 8"
      :key="n"
      padding="small"
      paddingBlockEnd="small"
      borderColor="subdued"
      borderWidth="small"
      borderStyle="solid"
    >
      <SText>Scrollable row {{ n }}</SText>
    </SBox>
  </SScrollBox>
</template>

Props

Prop	型	説明
`accessibilityLabel`	`string`	支援技術向けにスクロールコンテナを説明するラベルです。
`accessibilityRole`	`"generic" \| "region"`	コンポーネントのコンテンツの意味的な役割を設定します。
`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`	`"auto" \| "hidden" \| "auto auto" \| "auto hidden" \| "hidden auto" \| "hidden hidden"`	要素のオーバーフローの動作を設定します。
`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` をクエリ値として指定するレスポンシブ値文字列も受け付けます。
`scrollMargin`	`"0" \| "0 0" \| "0 0 0" \| "0 0 0 0"`	要素のスクロールマージンです（CSS と同様の 1〜4 値のショートハンド構文）。
`scrollPadding`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	スクロールスナップの整列位置のオフセットです。
`snapType`	`"none" \| "mandatory" \| "proximity"`	スクロールスナップの動作を制御します。

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

Events

Event	型
`scroll`	`CustomEvent`
`scrolltoedge`	`CustomEvent`

これらのイベントは <SScrollBox> 上で @scroll 形式のリスナーで受け取れます。

Slots

Slot	説明
`default`	ScrollBox のコンテンツです。

SScrollBox <s-scroll-box> ​

例 ​

Props ​

Events ​

Slots ​

SScrollBox `<s-scroll-box>`

例

Props

Events

Slots