Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature(divider): Add Divider component (#354 close) #471

Merged
merged 4 commits into from
Sep 13, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions examples/sites/demos/app/divider/base.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<template>
<tiny-divider></tiny-divider>
</template>

<script lang="jsx">
import { Divider } from '@opentiny/vue'

export default {
components: {
TinyDivider: Divider
}
}
</script>
18 changes: 18 additions & 0 deletions examples/sites/demos/app/divider/contentPosition.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<template>
<p>文案在左侧</p>
<tiny-divider content-position="left">文案</tiny-divider>
<p>文案在中间</p>
<tiny-divider content-position="center">文案</tiny-divider>
<p>文案在右侧</p>
<tiny-divider content-position="right">文案</tiny-divider>
</template>

<script lang="jsx">
import { Divider } from '@opentiny/vue'

export default {
components: {
TinyDivider: Divider
}
}
</script>
20 changes: 20 additions & 0 deletions examples/sites/demos/app/divider/customStyle.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<template>
<p>自定义分隔线颜色</p>
<tiny-divider color="#7693f5"></tiny-divider>
<p>自定义分隔线的样式</p>
<tiny-divider border-style="dashed"></tiny-divider>
<p>自定义文案的颜色</p>
<tiny-divider content-color="#7693f5">文案</tiny-divider>
<p>文案的背景颜色</p>
<tiny-divider content-color="#ffffff" content-background-color="#7693f5">文案</tiny-divider>
</template>

<script lang="jsx">
import { Divider } from '@opentiny/vue'

export default {
components: {
TinyDivider: Divider
}
}
</script>
17 changes: 17 additions & 0 deletions examples/sites/demos/app/divider/direction.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<template>
<span>分隔线</span>
<tiny-divider direction="vertical"></tiny-divider>
<span>分隔线</span>
<tiny-divider direction="vertical"></tiny-divider>
<span>分隔线</span>
</template>

<script lang="jsx">
import { Divider } from '@opentiny/vue'

export default {
components: {
TinyDivider: Divider
}
}
</script>
7 changes: 7 additions & 0 deletions examples/sites/demos/app/divider/webdoc/divider.cn.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
title: Divider 分隔线
---

# Divider 分隔线

<div>Divider 分隔线组件,用于对不同内容的分隔。</div>
7 changes: 7 additions & 0 deletions examples/sites/demos/app/divider/webdoc/divider.en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
title: Divider
---

# Divider

<div>Divider divider component, Used to separate different content.</div>
109 changes: 109 additions & 0 deletions examples/sites/demos/app/divider/webdoc/divider.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
export default {
column: '2',
owner: '',
demos: [
{
'demoId': 'basic-usage',
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
'codeFiles': ['base.vue']
},
{
'demoId': 'direction',
'name': { 'zh-CN': '垂直分隔线', 'en-US': 'Basic Usage' },
'desc': {
'zh-CN': '通过 props direction 可以设置分隔线的方向',
'en-US': 'The direction of the divider can be set using the props "direction".'
},
'codeFiles': ['direction.vue']
},
{
'demoId': 'content-position',
'name': { 'zh-CN': '分隔线文案的位置', 'en-US': 'Basic Usage' },
'desc': {
'zh-CN': '通过 props content-position 可以分隔线文案的位置',
'en-US': 'The position of the divider content can be set using the prop "content-position".'
},
'codeFiles': ['contentPosition.vue']
},
{
'demoId': 'custom-style',
'name': { 'zh-CN': '自定义分隔线样式', 'en-US': 'Basic Usage' },
'desc': {
'zh-CN': '通过 props 自定义分隔线样式',
'en-US': 'You can customize the divider style through props.'
},
'codeFiles': ['customStyle.vue']
}
],
apis: [
{
'name': 'divider',
'type': 'component',
'properties': [
{
'name': 'color',
'type': 'string',
'defaultValue': '',
'desc': { 'zh-CN': '设置分隔线的颜色', 'en-US': 'Set the color of the divider.' },
'demoId': 'basic-usage'
},
{
'name': 'direction',
'type': 'string',
'defaultValue': 'horizontal',
'desc': {
'zh-CN': '设置分隔线的方向,该属性的可选值为 horizontal / vertical 。',
'en-US':
'Set the direction of the divider; the possible values for this property are "horizontal" or "vertical".'
},
'demoId': 'direction'
},
{
'name': 'content-position',
'type': 'string',
'defaultValue': 'center',
'desc': {
'zh-CN': '设置分隔线文案的位置,该属性的可选值为 left / center / right 。',
'en-US':
'Set the position of the divider content; the possible values for this property are "left", "center", or "right".'
},
'demoId': 'contentPosition'
},
{
'name': 'border-style',
'type': 'string',
'defaultValue': 'solid',
'desc': {
'zh-CN': '设置分隔线的样式,该属性的可选值为 solid / dashed',
'en-US': 'Set the style of the divider; the possible values for this property are "solid" or "dashed".'
},
'demoId': 'custom-style'
},
{
'name': 'content-color',
'type': 'string',
'defaultValue': '',
'desc': { 'zh-CN': '设置分隔线文案的颜色', 'en-US': 'Set the color of the divider content.' },
'demoId': 'custom-style'
},
{
'name': 'content-background-color',
'type': 'string',
'defaultValue': '',
'desc': { 'zh-CN': '设置分割线文案的背景颜色', 'en-US': 'Set the background color of the divider content.' },
'demoId': 'custom-style'
}
],
'slots': [
{
'name': 'default',
'type': '',
'defaultValue': '',
'desc': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
'demoId': 'content-position'
}
]
}
]
}
3 changes: 2 additions & 1 deletion examples/sites/demos/menus.js
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,8 @@ export const cmpMenus = [
{ 'nameCn': '联系人', 'name': 'UserContact', 'key': 'user-contact' },
{ 'nameCn': '用户头像', 'name': 'UserHead', 'key': 'user-head' },
{ 'nameCn': '全屏显示', 'name': 'Fullscreen', 'key': 'fullscreen' },
{ 'nameCn': '全局设置', 'name': 'ConfigProvider', 'key': 'config-provider' }
{ 'nameCn': '全局设置', 'name': 'ConfigProvider', 'key': 'config-provider' },
{ 'nameCn': '分割线', 'name': 'Divider', 'key': 'divider' }
]
}
]
Expand Down
53 changes: 40 additions & 13 deletions packages/modules.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,6 @@
"pc"
]
},
"RichTextEditor": {
"path": "vue/src/rich-text-editor/index.ts",
"type": "component",
"exclude": false,
"mode": [
"pc"
]
},
"ActionSheet": {
"path": "vue/src/action-sheet/index.ts",
"type": "component",
Expand Down Expand Up @@ -360,13 +352,13 @@
"mobile"
]
},
"CascaderSelectMobileFirst": {
"path": "vue/src/cascader-select/src/mobile-first.vue",
"CascaderSelectMobile": {
"path": "vue/src/cascader-select/src/mobile.vue",
"type": "template",
"exclude": false
},
"CascaderSelectMobile": {
"path": "vue/src/cascader-select/src/mobile.vue",
"CascaderSelectMobileFirst": {
"path": "vue/src/cascader-select/src/mobile-first.vue",
"type": "template",
"exclude": false
},
Expand Down Expand Up @@ -613,6 +605,20 @@
"ColorPicker": {
"path": "vue/src/color-picker/index.ts",
"type": "component",
"exclude": false,
"mode": [
"mobile",
"pc"
]
},
"ColorPickerMobile": {
"path": "vue/src/color-picker/src/mobile.vue",
"type": "template",
"exclude": false
},
"ColorPickerPc": {
"path": "vue/src/color-picker/src/pc.vue",
"type": "template",
"exclude": false
},
"ColumnListGroup": {
Expand Down Expand Up @@ -846,6 +852,19 @@
"type": "template",
"exclude": false
},
"Divider": {
"path": "vue/src/divider/index.ts",
"type": "component",
"exclude": false,
"mode": [
"pc"
]
},
"DividerPc": {
"path": "vue/src/divider/src/pc.vue",
"type": "template",
"exclude": false
},
"Drawer": {
"path": "vue/src/drawer/index.ts",
"type": "component",
Expand Down Expand Up @@ -1911,6 +1930,14 @@
"type": "template",
"exclude": false
},
"RichTextEditor": {
"path": "vue/src/rich-text-editor/index.ts",
"type": "component",
"exclude": false,
"mode": [
"pc"
]
},
"River": {
"path": "vue/src/river/index.ts",
"type": "component",
Expand Down Expand Up @@ -2689,4 +2716,4 @@
"pc"
]
}
}
}
5 changes: 5 additions & 0 deletions packages/renderless/src/divider/vue.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export const api = []

export const renderless = () => {
return api
}
49 changes: 49 additions & 0 deletions packages/theme/src/divider/index.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
@import '../custom.less';
@import './vars.less';

@divider-prefix-cls: ~'@{css-prefix}divider';

.@{divider-prefix-cls} {
.component-css-vars-divider();
position: relative;

&&--horizontal {
display: block;
height: 1px;
margin: 24px 0;
border-top: var(--ti-divider-dividing-line);
}

&&--vertical {
display: inline-block;
width: 1px;
height: 1em;
margin: 0 8px;
vertical-align: middle;
border-left: var(--ti-divider-dividing-line);
}

&__text {
position: absolute;
padding: 0 20px;
font-size: 14px;
font-weight: 500;
color: var(--ti-divider-text-color);
background-color: var(--ti-divider-text-bg);

&.is-left {
left: 20px;
transform: translateY(-50%);
}

&.is-center {
left: 50%;
transform: translate(-50%) translateY(-50%);
}

&.is-right {
right: 20px;
transform: translateY(-50%);
}
}
}
5 changes: 5 additions & 0 deletions packages/theme/src/divider/vars.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.component-css-vars-divider() {
--ti-divider-dividing-line: 1px solid var(--ti-common-color-border);
--ti-divider-text-bg: var(--ti-base-color-bg-1);
--ti-divider-text-color: var(--ti-common-color-text-primary);
}
1 change: 1 addition & 0 deletions packages/vue/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@
"@opentiny/vue-detail-page": "workspace:~",
"@opentiny/vue-dialog-box": "workspace:~",
"@opentiny/vue-dialog-select": "workspace:~",
"@opentiny/vue-divider": "workspace:~",
"@opentiny/vue-drawer": "workspace:~",
"@opentiny/vue-drop-roles": "workspace:~",
"@opentiny/vue-drop-times": "workspace:~",
Expand Down
Loading