SGridItem `<s-grid-item>`

可跨越多列或多行的 grid 子元素。 SGridItem 是 Shopify Polaris <s-grid-item> web component 的带类型 Vue 3 wrapper。

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

示例

Column 1

Column 2

Column 1

Column 2

vue

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

<template>
  <!-- Each SGridItem is one cell placed into the parent SGrid's tracks. -->
  <SGrid gridTemplateColumns="1fr 1fr" gap="base">
    <SGridItem>
      <SBox background="subdued" padding="base" borderRadius="200">
        <SText>Column 1</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="subdued" padding="base" borderRadius="200">
        <SText>Column 2</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="strong" padding="base" borderRadius="200">
        <SText>Column 1</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="strong" padding="base" borderRadius="200">
        <SText>Column 2</SText>
      </SBox>
    </SGridItem>
  </SGrid>
</template>

Props

Prop	类型	说明
`accessibilityLabel`	`string`	描述元素用途或内容的标签。设置后，会向使用辅助技术的用户朗读，为其提供更多上下文。仅当元素内容不足以为使用辅助技术的用户提供上下文时才使用此项。
`accessibilityRole`	`"generic" \| "status" \| "main" \| "header" \| "footer" \| "section" \| "region" \| "aside" … (9 more)`	设置组件内容的语义。设置后，辅助技术会使用该角色帮助用户浏览页面。
`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` 隐藏组件并将其从无障碍树中移除，使屏幕阅读器无法感知。
`gridColumn`	`"auto"`	该项跨越的列数。详细了解 grid-column 属性。
`gridRow`	`"auto"`	该项跨越的行数。详细了解 grid-row 属性。
`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（左）示例：* `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` 作为查询值的响应式值字符串。

为便于阅读，上面部分类型列已被截断；完整的联合类型见库中生成的 TypeScript 类型（src/lib/generated/types.ts）。

Slots

Slot	说明
`default`	网格项组件中显示的内容。网格项表示网格布局中的单个单元格，可以跨越多列或多行。

SGridItem <s-grid-item> ​

示例 ​

Props ​

Slots ​

SGridItem `<s-grid-item>`

示例

Props

Slots