Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
e5d8da49
N
nutui-react
项目概览
京东前端
/
nutui-react
通知
0
Star
2
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui-react
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
e5d8da49
编写于
7月 26, 2022
作者:
V
vickyYe
提交者:
GitHub
7月 26, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: divider组件新增props (#162)
上级
e4516ded
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
427 addition
and
102 deletion
+427
-102
src/packages/divider/demo.tsx
src/packages/divider/demo.tsx
+26
-27
src/packages/divider/divider.scss
src/packages/divider/divider.scss
+17
-8
src/packages/divider/divider.tsx
src/packages/divider/divider.tsx
+28
-10
src/packages/divider/doc.en-US.md
src/packages/divider/doc.en-US.md
+127
-33
src/packages/divider/doc.md
src/packages/divider/doc.md
+108
-12
src/packages/divider/doc.zh-TW.md
src/packages/divider/doc.zh-TW.md
+108
-12
src/styles/variables.scss
src/styles/variables.scss
+13
-0
未找到文件。
src/packages/divider/demo.tsx
浏览文件 @
e5d8da49
import
React
from
'
react
'
import
{
Divider
}
from
'
./divider
'
import
{
Cell
}
from
'
../cell/cell
'
const
DividerDemo
=
()
=>
{
return
(
<>
<
div
className
=
"demo"
>
<
h2
>
基础用法
</
h2
>
<
Cell
>
<
Divider
/>
</
Cell
>
<
Divider
/>
<
h2
>
展示文本
</
h2
>
<
Cell
>
<
Divider
>
文本
</
Divider
>
</
Cell
>
<
Divider
>
文本
</
Divider
>
<
h2
>
内容位置
</
h2
>
<
Cell
>
<
Divider
contentPosition
=
"left"
>
文本
</
Divider
>
</
Cell
>
<
Cell
>
<
Divider
contentPosition
=
"right"
>
文本
</
Divider
>
</
Cell
>
<
Divider
contentPosition
=
"left"
>
文本
</
Divider
>
<
Divider
contentPosition
=
"right"
>
文本
</
Divider
>
<
h2
>
虚线
</
h2
>
<
Cell
>
<
Divider
dashed
>
文本
</
Divider
>
</
Cell
>
<
Divider
dashed
>
文本
</
Divider
>
<
h2
>
自定义样式
</
h2
>
<
Cell
>
<
Divider
styles
=
{
{
color
:
'
#1989fa
'
,
borderColor
:
'
#1989fa
'
,
padding
:
'
0 16px
'
,
}
}
>
文本
</
Divider
>
</
Cell
>
<
Divider
styles
=
{
{
color
:
'
#1989fa
'
,
borderColor
:
'
#1989fa
'
,
padding
:
'
0 16px
'
,
}
}
>
文本
</
Divider
>
<
h2
>
垂直分割线
</
h2
>
<
div
style
=
{
{
fontSize
:
'
14px
'
,
marginLeft
:
'
27px
'
,
color
:
'
#909ca4
'
}
}
>
文本
<
Divider
direction
=
"vertical"
/>
<
a
href
=
"#/Divider"
style
=
{
{
color
:
'
#1989fa
'
}
}
>
链接
</
a
>
<
Divider
direction
=
"vertical"
/>
<
a
href
=
"#/Divider"
style
=
{
{
color
:
'
#1989fa
'
}
}
>
链接
</
a
>
</
div
>
</
div
>
</>
)
...
...
src/packages/divider/divider.scss
浏览文件 @
e5d8da49
.nut-divider
{
display
:
flex
;
align-items
:
center
;
font-size
:
14px
;
color
:
#909ca4
;
margin
:
8px
0
;
width
:
100%
;
font-size
:
$divider-text-font-size
;
color
:
$divider-text-color
;
margin
:
$divider-margin
;
//
width: 100%;
&
::before
,
&
::after
{
content
:
''
;
border
:
1px
solid
currentColor
;
border-width
:
1px
0
0
;
border
:
$divider-line-height
solid
currentColor
;
border-width
:
$divider-line-height
0
0
;
height
:
$divider-line-height
;
flex
:
1
;
}
...
...
@@ -18,11 +19,11 @@
&
.nut-divider__left
,
&
.nut-divider__right
{
&
::before
{
margin-right
:
8px
;
margin-right
:
$divider-before-margin-right
;
}
&
::after
{
margin-left
:
8px
;
margin-left
:
$divider-after-margin-left
;
}
}
...
...
@@ -51,4 +52,12 @@
transform
:
scaleY
(
0
.5
);
}
}
&
.nut-divider__vertical
{
position
:
relative
;
top
:
$divider-vertical-top
;
display
:
inline-block
;
height
:
$divider-vertical-height
;
border-left
:
1px
solid
$divider-vertical-border-left
;
margin
:
$divider-vertical-margin
;
}
}
src/packages/divider/divider.tsx
浏览文件 @
e5d8da49
...
...
@@ -2,34 +2,52 @@ import React, { FunctionComponent } from 'react'
import
classNames
from
'
classnames
'
import
bem
from
'
@/utils/bem
'
export
type
ContentPositionType
=
'
left
'
|
'
center
'
|
'
right
'
export
type
DirectionType
=
'
horizontal
'
|
'
vertical
'
export
interface
DividerProps
{
contentPosition
:
string
contentPosition
:
ContentPositionType
dashed
:
boolean
hairline
:
boolean
styles
?:
React
.
CSSProperties
className
?:
string
direction
?:
DirectionType
}
const
defaultProps
=
{
contentPosition
:
'
center
'
,
dashed
:
false
,
hairline
:
true
,
direction
:
'
horizontal
'
,
}
as
DividerProps
export
const
Divider
:
FunctionComponent
<
Partial
<
DividerProps
>
&
React
.
HTMLAttributes
<
HTMLDivElement
>
>
=
(
props
)
=>
{
const
{
children
,
contentPosition
,
dashed
,
hairline
,
styles
,
className
}
=
{
const
{
children
,
contentPosition
,
dashed
,
hairline
,
styles
,
className
,
direction
,
}
=
{
...
defaultProps
,
...
props
,
}
const
dividerBem
=
bem
(
'
divider
'
)
const
classes
=
classNames
({
[
dividerBem
()]:
true
,
[
dividerBem
(
'
center
'
)]:
children
,
[
dividerBem
(
'
left
'
)]:
contentPosition
===
'
left
'
,
[
dividerBem
(
'
right
'
)]:
contentPosition
===
'
right
'
,
[
dividerBem
(
'
dashed
'
)]:
dashed
,
[
dividerBem
(
'
hairline
'
)]:
hairline
,
})
const
classes
=
direction
===
'
horizontal
'
?
classNames
({
[
dividerBem
()]:
true
,
[
dividerBem
(
'
center
'
)]:
children
,
[
dividerBem
(
'
left
'
)]:
contentPosition
===
'
left
'
,
[
dividerBem
(
'
right
'
)]:
contentPosition
===
'
right
'
,
[
dividerBem
(
'
dashed
'
)]:
dashed
,
[
dividerBem
(
'
hairline
'
)]:
hairline
,
})
:
classNames
({
[
dividerBem
()]:
true
,
[
dividerBem
(
'
vertical
'
)]:
direction
===
'
vertical
'
,
})
return
(
<
div
className
=
{
`
${
classes
}
${
className
||
''
}
`
}
style
=
{
styles
}
>
{
children
}
...
...
src/packages/divider/doc.en-US.md
浏览文件 @
e5d8da49
# Divider
分割线
# Divider
###
介绍
###
Intro
用于将内容分隔为多个区域。
Separate content into multiple areas.
###
安装
###
Install
```
js
import
{
Divider
}
from
'
@nutui/nutui-react
'
;
```
##
代码演示
##
# Basic Usage
### 基础用法
Default render one horizontal divider line.
默认渲染一条水平分割线。
:::demo
```
jsx
<
Divider
/>
```
tsx
import
React
from
"
react
"
;
import
{
Divider
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Divider
/>
</>
);
};
export
default
App
;
```
:::
### With Text
### 展示文本
Insert text into divider with default slot.
通过插槽在可以分割线中间插入内容。
:::demo
```
jsx
<
Divider
>
文本
</
Divider
>
```
tsx
import
React
from
"
react
"
;
import
{
Divider
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Divider
>
Text
</
Divider
>
</>
);
};
export
default
App
;
```
:::
###
内容位置
###
Content Position
通过 contentPosition 指定内容所在位置。
Set Content Position with
`contentPosition`
attribute.
```
jsx
<
Divider
contentPosition
=
"left"
>
文本
</
Divider
>
<
Divider
contentPosition
=
"right"
>
文本
</
Divider
>
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Divider
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Divider
contentPosition
=
"left"
>
Text
</
Divider
>
<
Divider
contentPosition
=
"right"
>
Text
</
Divider
>
</>
);
};
export
default
App
;
```
:::
### 虚线
添加 dashed 属性使分割线渲染为虚线。
### Dashed
```
jsx
<
Divider
dashed
>
文本
</
Divider
>
Render dashed divider line with
`dashed`
attribute.
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Divider
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Divider
dashed
>
Text
</
Divider
>
</>
);
};
export
default
App
;
```
:::
### Custom Style
User can custom divider style with
`styles`
attribute.
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Divider
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Divider
styles
=
{
{
color
:
'
#1989fa
'
,
borderColor
:
'
#1989fa
'
,
padding
:
'
0 16px
'
}
}
>
Text
</
Divider
>
</>
);
};
export
default
App
;
```
:::
###
自定义样式
###
Vertical Divider
可以直接通过 styles 属性设置分割线的样式。
:::demo
```
jsx
<
Divider
styles
=
{
{
color
:
'
#1989fa
'
,
borderColor
:
'
#1989fa
'
,
padding
:
'
0 16px
'
}
}
>
文本
</
Divider
>
```
tsx
import
React
from
"
react
"
;
import
{
Divider
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
div
>
文本
<
Divider
direction
=
"vertical"
/>
<
a
href
=
"#"
style
=
{
{
color
:
'
#1989fa
'
}
}
>
Link
</
a
>
<
Divider
direction
=
"vertical"
/>
<
a
href
=
"#"
style
=
{
{
color
:
'
#1989fa
'
}
}
>
Link
</
a
>
</
div
>
</>
);
};
export
default
App
;
```
:::
## API
### Props
|
参数 | 说明 | 类型 | 默认值
|
|
Attribute | Description | Type | Default
|
| --------------- | ----------------------------- | ------- | ------ |
| dashed | 是否使用虚线 | Boolean | false |
| hairline | 是否使用 0.5px 线 | Boolean | true |
| contentPosition | 内容位置,可选值为 left right | String | center |
| styles | 修改自定义样式 | css | - |
| dashed | Whether to use dashed border | Boolean | false |
| hairline | Whether to use hairline | Boolean | true |
| contentPosition | Content position, can be set to left or right | String | center |
| styles | Modify custom styles | CSS | - |
| direction | The direction of divider, can be set to horizontal or vertical | String | 'horizontal' |
### Slots
|
名称 | 说明
|
|
Name | Description
|
| ------- | ---- |
| default |
内容
|
| default |
Default slot
|
src/packages/divider/doc.md
浏览文件 @
e5d8da49
...
...
@@ -16,42 +16,137 @@ import { Divider } from '@nutui/nutui-react';
默认渲染一条水平分割线。
```
jsx
<
Divider
/>
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Divider
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Divider
/>
</>
);
};
export
default
App
;
```
:::
### 展示文本
通过插槽在可以分割线中间插入内容。
```
jsx
<
Divider
>
文本
</
Divider
>
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Divider
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Divider
>
文本
</
Divider
>
</>
);
};
export
default
App
;
```
:::
### 内容位置
通过 contentPosition 指定内容所在位置。
```
jsx
<
Divider
contentPosition
=
"left"
>
文本
</
Divider
>
<
Divider
contentPosition
=
"right"
>
文本
</
Divider
>
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Divider
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Divider
contentPosition
=
"left"
>
文本
</
Divider
>
<
Divider
contentPosition
=
"right"
>
文本
</
Divider
>
</>
);
};
export
default
App
;
```
:::
### 虚线
添加 dashed 属性使分割线渲染为虚线。
```
jsx
<
Divider
dashed
>
文本
</
Divider
>
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Divider
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Divider
dashed
>
文本
</
Divider
>
</>
);
};
export
default
App
;
```
:::
### 自定义样式
可以直接通过 styles 属性设置分割线的样式。
```
jsx
<
Divider
styles
=
{
{
color
:
'
#1989fa
'
,
borderColor
:
'
#1989fa
'
,
padding
:
'
0 16px
'
}
}
>
文本
</
Divider
>
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Divider
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Divider
styles
=
{
{
color
:
'
#1989fa
'
,
borderColor
:
'
#1989fa
'
,
padding
:
'
0 16px
'
}
}
>
文本
</
Divider
>
</>
);
};
export
default
App
;
```
:::
### 垂直分割线
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Divider
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
div
>
文本
<
Divider
direction
=
"vertical"
/>
<
a
href
=
"#"
style
=
{
{
color
:
'
#1989fa
'
}
}
>
链接
</
a
>
<
Divider
direction
=
"vertical"
/>
<
a
href
=
"#"
style
=
{
{
color
:
'
#1989fa
'
}
}
>
链接
</
a
>
</
div
>
</>
);
};
export
default
App
;
```
:::
## API
...
...
@@ -62,7 +157,8 @@ import { Divider } from '@nutui/nutui-react';
| dashed | 是否使用虚线 | Boolean | false |
| hairline | 是否使用 0.5px 线 | Boolean | true |
| contentPosition | 内容位置,可选值为 left right | String | center |
| styles | 修改自定义样式 | css | - |
| styles | 修改自定义样式 | CSS | - |
| direction | 水平还是垂直类型,可选值为 horizontal vertical | String | 'horizontal' |
### Slots
...
...
src/packages/divider/doc.zh-TW.md
浏览文件 @
e5d8da49
...
...
@@ -16,42 +16,137 @@ import { Divider } from '@nutui/nutui-react';
默认渲染一条水平分割线。
```
jsx
<
Divider
/>
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Divider
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Divider
/>
</>
);
};
export
default
App
;
```
:::
### 展示文本
通过插槽在可以分割线中间插入内容。
```
jsx
<
Divider
>
文本
</
Divider
>
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Divider
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Divider
>
文本
</
Divider
>
</>
);
};
export
default
App
;
```
:::
### 内容位置
通过 contentPosition 指定内容所在位置。
```
jsx
<
Divider
contentPosition
=
"left"
>
文本
</
Divider
>
<
Divider
contentPosition
=
"right"
>
文本
</
Divider
>
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Divider
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Divider
contentPosition
=
"left"
>
文本
</
Divider
>
<
Divider
contentPosition
=
"right"
>
文本
</
Divider
>
</>
);
};
export
default
App
;
```
:::
### 虚线
添加 dashed 属性使分割线渲染为虚线。
```
jsx
<
Divider
dashed
>
文本
</
Divider
>
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Divider
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Divider
dashed
>
文本
</
Divider
>
</>
);
};
export
default
App
;
```
:::
### 自定义样式
可以直接通过 styles 属性设置分割线的样式。
```
jsx
<
Divider
styles
=
{
{
color
:
'
#1989fa
'
,
borderColor
:
'
#1989fa
'
,
padding
:
'
0 16px
'
}
}
>
文本
</
Divider
>
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Divider
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Divider
styles
=
{
{
color
:
'
#1989fa
'
,
borderColor
:
'
#1989fa
'
,
padding
:
'
0 16px
'
}
}
>
文本
</
Divider
>
</>
);
};
export
default
App
;
```
:::
### 垂直分割线
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Divider
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
div
>
文本
<
Divider
direction
=
"vertical"
/>
<
a
href
=
"#"
style
=
{
{
color
:
'
#1989fa
'
}
}
>
链接
</
a
>
<
Divider
direction
=
"vertical"
/>
<
a
href
=
"#"
style
=
{
{
color
:
'
#1989fa
'
}
}
>
链接
</
a
>
</
div
>
</>
);
};
export
default
App
;
```
:::
## API
...
...
@@ -62,7 +157,8 @@ import { Divider } from '@nutui/nutui-react';
| dashed | 是否使用虚线 | Boolean | false |
| hairline | 是否使用 0.5px 线 | Boolean | true |
| contentPosition | 内容位置,可选值为 left right | String | center |
| styles | 修改自定义样式 | css | - |
| styles | 修改自定义样式 | CSS | - |
| direction | 水平还是垂直类型,可选值为 horizontal vertical | String | 'horizontal' |
### Slots
...
...
src/styles/variables.scss
浏览文件 @
e5d8da49
...
...
@@ -453,3 +453,16 @@ $circleprogress-primary-color: $primary-color !default;
$circleprogress-path-color
:
#e5e9f2
!
default
;
$circleprogress-text-color
:
#000000
!
default
;
$circleprogress-text-size
:
$font-size-3
!
default
;
// divider
$divider-margin
:
16px
0
!
default
;
$divider-text-font-size
:
$font-size-2
!
default
;
$divider-text-color
:
#909ca4
!
default
;
$divider-line-height
:
2px
!
default
;
$divider-before-margin-right
:
16px
!
default
;
$divider-after-margin-left
:
16px
!
default
;
$divider-vertical-height
:
12px
!
default
;
$divider-vertical-top
:
2px
!
default
;
$divider-vertical-border-left
:
rgba
(
0
,
0
,
0
,
0
.06
)
!
default
;
$divider-vertical-margin
:
0
8px
!
default
;
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录