feat: stash-ui 0.1.0(40 个组件 + 文档站 + 主题机制)
This commit is contained in:
@@ -0,0 +1,60 @@
|
||||
import { Button, Result, Space } from '../../src'
|
||||
import { Demo } from '../components/Demo'
|
||||
import { PropsTable } from '../components/PropsTable'
|
||||
import { Section } from '../components/Section'
|
||||
|
||||
export function Results() {
|
||||
return (
|
||||
<Section
|
||||
id="result"
|
||||
title="结果"
|
||||
api="Result"
|
||||
desc="整块的完成 / 失败反馈:提交完成、权限不足、出错。行内提示用 Notice,轻量反馈用 toast,整块状态才用 Result。"
|
||||
>
|
||||
<Demo
|
||||
title="四种状态"
|
||||
desc="success / error / warning / info 只影响图标与颜色,正文结构一致。"
|
||||
layout="column"
|
||||
code={`<Result status="success" title="已发布" description="内容已同步到内容库。" />`}
|
||||
>
|
||||
<Space direction="column" gap="lg" align="stretch">
|
||||
<Result status="success" title="已发布" description="内容已同步到内容库,5 秒内会推送到首页。" />
|
||||
<Result status="error" title="保存失败" description="内容库结构版本不匹配,请删除数据库后重启。" />
|
||||
</Space>
|
||||
</Demo>
|
||||
|
||||
<Demo
|
||||
title="带操作"
|
||||
desc="actions 放按钮组;按钮顺序与弹窗一致——次要操作在左、主操作在右。"
|
||||
layout="column"
|
||||
code={`<Result
|
||||
status="warning"
|
||||
title="还没有内容"
|
||||
description="建一个分区,再往里加条目。"
|
||||
actions={<><Button variant="ghost">看文档</Button><Button>新建分区</Button></>}
|
||||
/>`}
|
||||
>
|
||||
<Result
|
||||
status="warning"
|
||||
title="还没有内容"
|
||||
description="先在内容库里建一个分区,再往分区里加条目。"
|
||||
actions={
|
||||
<>
|
||||
<Button variant="ghost">看文档</Button>
|
||||
<Button>新建分区</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</Demo>
|
||||
|
||||
<PropsTable
|
||||
rows={[
|
||||
{ name: 'status', type: "'success' | 'error' | 'warning' | 'info'", defaultValue: "'info'", desc: '状态' },
|
||||
{ name: 'title', type: 'ReactNode', required: true, desc: '标题' },
|
||||
{ name: 'description', type: 'ReactNode', desc: '说明文字' },
|
||||
{ name: 'actions', type: 'ReactNode', desc: '底部操作区' },
|
||||
]}
|
||||
/>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user