mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-11 23:00:20 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

New component divider (#7261)

Browse Source 
* Add Divider

* use Divider in table demos

* update demo instruction

* upgrade snapshots
This commit is contained in:
偏右 2017-08-19 12:39:11 +08:00 committed by GitHub
parent c28c2f6b1e
commit 3b59a03c00
17 changed files with 298 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/__tests__/__snapshots__/index.test.js.snap
View File

@ -19,6 +19,7 @@ Array [
"Checkbox",
"Col",
"DatePicker",
"Divider",
"Dropdown",
"Form",
"Icon",

49
components/divider/__tests__/__snapshots__/demo.test.js.snap Normal file
View File

@ -0,0 +1,49 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/divider/demo/horizontal.md correctly 1`] = `
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>
<div
class="ant-divider ant-divider-horizontal"
/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text"
>
<span
class="ant-divider-inner-text"
>
With Text
</span>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>
</div>
`;
exports[`renders ./components/divider/demo/vertical.md correctly 1`] = `
<div>
Text
<div
class="ant-divider ant-divider-vertical"
/>
<a
href="#"
>
Link
</a>
<div
class="ant-divider ant-divider-vertical"
/>
<a
href="#"
>
Link
</a>
</div>
`;

3
components/divider/__tests__/demo.test.js Normal file
View File

@ -0,0 +1,3 @@
import demoTest from '../../../tests/shared/demoTest';
demoTest('divider');

28
components/divider/demo/horizontal.md Normal file
View File

@ -0,0 +1,28 @@
---
order: 0
title:
zh-CN: 水平分割线
en-US: Horizontal
---
## zh-CN
默认为水平分割线，可在中间加入文字。
## en-US
Divider default type is `horizontal`. Support inner text inside Divider.
````jsx
import { Divider } from 'antd';
ReactDOM.render(
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
<Divider />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
<Divider>With Text</Divider>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
</div>
, mountNode);
````

28
components/divider/demo/vertical.md Normal file
View File

@ -0,0 +1,28 @@
---
order: 1
title:
zh-CN: 垂直分割线
en-US: Vertical
---
## zh-CN
使用 `type="vertical"` 设置为行内的垂直分割线。
## en-US
Use `type="vertical"` make it vertical.
````jsx
import { Divider } from 'antd';
ReactDOM.render(
<div>
Text
<Divider type="vertical" />
<a href="#">Link</a>
<Divider type="vertical" />
<a href="#">Link</a>
</div>
, mountNode);
````

21
components/divider/index.en-US.md Normal file
View File

@ -0,0 +1,21 @@
---
category: Components
type: Other
title: Divider
cols: 1
---
A divider line separates different content.
## When To Use
- Divide sections of article.
- Divide inline text and links such as the operation column of table.
## API
### Divider
Property | Description | Type | Default
---------|-------------|------|--------
type | direction type of divider | enum: `horizontal` `vertical` | `horizontal`

20
components/divider/index.tsx Normal file
View File

@ -0,0 +1,20 @@
import React from 'react';
import classNames from 'classnames';
export default function Divider({
prefixCls = 'ant',
type = 'horizontal',
className,
children,
...restProps,
}) {
const classString = classNames(className, `${prefixCls}-divider`, {
[`${prefixCls}-divider-${type}`]: true,
[`${prefixCls}-divider-with-text`]: children,
});
return (
<div className={classString} {...restProps}>
{children && <span className={`${prefixCls}-divider-inner-text`}>{children}</span>}
</div>
);
}

19
components/divider/index.zh-CN.md Normal file
View File

@ -0,0 +1,19 @@
---
category: Components
type: Other
title: Divider
subtitle: 分割线
---
区隔内容的分割线。
## 何时使用
- 对不同章节的文本段落进行分割。
- 对行内文字/链接进行分割，例如表格的操作列。
## API
参数 | 说明 | 类型 | 默认值
----|-----|------|------
type | 水平还是垂直类型 | enum: `horizontal` `vertical` | `horizontal`

51
components/divider/style/index.less Normal file
View File

@ -0,0 +1,51 @@
@import "../../style/themes/default";
@import "../../style/mixins/index";
@divider-prefix-cls: ~"@{ant-prefix}-divider";
.@{divider-prefix-cls} {
background: @border-color-split;
&, // for compatiable
&-vertical {
margin: 0 8px;
display: inline-block;
height: 0.9em;
width: 1px;
vertical-align: middle;
position: relative;
top: -0.06em;
}
&-horizontal {
display: block;
height: 1px;
width: 100%;
margin: 24px 0;
}
&-horizontal&-with-text {
display: table;
white-space: nowrap;
text-align: center;
background: transparent;
font-weight: 500;
color: @heading-color;
font-size: 16px;
margin: 16px 0;
&:before,
&:after {
content: '';
display: table-cell;
position: relative;
top: 50%;
width: 50%;
border-top: 1px solid @border-color-split;
transform: translateY(50%);
}
}
&-inner-text {
display: inline-block;
padding: 0 24px;
}
}

2
components/divider/style/index.tsx Normal file
View File

@ -0,0 +1,2 @@
import '../../style/index.less';
import './index.less';

2
components/index.tsx
View File

@ -45,6 +45,8 @@ export { default as Col } from './col';
export { default as DatePicker } from './date-picker';
export { default as Divider } from './divider';
export { default as Dropdown } from './dropdown';
export { default as Form } from './form';

8
components/style/core/base.less
View File

@ -100,14 +100,6 @@ a {
}
}
.@{ant-prefix}-divider {
margin: 0 6px;
display: inline-block;
height: 8px;
width: 1px;
background: #ccc;
}
code,
kbd,
pre,

128
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

@ -204,16 +204,16 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
>
Action 一 John Brown
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
href="#"
>
Delete
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
@ -262,16 +262,16 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
>
Action 一 Jim Green
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
href="#"
>
Delete
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
@ -320,16 +320,16 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
>
Action 一 Joe Black
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
href="#"
>
Delete
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
@ -1573,16 +1573,16 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
>
Action 一 John Brown
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
href="#"
>
Delete
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
@ -1655,16 +1655,16 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
>
Action 一 John Brown
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
href="#"
>
Delete
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
@ -1737,16 +1737,16 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
>
Action 一 John Brown
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
href="#"
>
Delete
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
@ -1819,16 +1819,16 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
>
Action 一 John Brown
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
href="#"
>
Delete
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
@ -1901,16 +1901,16 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
>
Action 一 John Brown
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
href="#"
>
Delete
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
@ -1983,16 +1983,16 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
>
Action 一 John Brown
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
href="#"
>
Delete
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
@ -2065,16 +2065,16 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
>
Action 一 John Brown
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
href="#"
>
Delete
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
@ -2147,16 +2147,16 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
>
Action 一 John Brown
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
href="#"
>
Delete
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
@ -2229,16 +2229,16 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
>
Action 一 John Brown
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
href="#"
>
Delete
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
@ -2311,16 +2311,16 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
>
Action 一 John Brown
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
href="#"
>
Delete
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
@ -8127,16 +8127,16 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
>
Action 一
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
href="#"
>
Delete
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
@ -8186,16 +8186,16 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
>
Action 一
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
href="#"
>
Delete
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
@ -8245,16 +8245,16 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
>
Action 一
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
href="#"
>
Delete
</a>
<span
class="ant-divider"
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"

6
components/table/demo/basic.md
View File

@ -14,7 +14,7 @@ title:
Simple table with actions.
````jsx
import { Table, Icon } from 'antd';
import { Table, Icon, Divider } from 'antd';
const columns = [{
title: 'Name',
@ -35,9 +35,9 @@ const columns = [{
render: (text, record) => (
<span>
<a href="#">Action 一 {record.name}</a>
<span className="ant-divider" />
<Divider type="vertical" />
<a href="#">Delete</a>
<span className="ant-divider" />
<Divider type="vertical" />
<a href="#" className="ant-dropdown-link">
More actions <Icon type="down" />
</a>

6
components/table/demo/dynamic-settings.md
View File

@ -14,7 +14,7 @@ title:
Select different settings to see the result.
````jsx
import { Table, Icon, Switch, Radio, Form } from 'antd';
import { Table, Icon, Switch, Radio, Form, Divider } from 'antd';
const FormItem = Form.Item;
const columns = [{
@ -39,9 +39,9 @@ const columns = [{
render: (text, record) => (
<span>
<a href="#">Action 一 {record.name}</a>
<span className="ant-divider" />
<Divider type="vertical" />
<a href="#">Delete</a>
<span className="ant-divider" />
<Divider type="vertical" />
<a href="#" className="ant-dropdown-link">
More actions <Icon type="down" />
</a>

6
components/table/demo/jsx.md
View File

@ -18,7 +18,7 @@ Using JSX style API (introduced in 2.5.0)
> Since this is just a syntax sugar for the prop `columns`, so that you can't compose `Column` and `ColumnGroup` with other Components.
````jsx
import { Table, Icon } from 'antd';
import { Table, Icon, Divider } from 'antd';
const { Column, ColumnGroup } = Table;
@ -72,9 +72,9 @@ ReactDOM.render(
render={(text, record) => (
<span>
<a href="#">Action 一 {record.name}</a>
<span className="ant-divider" />
<Divider type="vertical" />
<a href="#">Delete</a>
<span className="ant-divider" />
<Divider type="vertical" />
<a href="#" className="ant-dropdown-link">
More actions <Icon type="down" />
</a>

1
tests/__snapshots__/index.test.js.snap
View File

@ -19,6 +19,7 @@ Array [
"Checkbox",
"Col",
"DatePicker",
"Divider",
"Dropdown",
"Form",
"Icon",