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 尺寸会根据书写方向调整：在水平布局中控制高度；在垂直布局中控制宽度。这确保了在不同文本方向下行为一致。详细了解 block-size。
`border`	`BorderShorthand`	使用简写语法在单个属性中同时指定宽度、颜色和样式的边框。
`borderColor`	`"subdued" \| "base" \| "strong"`	使用设计系统色阶的边框颜色。设置后，会覆盖 `border` 属性中指定的颜色值。可从 `subdued`、`base` 或 `strong` 中选择，以匹配所需的视觉强调程度。
`borderRadius`	`MaybeAllValuesShorthandProperty<BoxBorderRadii>`	使用设计系统圆角刻度设置元素各角的圆角程度。支持1 到 4 值语法，可为每个角指定不同的圆角半径。用于创建圆角或完全圆形的元素。
`borderStyle`	`"" \| MaybeAllValuesShorthandProperty<BoxBorderStyles>`	所有边的边框样式，例如实线、虚线或点线。设置后，会覆盖 `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（左）示例：* `base`、`large none`、`base large-100 base small` 使用 `auto` 可从最近的已移除内边距的容器继承内边距。也接受以支持的 `PaddingKeyword` 作为查询值的响应式值字符串。
`paddingBlock`	`MaybeResponsive<"" \| MaybeTwoValuesShorthandProperty<PaddingKeyword>>`	块方向的内边距（在水平书写模式下为上和下）。接受用于两侧的单个值，或以空格分隔的两个值，分别对应 block-start 和 block-end。示例：* `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>>`	内联方向的内边距（在水平书写模式中为左右）。接受一个值同时用于两侧，或用空格分隔的两个值分别用于 inline-start 和 inline-end。示例：* `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"`	控制滚动吸附行为。

为便于阅读，上面部分类型列已被截断；完整的联合类型见库中生成的 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