52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import { Card, Steps } from '../../src'
|
|
import { Demo } from '../components/Demo'
|
|
import { PropsTable } from '../components/PropsTable'
|
|
import { Section } from '../components/Section'
|
|
|
|
const ITEMS = [
|
|
{ title: '建立内容库', description: '首次启动自动建表并灌入种子' },
|
|
{ title: '调整分区与分组', description: '用 SQLite 工具直接改 node 表' },
|
|
{ title: '配置首页卡片', description: 'section_block 决定展示哪个节点' },
|
|
{ title: '发布', description: '条目 body 写 Markdown 即可' },
|
|
]
|
|
|
|
export function StepsSection() {
|
|
return (
|
|
<Section
|
|
id="steps"
|
|
title="步骤"
|
|
api="Steps"
|
|
desc="纵向流程：已完成打勾、当前项高亮、未开始置灰。适合发布流程、导入向导这类有顺序的任务。"
|
|
>
|
|
<Demo
|
|
title="进行中"
|
|
desc="current 从 0 开始；index < current 视为已完成。"
|
|
layout="column"
|
|
code={`<Steps items={items} current={1} />`}
|
|
>
|
|
<Card padding="lg">
|
|
<Steps items={ITEMS} current={1} />
|
|
</Card>
|
|
</Demo>
|
|
|
|
<Demo
|
|
title="全部完成"
|
|
desc="current 超出最后一项时，所有步骤都显示为已完成。"
|
|
layout="column"
|
|
code={`<Steps items={items} current={items.length} />`}
|
|
>
|
|
<Card padding="lg">
|
|
<Steps items={ITEMS} current={ITEMS.length} />
|
|
</Card>
|
|
</Demo>
|
|
|
|
<PropsTable
|
|
rows={[
|
|
{ name: 'items', type: 'StepItem[]', required: true, desc: '{ title, description? }' },
|
|
{ name: 'current', type: 'number', required: true, desc: '当前步骤索引，从 0 开始' },
|
|
]}
|
|
/>
|
|
</Section>
|
|
)
|
|
}
|