From a7edd06b420cdef23f3a293c42fc01e419a764a9 Mon Sep 17 00:00:00 2001 From: aelf-lxy Date: Thu, 14 Mar 2024 17:36:59 +0800 Subject: [PATCH] doc: add doc for richprogress, richprogress modal, table --- packages/component/src/Collapse/index.md | 2 +- .../src/ProgressModal/demos/basic.tsx | 57 +++++++++++++++++++ packages/component/src/ProgressModal/index.md | 44 +++++++------- .../src/RichProgress/demos/basic.tsx | 39 +++++++++++++ packages/component/src/RichProgress/index.md | 43 ++++++++------ packages/component/src/RichProgress/index.tsx | 2 +- packages/component/src/Table/index.md | 14 +++-- 7 files changed, 157 insertions(+), 44 deletions(-) create mode 100644 packages/component/src/ProgressModal/demos/basic.tsx create mode 100644 packages/component/src/RichProgress/demos/basic.tsx diff --git a/packages/component/src/Collapse/index.md b/packages/component/src/Collapse/index.md index 7edca7b..a54c319 100644 --- a/packages/component/src/Collapse/index.md +++ b/packages/component/src/Collapse/index.md @@ -44,7 +44,7 @@ refer to [Collapse Token](https://ant.design/components/collapse-cn#%E4%B8%BB%E9 | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| expandIcon删除 | 自定义切换图标 | `(panelProps) => ReactNode` | `1.0.0` | +| expandIcon删除 | 自定义切换图标 | `(panelProps) => ReactNode` | - | `1.0.0` | | expandIconPosition删除 | 设置图标位置 | `number` | `start \| end` | `1.0.0` | ## Supported API diff --git a/packages/component/src/ProgressModal/demos/basic.tsx b/packages/component/src/ProgressModal/demos/basic.tsx new file mode 100644 index 0000000..1d47161 --- /dev/null +++ b/packages/component/src/ProgressModal/demos/basic.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { Button } from 'aelf-design'; + +import { IStepItem } from '../../RichProgress/index'; +import { ProgressModal } from '../index'; + +const App: React.FC = () => { + const [showProgress, setShowProgress] = React.useState(false); + const steps: IStepItem[] = [ + { + title: 'Title1Title1Title1', + subTitle: 'subTitle1subTitle1.', + percent: 100, + progressTip: 'About 15 sec', + status: 'normal', + available: true, + }, + { + title: 'Title2Title2Title2', + subTitle: 'subTitle2subTitle2subTitle2subTitle2.', + percent: 60, + progressTip: 'About 3~5 min', + status: 'exception', + available: true, + }, + { + title: 'Title3Title3Title3', + subTitle: 'subTitle3subTitle3subTitle3.', + percent: 0, + progressTip: 'About 20 sec', + status: 'normal', + available: false, + }, + ]; + return ( +
+ { + setShowProgress(false); + }} + /> + +
+ ); +}; + +export default App; diff --git a/packages/component/src/ProgressModal/index.md b/packages/component/src/ProgressModal/index.md index 589c2ae..1858c73 100644 --- a/packages/component/src/ProgressModal/index.md +++ b/packages/component/src/ProgressModal/index.md @@ -7,29 +7,35 @@ group: # ProgressModal -## Basic Usage - - - -## Copyable - - +aelf-design aelf-design own component -## Format - - +## Basic Usage -## Custom Tooltip + - +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| stepsData | 步骤数据 | [IStepItem[]](#istepitem) | - | `1.0.0` | +| desc | 弹窗描述信息 | `ReactNode` | - | `1.0.0` | +| strokeColor | 成功进度条颜色 | `string` | 跟随`progress`组件主色 | `1.0.0` | +| strokeErrorColor | 失败进度条颜色 | `string` | 跟随`progress`组件`error`色 | `1.0.0` | +| trailColor | 进度条底色 | `string` | 跟随`progress`组件`trailColor`色 | `1.0.0` | +| successIcon | 成功步骤图标 | `ReactNode` | `` | `1.0.0` | +| errorIcon | 失败步骤图标 | `ReactNode` | `` | `1.0.0` | -## API +### IStepItem | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| ellipsis | Address clipping strategy | `boolean \| { headClip?: number, tailClip?: number }` | `{ headClip: 6, tailClip: 4 }` | - | -| copyable | Address copyable | `boolean` | `false` | - | -| address | Address | `string` | - | - | -| tooltip | Show tooltip when hover address | `boolean \|`[Tooltip.title](https://ant.design/components/tooltip-cn#api) | `true ` | - | -| format | Address format | `boolean \| (input: string) => ReactNode` | `false` | - | -| locale | Multilingual settings | `Locale["address"]` | - | - | +| title | 设置title | `ReactNode` | - | `1.0.0` | +| subTitle | 设置subTitle | `ReactNode` | - | `1.0.0` | +| percent | 当前步骤进度条百分比 | `number` | - | `1.0.0` | +| progressTip | 当前步骤进度条下方文本描述 | `ReactNode` | - | `1.0.0` | +| status | 当前步骤状态 | [ProgressLineType](#progresslinetype) | - | `1.0.0` | +| available | 控制当前步骤文案黑色还是灰色 | `boolean` | - | `1.0.0` | + +### ProgressLineType + +```js +type ProgressLineType = 'exception' | 'normal'; +``` diff --git a/packages/component/src/RichProgress/demos/basic.tsx b/packages/component/src/RichProgress/demos/basic.tsx new file mode 100644 index 0000000..4574b8a --- /dev/null +++ b/packages/component/src/RichProgress/demos/basic.tsx @@ -0,0 +1,39 @@ +import React from 'react'; + +import { IStepItem, RichProgress } from '../index'; + +const App: React.FC = () => { + const steps: IStepItem[] = [ + { + title: 'Title1Title1Title1', + subTitle: 'subTitle1subTitle1.', + percent: 100, + progressTip: 'About 15 sec', + status: 'normal', + available: true, + }, + { + title: 'Title2Title2Title2', + subTitle: 'subTitle2subTitle2subTitle2subTitle2.', + percent: 60, + progressTip: 'About 3~5 min', + status: 'exception', + available: true, + }, + { + title: 'Title3Title3Title3', + subTitle: 'subTitle3subTitle3subTitle3.', + percent: 0, + progressTip: 'About 20 sec', + status: 'normal', + available: false, + }, + ]; + return ( +
+ +
+ ); +}; + +export default App; diff --git a/packages/component/src/RichProgress/index.md b/packages/component/src/RichProgress/index.md index 64cd783..d63771b 100644 --- a/packages/component/src/RichProgress/index.md +++ b/packages/component/src/RichProgress/index.md @@ -7,29 +7,36 @@ group: # RichProgress -## Basic Usage - - - -## Copyable +aelf-design aelf-design own component - - -## Format +## Basic Usage - + -## Custom Tooltip +## API - +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| stepsData | 步骤数据 | [IStepItem[]](#istepitem) | - | `1.0.0` | +| strokeColor | 成功进度条颜色 | `string` | 跟随`progress`组件主色 | `1.0.0` | +| strokeErrorColor | 失败进度条颜色 | `string` | 跟随`progress`组件`error`色 | `1.0.0` | +| trailColor | 进度条底色 | `string` | 跟随`progress`组件`trailColor`色 | `1.0.0` | +| successIcon | 成功步骤图标 | `ReactNode` | `` | `1.0.0` | +| errorIcon | 失败步骤图标 | `ReactNode` | `` | `1.0.0` | -## API +### IStepItem | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| ellipsis | Address clipping strategy | `boolean \| { headClip?: number, tailClip?: number }` | `{ headClip: 6, tailClip: 4 }` | - | -| copyable | Address copyable | `boolean` | `false` | - | -| address | Address | `string` | - | - | -| tooltip | Show tooltip when hover address | `boolean \|`[Tooltip.title](https://ant.design/components/tooltip-cn#api) | `true ` | - | -| format | Address format | `boolean \| (input: string) => ReactNode` | `false` | - | -| locale | Multilingual settings | `Locale["address"]` | - | - | +| title | 设置title | `ReactNode` | - | `1.0.0` | +| subTitle | 设置subTitle | `ReactNode` | - | `1.0.0` | +| percent | 当前步骤进度条百分比 | `number` | - | `1.0.0` | +| progressTip | 当前步骤进度条下方文本描述 | `ReactNode` | - | `1.0.0` | +| status | 当前步骤状态 | [ProgressLineType](#progresslinetype) | - | `1.0.0` | +| available | 控制当前步骤文案黑色还是灰色 | `boolean` | - | `1.0.0` | + +### ProgressLineType + +```js +type ProgressLineType = 'exception' | 'normal'; +``` diff --git a/packages/component/src/RichProgress/index.tsx b/packages/component/src/RichProgress/index.tsx index 92ba30f..25cde77 100644 --- a/packages/component/src/RichProgress/index.tsx +++ b/packages/component/src/RichProgress/index.tsx @@ -50,7 +50,7 @@ const StepItemIcon = ({ return ( -## 组件 token +## Token ```js ``` - +## Supported Token + +refer to [Table Token](https://ant.design/components/table-cn#%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8Fdesign-token) ## API -参考 antd +## Supported API + +refer to [Table API](https://ant.design/components/table-cn#table)