diff --git a/.prettierignore b/.prettierignore index 6ce5e018..d33a8696 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,4 +1,3 @@ -**/*.md **/*.svg package.json .umi diff --git a/.prettierrc b/.prettierrc index 0cc0de65..fdcf70e9 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,6 +2,7 @@ "singleQuote": true, "trailingComma": "es5", "printWidth": 100, + "proseWrap": "never", "overrides": [ { "files": ".prettierrc", diff --git a/package.json b/package.json index 8b71bcb1..00e82ac0 100644 --- a/package.json +++ b/package.json @@ -111,7 +111,7 @@ "lint-staged": "^8.1.1", "merge-umi-mock-data": "^1.0.4", "mockjs": "^1.0.1-beta3", - "prettier": "^1.16.4", + "prettier": "^1.17.0", "serverless-http": "^1.9.1", "slash2": "^2.0.0", "stylelint": "^9.10.1", diff --git a/scripts/getPrettierFiles.js b/scripts/getPrettierFiles.js index 2b01a8ef..500ab092 100644 --- a/scripts/getPrettierFiles.js +++ b/scripts/getPrettierFiles.js @@ -7,11 +7,13 @@ const getPrettierFiles = () => { const configFiles = glob.sync('config/**/*.js*', { ignore: ['**/node_modules/**', 'build/**'] }); const scriptFiles = glob.sync('scripts/**/*.js'); const lessFiles = glob.sync('src/**/*.less*', { ignore: ['**/node_modules/**', 'build/**'] }); + const mdFiles = glob.sync('src/**/*.md*', { ignore: ['**/node_modules/**', 'build/**'] }); files = files.concat(jsFiles); files = files.concat(tsFiles); files = files.concat(configFiles); files = files.concat(scriptFiles); files = files.concat(lessFiles); + files = files.concat(mdFiles); if (!files.length) { return; } diff --git a/src/components/Authorized/demo/AuthorizedArray.md b/src/components/Authorized/demo/AuthorizedArray.md index 46eaf761..1bef5c92 100644 --- a/src/components/Authorized/demo/AuthorizedArray.md +++ b/src/components/Authorized/demo/AuthorizedArray.md @@ -1,6 +1,6 @@ --- order: 1 -title: +title: zh-CN: 使用数组作为参数 en-US: Use Array as a parameter --- @@ -18,6 +18,6 @@ ReactDOM.render( , - mountNode, + mountNode ); ``` diff --git a/src/components/Authorized/demo/AuthorizedFunction.md b/src/components/Authorized/demo/AuthorizedFunction.md index 8ad8b91e..cd3cdd4a 100644 --- a/src/components/Authorized/demo/AuthorizedFunction.md +++ b/src/components/Authorized/demo/AuthorizedFunction.md @@ -1,6 +1,6 @@ --- order: 2 -title: +title: zh-CN: 使用方法作为参数 en-US: Use function as a parameter --- @@ -20,12 +20,8 @@ const havePermission = () => { ReactDOM.render( - + , - mountNode, + mountNode ); ``` diff --git a/src/components/Authorized/demo/basic.md b/src/components/Authorized/demo/basic.md index a5f12f29..f40272f4 100644 --- a/src/components/Authorized/demo/basic.md +++ b/src/components/Authorized/demo/basic.md @@ -1,6 +1,6 @@ --- order: 0 -title: +title: zh-CN: 基本使用 en-US: Basic use --- @@ -20,6 +20,6 @@ ReactDOM.render( , - mountNode, + mountNode ); ``` diff --git a/src/components/Authorized/demo/secured.md b/src/components/Authorized/demo/secured.md index 1999852f..55d5cd9b 100644 --- a/src/components/Authorized/demo/secured.md +++ b/src/components/Authorized/demo/secured.md @@ -1,6 +1,6 @@ --- order: 3 -title: +title: zh-CN: 注解基本使用 en-US: Basic use secured --- @@ -16,15 +16,13 @@ const { Secured } = RenderAuthorized('user'); @Secured('admin') class TestSecuredString extends React.Component { render() { - return ( - - ) + return ; } } ReactDOM.render(
, - mountNode, + mountNode ); ``` diff --git a/src/components/Authorized/index.md b/src/components/Authorized/index.md index 48c93f8f..ac09ccab 100644 --- a/src/components/Authorized/index.md +++ b/src/components/Authorized/index.md @@ -15,23 +15,22 @@ order: 15 权限组件默认 export RenderAuthorized 函数，它接收当前权限作为参数，返回一个权限对象，该对象提供以下几种使用方式。 - ### Authorized 最基础的权限控制。 -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| children | 正常渲染的元素，权限判断通过时展示 | ReactNode | - | -| authority | 准入权限/权限判断 | `string | array | Promise | (currentAuthority) => boolean | Promise` | - | -| noMatch | 权限异常渲染元素，权限判断不通过时展示 | ReactNode | - | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| children | 正常渲染的元素，权限判断通过时展示 | ReactNode | - | +| authority | 准入权限/权限判断 | `string | array | Promise | (currentAuthority) => boolean | Promise` | - | +| noMatch | 权限异常渲染元素，权限判断不通过时展示 | ReactNode | - | ### Authorized.AuthorizedRoute -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| authority | 准入权限/权限判断 | `string | array | Promise | (currentAuthority) => boolean | Promise` | - | -| redirectPath | 权限异常时重定向的页面路由 | string | - | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| authority | 准入权限/权限判断 | `string | array | Promise | (currentAuthority) => boolean | Promise` | - | +| redirectPath | 权限异常时重定向的页面路由 | string | - | 其余参数与 `Route` 相同。 @@ -39,18 +38,17 @@ order: 15 注解方式，`@Authorized.Secured(authority, error)` -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| authority | 准入权限/权限判断 | `string | Promise | (currentAuthority) => boolean | Promise` | - | -| error | 权限异常时渲染元素 | ReactNode | | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| authority | 准入权限/权限判断 | `string | Promise | (currentAuthority) => boolean | Promise` | - | +| error | 权限异常时渲染元素 | ReactNode | | ### Authorized.check -函数形式的 Authorized，用于某些不能被 HOC 包裹的组件。 `Authorized.check(authority, target, Exception)` -注意：传入一个 Promise 时，无论正确还是错误返回的都是一个 ReactClass。 +函数形式的 Authorized，用于某些不能被 HOC 包裹的组件。 `Authorized.check(authority, target, Exception)` 注意：传入一个 Promise 时，无论正确还是错误返回的都是一个 ReactClass。 -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| authority | 准入权限/权限判断 | `string | Promise | (currentAuthority) => boolean | Promise` | - | -| target | 权限判断通过时渲染的元素 | ReactNode | - | -| Exception | 权限异常时渲染元素 | ReactNode | - | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| authority | 准入权限/权限判断 | `string | Promise | (currentAuthority) => boolean | Promise` | - | +| target | 权限判断通过时渲染的元素 | ReactNode | - | +| Exception | 权限异常时渲染元素 | ReactNode | - | diff --git a/src/components/AvatarList/demo/maxLength.md b/src/components/AvatarList/demo/maxLength.md index 76c6b421..52f0930e 100644 --- a/src/components/AvatarList/demo/maxLength.md +++ b/src/components/AvatarList/demo/maxLength.md @@ -1,24 +1,46 @@ --- order: 0 -title: - zh-CN: 要显示的最大项目 +title: + zh-CN: 要显示的最大项目 en-US: Max Items to Show --- -`maxLength` attribute specifies the maximum number of items to show while `excessItemsStyle` style the excess -item component. +`maxLength` attribute specifies the maximum number of items to show while `excessItemsStyle` style the excess item component. -````jsx +```jsx import AvatarList from 'ant-design-pro/lib/AvatarList'; ReactDOM.render( - - - - - - - - -, mountNode); -```` + + + + + + + + , + mountNode +); +``` diff --git a/src/components/AvatarList/demo/simple.md b/src/components/AvatarList/demo/simple.md index e941aea9..d4438b33 100644 --- a/src/components/AvatarList/demo/simple.md +++ b/src/components/AvatarList/demo/simple.md @@ -1,20 +1,30 @@ --- order: 0 -title: - zh-CN: 基础样例 +title: + zh-CN: 基础样例 en-US: Basic Usage --- Simplest of usage. -````jsx +```jsx import AvatarList from 'ant-design-pro/lib/AvatarList'; ReactDOM.render( - - - - -, mountNode); -```` + + + + , + mountNode +); +``` diff --git a/src/components/AvatarList/index.en-US.md b/src/components/AvatarList/index.en-US.md index 7fc39cc2..ee996c31 100644 --- a/src/components/AvatarList/index.en-US.md +++ b/src/components/AvatarList/index.en-US.md @@ -10,11 +10,11 @@ A list of user's avatar for project or group member list frequently. If a large ### AvatarList -| Property | Description | Type | Default | -| ---------------- | --------------------- | ---------------------------------- | --------- | +| Property | Description | Type | Default | +| ---------------- | --------------------- | ------------------------------------ | --------- | | size | size of list | `large`、`small` 、`mini`, `default` | `default` | -| maxLength | max items to show | number | - | -| excessItemsStyle | the excess item style | CSSProperties | - | +| maxLength | max items to show | number | - | +| excessItemsStyle | the excess item style | CSSProperties | - | ### AvatarList.Item diff --git a/src/components/AvatarList/index.zh-CN.md b/src/components/AvatarList/index.zh-CN.md index bdab181c..5c04acaf 100644 --- a/src/components/AvatarList/index.zh-CN.md +++ b/src/components/AvatarList/index.zh-CN.md @@ -11,15 +11,15 @@ cols: 1 ### AvatarList -| 参数 | 说明 | 类型 | 默认值 | -| ---------------- | -------- | ---------------------------------- | --------- | -| size | 头像大小 | `large`、`small` 、`mini`, `default` | `default` | -| maxLength | 要显示的最大项目 | number | - | -| excessItemsStyle | 多余的项目风格 | CSSProperties | - | +| 参数 | 说明 | 类型 | 默认值 | +| ---------------- | ---------------- | ------------------------------------ | --------- | +| size | 头像大小 | `large`、`small` 、`mini`, `default` | `default` | +| maxLength | 要显示的最大项目 | number | - | +| excessItemsStyle | 多余的项目风格 | CSSProperties | - | ### AvatarList.Item -| 参数 | 说明 | 类型 | 默认值 | -| ---- | ------ | --------- | --- | -| tips | 头像展示文案 | ReactNode | - | -| src | 头像图片连接 | string | - | +| 参数 | 说明 | 类型 | 默认值 | +| ---- | ------------ | --------- | ------ | +| tips | 头像展示文案 | ReactNode | - | +| src | 头像图片连接 | string | - | diff --git a/src/components/Charts/demo/bar.md b/src/components/Charts/demo/bar.md index 955f44e0..496ed670 100644 --- a/src/components/Charts/demo/bar.md +++ b/src/components/Charts/demo/bar.md @@ -5,7 +5,7 @@ title: 柱状图 通过设置 `x`，`y` 属性，可以快速的构建出一个漂亮的柱状图，各种纬度的关系则是通过自定义的数据展现。 -````jsx +```jsx import { Bar } from 'ant-design-pro/lib/Charts'; const salesData = []; @@ -16,11 +16,5 @@ for (let i = 0; i < 12; i += 1) { }); } -ReactDOM.render( - -, mountNode); -```` +ReactDOM.render(, mountNode); +``` diff --git a/src/components/Charts/demo/chart-card.md b/src/components/Charts/demo/chart-card.md index 4da852b7..9ba68643 100644 --- a/src/components/Charts/demo/chart-card.md +++ b/src/components/Charts/demo/chart-card.md @@ -21,26 +21,19 @@ ReactDOM.render( } - total={() => ( - - )} - footer={ - - } + total={() => } + footer={} contentHeight={46} > 周同比 - + 12% 日环比 - + 11% @@ -61,12 +54,8 @@ ReactDOM.render( } - total={() => ( - - )} - footer={ - - } + total={() => } + footer={} /> @@ -84,12 +73,10 @@ ReactDOM.render( } - total={() => ( - - )} + total={() => } /> , - mountNode, + mountNode ); ``` diff --git a/src/components/Charts/demo/gauge.md b/src/components/Charts/demo/gauge.md index f53465d8..3671102b 100644 --- a/src/components/Charts/demo/gauge.md +++ b/src/components/Charts/demo/gauge.md @@ -1,18 +1,12 @@ --- order: 7 -title: 仪表盘 +title: 仪表盘 --- 仪表盘是一种进度展示方式，可以更直观的展示当前的进展情况，通常也可表示占比。 -````jsx +```jsx import { Gauge } from 'ant-design-pro/lib/Charts'; -ReactDOM.render( - -, mountNode); -```` +ReactDOM.render(, mountNode); +``` diff --git a/src/components/Charts/demo/mini-area.md b/src/components/Charts/demo/mini-area.md index 2b9bfb47..4c148439 100644 --- a/src/components/Charts/demo/mini-area.md +++ b/src/components/Charts/demo/mini-area.md @@ -4,7 +4,7 @@ col: 2 title: 迷你区域图 --- -````jsx +```jsx import { MiniArea } from 'ant-design-pro/lib/Charts'; import moment from 'moment'; @@ -12,17 +12,10 @@ const visitData = []; const beginDay = new Date().getTime(); for (let i = 0; i < 20; i += 1) { visitData.push({ - x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'), + x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'), y: Math.floor(Math.random() * 100) + 10, }); } -ReactDOM.render( - -, mountNode); -```` +ReactDOM.render(, mountNode); +``` diff --git a/src/components/Charts/demo/mini-bar.md b/src/components/Charts/demo/mini-bar.md index fef301bc..2cfaf0fe 100644 --- a/src/components/Charts/demo/mini-bar.md +++ b/src/components/Charts/demo/mini-bar.md @@ -6,7 +6,7 @@ title: 迷你柱状图 迷你柱状图更适合展示简单的区间数据，简洁的表现方式可以很好的减少大数据量的视觉展现压力。 -````jsx +```jsx import { MiniBar } from 'ant-design-pro/lib/Charts'; import moment from 'moment'; @@ -14,15 +14,10 @@ const visitData = []; const beginDay = new Date().getTime(); for (let i = 0; i < 20; i += 1) { visitData.push({ - x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'), + x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'), y: Math.floor(Math.random() * 100) + 10, }); } -ReactDOM.render( - -, mountNode); -```` +ReactDOM.render(, mountNode); +``` diff --git a/src/components/Charts/demo/mini-pie.md b/src/components/Charts/demo/mini-pie.md index 9b1abf05..76cac9f3 100644 --- a/src/components/Charts/demo/mini-pie.md +++ b/src/components/Charts/demo/mini-pie.md @@ -3,14 +3,10 @@ order: 6 title: 迷你饼状图 --- -通过简化 `Pie` 属性的设置，可以快速的实现极简的饼状图，可配合 `ChartCard` 组合展 -现更多业务场景。 +通过简化 `Pie` 属性的设置，可以快速的实现极简的饼状图，可配合 `ChartCard` 组合展现更多业务场景。 ```jsx import { Pie } from 'ant-design-pro/lib/Charts'; -ReactDOM.render( - , - mountNode -); +ReactDOM.render(, mountNode); ``` diff --git a/src/components/Charts/demo/mini-progress.md b/src/components/Charts/demo/mini-progress.md index 6308a8fa..e4368bee 100644 --- a/src/components/Charts/demo/mini-progress.md +++ b/src/components/Charts/demo/mini-progress.md @@ -3,10 +3,8 @@ order: 3 title: 迷你进度条 --- -````jsx +```jsx import { MiniProgress } from 'ant-design-pro/lib/Charts'; -ReactDOM.render( - -, mountNode); -```` +ReactDOM.render(, mountNode); +``` diff --git a/src/components/Charts/demo/mix.md b/src/components/Charts/demo/mix.md index fc64110a..92251f9d 100644 --- a/src/components/Charts/demo/mix.md +++ b/src/components/Charts/demo/mix.md @@ -5,7 +5,7 @@ title: 图表套件组合展示 利用 Ant Design Pro 提供的图表套件，可以灵活组合符合设计规范的图表来满足复杂的业务需求。 -````jsx +```jsx import { ChartCard, Field, MiniArea, MiniBar, MiniProgress } from 'ant-design-pro/lib/Charts'; import Trend from 'ant-design-pro/lib/Trend'; import NumberInfo from 'ant-design-pro/lib/NumberInfo'; @@ -17,7 +17,7 @@ const visitData = []; const beginDay = new Date().getTime(); for (let i = 0; i < 20; i += 1) { visitData.push({ - x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'), + x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'), y: Math.floor(Math.random() * 100) + 10, }); } @@ -25,52 +25,53 @@ for (let i = 0; i < 20; i += 1) { ReactDOM.render( - + 本周访问} total={numeral(12321).format('0,0')} status="up" subTotal={17.1} /> - + } + action={ + + + + } total={numeral(8846).format('0,0')} footer={} contentHeight={46} > - + } + action={ + + + + } total="78%" footer={
周同比 - 12% + + 12% + 日环比 - 11% + + 11% +
} @@ -79,6 +80,7 @@ ReactDOM.render( - -, mountNode); -```` + , + mountNode +); +``` diff --git a/src/components/Charts/demo/pie.md b/src/components/Charts/demo/pie.md index 9c87161a..392a7c2c 100644 --- a/src/components/Charts/demo/pie.md +++ b/src/components/Charts/demo/pie.md @@ -41,7 +41,7 @@ ReactDOM.render( total={() => ( now.y + pre, 0)) + __html: yuan(salesPieData.reduce((pre, now) => now.y + pre, 0)), }} /> )} @@ -49,6 +49,6 @@ ReactDOM.render( valueFormat={val => } height={294} />, - mountNode, + mountNode ); ``` diff --git a/src/components/Charts/demo/radar.md b/src/components/Charts/demo/radar.md index 584344aa..fd14c037 100644 --- a/src/components/Charts/demo/radar.md +++ b/src/components/Charts/demo/radar.md @@ -3,7 +3,7 @@ order: 7 title: 雷达图 --- -````jsx +```jsx import { Radar, ChartCard } from 'ant-design-pro/lib/Charts'; const radarOriginData = [ @@ -40,8 +40,8 @@ const radarTitleMap = { contribute: '贡献', hot: '热度', }; -radarOriginData.forEach((item) => { - Object.keys(item).forEach((key) => { +radarOriginData.forEach(item => { + Object.keys(item).forEach(key => { if (key !== 'name') { radarData.push({ name: item.name, @@ -54,11 +54,8 @@ radarOriginData.forEach((item) => { ReactDOM.render( - - -, mountNode); -```` + + , + mountNode +); +``` diff --git a/src/components/Charts/demo/tag-cloud.md b/src/components/Charts/demo/tag-cloud.md index c66f6fe6..2f0e0e63 100644 --- a/src/components/Charts/demo/tag-cloud.md +++ b/src/components/Charts/demo/tag-cloud.md @@ -5,21 +5,16 @@ title: 标签云 标签云是一套相关的标签以及与此相应的权重展示方式，一般典型的标签云有 30 至 150 个标签，而权重影响使用的字体大小或其他视觉效果。 -````jsx +```jsx import { TagCloud } from 'ant-design-pro/lib/Charts'; const tags = []; for (let i = 0; i < 50; i += 1) { tags.push({ name: `TagClout-Title-${i}`, - value: Math.floor((Math.random() * 50)) + 20, + value: Math.floor(Math.random() * 50) + 20, }); } -ReactDOM.render( - -, mountNode); -```` +ReactDOM.render(, mountNode); +``` diff --git a/src/components/Charts/demo/timeline-chart.md b/src/components/Charts/demo/timeline-chart.md index 60773b57..6146989e 100644 --- a/src/components/Charts/demo/timeline-chart.md +++ b/src/components/Charts/demo/timeline-chart.md @@ -5,23 +5,20 @@ title: 带有时间轴的图表 使用 `TimelineChart` 组件可以实现带有时间轴的柱状图展现，而其中的 `x` 属性，则是时间值的指向，默认最多支持同时展现两个指标，分别是 `y1` 和 `y2`。 -````jsx +```jsx import { TimelineChart } from 'ant-design-pro/lib/Charts'; const chartData = []; for (let i = 0; i < 20; i += 1) { chartData.push({ - x: (new Date().getTime()) + (1000 * 60 * 30 * i), + x: new Date().getTime() + 1000 * 60 * 30 * i, y1: Math.floor(Math.random() * 100) + 1000, y2: Math.floor(Math.random() * 100) + 10, }); } ReactDOM.render( - -, mountNode); -```` + , + mountNode +); +``` diff --git a/src/components/Charts/demo/waterwave.md b/src/components/Charts/demo/waterwave.md index 74d290f5..718cd2a0 100644 --- a/src/components/Charts/demo/waterwave.md +++ b/src/components/Charts/demo/waterwave.md @@ -1,20 +1,17 @@ --- order: 8 -title: 水波图 +title: 水波图 --- 水波图是一种比例的展示方式，可以更直观的展示关键值的占比。 -````jsx +```jsx import { WaterWave } from 'ant-design-pro/lib/Charts'; ReactDOM.render(
- -
-, mountNode); -```` + + , + mountNode +); +``` diff --git a/src/components/Charts/index.md b/src/components/Charts/index.md index e5f41c87..3456bc19 100644 --- a/src/components/Charts/index.md +++ b/src/components/Charts/index.md @@ -13,26 +13,27 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https ### ChartCard -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| title | 卡片标题 | ReactNode\|string | - | -| action | 卡片操作 | ReactNode | - | -| total | 数据总量 | ReactNode \| number \| function | - | -| footer | 卡片底部 | ReactNode | - | -| contentHeight | 内容区域高度 | number | - | -| avatar | 右侧图标 | React.ReactNode | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------- | ------------ | ------------------------------- | ------ | +| title | 卡片标题 | ReactNode\|string | - | +| action | 卡片操作 | ReactNode | - | +| total | 数据总量 | ReactNode \| number \| function | - | +| footer | 卡片底部 | ReactNode | - | +| contentHeight | 内容区域高度 | number | - | +| avatar | 右侧图标 | React.ReactNode | - | + ### MiniBar -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| color | 图表颜色 | string | `#1890FF` | -| height | 图表高度 | number | - | -| data | 数据 | array<{x, y}> | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------ | -------- | ------------- | --------- | +| color | 图表颜色 | string | `#1890FF` | +| height | 图表高度 | number | - | +| data | 数据 | array<{x, y}> | - | ### MiniArea -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | | color | 图表颜色 | string | `rgba(24, 144, 255, 0.2)` | | borderColor | 图表边颜色 | string | `#1890FF` | | height | 图表高度 | number | - | @@ -44,17 +45,17 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https ### MiniProgress -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| target | 目标比例 | number | - | -| color | 进度条颜色 | string | - | -| strokeWidth | 进度条高度 | number | - | -| percent | 进度比例 | number | - | +| 参数 | 说明 | 类型 | 默认值 | +| ----------- | ---------- | ------ | ------ | +| target | 目标比例 | number | - | +| color | 进度条颜色 | string | - | +| strokeWidth | 进度条高度 | number | - | +| percent | 进度比例 | number | - | ### Bar -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | | title | 图表标题 | ReactNode\|string | - | | color | 图表颜色 | string | `rgba(24, 144, 255, 0.85)` | | padding | 图表内部间距 | [array](https://github.com/alibaba/BizCharts/blob/master/doc/api/chart.md#7padding-object--number--array-) | `'auto'` | @@ -64,8 +65,8 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https ### Pie -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | | animate | 是否显示动画 | boolean | true | | color | 图表颜色 | string | `rgba(24, 144, 255, 0.85)` | | height | 图表高度 | number | - | @@ -80,8 +81,8 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https ### Radar -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | | title | 图表标题 | ReactNode\|string | - | | height | 图表高度 | number | - | | hasLegend | 是否显示 legend | boolean | `false` | @@ -90,41 +91,41 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https ### Gauge -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| title | 图表标题 | ReactNode\|string | - | -| height | 图表高度 | number | - | -| color | 图表颜色 | string | `#2F9CFF` | -| bgColor | 图表背景颜色 | string | `#F0F2F5` | -| percent | 进度比例 | number | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------- | ------------ | ----------------- | --------- | +| title | 图表标题 | ReactNode\|string | - | +| height | 图表高度 | number | - | +| color | 图表颜色 | string | `#2F9CFF` | +| bgColor | 图表背景颜色 | string | `#F0F2F5` | +| percent | 进度比例 | number | - | ### WaterWave -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| title | 图表标题 | ReactNode\|string | - | -| height | 图表高度 | number | - | -| color | 图表颜色 | string | `#1890FF` | -| percent | 进度比例 | number | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------- | -------- | ----------------- | --------- | +| title | 图表标题 | ReactNode\|string | - | +| height | 图表高度 | number | - | +| color | 图表颜色 | string | `#1890FF` | +| percent | 进度比例 | number | - | ### TagCloud -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| data | 标题 | Array | - | -| height | 高度值 | number | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------ | ------ | ------------------- | ------ | +| data | 标题 | Array | - | +| height | 高度值 | number | - | ### TimelineChart -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| data | 标题 | Array | - | -| titleMap | 指标别名 | Object{y1: '客流量', y2: '支付笔数'} | - | -| height | 高度值 | number | 400 | +| 参数 | 说明 | 类型 | 默认值 | +| -------- | -------- | ------------------------------------ | ------ | +| data | 标题 | Array | - | +| titleMap | 指标别名 | Object{y1: '客流量', y2: '支付笔数'} | - | +| height | 高度值 | number | 400 | ### Field -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| label | 标题 | ReactNode\|string | - | -| value | 值 | ReactNode\|string | - | +| 参数 | 说明 | 类型 | 默认值 | +| ----- | ---- | ----------------- | ------ | +| label | 标题 | ReactNode\|string | - | +| value | 值 | ReactNode\|string | - | diff --git a/src/components/CountDown/demo/simple.md b/src/components/CountDown/demo/simple.md index e42cbf1d..c0e23be2 100644 --- a/src/components/CountDown/demo/simple.md +++ b/src/components/CountDown/demo/simple.md @@ -13,12 +13,10 @@ title: The simplest usage. -````jsx +```jsx import CountDown from 'ant-design-pro/lib/CountDown'; const targetTime = new Date().getTime() + 3900000; -ReactDOM.render( - -, mountNode); -```` +ReactDOM.render(, mountNode); +``` diff --git a/src/components/CountDown/index.en-US.md b/src/components/CountDown/index.en-US.md index 7b452406..19bbe275 100644 --- a/src/components/CountDown/index.en-US.md +++ b/src/components/CountDown/index.en-US.md @@ -8,8 +8,8 @@ Simple CountDown Component. ## API -| Property | Description | Type | Default | -|----------|------------------------------------------|-------------|-------| -| format | Formatter of time | Function(time) | | -| target | Target time | Date | - | -| onEnd | Countdown to the end callback | funtion | -| +| Property | Description | Type | Default | +| -------- | ----------------------------- | -------------- | ------- | +| format | Formatter of time | Function(time) | | +| target | Target time | Date | - | +| onEnd | Countdown to the end callback | funtion | - | diff --git a/src/components/CountDown/index.zh-CN.md b/src/components/CountDown/index.zh-CN.md index 7e00ba1d..87539289 100644 --- a/src/components/CountDown/index.zh-CN.md +++ b/src/components/CountDown/index.zh-CN.md @@ -1,5 +1,5 @@ --- -title: CountDown +title: CountDown subtitle: 倒计时 cols: 1 order: 3 @@ -9,8 +9,8 @@ order: 3 ## API -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| format | 时间格式化显示 | Function(time) | | -| target | 目标时间 | Date | - | -| onEnd | 倒计时结束回调 | funtion | -| +| 参数 | 说明 | 类型 | 默认值 | +| ------ | -------------- | -------------- | ------ | +| format | 时间格式化显示 | Function(time) | | +| target | 目标时间 | Date | - | +| onEnd | 倒计时结束回调 | funtion | - | diff --git a/src/components/DescriptionList/demo/basic.md b/src/components/DescriptionList/demo/basic.md index 87954551..e45c1103 100644 --- a/src/components/DescriptionList/demo/basic.md +++ b/src/components/DescriptionList/demo/basic.md @@ -13,7 +13,7 @@ title: Basic DescriptionList. -````jsx +```jsx import DescriptionList from 'ant-design-pro/lib/DescriptionList'; const { Description } = DescriptionList; @@ -21,23 +21,18 @@ const { Description } = DescriptionList; ReactDOM.render( - A free, open source, cross-platform, - graphical web browser developed by the - Mozilla Corporation and hundreds of - volunteers. + A free, open source, cross-platform, graphical web browser developed by the Mozilla + Corporation and hundreds of volunteers. - A free, open source, cross-platform, - graphical web browser developed by the - Mozilla Corporation and hundreds of - volunteers. + A free, open source, cross-platform, graphical web browser developed by the Mozilla + Corporation and hundreds of volunteers. - A free, open source, cross-platform, - graphical web browser developed by the - Mozilla Corporation and hundreds of - volunteers. + A free, open source, cross-platform, graphical web browser developed by the Mozilla + Corporation and hundreds of volunteers. - -, mountNode); -```` + , + mountNode +); +``` diff --git a/src/components/DescriptionList/demo/vertical.md b/src/components/DescriptionList/demo/vertical.md index 2742f7c9..8bdd3dc0 100644 --- a/src/components/DescriptionList/demo/vertical.md +++ b/src/components/DescriptionList/demo/vertical.md @@ -13,7 +13,7 @@ title: Vertical layout. -````jsx +```jsx import DescriptionList from 'ant-design-pro/lib/DescriptionList'; const { Description } = DescriptionList; @@ -21,23 +21,18 @@ const { Description } = DescriptionList; ReactDOM.render( - A free, open source, cross-platform, - graphical web browser developed by the - Mozilla Corporation and hundreds of - volunteers. + A free, open source, cross-platform, graphical web browser developed by the Mozilla + Corporation and hundreds of volunteers. - A free, open source, cross-platform, - graphical web browser developed by the - Mozilla Corporation and hundreds of - volunteers. + A free, open source, cross-platform, graphical web browser developed by the Mozilla + Corporation and hundreds of volunteers. - A free, open source, cross-platform, - graphical web browser developed by the - Mozilla Corporation and hundreds of - volunteers. + A free, open source, cross-platform, graphical web browser developed by the Mozilla + Corporation and hundreds of volunteers. - -, mountNode); -```` + , + mountNode +); +``` diff --git a/src/components/DescriptionList/index.en-US.md b/src/components/DescriptionList/index.en-US.md index 089f30b1..9b956a0f 100644 --- a/src/components/DescriptionList/index.en-US.md +++ b/src/components/DescriptionList/index.en-US.md @@ -10,24 +10,24 @@ Groups display multiple read-only fields, which are common to informational disp ### DescriptionList -| Property | Description | Type | Default | -|----------|------------------------------------------|-------------|---------| -| layout | type of layout | Enum{'horizontal', 'vertical'} | 'horizontal' | -| col | specify the maximum number of columns to display, the final columns number is determined by col setting combined with [Responsive Rules](/components/DescriptionList#Responsive-Rules) | number(0 < col <= 4) | 3 | -| title | title | ReactNode | - | -| gutter | specify the distance between two items, unit is `px` | number | 32 | -| size | size of list | Enum{'large', 'small'} | - | +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| layout | type of layout | Enum{'horizontal', 'vertical'} | 'horizontal' | +| col | specify the maximum number of columns to display, the final columns number is determined by col setting combined with [Responsive Rules](/components/DescriptionList#Responsive-Rules) | number(0 < col <= 4) | 3 | +| title | title | ReactNode | - | +| gutter | specify the distance between two items, unit is `px` | number | 32 | +| size | size of list | Enum{'large', 'small'} | - | #### Responsive Rules -| Window Width | Columns Number | -|---------------------|---------------------------------------------| -| `≥768px` | `col` | -| `≥576px` | `col < 2 ? col : 2` | -| `<576px` | `1` | +| Window Width | Columns Number | +| ------------ | ------------------- | +| `≥768px` | `col` | +| `≥576px` | `col < 2 ? col : 2` | +| `<576px` | `1` | ### DescriptionList.Description -| Property | Description | Type | Default | -|----------|------------------------------------------|-------------|-------| -| term | item title | ReactNode | - | +| Property | Description | Type | Default | +| -------- | ----------- | --------- | ------- | +| term | item title | ReactNode | - | diff --git a/src/components/DescriptionList/index.zh-CN.md b/src/components/DescriptionList/index.zh-CN.md index b16a7fe7..bc7028a6 100644 --- a/src/components/DescriptionList/index.zh-CN.md +++ b/src/components/DescriptionList/index.zh-CN.md @@ -11,27 +11,24 @@ order: 4 ### DescriptionList -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| layout | 布局方式 | Enum{'horizontal', 'vertical'} | 'horizontal' | -| col | 指定信息最多分几列展示，最终一行几列由 col 配置结合[响应式规则](/components/DescriptionList#响应式规则)决定 | number(0 < col <= 4) | 3 | -| title | 列表标题 | ReactNode | - | -| gutter | 列表项间距，单位为 `px` | number | 32 | -| size | 列表型号 | Enum{'large', 'small'} | - | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| layout | 布局方式 | Enum{'horizontal', 'vertical'} | 'horizontal' | +| col | 指定信息最多分几列展示，最终一行几列由 col 配置结合[响应式规则](/components/DescriptionList#响应式规则)决定 | number(0 < col <= 4) | 3 | +| title | 列表标题 | ReactNode | - | +| gutter | 列表项间距，单位为 `px` | number | 32 | +| size | 列表型号 | Enum{'large', 'small'} | - | #### 响应式规则 -| 窗口宽度 | 展示列数 | -|---------------------|---------------------------------------------| -| `≥768px` | `col` | -| `≥576px` | `col < 2 ? col : 2` | -| `<576px` | `1` | +| 窗口宽度 | 展示列数 | +| -------- | ------------------- | +| `≥768px` | `col` | +| `≥576px` | `col < 2 ? col : 2` | +| `<576px` | `1` | ### DescriptionList.Description -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| term | 列表项标题 | ReactNode | - | - - - +| 参数 | 说明 | 类型 | 默认值 | +| ---- | ---------- | --------- | ------ | +| term | 列表项标题 | ReactNode | - | diff --git a/src/components/Ellipsis/demo/line.md b/src/components/Ellipsis/demo/line.md index bc31170d..a9be7c2c 100644 --- a/src/components/Ellipsis/demo/line.md +++ b/src/components/Ellipsis/demo/line.md @@ -1,6 +1,6 @@ --- order: 1 -title: +title: zh-CN: 按照行数省略 en-US: Truncate according to the number of rows --- @@ -17,15 +17,23 @@ title: Also note that, in this mode, the outer container needs to have a specified width (or set its own width). - -````jsx +```jsx import Ellipsis from 'ant-design-pro/lib/Ellipsis'; -const article =

There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.

; +const article = ( +

+ There were injuries alleged in three cases in 2015, and a fourth incident + in September, according to the safety recall report. After meeting with US regulators in + October, the firm decided to issue a voluntary recall. +

+); ReactDOM.render(
- {article} -
-, mountNode); -```` + + {article} + + , + mountNode +); +``` diff --git a/src/components/Ellipsis/demo/number.md b/src/components/Ellipsis/demo/number.md index 0bc1a0ff..cc7aa3e7 100644 --- a/src/components/Ellipsis/demo/number.md +++ b/src/components/Ellipsis/demo/number.md @@ -1,6 +1,6 @@ --- order: 0 -title: +title: zh-CN: 按照字符数省略 en-US: Truncate according to the number of character --- @@ -13,16 +13,20 @@ title: `length` attribute specifies the maximum length where the text will automatically be truncated when exceeded. -````jsx +```jsx import Ellipsis from 'ant-design-pro/lib/Ellipsis'; -const article = 'There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.'; +const article = + 'There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.'; ReactDOM.render(
{article}

Show Tooltip

- {article} -
-, mountNode); -```` + + {article} + + , + mountNode +); +``` diff --git a/src/components/Ellipsis/index.en-US.md b/src/components/Ellipsis/index.en-US.md index 15139cc9..80988730 100644 --- a/src/components/Ellipsis/index.en-US.md +++ b/src/components/Ellipsis/index.en-US.md @@ -1,5 +1,5 @@ --- -title: Ellipsis +title: Ellipsis cols: 1 order: 10 --- @@ -8,9 +8,9 @@ When the text is too long, the Ellipsis automatically shortens it according to i ## API -Property | Description | Type | Default -----|------|-----|------ -tooltip | tooltip for showing the full text content when hovering over | boolean | - -length | maximum number of characters in the text before being truncated | number | - -lines | maximum number of rows in the text before being truncated | number | `1` -fullWidthRecognition | whether consider full-width character length as 2 when calculate string length | boolean | - +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| tooltip | tooltip for showing the full text content when hovering over | boolean | - | +| length | maximum number of characters in the text before being truncated | number | - | +| lines | maximum number of rows in the text before being truncated | number | `1` | +| fullWidthRecognition | whether consider full-width character length as 2 when calculate string length | boolean | - | diff --git a/src/components/Ellipsis/index.zh-CN.md b/src/components/Ellipsis/index.zh-CN.md index f7a70ead..1875b17c 100644 --- a/src/components/Ellipsis/index.zh-CN.md +++ b/src/components/Ellipsis/index.zh-CN.md @@ -9,9 +9,9 @@ order: 10 ## API -参数 | 说明 | 类型 | 默认值 -----|------|-----|------ -tooltip | 移动到文本展示完整内容的提示 | boolean | - -length | 在按照长度截取下的文本最大字符数，超过则截取省略 | number | - -lines | 在按照行数截取下最大的行数，超过则截取省略 | number | `1` -fullWidthRecognition | 是否将全角字符的长度视为2来计算字符串长度 | boolean | - +| 参数 | 说明 | 类型 | 默认值 | +| -------------------- | ------------------------------------------------ | ------- | ------ | +| tooltip | 移动到文本展示完整内容的提示 | boolean | - | +| length | 在按照长度截取下的文本最大字符数，超过则截取省略 | number | - | +| lines | 在按照行数截取下最大的行数，超过则截取省略 | number | `1` | +| fullWidthRecognition | 是否将全角字符的长度视为 2 来计算字符串长度 | boolean | - | diff --git a/src/components/Exception/demo/403.md b/src/components/Exception/demo/403.md index c0244ab1..aa65a713 100644 --- a/src/components/Exception/demo/403.md +++ b/src/components/Exception/demo/403.md @@ -13,7 +13,7 @@ title: 403 page with custom operations. -````jsx +```jsx import Exception from 'ant-design-pro/lib/Exception'; import { Button } from 'antd'; @@ -23,7 +23,5 @@ const actions = ( ); -ReactDOM.render( - -, mountNode); -```` +ReactDOM.render(, mountNode); +``` diff --git a/src/components/Exception/demo/404.md b/src/components/Exception/demo/404.md index c54e99d4..6510923c 100644 --- a/src/components/Exception/demo/404.md +++ b/src/components/Exception/demo/404.md @@ -13,10 +13,8 @@ title: 404 page. -````jsx +```jsx import Exception from 'ant-design-pro/lib/Exception'; -ReactDOM.render( - -, mountNode); -```` +ReactDOM.render(, mountNode); +``` diff --git a/src/components/Exception/demo/500.md b/src/components/Exception/demo/500.md index 2336e41e..b017e771 100644 --- a/src/components/Exception/demo/500.md +++ b/src/components/Exception/demo/500.md @@ -13,10 +13,8 @@ title: 500 page. -````jsx +```jsx import Exception from 'ant-design-pro/lib/Exception'; -ReactDOM.render( - -, mountNode); -```` +ReactDOM.render(, mountNode); +``` diff --git a/src/components/Exception/index.en-US.md b/src/components/Exception/index.en-US.md index 37e7e807..9e8f5166 100644 --- a/src/components/Exception/index.en-US.md +++ b/src/components/Exception/index.en-US.md @@ -8,13 +8,13 @@ Exceptions page is used to provide feedback on specific abnormal state. Usually, ## API -Property | Description | Type | Default ----------|-------------|------|-------- +| Property | Description | Type | Default | +| --- | --- | --- | --- | | backText | default return button text | ReactNode | back to home | -type | type of exception, the corresponding default `title`, `desc`, `img` will be given if set, which can be overridden by explicit setting of `title`, `desc`, `img` | Enum {'403', '404', '500'} | - -title | title | ReactNode | - -desc | supplementary description | ReactNode | - -img | the url of background image | string | - -actions | suggested operations, a default 'Home' link will show if not set | ReactNode | - -linkElement | to specify the element of link | string\|ReactElement | 'a' -redirect | redirect path | string | '/' \ No newline at end of file +| type | type of exception, the corresponding default `title`, `desc`, `img` will be given if set, which can be overridden by explicit setting of `title`, `desc`, `img` | Enum {'403', '404', '500'} | - | +| title | title | ReactNode | - | +| desc | supplementary description | ReactNode | - | +| img | the url of background image | string | - | +| actions | suggested operations, a default 'Home' link will show if not set | ReactNode | - | +| linkElement | to specify the element of link | string\|ReactElement | 'a' | +| redirect | redirect path | string | '/' | diff --git a/src/components/Exception/index.zh-CN.md b/src/components/Exception/index.zh-CN.md index 2e64399f..0769e6d7 100644 --- a/src/components/Exception/index.zh-CN.md +++ b/src/components/Exception/index.zh-CN.md @@ -9,13 +9,13 @@ order: 5 ## API -| 参数 | 说明| 类型 | 默认值 | -|-------------|------------------------------------------|-------------|-------| -| backText| 默认的返回按钮文本 | ReactNode| back to home | -| type| 页面类型，若配置，则自带对应类型默认的 `title`，`desc`，`img`，此默认设置可以被 `title`，`desc`，`img` 覆盖 | Enum {'403', '404', '500'} | - | -| title | 标题 | ReactNode| -| -| desc| 补充描述| ReactNode| -| -| img | 背景图片地址 | string| -| -| actions | 建议操作，配置此属性时默认的『返回首页』按钮不生效| ReactNode| -| +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| backText | 默认的返回按钮文本 | ReactNode | back to home | +| type | 页面类型，若配置，则自带对应类型默认的 `title`，`desc`，`img`，此默认设置可以被 `title`，`desc`，`img` 覆盖 | Enum {'403', '404', '500'} | - | +| title | 标题 | ReactNode | - | +| desc | 补充描述 | ReactNode | - | +| img | 背景图片地址 | string | - | +| actions | 建议操作，配置此属性时默认的『返回首页』按钮不生效 | ReactNode | - | | linkElement | 定义链接的元素 | string\|ReactElement | 'a' | -| redirect | 返回按钮的跳转地址 | string | '/' +| redirect | 返回按钮的跳转地址 | string | '/' | diff --git a/src/components/FooterToolbar/demo/basic.md b/src/components/FooterToolbar/demo/basic.md index 3043dbf7..196f250e 100644 --- a/src/components/FooterToolbar/demo/basic.md +++ b/src/components/FooterToolbar/demo/basic.md @@ -14,7 +14,7 @@ iframe: 400 Fixed to the footer. -````jsx +```jsx import FooterToolbar from 'ant-design-pro/lib/FooterToolbar'; import { Button } from 'antd'; @@ -39,6 +39,7 @@ ReactDOM.render( - -, mountNode); -```` \ No newline at end of file + , + mountNode +); +``` diff --git a/src/components/FooterToolbar/index.en-US.md b/src/components/FooterToolbar/index.en-US.md index 69fd80bd..9816189f 100644 --- a/src/components/FooterToolbar/index.en-US.md +++ b/src/components/FooterToolbar/index.en-US.md @@ -12,7 +12,7 @@ It is fixed at the bottom of the content area and does not move along with the s ## API -Property | Description | Type | Default ----------|-------------|------|-------- -children | toolbar content, align to the right | ReactNode | - -extra | extra information, align to the left | ReactNode | - \ No newline at end of file +| Property | Description | Type | Default | +| -------- | ------------------------------------ | --------- | ------- | +| children | toolbar content, align to the right | ReactNode | - | +| extra | extra information, align to the left | ReactNode | - | diff --git a/src/components/FooterToolbar/index.zh-CN.md b/src/components/FooterToolbar/index.zh-CN.md index 421ac08e..ff52e155 100644 --- a/src/components/FooterToolbar/index.zh-CN.md +++ b/src/components/FooterToolbar/index.zh-CN.md @@ -13,7 +13,7 @@ order: 6 ## API -参数 | 说明 | 类型 | 默认值 -----|------|-----|------ -children | 工具栏内容，向右对齐 | ReactNode | - -extra | 额外信息，向左对齐 | ReactNode | - +| 参数 | 说明 | 类型 | 默认值 | +| -------- | -------------------- | --------- | ------ | +| children | 工具栏内容，向右对齐 | ReactNode | - | +| extra | 额外信息，向左对齐 | ReactNode | - | diff --git a/src/components/GlobalFooter/demo/basic.md b/src/components/GlobalFooter/demo/basic.md index 9a06bade..798846ec 100644 --- a/src/components/GlobalFooter/demo/basic.md +++ b/src/components/GlobalFooter/demo/basic.md @@ -6,32 +6,41 @@ iframe: 400 基本页脚。 -````jsx +```jsx import GlobalFooter from 'ant-design-pro/lib/GlobalFooter'; import { Icon } from 'antd'; -const links = [{ - key: '帮助', - title: '帮助', - href: '', -}, { - key: 'github', - title: , - href: 'https://github.com/ant-design/ant-design-pro', - blankTarget: true, -}, { - key: '条款', - title: '条款', - href: '', - blankTarget: true, -}]; +const links = [ + { + key: '帮助', + title: '帮助', + href: '', + }, + { + key: 'github', + title: , + href: 'https://github.com/ant-design/ant-design-pro', + blankTarget: true, + }, + { + key: '条款', + title: '条款', + href: '', + blankTarget: true, + }, +]; -const copyright =
Copyright 2017 蚂蚁金服体验技术部出品
; +const copyright = ( +
+ Copyright 2017 蚂蚁金服体验技术部出品 +
+); ReactDOM.render(
-
-, mountNode); -```` +
, + mountNode +); +``` diff --git a/src/components/GlobalFooter/index.md b/src/components/GlobalFooter/index.md index 96e04fee..5d6058f6 100644 --- a/src/components/GlobalFooter/index.md +++ b/src/components/GlobalFooter/index.md @@ -9,7 +9,7 @@ order: 7 ## API -参数 | 说明 | 类型 | 默认值 -----|------|-----|------ -links | 链接数据 | array<{ title: ReactNode, href: string, blankTarget?: boolean }> | - -copyright | 版权信息 | ReactNode | - +| 参数 | 说明 | 类型 | 默认值 | +| --------- | -------- | ---------------------------------------------------------------- | ------ | +| links | 链接数据 | array<{ title: ReactNode, href: string, blankTarget?: boolean }> | - | +| copyright | 版权信息 | ReactNode | - | diff --git a/src/components/HeaderSearch/demo/basic.md b/src/components/HeaderSearch/demo/basic.md index 2139207c..ec969988 100644 --- a/src/components/HeaderSearch/demo/basic.md +++ b/src/components/HeaderSearch/demo/basic.md @@ -5,7 +5,7 @@ title: 全局搜索 通常放置在导航工具条右侧。（点击搜索图标预览效果） -````jsx +```jsx import HeaderSearch from 'ant-design-pro/lib/HeaderSearch'; ReactDOM.render( @@ -22,13 +22,14 @@ ReactDOM.render( { + onSearch={value => { console.log('input', value); // eslint-disable-line }} - onPressEnter={(value) => { + onPressEnter={value => { console.log('enter', value); // eslint-disable-line }} /> - -, mountNode); -```` + , + mountNode +); +``` diff --git a/src/components/HeaderSearch/index.en-US.md b/src/components/HeaderSearch/index.en-US.md index 9f2b5e8a..c9906e76 100644 --- a/src/components/HeaderSearch/index.en-US.md +++ b/src/components/HeaderSearch/index.en-US.md @@ -9,14 +9,14 @@ Usually placed as an entry to the global search, placed on the right side of the ## API -参数 | 说明 | 类型 | 默认值 -----|------|-----|------ -placeholder | placeholder text | string | - -dataSource | current list of prompts | string[] | - -onSearch | Called when searching items. | function(value) | - -onChange | Called when select an option or input value change, or value of input is changed | function(value) | - -onSelect | Called when a option is selected. param is option's value and option instance. | function(value) | - -onPressEnter | Callback when pressing Enter | function(value) | - -onVisibleChange | Show or hide the callback of the text box | function(value) |- -defaultOpen | The input box is displayed for the first time. | boolean | false -open | The input box is displayed | boolean |false \ No newline at end of file +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| placeholder | placeholder text | string | - | +| dataSource | current list of prompts | string[] | - | +| onSearch | Called when searching items. | function(value) | - | +| onChange | Called when select an option or input value change, or value of input is changed | function(value) | - | +| onSelect | Called when a option is selected. param is option's value and option instance. | function(value) | - | +| onPressEnter | Callback when pressing Enter | function(value) | - | +| onVisibleChange | Show or hide the callback of the text box | function(value) | - | +| defaultOpen | The input box is displayed for the first time. | boolean | false | +| open | The input box is displayed | boolean | false | diff --git a/src/components/HeaderSearch/index.zh-CN.md b/src/components/HeaderSearch/index.zh-CN.md index 83e74887..8561eee8 100644 --- a/src/components/HeaderSearch/index.zh-CN.md +++ b/src/components/HeaderSearch/index.zh-CN.md @@ -9,14 +9,14 @@ order: 8 ## API -参数 | 说明 | 类型 | 默认值 -----|------|-----|------ -placeholder | 占位文字 | string | - -dataSource | 当前提示内容列表 | string[] | - -onSearch | 搜索补全项的时候调用 | function(value) | - -onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | - -onSelect | 被选中时调用，参数为选中项的 value 值 | function(value) | - -onPressEnter | 按下回车时的回调 | function(value) | - -onVisibleChange | 显示或隐藏文本框的回调 | function(value) |- -defaultOpen | 输入框首次显示是否显示 | boolean | false -open | 控制输入框是否显示 | boolean |false \ No newline at end of file +| 参数 | 说明 | 类型 | 默认值 | +| --------------- | ------------------------------------------------- | --------------- | ------ | +| placeholder | 占位文字 | string | - | +| dataSource | 当前提示内容列表 | string[] | - | +| onSearch | 搜索补全项的时候调用 | function(value) | - | +| onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | - | +| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value) | - | +| onPressEnter | 按下回车时的回调 | function(value) | - | +| onVisibleChange | 显示或隐藏文本框的回调 | function(value) | - | +| defaultOpen | 输入框首次显示是否显示 | boolean | false | +| open | 控制输入框是否显示 | boolean | false | diff --git a/src/components/Login/demo/basic.md b/src/components/Login/demo/basic.md index 05475384..28cce5d5 100644 --- a/src/components/Login/demo/basic.md +++ b/src/components/Login/demo/basic.md @@ -7,7 +7,7 @@ title: Support login with account and mobile number. -````jsx +```jsx import Login from 'ant-design-pro/lib/Login'; import { Alert, Checkbox } from 'antd'; @@ -30,27 +30,23 @@ class LoginDemo extends React.Component { notice: '', }, () => { - if ( - !err && - (values.username !== 'admin' || values.password !== '888888') - ) { + if (!err && (values.username !== 'admin' || values.password !== '888888')) { setTimeout(() => { this.setState({ - notice: - 'The combination of username and password is incorrect!', + notice: 'The combination of username and password is incorrect!', }); }, 500); } - }, + } ); } }; - onTabChange = (key) => { + onTabChange = key => { this.setState({ type: key, }); }; - changeAutoLogin = (e) => { + changeAutoLogin = e => { this.setState({ autoLogin: e.target.checked, }); @@ -78,16 +74,10 @@ class LoginDemo extends React.Component { - console.log('Get captcha!')} - name="captcha" - /> + console.log('Get captcha!')} name="captcha" />
- + Keep me logged in @@ -111,7 +101,7 @@ class LoginDemo extends React.Component { } ReactDOM.render(, mountNode); -```` +```