Skip to content

GitLab

A
ant-design-pro
Commit ab35aa00 authored by 陈帅's avatar 陈帅
Browse files
Options

prettier md

parent cc5c8155
Hide whitespace changes
Inline Side-by-side
Showing with 752 additions and 752 deletions
.prettierignore
View file @ ab35aa00
**/*.md
**/*.svg
package.json
.umi
......
.prettierrc
View file @ ab35aa00
......@@ -2,6 +2,7 @@
"singleQuote": true,
"trailingComma": "es5",
"printWidth": 100,
"proseWrap": "never",
"overrides": [
{
"files": ".prettierrc",
......
scripts/getPrettierFiles.js
View file @ ab35aa00
......@@ -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;
}
......
src/components/Authorized/demo/AuthorizedArray.md
View file @ ab35aa00
---
order: 1
title:
title:
zh-CN: 使用数组作为参数
en-US: Use Array as a parameter
---
......@@ -18,6 +18,6 @@ ReactDOM.render(
<Authorized authority={['user', 'admin']} noMatch={noMatch}>
<Alert message="Use Array as a parameter passed!" type="success" showIcon />
</Authorized>,
mountNode,
mountNode
);
```
src/components/Authorized/demo/AuthorizedFunction.md
View file @ ab35aa00
---
order: 2
title:
title:
zh-CN: 使用方法作为参数
en-US: Use function as a parameter
---
......@@ -20,12 +20,8 @@ const havePermission = () => {
ReactDOM.render(
<Authorized authority={havePermission} noMatch={noMatch}>
<Alert
message="Use Function as a parameter passed!"
type="success"
showIcon
/>
<Alert message="Use Function as a parameter passed!" type="success" showIcon />
</Authorized>,
mountNode,
mountNode
);
```
src/components/Authorized/demo/basic.md
View file @ ab35aa00
---
order: 0
title:
title:
zh-CN: 基本使用
en-US: Basic use
---
......@@ -20,6 +20,6 @@ ReactDOM.render(
<Alert message="user Passed!" type="success" showIcon />
</Authorized>
</div>,
mountNode,
mountNode
);
```
src/components/Authorized/demo/secured.md
View file @ ab35aa00
---
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 (
<Alert message="user Passed!" type="success" showIcon />
)
return <Alert message="user Passed!" type="success" showIcon />;
}
}
ReactDOM.render(
<div>
<TestSecuredString />
</div>,
mountNode,
mountNode
);
```
src/components/Authorized/index.md
View file @ ab35aa00
......@@ -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 | <Exception type="403" /> |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| authority | 准入权限/权限判断 | `string | Promise | (currentAuthority) => boolean | Promise` | - |
| error | 权限异常时渲染元素 | ReactNode | <Exception type="403" /> |
### 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 | - |
src/components/AvatarList/demo/maxLength.md
View file @ ab35aa00
---
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(
<AvatarList size="mini" maxLength={3} excessItemsStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>
<AvatarList.Item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
<AvatarList.Item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
<AvatarList.Item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
<AvatarList.Item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
<AvatarList.Item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
<AvatarList.Item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
</AvatarList>
, mountNode);
````
<AvatarList
size="mini"
maxLength={3}
excessItemsStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
>
<AvatarList.Item
tips="Jake"
src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"
/>
<AvatarList.Item
tips="Andy"
src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"
/>
<AvatarList.Item
tips="Niko"
src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
/>
<AvatarList.Item
tips="Niko"
src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
/>
<AvatarList.Item
tips="Niko"
src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
/>
<AvatarList.Item
tips="Niko"
src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
/>
</AvatarList>,
mountNode
);
```
src/components/AvatarList/demo/simple.md
View file @ ab35aa00
---
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(
<AvatarList size="mini">
<AvatarList.Item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
<AvatarList.Item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
<AvatarList.Item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
</AvatarList>
, mountNode);
````
<AvatarList.Item
tips="Jake"
src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"
/>
<AvatarList.Item
tips="Andy"
src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"
/>
<AvatarList.Item
tips="Niko"
src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
/>
</AvatarList>,
mountNode
);
```
src/components/AvatarList/index.en-US.md
View file @ ab35aa00
......@@ -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
......
src/components/AvatarList/index.zh-CN.md
View file @ ab35aa00
......@@ -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 | - |
src/components/Charts/demo/bar.md
View file @ ab35aa00
......@@ -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(
<Bar
height={200}
title="销售额趋势"
data={salesData}
/>
, mountNode);
````
ReactDOM.render(<Bar height={200} title="销售额趋势" data={salesData} />, mountNode);
```
src/components/Charts/demo/chart-card.md
View file @ ab35aa00
......@@ -21,26 +21,19 @@ ReactDOM.render(
<Icon type="info-circle-o" />
</Tooltip>
}
total={() => (
<span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />
)}
footer={
<Field label="日均销售额" value={numeral(12423).format("0,0")} />
}
total={() => <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />}
footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
contentHeight={46}
>
<span>
周同比
<Trend flag="up" style={{ marginLeft: 8, color: "rgba(0,0,0,.85)" }}>
<Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>
12%
</Trend>
</span>
<span style={{ marginLeft: 16 }}>
日环比
<Trend
flag="down"
style={{ marginLeft: 8, color: "rgba(0,0,0,.85)" }}
>
<Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>
11%
</Trend>
</span>
......@@ -61,12 +54,8 @@ ReactDOM.render(
<Icon type="info-circle-o" />
</Tooltip>
}
total={() => (
<span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />
)}
footer={
<Field label="日均销售额" value={numeral(12423).format("0,0")} />
}
total={() => <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />}
footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
/>
</Col>
<Col span={24} style={{ marginTop: 24 }}>
......@@ -84,12 +73,10 @@ ReactDOM.render(
<Icon type="info-circle-o" />
</Tooltip>
}
total={() => (
<span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />
)}
total={() => <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />}
/>
</Col>
</Row>,
mountNode,
mountNode
);
```
src/components/Charts/demo/gauge.md
View file @ ab35aa00
---
order: 7
title: 仪表盘
title: 仪表盘
---
仪表盘是一种进度展示方式，可以更直观的展示当前的进展情况，通常也可表示占比。
````jsx
```jsx
import { Gauge } from 'ant-design-pro/lib/Charts';
ReactDOM.render(
<Gauge
title="核销率"
height={164}
percent={87}
/>
, mountNode);
````
ReactDOM.render(<Gauge title="核销率" height={164} percent={87} />, mountNode);
```
src/components/Charts/demo/mini-area.md
View file @ ab35aa00
......@@ -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(
<MiniArea
line
color="#cceafe"
height={45}
data={visitData}
/>
, mountNode);
````
ReactDOM.render(<MiniArea line color="#cceafe" height={45} data={visitData} />, mountNode);
```
src/components/Charts/demo/mini-bar.md
View file @ ab35aa00
......@@ -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(
<MiniBar
height={45}
data={visitData}
/>
, mountNode);
````
ReactDOM.render(<MiniBar height={45} data={visitData} />, mountNode);
```
src/components/Charts/demo/mini-pie.md
View file @ ab35aa00
......@@ -3,14 +3,10 @@ order: 6
title: 迷你饼状图
---
通过简化 `Pie` 属性的设置，可以快速的实现极简的饼状图，可配合 `ChartCard` 组合展
现更多业务场景。
通过简化 `Pie` 属性的设置，可以快速的实现极简的饼状图，可配合 `ChartCard` 组合展现更多业务场景。
```jsx
import { Pie } from 'ant-design-pro/lib/Charts';
ReactDOM.render(
<Pie percent={28} subTitle="中式快餐" total="28%" height={140} />,
mountNode
);
ReactDOM.render(<Pie percent={28} subTitle="中式快餐" total="28%" height={140} />, mountNode);
```
src/components/Charts/demo/mini-progress.md
View file @ ab35aa00
......@@ -3,10 +3,8 @@ order: 3
title: 迷你进度条
---
````jsx
```jsx
import { MiniProgress } from 'ant-design-pro/lib/Charts';
ReactDOM.render(
<MiniProgress percent={78} strokeWidth={8} target={80} />
, mountNode);
````
ReactDOM.render(<MiniProgress percent={78} strokeWidth={8} target={80} />, mountNode);
```
src/components/Charts/demo/mix.md
View file @ ab35aa00
......@@ -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(
<Row>
<Col span={24}>
<ChartCard
title="搜索用户数量"
total={numeral(8846).format('0,0')}
contentHeight={134}
>
<ChartCard title="搜索用户数量" total={numeral(8846).format('0,0')} contentHeight={134}>
<NumberInfo
subTitle={<span>本周访问</span>}
total={numeral(12321).format('0,0')}
status="up"
subTotal={17.1}
/>
<MiniArea
line
height={45}
data={visitData}
/>
<MiniArea line height={45} data={visitData} />
</ChartCard>
</Col>
<Col span={24} style={{ marginTop: 24 }}>
<ChartCard
title="访问量"
action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
action={
<Tooltip title="指标说明">
<Icon type="info-circle-o" />
</Tooltip>
}
total={numeral(8846).format('0,0')}
footer={<Field label="日访问量" value={numeral(1234).format('0,0')} />}
contentHeight={46}
>
<MiniBar
height={46}
data={visitData}
/>
<MiniBar height={46} data={visitData} />
</ChartCard>
</Col>
<Col span={24} style={{ marginTop: 24 }}>
<ChartCard
title="线上购物转化率"
action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
action={
<Tooltip title="指标说明">
<Icon type="info-circle-o" />
</Tooltip>
}
total="78%"
footer={
<div>
<span>
周同比
<Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>12%</Trend>
<Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>
12%
</Trend>
</span>
<span style={{ marginLeft: 16 }}>
日环比
<Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>11%</Trend>
<Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>
11%
</Trend>
</span>
</div>
}
......@@ -79,6 +80,7 @@ ReactDOM.render(
<MiniProgress percent={78} strokeWidth={8} target={80} />
</ChartCard>
</Col>
</Row>
, mountNode);
````
</Row>,
mountNode
);
```
src/components/Charts/demo/pie.md
View file @ ab35aa00
......@@ -41,7 +41,7 @@ ReactDOM.render(
total={() => (
<span
dangerouslySetInnerHTML={{
__html: yuan(salesPieData.reduce((pre, now) => now.y + pre, 0))
__html: yuan(salesPieData.reduce((pre, now) => now.y + pre, 0)),
}}
/>
)}
......@@ -49,6 +49,6 @@ ReactDOM.render(
valueFormat={val => <span dangerouslySetInnerHTML={{ __html: yuan(val) }} />}
height={294}
/>,
mountNode,
mountNode
);
```
src/components/Charts/demo/radar.md
View file @ ab35aa00
......@@ -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(
<ChartCard title="数据比例">
<Radar
hasLegend
height={286}
data={radarData}
/>
</ChartCard>
, mountNode);
````
<Radar hasLegend height={286} data={radarData} />
</ChartCard>,
mountNode
);
```
src/components/Charts/demo/tag-cloud.md
View file @ ab35aa00
......@@ -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(
<TagCloud
data={tags}
height={200}
/>
, mountNode);
````
ReactDOM.render(<TagCloud data={tags} height={200} />, mountNode);
```
src/components/Charts/demo/timeline-chart.md
View file @ ab35aa00
......@@ -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(
<TimelineChart
height={200}
data={chartData}
titleMap={{ y1: '客流量', y2: '支付笔数' }}
/>
, mountNode);
````
<TimelineChart height={200} data={chartData} titleMap={{ y1: '客流量', y2: '支付笔数' }} />,
mountNode
);
```
src/components/Charts/demo/waterwave.md
View file @ ab35aa00
---
order: 8
title: 水波图
title: 水波图
---
水波图是一种比例的展示方式，可以更直观的展示关键值的占比。
````jsx
```jsx
import { WaterWave } from 'ant-design-pro/lib/Charts';
ReactDOM.render(
<div style={{ textAlign: 'center' }}>
<WaterWave
height={161}
title="补贴资金剩余"
percent={34}
/>
</div>
, mountNode);
````
<WaterWave height={161} title="补贴资金剩余" percent={34} />
</div>,
mountNode
);
```
src/components/Charts/index.md
View file @ ab35aa00
......@@ -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<name, value\> | - |
| height | 高度值 | number | - |
| 参数 | 说明 | 类型 | 默认值 |
| ------ | ------ | ------------------- | ------ |
| data | 标题 | Array<name, value\> | - |
| height | 高度值 | number | - |
### TimelineChart
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| data | 标题 | Array<x, y1, y2\> | - |
| titleMap | 指标别名 | Object{y1: '客流量', y2: '支付笔数'} | - |
| height | 高度值 | number | 400 |
| 参数 | 说明 | 类型 | 默认值 |
| -------- | -------- | ------------------------------------ | ------ |
| data | 标题 | Array<x, y1, y2\> | - |
| titleMap | 指标别名 | Object{y1: '客流量', y2: '支付笔数'} | - |
| height | 高度值 | number | 400 |
### Field
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| label | 标题 | ReactNode\|string | - |
| value | 值 | ReactNode\|string | - |
| 参数 | 说明 | 类型 | 默认值 |
| ----- | ---- | ----------------- | ------ |
| label | 标题 | ReactNode\|string | - |
| value | 值 | ReactNode\|string | - |
src/components/CountDown/demo/simple.md
View file @ ab35aa00
......@@ -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(
<CountDown style={{ fontSize: 20 }} target={targetTime} />
, mountNode);
````
ReactDOM.render(<CountDown style={{ fontSize: 20 }} target={targetTime} />, mountNode);
```
src/components/CountDown/index.en-US.md
View file @ ab35aa00
......@@ -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 | - |
src/components/CountDown/index.zh-CN.md
View file @ ab35aa00
---
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 | - |
src/components/DescriptionList/demo/basic.md
View file @ ab35aa00
......@@ -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(
<DescriptionList size="large" title="title">
<Description term="Firefox">
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.
</Description>
<Description term="Firefox">
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.
</Description>
<Description term="Firefox">
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.
</Description>
</DescriptionList>
, mountNode);
````
</DescriptionList>,
mountNode
);
```
src/components/DescriptionList/demo/vertical.md
View file @ ab35aa00
......@@ -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(
<DescriptionList size="large" title="title" layout="vertical">
<Description term="Firefox">
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.
</Description>
<Description term="Firefox">
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.
</Description>
<Description term="Firefox">
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.
</Description>
</DescriptionList>
, mountNode);
````
</DescriptionList>,
mountNode
);
```
src/components/DescriptionList/index.en-US.md
View file @ ab35aa00
......@@ -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 | - |
src/components/DescriptionList/index.zh-CN.md
View file @ ab35aa00
......@@ -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 | - |
src/components/Ellipsis/demo/line.md
View file @ ab35aa00
---
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 = <p>There were injuries alleged in three <a href="#cover">cases in 2015</a>, 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.</p>;
const article = (
<p>
There were injuries alleged in three <a href="#cover">cases in 2015</a>, 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.
</p>
);
ReactDOM.render(
<div style={{ width: 200 }}>
<Ellipsis tooltip lines={3}>{article}</Ellipsis>
</div>
, mountNode);
````
<Ellipsis tooltip lines={3}>
{article}
</Ellipsis>
</div>,
mountNode
);
```
src/components/Ellipsis/demo/number.md
View file @ ab35aa00
---
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(
<div>
<Ellipsis length={100}>{article}</Ellipsis>
<h4 style={{ marginTop: 24 }}>Show Tooltip</h4>
<Ellipsis length={100} tooltip>{article}</Ellipsis>
</div>
, mountNode);
````
<Ellipsis length={100} tooltip>
{article}
</Ellipsis>
</div>,
mountNode
);
```
src/components/Ellipsis/index.en-US.md
View file @ ab35aa00
---
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 | - |
src/components/Ellipsis/index.zh-CN.md
View file @ ab35aa00
......@@ -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 | - |
src/components/Exception/demo/403.md
View file @ ab35aa00
......@@ -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 = (
<Button>Detail</Button>
</div>
);
ReactDOM.render(
<Exception type="403" actions={actions} />
, mountNode);
````
ReactDOM.render(<Exception type="403" actions={actions} />, mountNode);
```
src/components/Exception/demo/404.md
View file @ ab35aa00
......@@ -13,10 +13,8 @@ title:
404 page.
````jsx
```jsx
import Exception from 'ant-design-pro/lib/Exception';
ReactDOM.render(
<Exception type="404" />
, mountNode);
````
ReactDOM.render(<Exception type="404" />, mountNode);
```
src/components/Exception/demo/500.md
View file @ ab35aa00
......@@ -13,10 +13,8 @@ title:
500 page.
````jsx
```jsx
import Exception from 'ant-design-pro/lib/Exception';
ReactDOM.render(
<Exception type="500" />
, mountNode);
````
ReactDOM.render(<Exception type="500" />, mountNode);
```
src/components/Exception/index.en-US.md
View file @ ab35aa00
......@@ -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 | '/' |
src/components/Exception/index.zh-CN.md
View file @ ab35aa00
......@@ -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 | '/' |
src/components/FooterToolbar/demo/basic.md
View file @ ab35aa00
......@@ -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(
<Button>Cancel</Button>
<Button type="primary">Submit</Button>
</FooterToolbar>
</div>
, mountNode);
````
\ No newline at end of file
</div>,
mountNode
);
```
src/components/FooterToolbar/index.en-US.md
View file @ ab35aa00
......@@ -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 | - |
src/components/FooterToolbar/index.zh-CN.md
View file @ ab35aa00
......@@ -13,7 +13,7 @@ order: 6
## API
参数 | 说明 | 类型 | 默认值
----|------|-----|------
children | 工具栏内容，向右对齐 | ReactNode | -
extra | 额外信息，向左对齐 | ReactNode | -
| 参数 | 说明 | 类型 | 默认值 |
| -------- | -------------------- | --------- | ------ |
| children | 工具栏内容，向右对齐 | ReactNode | - |
| extra | 额外信息，向左对齐 | ReactNode | - |
src/components/GlobalFooter/demo/basic.md
View file @ ab35aa00
......@@ -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: <Icon type="github" />,
href: 'https://github.com/ant-design/ant-design-pro',
blankTarget: true,
}, {
key: '条款',
title: '条款',
href: '',
blankTarget: true,
}];
const links = [
{
key: '帮助',
title: '帮助',
href: '',
},
{
key: 'github',
title: <Icon type="github" />,
href: 'https://github.com/ant-design/ant-design-pro',
blankTarget: true,
},
{
key: '条款',
title: '条款',
href: '',
blankTarget: true,
},
];
const copyright = <div>Copyright <Icon type="copyright" /> 2017 蚂蚁金服体验技术部出品</div>;
const copyright = (
<div>
Copyright <Icon type="copyright" /> 2017 蚂蚁金服体验技术部出品
</div>
);
ReactDOM.render(
<div style={{ background: '#f5f5f5', overflow: 'hidden' }}>
<div style={{ height: 280 }} />
<GlobalFooter links={links} copyright={copyright} />
</div>
, mountNode);
````
</div>,
mountNode
);
```
src/components/GlobalFooter/index.md
View file @ ab35aa00
......@@ -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 | - |
src/components/HeaderSearch/demo/basic.md
View file @ ab35aa00
......@@ -5,7 +5,7 @@ title: 全局搜索
通常放置在导航工具条右侧。（点击搜索图标预览效果）
````jsx
```jsx
import HeaderSearch from 'ant-design-pro/lib/HeaderSearch';
ReactDOM.render(
......@@ -22,13 +22,14 @@ ReactDOM.render(
<HeaderSearch
placeholder="站内搜索"
dataSource={['搜索提示一', '搜索提示二', '搜索提示三']}
onSearch={(value) => {
onSearch={value => {
console.log('input', value); // eslint-disable-line
}}
onPressEnter={(value) => {
onPressEnter={value => {
console.log('enter', value); // eslint-disable-line
}}
/>
</div>
, mountNode);
````
</div>,
mountNode
);
```
src/components/HeaderSearch/index.en-US.md
View file @ ab35aa00
......@@ -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 |
src/components/HeaderSearch/index.zh-CN.md
View file @ ab35aa00
......@@ -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 |
src/components/Login/demo/basic.md
View file @ ab35aa00
......@@ -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 {
</Tab>
<Tab key="tab2" tab="Mobile">
<Mobile name="mobile" />
<Captcha
onGetCaptcha={() => console.log('Get captcha!')}
name="captcha"
/>
<Captcha onGetCaptcha={() => console.log('Get captcha!')} name="captcha" />
</Tab>
<div>
<Checkbox
checked={this.state.autoLogin}
onChange={this.changeAutoLogin}
>
<Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>
Keep me logged in
</Checkbox>
<a style={{ float: 'right' }} href="">
......@@ -111,7 +101,7 @@ class LoginDemo extends React.Component {
}
ReactDOM.render(<LoginDemo />, mountNode);
````
```
<style>
#scaffold-src-components-Login-demo-basic .login-warp{
......
src/components/Login/index.en-US.md
View file @ ab35aa00
......@@ -10,25 +10,25 @@ Support multiple common ways of login with built-in controls. You can choose you
### Login
Property | Description | Type | Default
----|------|-----|------
defaultActiveKey | default key to activate the tab panel | String | -
onTabChange | callback on changing tabs | (key) => void | -
onSubmit | callback on submit | (err, values) => void | -
| Property | Description | Type | Default |
| ---------------- | ------------------------------------- | --------------------- | ------- |
| defaultActiveKey | default key to activate the tab panel | String | - |
| onTabChange | callback on changing tabs | (key) => void | - |
| onSubmit | callback on submit | (err, values) => void | - |
### Login.Tab
Property | Description | Type | Default
----|------|-----|------
key | key of the tab | String | -
tab | displayed text of the tab | ReactNode | -
| Property | Description | Type | Default |
| -------- | ------------------------- | --------- | ------- |
| key | key of the tab | String | - |
| tab | displayed text of the tab | ReactNode | - |
### Login.UserName
Property | Description | Type | Default
----|------|-----|------
name | name of the control, also the key of the submitted data | String | -
rules | validation rules, same with [option.rules](getFieldDecorator(id, options)) in Form getFieldDecorator(id, options) | object[] | -
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| name | name of the control, also the key of the submitted data | String | - |
| rules | validation rules, same with [option.rules](getFieldDecorator(id, options)) in Form getFieldDecorator(id, options) | object[] | - |
Apart from the above properties, Login.Username also support all properties of antd.Input, together with the default values of basic settings, such as _placeholder_, _size_ and _prefix_. All of these default values can be over-written.
......@@ -36,14 +36,14 @@ Apart from the above properties, Login.Username also support all properties of a
### Login.Captcha
Property | Description | Type | Default
----|------|-----|------
onGetCaptcha | callback on getting a new Captcha | () => (void \| false \| Promise) | -
countDown | count down | number |-
buttonText | text on getting a new Captcha | ReactNode | '获取验证码'
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| onGetCaptcha | callback on getting a new Captcha | () => (void \| false \| Promise) | - |
| countDown | count down | number | - |
| buttonText | text on getting a new Captcha | ReactNode | '获取验证码' |
Apart from the above properties, _Login.Captcha_ support the same properties with _Login.UserName_.
### Login.Submit
Support all properties of _antd.Button_.
\ No newline at end of file
Support all properties of _antd.Button_.
src/components/Login/index.zh-CN.md
View file @ ab35aa00
......@@ -11,36 +11,37 @@ order: 15
### Login
参数 | 说明 | 类型 | 默认值
----|------|-----|------
defaultActiveKey | 默认激活 tab 面板的 key | String | -
onTabChange | 切换页签时的回调 | (key) => void | -
onSubmit | 点击提交时的回调 | (err, values) => void | -
| 参数 | 说明 | 类型 | 默认值 |
| ---------------- | ----------------------- | --------------------- | ------ |
| defaultActiveKey | 默认激活 tab 面板的 key | String | - |
| onTabChange | 切换页签时的回调 | (key) => void | - |
| onSubmit | 点击提交时的回调 | (err, values) => void | - |
### Login.Tab
参数 | 说明 | 类型 | 默认值
----|------|-----|------
key | 对应选项卡的 key | String | -
tab | 选项卡头显示文字 | ReactNode | -
| 参数 | 说明 | 类型 | 默认值 |
| ---- | ---------------- | --------- | ------ |
| key | 对应选项卡的 key | String | - |
| tab | 选项卡头显示文字 | ReactNode | - |
### Login.UserName
参数 | 说明 | 类型 | 默认值
----|------|-----|------
name | 控件标记，提交数据中同样以此为 key | String | -
rules | 校验规则，同 Form getFieldDecorator(id, options) 中 [option.rules 的规则](getFieldDecorator(id, options)) | object[] | -
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| name | 控件标记，提交数据中同样以此为 key | String | - |
| rules | 校验规则，同 Form getFieldDecorator(id, options) 中 [option.rules 的规则](getFieldDecorator(id, options)) | object[] | - |
除上述属性以外，Login.UserName 还支持 antd.Input 的所有属性，并且自带默认的基础配置，包括 `placeholder` `size` `prefix` 等，这些基础配置均可被覆盖。
## Login.Password、Login.Mobile 同 Login.UserName
### Login.Captcha
参数 | 说明 | 类型 | 默认值
----|------|-----|------
onGetCaptcha | 点击获取校验码的回调 | () => (void \| false \| Promise) | -
countDown | 倒计时 | number |-
buttonText | 点击获取校验码的说明文字 | ReactNode | '获取验证码'
| 参数 | 说明 | 类型 | 默认值 |
| ------------ | ------------------------ | -------------------------------- | ------------ |
| onGetCaptcha | 点击获取校验码的回调 | () => (void \| false \| Promise) | - |
| countDown | 倒计时 | number | - |
| buttonText | 点击获取校验码的说明文字 | ReactNode | '获取验证码' |
除上述属性以外，Login.Captcha 支持的属性与 Login.UserName 相同。
......
src/components/NoticeIcon/demo/basic.md
View file @ ab35aa00
......@@ -5,8 +5,8 @@ title: 通知图标
通常用在导航工具栏上。
````jsx
```jsx
import NoticeIcon from 'ant-design-pro/lib/NoticeIcon';
ReactDOM.render(<NoticeIcon count={5} />, mountNode);
````
```
src/components/NoticeIcon/demo/popover.md
View file @ ab35aa00
......@@ -9,90 +9,103 @@ title: 带浮层卡片
import NoticeIcon from 'ant-design-pro/lib/NoticeIcon';
import { Tag } from 'antd';
const data = [{
id: '000000001',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
title: '你收到了 14 份新周报',
datetime: '2017-08-09',
type: 'notification',
}, {
id: '000000002',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
title: '你推荐的 曲妮妮 已通过第三轮面试',
datetime: '2017-08-08',
type: 'notification',
}, {
id: '000000003',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
title: '这种模板可以区分多种通知类型',
datetime: '2017-08-07',
read: true,
type: 'notification',
}, {
id: '000000004',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
title: '左侧图标用于区分不同的类型',
datetime: '2017-08-07',
type: 'notification',
}, {
id: '000000005',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
title: '内容不要超过两行字，超出时自动截断',
datetime: '2017-08-07',
type: 'notification',
}, {
id: '000000006',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
title: '曲丽丽 评论了你',
description: '描述信息描述信息描述信息',
datetime: '2017-08-07',
type: 'message',
clickClose: true,
}, {
id: '000000007',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
title: '朱偏右 回复了你',
description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
datetime: '2017-08-07',
type: 'message',
clickClose: true,
}, {
id: '000000008',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
title: '标题',
description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
datetime: '2017-08-07',
type: 'message',
clickClose: true,
}, {
id: '000000009',
title: '任务名称',
description: '任务需要在 2017-01-12 20:00 前启动',
extra: '未开始',
status: 'todo',
type: 'event',
}, {
id: '000000010',
title: '第三方紧急代码变更',
description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
extra: '马上到期',
status: 'urgent',
type: 'event',
}, {
id: '000000011',
title: '信息安全考试',
description: '指派竹尔于 2017-01-09 前完成更新并发布',
extra: '已耗时 8 天',
status: 'doing',
type: 'event',
}, {
id: '000000012',
title: 'ABCD 版本发布',
description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
extra: '进行中',
status: 'processing',
type: 'event',
}];
const data = [
{
id: '000000001',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
title: '你收到了 14 份新周报',
datetime: '2017-08-09',
type: 'notification',
},
{
id: '000000002',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
title: '你推荐的 曲妮妮 已通过第三轮面试',
datetime: '2017-08-08',
type: 'notification',
},
{
id: '000000003',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
title: '这种模板可以区分多种通知类型',
datetime: '2017-08-07',
read: true,
type: 'notification',
},
{
id: '000000004',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
title: '左侧图标用于区分不同的类型',
datetime: '2017-08-07',
type: 'notification',
},
{
id: '000000005',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
title: '内容不要超过两行字，超出时自动截断',
datetime: '2017-08-07',
type: 'notification',
},
{
id: '000000006',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
title: '曲丽丽 评论了你',
description: '描述信息描述信息描述信息',
datetime: '2017-08-07',
type: 'message',
clickClose: true,
},
{
id: '000000007',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
title: '朱偏右 回复了你',
description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
datetime: '2017-08-07',
type: 'message',
clickClose: true,
},
{
id: '000000008',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
title: '标题',
description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
datetime: '2017-08-07',
type: 'message',
clickClose: true,
},
{
id: '000000009',
title: '任务名称',
description: '任务需要在 2017-01-12 20:00 前启动',
extra: '未开始',
status: 'todo',
type: 'event',
},
{
id: '000000010',
title: '第三方紧急代码变更',
description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
extra: '马上到期',
status: 'urgent',
type: 'event',
},
{
id: '000000011',
title: '信息安全考试',
description: '指派竹尔于 2017-01-09 前完成更新并发布',
extra: '已耗时 8 天',
status: 'doing',
type: 'event',
},
{
id: '000000012',
title: 'ABCD 版本发布',
description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
extra: '进行中',
status: 'processing',
type: 'event',
},
];
function onItemClick(item, tabProps) {
console.log(item, tabProps);
......
src/components/NoticeIcon/index.en-US.md
View file @ ab35aa00
---
title: NoticeIcon
subtitle:
subtitle:
cols: 1
order: 9
---
......@@ -9,39 +9,39 @@ Used in navigation toolbar as a unified notification center for the entire produ
## API
Property | Description | Type | Default
----|------|-----|------
count | Total number of messages | number | -
bell | Change the bell Icon | ReactNode | `<Icon type='bell' />`
loading | Popup card loading status | boolean | `false`
onClear | Click to clear button the callback | function(tabName) | -
onItemClick | Click on the list item's callback | function(item, tabProps) | -
onPopupVisibleChange | Popup Card Showing or Hiding Callbacks | function(visible) | -
onTabChange | Switching callbacks for tabs | function(tabTitle) | -
onViewMore | Callback of click for view more | function(tabProps, event) | -
popupVisible | Popup card display state | boolean | -
locale | Default message text | Object | `{ emptyText: 'No notifications', clear: 'Clear', viewMore: 'Loading more' }`
clearClose | Close menu after clear | boolean | `false`
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| count | Total number of messages | number | - |
| bell | Change the bell Icon | ReactNode | `<Icon type='bell' />` |
| loading | Popup card loading status | boolean | `false` |
| onClear | Click to clear button the callback | function(tabName) | - |
| onItemClick | Click on the list item's callback | function(item, tabProps) | - |
| onPopupVisibleChange | Popup Card Showing or Hiding Callbacks | function(visible) | - |
| onTabChange | Switching callbacks for tabs | function(tabTitle) | - |
| onViewMore | Callback of click for view more | function(tabProps, event) | - |
| popupVisible | Popup card display state | boolean | - |
| locale | Default message text | Object | `{ emptyText: 'No notifications', clear: 'Clear', viewMore: 'Loading more' }` |
| clearClose | Close menu after clear | boolean | `false` |
### NoticeIcon.Tab
Property | Description | Type | Default
----|------|-----|------
count | Unread messages count of this tab | number | list.length
emptyText | Message text when list is empty | ReactNode | -
emptyImage | Image when list is empty | string | -
list | List data, format refer to the following table | Array | `[]`
showClear | Clear button display status | boolean | `true`
showViewMore | View more button display status | boolean | `false`
title | header for message Tab, the actual text is `locale[title] || title` | string | -
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| count | Unread messages count of this tab | number | list.length |
| emptyText | Message text when list is empty | ReactNode | - |
| emptyImage | Image when list is empty | string | - |
| list | List data, format refer to the following table | Array | `[]` |
| showClear | Clear button display status | boolean | `true` |
| showViewMore | View more button display status | boolean | `false` |
| title | header for message Tab, the actual text is `locale[title] || title` | string | - |
### Tab data
Property | Description | Type | Default
----|------|-----|------
avatar | avatar img url | string \| ReactNode | -
title | title | ReactNode | -
description | description info | ReactNode | -
datetime | Timestamps | ReactNode | -
extra | Additional information in the upper right corner of the list item | ReactNode | -
clickClose | Close menu after clicking list item | boolean | `false`
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| avatar | avatar img url | string \| ReactNode | - |
| title | title | ReactNode | - |
| description | description info | ReactNode | - |
| datetime | Timestamps | ReactNode | - |
| extra | Additional information in the upper right corner of the list item | ReactNode | - |
| clickClose | Close menu after clicking list item | boolean | `false` |
src/components/NoticeIcon/index.zh-CN.md
View file @ ab35aa00
......@@ -9,39 +9,39 @@ order: 9
## API
参数 | 说明 | 类型 | 默认值
----|------|-----|------
count | 图标上的消息总数 | number | -
bell | translate this please -> Change the bell Icon | ReactNode | `<Icon type='bell' />`
loading | 弹出卡片加载状态 | boolean | `false`
onClear | 点击清空按钮的回调 | function(tabName) | -
onItemClick | 点击列表项的回调 | function(item, tabProps) | -
onPopupVisibleChange | 弹出卡片显隐的回调 | function(visible) | -
onTabChange | 切换页签的回调 | function(tabTitle) | -
onViewMore | 点击查看更多的回调 | function(tabProps, event) | -
popupVisible | 控制弹层显隐 | boolean | -
locale | 默认文案 | Object | `{ emptyText: 'No notifications', clear: 'Clear', viewMore: 'Loading more' }`
clearClose | 点击清空按钮后关闭通知菜单 | boolean | `false`
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| count | 图标上的消息总数 | number | - |
| bell | translate this please -> Change the bell Icon | ReactNode | `<Icon type='bell' />` |
| loading | 弹出卡片加载状态 | boolean | `false` |
| onClear | 点击清空按钮的回调 | function(tabName) | - |
| onItemClick | 点击列表项的回调 | function(item, tabProps) | - |
| onPopupVisibleChange | 弹出卡片显隐的回调 | function(visible) | - |
| onTabChange | 切换页签的回调 | function(tabTitle) | - |
| onViewMore | 点击查看更多的回调 | function(tabProps, event) | - |
| popupVisible | 控制弹层显隐 | boolean | - |
| locale | 默认文案 | Object | `{ emptyText: 'No notifications', clear: 'Clear', viewMore: 'Loading more' }` |
| clearClose | 点击清空按钮后关闭通知菜单 | boolean | `false` |
### NoticeIcon.Tab
参数 | 说明 | 类型 | 默认值
----|------|-----|------
count | 当前 Tab 未读消息数量 | number | list.length
emptyText | 针对每个 Tab 定制空数据文案 | ReactNode | -
emptyImage | 针对每个 Tab 定制空数据图片 | string | -
list | 列表数据，格式参照下表 | Array | `[]`
showClear | 是否显示清空按钮 | boolean | `true`
showViewMore | 是否显示查看更多按钮 | boolean | `false`
title | 消息分类的页签标题，实际的文案是 `locale[title] || title` | string | -
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| count | 当前 Tab 未读消息数量 | number | list.length |
| emptyText | 针对每个 Tab 定制空数据文案 | ReactNode | - |
| emptyImage | 针对每个 Tab 定制空数据图片 | string | - |
| list | 列表数据，格式参照下表 | Array | `[]` |
| showClear | 是否显示清空按钮 | boolean | `true` |
| showViewMore | 是否显示查看更多按钮 | boolean | `false` |
| title | 消息分类的页签标题，实际的文案是 `locale[title] || title` | string | - |
### Tab data
参数 | 说明 | 类型 | 默认值
----|------|-----|------
avatar | 头像图片链接 | string \| ReactNode | -
title | 标题 | ReactNode | -
description | 描述信息 | ReactNode | -
datetime | 时间戳 | ReactNode | -
extra | 额外信息，在列表项右上角 | ReactNode | -
clickClose | 点击列表项关闭通知菜单 | boolean | `false`
| 参数 | 说明 | 类型 | 默认值 |
| ----------- | ------------------------ | ------------------- | ------- |
| avatar | 头像图片链接 | string \| ReactNode | - |
| title | 标题 | ReactNode | - |
| description | 描述信息 | ReactNode | - |
| datetime | 时间戳 | ReactNode | - |
| extra | 额外信息，在列表项右上角 | ReactNode | - |
| clickClose | 点击列表项关闭通知菜单 | boolean | `false` |
src/components/NumberInfo/demo/basic.md
View file @ ab35aa00
---
order: 0
title:
title:
zh-CN: 演示
en-US: Demo
---
......@@ -13,7 +13,7 @@ title:
Used for presenting various numerical data.
````jsx
```jsx
import NumberInfo from 'ant-design-pro/lib/NumberInfo';
import numeral from 'numeral';
......@@ -25,6 +25,7 @@ ReactDOM.render(
status="up"
subTotal={17.1}
/>
</div>
, mountNode);
````
</div>,
mountNode
);
```
src/components/NumberInfo/index.en-US.md
View file @ ab35aa00
......@@ -8,12 +8,12 @@ Often used in data cards for highlighting the business data.
## API
Property | Description | Type | Default
----|------|-----|------
title | title | ReactNode\|string | -
subTitle | subtitle | ReactNode\|string | -
total | total amount | ReactNode\|string | -
subTotal | total amount of additional information | ReactNode\|string | -
status | increase state | 'up \| down' | -
theme | state style | string | 'light'
gap | set the spacing (pixels) between numbers and descriptions | number | 8
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| title | title | ReactNode\|string | - |
| subTitle | subtitle | ReactNode\|string | - |
| total | total amount | ReactNode\|string | - |
| subTotal | total amount of additional information | ReactNode\|string | - |
| status | increase state | 'up \| down' | - |
| theme | state style | string | 'light' |
| gap | set the spacing (pixels) between numbers and descriptions | number | 8 |
src/components/NumberInfo/index.zh-CN.md
View file @ ab35aa00
......@@ -9,12 +9,12 @@ order: 10
## API
参数 | 说明 | 类型 | 默认值
----|------|-----|------
title | 标题 | ReactNode\|string | -
subTitle | 子标题 | ReactNode\|string | -
total | 总量 | ReactNode\|string | -
subTotal | 子总量 | ReactNode\|string | -
status | 增加状态 | 'up \| down' | -
theme | 状态样式 | string | 'light'
gap | 设置数字和描述之间的间距（像素）| number | 8
| 参数 | 说明 | 类型 | 默认值 |
| -------- | -------------------------------- | ----------------- | ------- |
| title | 标题 | ReactNode\|string | - |
| subTitle | 子标题 | ReactNode\|string | - |
| total | 总量 | ReactNode\|string | - |
| subTotal | 子总量 | ReactNode\|string | - |
| status | 增加状态 | 'up \| down' | - |
| theme | 状态样式 | string | 'light' |
| gap | 设置数字和描述之间的间距（像素） | number | 8 |
src/components/Result/demo/classic.md
View file @ ab35aa00
......@@ -5,7 +5,7 @@ title: Classic
典型结果页面。
````jsx
```jsx
import Result from 'ant-design-pro/lib/Result';
import { Button, Row, Col, Icon, Steps } from 'antd';
......@@ -27,7 +27,9 @@ const desc2 = (
周毛毛
<Icon type="dingding" style={{ color: '#00A0E9', marginLeft: 8 }} />
</div>
<div style={{ marginTop: 8, marginBottom: 4 }}><a href="">催一下</a></div>
<div style={{ marginTop: 8, marginBottom: 4 }}>
<a href="">催一下</a>
</div>
</div>
);
......@@ -75,6 +77,7 @@ ReactDOM.render(
extra={extra}
actions={actions}
style={{ width: '100%' }}
/>
, mountNode);
````
/>,
mountNode
);
```
src/components/Result/demo/error.md
View file @ ab35aa00
......@@ -5,7 +5,7 @@ title: Failed
提交失败。
````jsx
```jsx
import Result from 'ant-design-pro/lib/Result';
import { Button, Icon } from 'antd';
......@@ -15,12 +15,18 @@ const extra = (
您提交的内容有如下错误：
</div>
<div style={{ marginBottom: 16 }}>
<Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle" />您的账户已被冻结
<a style={{ marginLeft: 16 }}>立即解冻 <Icon type="right" /></a>
<Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle" />
您的账户已被冻结
<a style={{ marginLeft: 16 }}>
立即解冻 <Icon type="right" />
</a>
</div>
<div>
<Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle" />您的账户还不具备申请资格
<a style={{ marginLeft: 16 }}>立即升级 <Icon type="right" /></a>
<Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle" />
您的账户还不具备申请资格
<a style={{ marginLeft: 16 }}>
立即升级 <Icon type="right" />
</a>
</div>
</div>
);
......@@ -34,6 +40,7 @@ ReactDOM.render(
description="请核对并修改以下信息后，再重新提交。"
extra={extra}
actions={actions}
/>
, mountNode);
````
/>,
mountNode
);
```
src/components/Result/demo/structure.md
View file @ ab35aa00
......@@ -5,7 +5,7 @@ title: Structure
结构包含 `处理结果`，`补充信息` 以及 `操作建议` 三个部分，其中 `处理结果` 由 `提示图标`，`标题` 和 `结果描述` 组成。
````jsx
```jsx
import Result from 'ant-design-pro/lib/Result';
ReactDOM.render(
......@@ -15,6 +15,7 @@ ReactDOM.render(
description={<div style={{ background: 'rgba(16, 142, 233, 1)', color: '#fff' }}>结果描述</div>}
extra="其他补充信息，自带灰底效果"
actions={<div style={{ background: '#3ba0e9', color: '#fff' }}>操作建议，一般放置按钮组</div>}
/>
, mountNode);
````
/>,
mountNode
);
```
src/components/Result/index.md
View file @ ab35aa00
......@@ -9,10 +9,10 @@ order: 12
## API
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| type | 类型，不同类型自带对应的图标 | Enum {'success', 'error'} | - |
| title | 标题 | ReactNode | - |
| description | 结果描述 | ReactNode | - |
| extra | 补充信息，有默认的灰色背景 | ReactNode | - |
| actions | 操作建议，推荐放置跳转链接，按钮组等 | ReactNode | - |
| 参数 | 说明 | 类型 | 默认值 |
| ----------- | ------------------------------------ | ------------------------- | ------ |
| type | 类型，不同类型自带对应的图标 | Enum {'success', 'error'} | - |
| title | 标题 | ReactNode | - |
| description | 结果描述 | ReactNode | - |
| extra | 补充信息，有默认的灰色背景 | ReactNode | - |
| actions | 操作建议，推荐放置跳转链接，按钮组等 | ReactNode | - |
src/components/TagSelect/demo/expandable.md
View file @ ab35aa00
......@@ -5,7 +5,7 @@ title: 可展开和收起
使用 `expandable` 属性，让标签组可以收起，避免过高。
````jsx
```jsx
import TagSelect from 'ant-design-pro/lib/TagSelect';
function handleFormSubmit(checkedValue) {
......@@ -26,6 +26,7 @@ ReactDOM.render(
<TagSelect.Option value="cat10">类目十</TagSelect.Option>
<TagSelect.Option value="cat11">类目十一</TagSelect.Option>
<TagSelect.Option value="cat12">类目十二</TagSelect.Option>
</TagSelect>
, mountNode);
````
</TagSelect>,
mountNode
);
```
src/components/TagSelect/demo/simple.md
View file @ ab35aa00
......@@ -5,7 +5,7 @@ title: 基础样例
结合 `Tag` 的 `TagSelect` 组件，方便的应用于筛选类目的业务场景中。
````jsx
```jsx
import TagSelect from 'ant-design-pro/lib/TagSelect';
function handleFormSubmit(checkedValue) {
......@@ -20,6 +20,7 @@ ReactDOM.render(
<TagSelect.Option value="cat4">类目四</TagSelect.Option>
<TagSelect.Option value="cat5">类目五</TagSelect.Option>
<TagSelect.Option value="cat6">类目六</TagSelect.Option>
</TagSelect>
, mountNode);
````
</TagSelect>,
mountNode
);
```
src/components/TagSelect/index.md
View file @ ab35aa00
......@@ -11,17 +11,17 @@ order: 13
### TagSelect
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| value |选中的项 |string[] \| number[] | |
| defaultValue |默认选中的项 |string[] \| number[] | |
| onChange | 标签选择的回调函数 | Function(checkedTags) | |
| expandable | 是否展示 `展开/收起` 按钮 | Boolean | false |
| hideCheckAll | 隐藏 `全部` 按钮 | Boolean | false |
| 参数 | 说明 | 类型 | 默认值 |
| ------------ | ------------------------- | --------------------- | ------ |
| value | 选中的项 | string[] \| number[] | |
| defaultValue | 默认选中的项 | string[] \| number[] | |
| onChange | 标签选择的回调函数 | Function(checkedTags) | |
| expandable | 是否展示 `展开/收起` 按钮 | Boolean | false |
| hideCheckAll | 隐藏 `全部` 按钮 | Boolean | false |
### TagSelectOption
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| value | TagSelect的值 | string\| number | - |
| children | tag的内容 | string \| ReactNode | - |
| 参数 | 说明 | 类型 | 默认值 |
| -------- | -------------- | ------------------- | ------ |
| value | TagSelect 的值 | string\| number | - |
| children | tag 的内容 | string \| ReactNode | - |
src/components/Trend/demo/basic.md
View file @ ab35aa00
......@@ -10,8 +10,11 @@ import Trend from 'ant-design-pro/lib/Trend';
ReactDOM.render(
<div>
<Trend flag="up" >12%</Trend>
<Trend flag="down" style={{ marginLeft: 8 }}>11%</Trend>
</div>
, mountNode);
<Trend flag="up">12%</Trend>
<Trend flag="down" style={{ marginLeft: 8 }}>
11%
</Trend>
</div>,
mountNode
);
```
src/components/Trend/demo/reverse.md
View file @ ab35aa00
......@@ -10,8 +10,13 @@ import Trend from 'ant-design-pro/lib/Trend';
ReactDOM.render(
<div>
<Trend flag="up" reverseColor={true} >12%</Trend>
<Trend flag="down" reverseColor={true} style={{ marginLeft: 8 }}>11%</Trend>
</div>
, mountNode);
<Trend flag="up" reverseColor={true}>
12%
</Trend>
<Trend flag="down" reverseColor={true} style={{ marginLeft: 8 }}>
11%
</Trend>
</div>,
mountNode
);
```
src/components/Trend/index.md
View file @ ab35aa00
......@@ -13,8 +13,8 @@ order: 14
<Trend flag="up">50%</Trend>
```
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| colorful | 是否彩色标记 | Boolean | true |
| flag | 上升下降标识：`up|down` | string | - |
| reverseColor | 颜色反转 | Boolean | false |
| 参数 | 说明 | 类型 | 默认值 |
| ------------ | ----------------------- | ------- | ------ |
| colorful | 是否彩色标记 | Boolean | true |
| flag | 上升下降标识：`up|down` | string | - |
| reverseColor | 颜色反转 | Boolean | false |
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment