Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
b4fc286c
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,发现更多精彩内容 >>
未验证
提交
b4fc286c
编写于
7月 22, 2022
作者:
L
lkjh3214
提交者:
GitHub
7月 22, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: indicator指示器组件,新增国际化文档 (#166)
上级
e10a6204
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
376 addition
and
38 deletion
+376
-38
src/packages/indicator/demo.scss
src/packages/indicator/demo.scss
+10
-0
src/packages/indicator/demo.tsx
src/packages/indicator/demo.tsx
+45
-4
src/packages/indicator/doc.en-US.md
src/packages/indicator/doc.en-US.md
+120
-0
src/packages/indicator/doc.md
src/packages/indicator/doc.md
+55
-31
src/packages/indicator/doc.zh-TW.md
src/packages/indicator/doc.zh-TW.md
+120
-0
src/packages/indicator/indicator.scss
src/packages/indicator/indicator.scss
+18
-3
src/packages/indicator/indicator.tsx
src/packages/indicator/indicator.tsx
+4
-0
src/styles/variables.scss
src/styles/variables.scss
+4
-0
未找到文件。
src/packages/indicator/demo.scss
0 → 100644
浏览文件 @
b4fc286c
.demo
{
.vertical_cell
{
height
:
100px
;
width
:
50%
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
overflow
:
hidden
;
}
}
src/packages/indicator/demo.tsx
浏览文件 @
b4fc286c
...
...
@@ -4,12 +4,44 @@ import Cell from '@/packages/cell'
import
Row
from
'
@/packages/row
'
import
Col
from
'
@/packages/col
'
import
Button
from
'
@/packages/button
'
import
{
useTranslate
}
from
'
../../sites/assets/locale
'
import
'
@/packages/indicator/demo.scss
'
interface
T
{
ce5c5446
:
string
c38a08ef
:
string
b840c88f
:
string
a74a1fd4
:
string
c123sda1
:
string
}
const
IndicatorDemo
=
()
=>
{
const
[
translated
]
=
useTranslate
<
T
>
({
'
zh-CN
'
:
{
ce5c5446
:
'
基础用法
'
,
c38a08ef
:
'
主要按钮
'
,
b840c88f
:
'
block用法
'
,
a74a1fd4
:
'
不补0
'
,
c123sda1
:
'
竖向展示
'
,
},
'
zh-TW
'
:
{
ce5c5446
:
'
基礎用法
'
,
c38a08ef
:
'
主要按鈕
'
,
b840c88f
:
'
block用法
'
,
a74a1fd4
:
'
不補0
'
,
c123sda1
:
'
豎向展示
'
,
},
'
en-US
'
:
{
ce5c5446
:
'
Basic usage
'
,
c38a08ef
:
'
Button
'
,
b840c88f
:
'
Block usage
'
,
a74a1fd4
:
"
Not Add '0'
"
,
c123sda1
:
'
Vertical display
'
,
},
})
return
(
<>
<
div
className
=
"demo"
>
<
h2
>
基础用法
</
h2
>
<
h2
>
{
translated
.
ce5c5446
}
</
h2
>
<
Cell
>
<
Indicator
className
=
"demo1"
size
=
{
3
}
current
=
{
3
}
/>
</
Cell
>
...
...
@@ -17,7 +49,7 @@ const IndicatorDemo = () => {
<
Row
>
<
Col
span
=
"12"
>
<
Button
size
=
"small"
type
=
"primary"
>
主要按钮
{
translated
.
c38a08ef
}
</
Button
>
</
Col
>
<
Col
span
=
"12"
>
...
...
@@ -25,7 +57,7 @@ const IndicatorDemo = () => {
</
Col
>
</
Row
>
</
Cell
>
<
h2
>
block用法
</
h2
>
<
h2
>
{
translated
.
b840c88f
}
</
h2
>
<
Cell
>
<
Indicator
block
align
=
"center"
size
=
{
6
}
current
=
{
5
}
/>
</
Cell
>
...
...
@@ -35,10 +67,19 @@ const IndicatorDemo = () => {
<
Cell
>
<
Indicator
block
align
=
"right"
size
=
{
6
}
current
=
{
5
}
/>
</
Cell
>
<
h2
>
不补0
</
h2
>
<
h2
>
{
translated
.
a74a1fd4
}
</
h2
>
<
Cell
>
<
Indicator
fillZero
=
{
false
}
size
=
{
6
}
current
=
{
5
}
/>
</
Cell
>
<
h2
>
{
translated
.
c123sda1
}
</
h2
>
<
Cell
>
<
view
className
=
"vertical_cell"
>
<
Indicator
fillZero
=
{
false
}
size
=
{
6
}
current
=
{
5
}
vertical
/>
</
view
>
<
view
className
=
"vertical_cell"
>
<
Indicator
size
=
{
6
}
current
=
{
2
}
vertical
/>
</
view
>
</
Cell
>
</
div
>
</>
)
...
...
src/packages/indicator/doc.en-US.md
0 → 100644
浏览文件 @
b4fc286c
# Indicator
### Intro
Displays the progress of a task or process, often used for provisioning processes
### Install
```
javascript
import
{
Indicator
}
from
'
@nutui/nutui-react
'
```
### Basic Usage
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Indicator
,
Cell
,
Button
,
Row
,
Col
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
div
className
=
"demo"
>
<
Cell
>
<
Indicator
size
=
{
3
}
current
=
{
3
}
/>
</
Cell
>
<
Cell
>
<
Row
>
<
Col
span
=
"12"
>
<
Button
size
=
"small"
type
=
"primary"
>
Button
</
Button
>
</
Col
>
<
Col
span
=
"12"
>
<
Indicator
block
align
=
"right"
size
=
{
6
}
current
=
{
5
}
/>
</
Col
>
</
Row
>
</
Cell
>
</
div
>
);
};
export
default
App
;
```
:::
### Block usage
When
`block`
is true, it will be displayed as a block-level element, and the alignment can be set through
`align`
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Indicator
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
div
className
=
"demo"
>
<
Cell
>
<
Indicator
block
align
=
"center"
size
=
{
6
}
current
=
{
5
}
/>
</
Cell
>
<
Cell
>
<
Indicator
block
align
=
"left"
size
=
{
6
}
current
=
{
1
}
/>
</
Cell
>
<
Cell
>
<
Indicator
block
align
=
"right"
size
=
{
6
}
current
=
{
5
}
/>
</
Cell
>
</
div
>
);
};
export
default
App
;
```
:::
### Do not add 0
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Indicator
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
Indicator
fillZero
=
{
false
}
size
=
{
6
}
current
=
{
5
}
/>
</
Cell
>
);
};
export
default
App
;
```
:::
### Vertical display
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Indicator
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
view
style
=
{
{
height
:
'
100px
'
,
width
:
'
50%
'
}
}
>
<
Indicator
fillZero
=
{
false
}
size
=
{
6
}
current
=
{
5
}
vertical
/>
</
view
>
<
view
style
=
{
{
height
:
'
100px
'
,
width
:
'
50%
'
}
}
>
<
Indicator
size
=
{
6
}
current
=
{
2
}
vertical
/>
</
view
>
</
Cell
>
);
};
export
default
App
;
```
:::
## API
### Props
| Attribute | Description | Type | Default |
|--------------|----------------------------------|--------|------------------|
| current | current step | Number | 1 |
| size | step length | Number | 3 |
| block | Whether to enable block level layout | Boolean | false |
| align | Alignment, only valid when block is true, optional values 'left', 'right', 'center' | String | left |
| fillZero | Whether to add 0 in front of the singular number | Boolean | true |
| vertical | Whether to display vertically | Boolean | false |
src/packages/indicator/doc.md
浏览文件 @
b4fc286c
...
...
@@ -13,27 +13,27 @@ import { Indicator } from '@nutui/nutui-react'
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Indicator
,
Cell
,
Button
}
from
'
@nutui/nutui-react
'
;
import
{
Indicator
,
Cell
,
Button
,
Row
,
Col
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
Indicator
size
=
{
3
}
current
=
{
3
}
>
</
Indicator
>
</
Cell
>
<
Cell
>
<
Row
>
<
Col
span
=
"12"
>
<
Button
size
=
"small"
type
=
"primary"
>
主要按钮
</
Button
>
</
Col
>
<
Col
span
=
"12"
>
<
Indicator
block
=
{
true
}
align
=
"right"
size
=
{
6
}
current
=
{
5
}
>
</
Indicator
>
</
Col
>
</
Row
>
</
Cell
>
<
div
className
=
"demo"
>
<
Cell
>
<
Indicator
size
=
{
3
}
current
=
{
3
}
/
>
</
Cell
>
<
Cell
>
<
Row
>
<
Col
span
=
"12"
>
<
Button
size
=
"small"
type
=
"primary"
>
主要按钮
</
Button
>
</
Col
>
<
Col
span
=
"12"
>
<
Indicator
block
align
=
"right"
size
=
{
6
}
current
=
{
5
}
/
>
</
Col
>
</
Row
>
</
Cell
>
</
div
>
);
};
export
default
App
;
...
...
@@ -46,26 +46,41 @@ export default App;
import
React
from
"
react
"
;
import
{
Indicator
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
div
className
=
"demo"
>
<
Cell
>
<
Indicator
block
align
=
"center"
size
=
{
6
}
current
=
{
5
}
/>
</
Cell
>
<
Cell
>
<
Indicator
block
align
=
"left"
size
=
{
6
}
current
=
{
1
}
/>
</
Cell
>
<
Cell
>
<
Indicator
block
align
=
"right"
size
=
{
6
}
current
=
{
5
}
/>
</
Cell
>
</
div
>
);
};
export
default
App
;
```
:::
### 不补0
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Indicator
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
Indicator
block
=
{
true
}
align
=
"center"
size
=
{
6
}
current
=
{
5
}
>
</
Indicator
>
</
Cell
>
<
Cell
>
<
Indicator
block
=
{
true
}
align
=
"left"
size
=
{
6
}
current
=
{
1
}
>
</
Indicator
>
</
Cell
>
<
Cell
>
<
Indicator
block
=
{
true
}
align
=
"right"
size
=
{
6
}
current
=
{
5
}
>
</
Indicator
>
<
Indicator
fillZero
=
{
false
}
size
=
{
6
}
current
=
{
5
}
/>
</
Cell
>
);
};
export
default
App
;
```
:::
###
不补0
###
竖向展示
:::demo
```
tsx
import
React
from
"
react
"
;
...
...
@@ -74,8 +89,16 @@ import { Indicator, Cell } from '@nutui/nutui-react';
const
App
=
()
=>
{
return
(
<
Cell
>
<
Indicator
fillZero
=
{
false
}
size
=
{
6
}
current
=
{
5
}
>
</
Indicator
>
<
view
style
=
{
{
height
:
'
100px
'
,
width
:
'
50%
'
}
}
>
<
Indicator
fillZero
=
{
false
}
size
=
{
6
}
current
=
{
5
}
vertical
/>
</
view
>
<
view
style
=
{
{
height
:
'
100px
'
,
width
:
'
50%
'
}
}
>
<
Indicator
size
=
{
6
}
current
=
{
2
}
vertical
/>
</
view
>
</
Cell
>
);
};
...
...
@@ -95,3 +118,4 @@ export default App;
| block | 是否启用块级布局 | Boolean | false |
| align | 对齐方式,仅在block为true时生效, 可选值 'left', 'right', 'center'| String | left |
| fillZero | 单数前面是否补0 | Boolean | true |
| vertical | 是否竖向展示 | Boolean | false |
src/packages/indicator/doc.zh-TW.md
0 → 100644
浏览文件 @
b4fc286c
# Indicator 指示器
### 介紹
顯示一個任務或流程的進度,常用於開通流程
### 安装
```
javascript
import
{
Indicator
}
from
'
@nutui/nutui-react
'
```
### 基礎用法
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Indicator
,
Cell
,
Button
,
Row
,
Col
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
div
className
=
"demo"
>
<
Cell
>
<
Indicator
size
=
{
3
}
current
=
{
3
}
/>
</
Cell
>
<
Cell
>
<
Row
>
<
Col
span
=
"12"
>
<
Button
size
=
"small"
type
=
"primary"
>
主要按鈕
</
Button
>
</
Col
>
<
Col
span
=
"12"
>
<
Indicator
block
align
=
"right"
size
=
{
6
}
current
=
{
5
}
/>
</
Col
>
</
Row
>
</
Cell
>
</
div
>
);
};
export
default
App
;
```
:::
### block用法
在
`block`
為true時,將表現為塊級元素,可通過
`align`
,設置對齊方式
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Indicator
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
div
className
=
"demo"
>
<
Cell
>
<
Indicator
block
align
=
"center"
size
=
{
6
}
current
=
{
5
}
/>
</
Cell
>
<
Cell
>
<
Indicator
block
align
=
"left"
size
=
{
6
}
current
=
{
1
}
/>
</
Cell
>
<
Cell
>
<
Indicator
block
align
=
"right"
size
=
{
6
}
current
=
{
5
}
/>
</
Cell
>
</
div
>
);
};
export
default
App
;
```
:::
### 不補0
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Indicator
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
Indicator
fillZero
=
{
false
}
size
=
{
6
}
current
=
{
5
}
/>
</
Cell
>
);
};
export
default
App
;
```
:::
### 豎向展示
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Indicator
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
view
style
=
{
{
height
:
'
100px
'
,
width
:
'
50%
'
}
}
>
<
Indicator
fillZero
=
{
false
}
size
=
{
6
}
current
=
{
5
}
vertical
/>
</
view
>
<
view
style
=
{
{
height
:
'
100px
'
,
width
:
'
50%
'
}
}
>
<
Indicator
size
=
{
6
}
current
=
{
2
}
vertical
/>
</
view
>
</
Cell
>
);
};
export
default
App
;
```
:::
## API
### Props
| 屬性 | 說明 | 類型 | 預設值 |
|--------------|----------------------------------|--------|------------------|
| current | 當前步驟 | Number | 1 |
| size | 步驟長度 | Number | 3 |
| block | 是否啟用塊級佈局 | Boolean | false |
| align | 對齊方式,僅在block為true時生效, 可選值 'left', 'right', 'center'| String | left |
| fillZero | 單數前面是否補0 | Boolean | true |
| vertical | 是否豎向展示 | Boolean | false |
src/packages/indicator/indicator.scss
浏览文件 @
b4fc286c
...
...
@@ -14,12 +14,12 @@
}
&
__dot
,
&
__number
{
margin
:
0
4px
;
margin
:
0
$indicator-dot-margin
;
&
:first-child
{
margin-left
:
0
;
margin-left
:
$indicator-dot-first-margin
;
}
&
:last-child
{
margin-right
:
0
;
margin-right
:
$indicator-dot-last-margin
;
}
}
&
__dot
{
...
...
@@ -45,4 +45,19 @@
background-color
:
$indicator-color
;
box-shadow
:
0
0
1px
1px
$indicator-color
;
}
&
__vertical
{
display
:
flex
;
flex-direction
:
column
;
align-items
:
center
;
justify-content
:
center
;
.nut-indicator__dot
{
margin
:
$indicator-dot-vertical-margin
0
;
&
:first-child
{
margin-top
:
$indicator-dot-first-margin
;
}
&
:last-child
{
margin-bottom
:
$indicator-dot-last-margin
;
}
}
}
}
src/packages/indicator/indicator.tsx
浏览文件 @
b4fc286c
...
...
@@ -8,6 +8,7 @@ export interface IndicatorProps {
block
:
boolean
align
:
'
left
'
|
'
right
'
|
'
center
'
fillZero
:
boolean
vertical
:
boolean
}
const
defaultProps
=
{
size
:
3
,
...
...
@@ -15,6 +16,7 @@ const defaultProps = {
block
:
false
,
align
:
'
center
'
,
fillZero
:
true
,
vertical
:
false
,
}
as
IndicatorProps
export
const
Indicator
:
FunctionComponent
<
...
...
@@ -28,6 +30,7 @@ export const Indicator: FunctionComponent<
fillZero
,
children
,
className
,
vertical
,
...
rest
}
=
{
...
defaultProps
,
...
...
@@ -38,6 +41,7 @@ export const Indicator: FunctionComponent<
{
[
`
${
b
(
'
block
'
)}
`
]:
block
,
[
`
${
b
(
'
align
'
)}
__
${
align
}
`
]:
block
&&
align
,
[
`
${
b
(
'
vertical
'
)}
`
]:
vertical
,
},
b
(
''
)
)
...
...
src/styles/variables.scss
浏览文件 @
b4fc286c
...
...
@@ -443,6 +443,10 @@ $indicator-size: 18px !default;
$indicator-dot-size
:
calc
(
$indicator-size
/
3
)
!
default
;
$indicator-border-size
:
$indicator-size
+
2
!
default
;
$indicator-number-font-size
:
10px
!
default
;
$indicator-dot-margin
:
4px
!
default
;
$indicator-dot-vertical-margin
:
4px
!
default
;
$indicator-dot-first-margin
:
0px
!
default
;
$indicator-dot-last-margin
:
0px
!
default
;
// circleProgress
$circleprogress-primary-color
:
$primary-color
!
default
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录