Back to Component Library Return to the main component library index
Card Components
卡片组件 用于卡片组件内部的可滚动容器。提供可滚动区域，可选最大高度和滚动提示。
导入： import { ScrollBox } from "/snippets/components/layout/cards.jsx" ;
属性： 属性 类型 默认值 必填 描述 childrenReactNode- 是 显示在滚动区域内的内容 maxHeightnumber|string300否 滚动前的最大高度（px 或 CSS 值） showHintbooleantrue否 是否显示“滚动以查看更多”提示 styleobject- 否 其他样式
示例: < Card title = "Gaming" > < ScrollBox maxHeight = { 200 } showHint = { true } > < p > Long content here... </ p > </ ScrollBox > </ Card >
List Components
列表组件 StepList 将一组项目渲染为步骤。使用 Steps/Step 组件显示项目数组。
导入: import { StepList } from "/snippets/components/layout/lists.jsx" ;
属性: 属性 类型 默认 必需 描述 listItemsArray- 是 步骤对象数组 listItems[].titlestring- 是 步骤标题 listItems[].iconstring- 否 可选图标名称 listItems[].contentReactNode- 是 步骤内容
示例: // StepList - use Steps/Step directly for now < Steps > < Step title = "Install" icon = "download" > Run npm install </ Step > < Step title = "Configure" icon = "gear" > Set up your config </ Step > </ Steps >
StepLinkList 渲染一个带有导航链接的步骤列表。类似于 StepList，但每个步骤包含一个 GotoLink 组件。
导入: import { StepLinkList } from "/snippets/components/layout/lists.jsx" ;
属性: 属性 类型 默认值 必需 描述 listItemsArray- 是 包含链接的步骤对象数组 listItems[].titlestring- 是 步骤标题 listItems[].iconstring- 否 可选图标名称 listItems[].contentstring- 是 链接标签文本 listItems[].linkstring- 是 链接的相对路径
BasicList, IconList, UpdateList, UpdateLinkList 用于列表功能的占位符组件。目前返回空片段（非功能性）。
注意： 这些是占位符组件，目前不可用。
Step Components
步骤组件 样式步骤 一个可自定义的步骤组件，支持颜色和样式。使用自定义CSS样式包装标准步骤组件。
导入： import { StyledSteps , StyledStep } from "/snippets/components/layout/steps.jsx" ;
属性： 属性 类型 默认值 必需 描述 childrenReactNode- 是 步骤组件以进行渲染 iconColorstring"#18794E"否 步骤图标背景颜色 titleColorstring主题感知 否 步骤标题颜色 lineColorstring主题感知 否 步骤之间连接线的颜色 iconSizestring"24px"否 步骤图标大小（目前未使用）
示例： < StyledSteps iconColor = "#00cc88" titleColor = "#00cc88" > < StyledStep title = "Install" icon = "download" > Run npm install. </ StyledStep > </ StyledSteps >
StyledStep Step 组件的包装器，标题大小可自定义。设计用于在 StyledSteps 内使用。
导入： import { StyledStep } from "/snippets/components/layout/steps.jsx" ;
属性： 属性 类型 默认 必需 描述 titlestring- 是 步骤的标题 iconstring- 否 要显示的图标名称 titleSizestring"h3"否 标题的HTML标题大小（例如，“h1”，“h2”，“h3”） childrenReactNode- 是 在步骤中显示的内容
Table Components
表格组件 DynamicTable 一个可重用的表格组件，具有站点一致的样式。渲染带有表头和数据行的表格，支持可选的等宽字体列。
导入： import { DynamicTable } from "/snippets/components/layout/table.jsx" ;
属性: 属性 类型 默认值 必需 描述 tableTitlestringnull否 显示在表格上方的可选标题 headerListArray<string>[]是 字符串数组，用于列标题 itemsListArray<Object>[]是 对象数组，其中键与 headerList 值匹配 monospaceColumnsArray<number>[]否 要以等宽字体显示的列索引数组（从0开始） marginstring- 否 可选的CSS边距覆盖（例如，“0”，“1rem 0”）
示例： < DynamicTable headerList = { [ "Network" , "Endpoint" , "Status" ] } itemsList = { [ { Network: "Mainnet" , Endpoint: "https://livepeer.network" , Status: "Active" } ] } monospaceColumns = { [ 1 ] } margin = "1rem 0" />
Grid Components
网格组件 QuadGrid 一个两列网格布局，中间有一个动画旋转图标。适用于在网格中显示四个项目，并带有装饰性中心元素。
导入： import { QuadGrid } from "/snippets/components/layout/quadGrid.jsx" ;
属性： 属性 类型 默认值 必需 描述 childrenReactNode- 是 四个子元素以在网格中显示 iconstring"arrows-spin"否 在中心显示的图标名称 iconSizenumber50否 中心图标的大小 iconColorstring"var(--accent)"否 中心图标的颜色 spinDurationstring"10s"否 旋转图标的动画持续时间
示例： < QuadGrid icon = "arrows-spin" iconSize = { 50 } > < Card title = "Item 1" > Content 1 </ Card > < Card title = "Item 2" > Content 2 </ Card > < Card title = "Item 3" > Content 3 </ Card > < Card title = "Item 4" > Content 4 </ Card > </ QuadGrid >
Next: Integration Components Continue to Integration Components →
Last modified on March 1, 2026
Card Components