Grid 宫格

基础宫格

在 Stackblitz 中打开

带描述宫格

在 Stackblitz 中打开

带边框宫格

在 Stackblitz 中打开

带徽标宫格

在 Stackblitz 中打开

可滑动宫格

在 Stackblitz 中打开

可传图标宫格

在 Stackblitz 中打开

卡片宫格

在 Stackblitz 中打开

Grid Props

名称类型默认值描述必传
alignStringcenter内容对齐方式。可选项:left/centerN
borderBooleanfalse是否显示边框N
columnNumber4每一行的列数量;为 0 时等于固定大小N
gutterNumber-间隔大小N
hoverBooleanfalse是否开启点击反馈N
themeStringdefault宫格的风格。可选项:default/cardN

GridItem Props

名称类型默认值描述必传
badgeObjectnull透传至 Badge 属性。TS 类型:BadgePropsBadge API Documents详细类型定义N
descriptionString / Slot / Function-文本以外的更多描述,辅助信息。可以通过 Props 传入文本,也可以自定义标题节点。TS 类型:string \| TNode通用类型定义N
iconSlot / Function-图标名称。。TS 类型:TNode通用类型定义N
imageString / Object / Slot / Function-图片,可以是图片地址,也可以自定义图片节点,如果传入对象则透传至 image 组件。TS 类型:string \| object \| TNode通用类型定义N
layoutStringvertical内容布局方式。可选项:vertical/horizontalN
textString / Slot / Function-文本,可以通过 Props 传入文本,也可以自定义标题节点。TS 类型:string \| TNode通用类型定义N

CSS Variables

组件提供了下列 CSS 变量,可用于自定义样式。

名称默认值描述
--td-grid-bg-color@bg-color-container-
--td-grid-card-radius@radius-large-
lessless-
--td-grid-item-description-color@text-color-placeholder-
--td-grid-item-description-font-size12px-
--td-grid-item-description-line-height20px-
--td-grid-item-description-padding-top4px-
--td-grid-item-horizontal-text-description-top2px-
--td-grid-item-horizontal-text-padding-left12px-
--td-grid-item-hover-bg-color@bg-color-secondarycontainer-
--td-grid-item-image-bg-color@bg-color-secondarycontainer-
--td-grid-item-image-border-radius@radius-default-
--td-grid-item-bg-color@bg-color-container-
--td-grid-item-border-color@component-stroke-
--td-grid-item-horizontal-padding16px 0-
--td-grid-item-image-middle-width40px-
--td-grid-item-image-small-width32px-
--td-grid-item-image-width48px-
--td-grid-item-text-color@text-color-primary-
--td-grid-item-text-font-size14px-
--td-grid-item-text-line-height22px-
--td-grid-item-text-padding-top8px-
--td-grid-item-vertical-padding16px 0 12px-

何时使用

当需要展示多个功能或信息入口,且这些入口没有明显的优先级时使用。

组件搭配使用

可与徽标组合使用,可作为消息提示、或其它相关的数量提示。

常见用法

通常用于金刚区、或底部标签栏等,在页面中较为醒目的位置承载主要的功能入口。

通常承载图片、头像等信息进行展示,并作为查看相应信息的入口。

通常用于动作面板,和头像、图标按钮相结合,承载分享、保存到本地等操作。

推荐/慎用示例

当在金刚区使用宫格承载功能入口时,建议梳理功能的优先级,将金刚区控制在3行以内,一些相对次要的功能可通过左右滑动的方式收纳在第二屏。

相似组件

组件名何时使用
单元格用于各个类别行的信息展示。