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 = { module.exports = {
dev: { 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 // 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`] = ` exports[`renders ./components/divider/demo/horizontal.md correctly 1`] = `
<div> <div>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
probare, quae sunt a te dicta? Refert tamen, quo modo. probare, quae sunt a te dicta? Refert tamen, quo modo.
</p> </p>
<div class="ant-divider ant-divider-horizontal"></div> <div role="separator" class="ant-divider ant-divider-horizontal"></div>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
probare, quae sunt a te dicta? Refert tamen, quo modo. probare, quae sunt a te dicta? Refert tamen, quo modo.
</p> </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> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
probare, quae sunt a te dicta? Refert tamen, quo modo. probare, quae sunt a te dicta? Refert tamen, quo modo.
</p> </p>
<div class="ant-divider ant-divider-horizontal ant-divider-dashed"></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.
</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>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
probare, quae sunt a te dicta? Refert tamen, quo modo. 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`] = ` exports[`renders ./components/divider/demo/vertical.md correctly 1`] = `
<div> <div>
Text Text
<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 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> </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> <us>
#### Horizontal #### Horizontal
Divider default type is `horizontal`. Support inner text inside Divider. Divider is `horizontal` by default. You can add text within Divider.
</us> </us>
```tpl ```tpl

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

@ -1,7 +1,7 @@
<script> <script>
import Horizontal from './horizontal'; import Horizontal from './horizontal';
import Vertical from './vertical'; import Vertical from './vertical';
import Orientation from './orientation'; import WithText from './with-text';
import CN from '../index.zh-CN.md'; import CN from '../index.zh-CN.md';
import US from '../index.en-US.md'; import US from '../index.en-US.md';
const md = { const md = {
@ -32,7 +32,7 @@ export default {
<md cn={md.cn} us={md.us} /> <md cn={md.cn} us={md.us} />
<Vertical /> <Vertical />
<Horizontal /> <Horizontal />
<Orientation /> <WithText />
<api> <api>
<CN slot="cn" /> <CN slot="cn" />
<US /> <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, prefixCls: PropTypes.string,
type: PropTypes.oneOf(['horizontal', 'vertical', '']).def('horizontal'), type: PropTypes.oneOf(['horizontal', 'vertical', '']).def('horizontal'),
dashed: PropTypes.bool, dashed: PropTypes.bool,
orientation: PropTypes.oneOf(['left', 'right']), orientation: PropTypes.oneOf(['left', 'right', 'center']),
}, },
inject: { inject: {
configProvider: { default: () => ConfigConsumerProps }, configProvider: { default: () => ConfigConsumerProps },
}, },
render() { render() {
const { prefixCls: customizePrefixCls, type, $slots, dashed, orientation = '' } = this; const { prefixCls: customizePrefixCls, type, $slots, dashed, orientation = 'center' } = this;
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('divider', customizePrefixCls); const prefixCls = getPrefixCls('divider', customizePrefixCls);
const orientationPrefix = orientation.length > 0 ? '-' + orientation : orientation; const orientationPrefix = orientation.length > 0 ? '-' + orientation : orientation;
@ -27,7 +27,7 @@ const Divider = {
}; };
return ( return (
<div class={classString}> <div class={classString} role="separator">
{$slots.default && <span class={`${prefixCls}-inner-text`}>{$slots.default}</span>} {$slots.default && <span class={`${prefixCls}-inner-text`}>{$slots.default}</span>}
</div> </div>
); );