github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update divider

pull/1790/head
tangjinzhou 2020-02-12 19:44:45 +08:00
parent 1d54ebe50a
commit 2ee50b4066
9 changed files with 106 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/config.js
View File

@ -1,5 +1,5 @@
module.exports = {
dev: {
componentName: 'date-picker', // dev components
componentName: 'divider', // dev components
},
};

58
components/divider/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,37 +1,31 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/divider/demo/customize-style.md correctly 1`] = `
<div>
<div role="separator" class="ant-divider ant-divider-horizontal" style="height: 2px; background-color: rgb(124, 179, 5);"></div>
<div role="separator" class="ant-divider ant-divider-horizontal ant-divider-dashed" style="border-color: #7cb305;"></div>
<div role="separator" class="ant-divider ant-divider-vertical" style="height: 60px; background-color: rgb(124, 179, 5);"></div>
<div role="separator" class="ant-divider ant-divider-vertical ant-divider-dashed" style="height: 60px; border-color: #7cb305;"></div>
</div>
`;
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"></div>
<div role="separator" class="ant-divider ant-divider-horizontal"></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 ant-divider-with-text"><span class="ant-divider-inner-text">With Text</span></div>
<div role="separator" class="ant-divider ant-divider-horizontal ant-divider-with-text-center"><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 class="ant-divider ant-divider-horizontal ant-divider-dashed"></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/orientation.md correctly 1`] = `
<div>
<div class="ant-divider ant-divider-horizontal ant-divider-with-text-left"><span class="ant-divider-inner-text">Left 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 class="ant-divider ant-divider-horizontal ant-divider-with-text-right"><span class="ant-divider-inner-text">Right Text</span></div>
<div role="separator" class="ant-divider ant-divider-horizontal ant-divider-dashed"></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.
@ -42,7 +36,31 @@ exports[`renders ./components/divider/demo/orientation.md correctly 1`] = `
exports[`renders ./components/divider/demo/vertical.md correctly 1`] = `
<div>
Text
<div class="ant-divider ant-divider-vertical"></div> <a href="#">Link</a>
<div class="ant-divider ant-divider-vertical"></div> <a href="#">Link</a>
<div role="separator" class="ant-divider ant-divider-vertical"></div> <a href="#">Link</a>
<div role="separator" class="ant-divider ant-divider-vertical"></div> <a href="#">Link</a>
</div>
`;
exports[`renders ./components/divider/demo/with-text.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 role="separator" class="ant-divider ant-divider-horizontal ant-divider-with-text-center"><span class="ant-divider-inner-text">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 role="separator" class="ant-divider ant-divider-horizontal ant-divider-with-text-left"><span class="ant-divider-inner-text">Left 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 role="separator" class="ant-divider ant-divider-horizontal ant-divider-with-text-right"><span class="ant-divider-inner-text">Right 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>
`;

6
components/divider/__tests__/index.test.js Normal file
View File

@ -0,0 +1,6 @@
import Divider from '..';
import mountTest from '../../../tests/shared/mountTest';
describe('Divider', () => {
mountTest(Divider);
});

20
components/divider/demo/customize-style.md Normal file
View File

@ -0,0 +1,20 @@
<cn>
#### 样式自定义
测试一些 `style` 修改样式的行为。
</cn>
<us>
#### Style Customization
Use `style` to change default style.
</us>
```tpl
<template>
<div>
<a-divider style="height: 2px; background-color: #7cb305" />
<a-divider style="border-color: #7cb305" dashed />
<a-divider type="vertical" style="height: 60px; background-color: #7cb305" />
<a-divider type="vertical" style="height: 60px; border-color: #7cb305" dashed />
</div>
</template>
```

2
components/divider/demo/horizontal.md
View File

@ -5,7 +5,7 @@
<us>
#### Horizontal
Divider default type is `horizontal`. Support inner text inside Divider.
Divider is `horizontal` by default. You can add text within Divider.
</us>
```tpl

4
components/divider/demo/index.vue
View File

@ -1,7 +1,7 @@
<script>
import Horizontal from './horizontal';
import Vertical from './vertical';
import Orientation from './orientation';
import WithText from './with-text';
import CN from '../index.zh-CN.md';
import US from '../index.en-US.md';
const md = {
@ -32,7 +32,7 @@ export default {
<md cn={md.cn} us={md.us} />
<Vertical />
<Horizontal />
<Orientation />
<WithText />
<api>
<CN slot="cn" />
<US />

26
components/divider/demo/orientation.md
View File

@ -1,26 +0,0 @@
<cn>
#### 标题位置
修改分割线标题的位置。
</cn>
<us>
#### Orientation of title
Set orientation of divider to left or right.
</us>
```tpl
<template>
<div>
<a-divider orientation="left">Left Text</a-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>
<a-divider orientation="right">Right Text</a-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>
</template>
```

35
components/divider/demo/with-text.md Normal file
View File

@ -0,0 +1,35 @@
<cn>
#### 带文字的分割线
分割线中带有文字，可以用 `orientation` 指定文字位置。
</cn>
<us>
#### Divider with title
Divider with inner title, set `orientation="left/right"` to align it.
</us>
```tpl
<template>
<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>
<a-divider>Text</a-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>
<a-divider orientation="left">Left Text</a-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>
<a-divider orientation="right">Right Text</a-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>
</template>
```

6
components/divider/index.jsx
View File

@ -8,13 +8,13 @@ const Divider = {
prefixCls: PropTypes.string,
type: PropTypes.oneOf(['horizontal', 'vertical', '']).def('horizontal'),
dashed: PropTypes.bool,
orientation: PropTypes.oneOf(['left', 'right']),
orientation: PropTypes.oneOf(['left', 'right', 'center']),
},
inject: {
configProvider: { default: () => ConfigConsumerProps },
},
render() {
const { prefixCls: customizePrefixCls, type, $slots, dashed, orientation = '' } = this;
const { prefixCls: customizePrefixCls, type, $slots, dashed, orientation = 'center' } = this;
const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('divider', customizePrefixCls);
const orientationPrefix = orientation.length > 0 ? '-' + orientation : orientation;
@ -27,7 +27,7 @@ const Divider = {
};
return (
<div class={classString}>
<div class={classString} role="separator">
{$slots.default && <span class={`${prefixCls}-inner-text`}>{$slots.default}</span>}
</div>
);