Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
12527126
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,发现更多精彩内容 >>
未验证
提交
12527126
编写于
8月 05, 2022
作者:
A
ailululu
提交者:
GitHub
8月 05, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: progress 组件 (#187)
上级
18e16b3e
变更
10
隐藏空白更改
内联
并排
Showing
10 changed file
with
1419 addition
and
0 deletion
+1419
-0
src/config.json
src/config.json
+10
-0
src/packages/progress/__tests__/progress.spec.tsx
src/packages/progress/__tests__/progress.spec.tsx
+45
-0
src/packages/progress/demo.tsx
src/packages/progress/demo.tsx
+182
-0
src/packages/progress/doc.en-US.md
src/packages/progress/doc.en-US.md
+301
-0
src/packages/progress/doc.md
src/packages/progress/doc.md
+299
-0
src/packages/progress/doc.zh-TW.md
src/packages/progress/doc.zh-TW.md
+299
-0
src/packages/progress/index.ts
src/packages/progress/index.ts
+3
-0
src/packages/progress/progress.scss
src/packages/progress/progress.scss
+82
-0
src/packages/progress/progress.tsx
src/packages/progress/progress.tsx
+183
-0
src/styles/variables.scss
src/styles/variables.scss
+15
-0
未找到文件。
src/config.json
浏览文件 @
12527126
...
...
@@ -708,6 +708,16 @@
"sort"
:
20
,
"show"
:
true
,
"author"
:
"swag~jun"
},
{
"version"
:
"1.0.0"
,
"name"
:
"Progress"
,
"type"
:
"component"
,
"cName"
:
"进度条"
,
"desc"
:
"用来展示进度"
,
"sort"
:
20
,
"show"
:
true
,
"author"
:
"ailululu"
}
]
},
...
...
src/packages/progress/__tests__/progress.spec.tsx
0 → 100644
浏览文件 @
12527126
import
*
as
React
from
'
react
'
import
{
render
}
from
'
@testing-library/react
'
import
'
@testing-library/jest-dom
'
import
{
Progress
}
from
'
../progress
'
test
(
'
should render progress when use props
'
,
async
()
=>
{
const
{
asFragment
,
container
}
=
render
(<
Progress
percentage
=
{
100
}
/>)
expect
(
asFragment
()).
toMatchSnapshot
()
})
test
(
'
should render different height and color when use color height props
'
,
async
()
=>
{
const
{
container
}
=
render
(
<
Progress
percentage
=
{
50
}
strokeColor
=
"blue"
strokeWidth
=
"20"
textColor
=
"red"
/>
)
const
inner
=
container
.
querySelector
(
'
.nut-progress-inner
'
)
expect
(
inner
?.
getAttribute
(
'
style
'
)).
toBe
(
'
width: 50%; border-radius: 12px; background: blue;
'
)
const
span
=
container
.
querySelector
(
'
.nut-progress-text span
'
)
expect
(
span
?.
getAttribute
(
'
style
'
)).
toBe
(
'
color: red;
'
)
})
test
(
'
should hide percentage when use showText props
'
,
()
=>
{
const
{
container
}
=
render
(<
Progress
percentage
=
{
30
}
showText
=
{
false
}
/>)
const
text
=
container
.
querySelector
(
'
.nut-progress-text
'
)
expect
(
text
).
toBeNull
()
})
test
(
'
should render inside percentage when use textInside props
'
,
()
=>
{
const
{
container
}
=
render
(<
Progress
percentage
=
{
50
}
textInside
/>)
const
text
=
container
.
querySelector
(
'
.nut-progress-text
'
)
expect
(
text
).
toHaveClass
(
'
nut-progress-text nut-progress-insidetext
'
)
})
test
(
'
should render custom size when use size props
'
,
()
=>
{
const
{
container
}
=
render
(<
Progress
percentage
=
{
50
}
size
=
"large"
/>)
expect
(
container
.
querySelector
(
'
.nut-progress-outer
'
)).
toHaveClass
(
'
nut-progress-large
'
)
})
src/packages/progress/demo.tsx
0 → 100644
浏览文件 @
12527126
import
React
,
{
useState
}
from
'
react
'
import
{
useTranslate
}
from
'
../../sites/assets/locale
'
import
{
Progress
}
from
'
./progress
'
import
{
Cell
}
from
'
@/packages/cell/cell
'
import
{
Icon
}
from
'
@/packages/icon/icon
'
import
{
Button
}
from
'
@/packages/button/button
'
import
Toast
from
'
../toast
'
interface
T
{
basic
:
string
customStyle
:
string
noShowPercentage
:
string
showPercentage
:
string
showInsidePercentage
:
string
customContent
:
string
customSize
:
string
statusDisplay
:
string
dynamicChange
:
string
reduce
:
string
add
:
string
}
const
ProgressDemo
=
()
=>
{
const
cellStyles
=
{
paddingRight
:
'
30px
'
,
}
const
[
translated
]
=
useTranslate
<
T
>
({
'
zh-CN
'
:
{
basic
:
'
基础用法
'
,
customStyle
:
'
线形进度条-设置颜色高度
'
,
noShowPercentage
:
'
百分比不显示
'
,
showPercentage
:
'
百分比外显
'
,
showInsidePercentage
:
'
百分比内显
'
,
customContent
:
'
百分比内显自定义
'
,
customSize
:
'
自定义尺寸
'
,
statusDisplay
:
'
状态显示
'
,
dynamicChange
:
'
动态改变
'
,
reduce
:
'
减少
'
,
add
:
'
增加
'
,
},
'
zh-TW
'
:
{
basic
:
'
基礎用法
'
,
customStyle
:
'
線形進度條-設置顏色高度
'
,
noShowPercentage
:
'
百分比不顯示
'
,
showPercentage
:
'
百分比外顯
'
,
showInsidePercentage
:
'
百分比內顯
'
,
customContent
:
'
百分比內顯自定義
'
,
customSize
:
'
自定義尺寸
'
,
statusDisplay
:
'
狀態顯示
'
,
dynamicChange
:
'
動態改變
'
,
reduce
:
'
減少
'
,
add
:
'
增加
'
,
},
'
en-US
'
:
{
basic
:
'
Basic Usage
'
,
customStyle
:
'
Custom Style
'
,
noShowPercentage
:
'
Don’t Show Percentage
'
,
showPercentage
:
'
Percentage displayed outside
'
,
showInsidePercentage
:
'
Percentage displayed inside
'
,
customContent
:
'
Custom Content
'
,
customSize
:
'
Custom Size
'
,
statusDisplay
:
'
Status Display
'
,
dynamicChange
:
'
Dynamic Change
'
,
reduce
:
'
reduce
'
,
add
:
'
add
'
,
},
})
const
[
value
,
setValue
]
=
useState
(
0
)
return
(
<>
<
div
className
=
"demo"
>
<
h2
>
{
translated
.
basic
}
</
h2
>
<
Cell
style
=
{
cellStyles
}
>
<
Progress
percentage
=
{
30
}
/>
</
Cell
>
<
h2
>
{
translated
.
customStyle
}
</
h2
>
<
Cell
style
=
{
cellStyles
}
>
<
Progress
percentage
=
{
30
}
strokeColor
=
"rgba(250,44,25,0.47)"
stroke
-
width
=
"20"
textColor
=
"red"
/>
</
Cell
>
<
h2
>
{
translated
.
noShowPercentage
}
</
h2
>
<
Cell
style
=
{
cellStyles
}
>
<
Progress
percentage
=
{
50
}
showText
=
{
false
}
/>
</
Cell
>
<
h2
>
{
translated
.
showPercentage
}
</
h2
>
<
Cell
style
=
{
cellStyles
}
>
<
Progress
percentage
=
{
30
}
/>
</
Cell
>
<
h2
>
{
translated
.
showInsidePercentage
}
</
h2
>
<
Cell
style
=
{
cellStyles
}
>
<
Progress
percentage
=
{
60
}
textInside
/>
</
Cell
>
<
h2
>
{
translated
.
customContent
}
</
h2
>
<
Cell
style
=
{
cellStyles
}
>
<
Progress
percentage
=
{
60
}
textInside
>
<
Icon
size
=
{
30
}
name
=
"https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
</
Progress
>
</
Cell
>
<
h2
>
{
translated
.
customSize
}
</
h2
>
<
Cell
style
=
{
cellStyles
}
>
<
Progress
percentage
=
{
30
}
size
=
"small"
textInside
/>
</
Cell
>
<
Cell
style
=
{
cellStyles
}
>
<
Progress
percentage
=
{
50
}
size
=
"base"
textInside
/>
</
Cell
>
<
Cell
style
=
{
cellStyles
}
>
<
Progress
percentage
=
{
70
}
size
=
"large"
textInside
/>
</
Cell
>
<
h2
>
{
translated
.
statusDisplay
}
</
h2
>
<
Cell
style
=
{
cellStyles
}
>
<
Progress
percentage
=
{
30
}
strokeColor
=
"linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
status
/>
</
Cell
>
<
Cell
style
=
{
cellStyles
}
>
<
Progress
percentage
=
{
100
}
textType
=
"icon"
/>
</
Cell
>
<
Cell
style
=
{
cellStyles
}
>
<
Progress
percentage
=
{
100
}
strokeColor
=
"linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
strokeWidth
=
"15"
textType
=
"icon"
iconName
=
"issue"
iconColor
=
"red"
/>
</
Cell
>
<
h2
>
{
translated
.
dynamicChange
}
</
h2
>
<
Cell
style
=
{
cellStyles
}
>
<
Progress
percentage
=
{
value
}
/>
</
Cell
>
<
Cell
style
=
{
cellStyles
}
>
<
Button
type
=
"default"
style
=
{
{
margin
:
8
}
}
// eslint-disable-next-line consistent-return
onClick
=
{
()
=>
{
let
num
=
value
if
(
value
<=
0
)
{
Toast
.
text
(
'
进度已为0
'
)
return
false
}
num
-=
10
setValue
(
num
)
}
}
>
{
translated
.
reduce
}
</
Button
>
<
Button
type
=
"primary"
style
=
{
{
margin
:
8
}
}
// eslint-disable-next-line consistent-return
onClick
=
{
()
=>
{
let
num
=
value
if
(
value
>=
100
)
{
Toast
.
text
(
'
进度已为100%
'
)
return
false
}
num
+=
10
setValue
(
num
)
}
}
>
{
translated
.
add
}
</
Button
>
</
Cell
>
</
div
>
</>
)
}
export
default
ProgressDemo
src/packages/progress/doc.en-US.md
0 → 100644
浏览文件 @
12527126
# Progress
### Introduce
Used to show the current progress of the operation.
### Install
```
js
import
{
Progress
,
Icon
}
from
'
@nutui/nutui-react
'
;
```
## Demo
### Basic Usage
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
Progress
percentage
=
"30"
/>
</
Cell
>
);
};
export
default
App
;
```
:::
### Custom Style
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
Progress
percentage
=
"30"
strokeColor
=
"rgba(250,44,25,0.47)"
stroke
-
width
=
"20"
textColor
=
"red"
/>
</
Cell
>
);
};
export
default
App
;
```
:::
### Don't Show Percentage
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
Progress
percentage
=
"50"
showText
=
{
false
}
/>
</
Cell
>
);
};
export
default
App
;
```
:::
### Show Percentage
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
Progress
percentage
=
"30"
/>
</
Cell
>
);
};
export
default
App
;
```
:::
### Text Inside
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
Progress
percentage
=
"60"
textInside
/>
</
Cell
>
);
};
export
default
App
;
```
:::
### Custom Content
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Icon
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Cell
>
<
Progress
percentage
=
{
60
}
textInside
>
<
Icon
size
=
{
30
}
name
=
"https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
</
Progress
>
</
Cell
>
</>
);
};
export
default
App
;
```
:::
## Custom Size
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Cell
>
<
Progress
percentage
=
"30"
size
=
"small"
textInside
/>
</
Cell
>
<
Cell
>
<
Progress
percentage
=
"50"
size
=
"base"
textInside
/>
</
Cell
>
<
Cell
>
<
Progress
percentage
=
"70"
size
=
"large"
textInside
/>
</
Cell
>
</>
);
};
export
default
App
;
```
:::
### Status Display
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Icon
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Cell
>
<
Progress
percentage
=
"30"
strokeColor
=
"linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
status
/>
</
Cell
>
<
Cell
>
<
Progress
percentage
=
"100"
textType
=
"icon"
/>
</
Cell
>
<
Cell
>
<
Progress
percentage
=
"100"
strokeColor
=
"linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
strokeWidth
=
"15"
textType
=
"icon"
iconName
=
"issue"
iconColor
=
"red"
/>
</
Cell
>
</>
);
};
export
default
App
;
```
:::
### Dynamic Change
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Cell
,
Button
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
value
,
setValue
]
=
useState
(
0
);
return
(
<>
<
Cell
>
<
Progress
percentage
=
{
value
}
/>
</
Cell
>
<
Cell
>
<
Button
type
=
"default"
style
=
{
{
margin
:
8
}
}
onClick
=
{
()
=>
{
let
num
=
value
;
if
(
value
<=
0
)
{
return
false
;
}
num
-=
10
;
setValue
(
num
);
}
}
>
减少
</
Button
>
<
Button
type
=
"primary"
onClick
=
{
()
=>
{
let
num
=
value
;
if
(
value
>=
100
)
{
return
false
;
}
num
+=
10
;
setValue
(
num
);
}
}
>
增加
</
Button
>
</
Cell
>
</>
);
};
export
default
App
;
```
:::
## API
### Props
| Props | Description | Type | Default
|----- | ----- | ----- | -----
| percentage | percentage | Number | 0
| isShowPercentage | Whether to display the percent sign | Boolean | true
| fillColor | Progress bar background color | String | #f3f3f3
| strokeColor | Stroke color | String | linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)
| strokeWidth | Stroke width | String | -
| size | Progress bar and text size, eg
`small`
`base`
`large`
| String | base
| showText | Whether to show text | Boolean | true
| textInside | Progress bar text display position(
`false`
外显,
`true`
内显) | Boolean | false
| textColor | Progress bar text color setting | String | 外显
`#333`
内显
`#fff`
| textWidth | Progress bar text width setting | String | 35px
| textBackground | Progress bar text background color setting | String | 同进度条颜色
| textType | Progress bar text type setting,
`text`
(展示文字)/
`icon`
(展示icon标签) | String | text
| status | The current state of the progress bar,
`true`
展示动画效果 | Boolean | false
| iconName | Icon Name | String | checked
| iconColor | Icon Color | String | #439422
| iconSize | Icon Size | String | 16px
| rounded | Whether the corners are rounded | boolean|String | true
src/packages/progress/doc.md
0 → 100644
浏览文件 @
12527126
# Progress 进度条
### 介绍
展示操作或任务的当前进度。
### 安装
```
js
import
{
Progress
,
Icon
}
from
'
@nutui/nutui-react
'
;
```
## 代码演示
### 基础用法
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
Progress
percentage
=
"30"
/>
</
Cell
>
);
};
export
default
App
;
```
:::
### 设置高度和颜色
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
Progress
percentage
=
"30"
strokeColor
=
"rgba(250,44,25,0.47)"
stroke
-
width
=
"20"
textColor
=
"red"
/>
</
Cell
>
);
};
export
default
App
;
```
:::
### 设置百分比不显示
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
Progress
percentage
=
"50"
showText
=
{
false
}
/>
</
Cell
>
);
};
export
default
App
;
```
:::
### 设置百分比外显
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
Progress
percentage
=
"30"
/>
</
Cell
>
);
};
export
default
App
;
```
:::
### 设置百分比内显
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
Progress
percentage
=
"60"
textInside
/>
</
Cell
>
);
};
export
default
App
;
```
:::
### 设置内显自定义内容
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Icon
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
Progress
percentage
=
{
60
}
textInside
>
<
Icon
size
=
{
30
}
name
=
"https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
</
Progress
>
</
Cell
>
);
};
export
default
App
;
```
:::
### 自定义尺寸
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Cell
>
<
Progress
percentage
=
"30"
size
=
"small"
textInside
/>
</
Cell
>
<
Cell
>
<
Progress
percentage
=
"50"
size
=
"base"
textInside
/>
</
Cell
>
<
Cell
>
<
Progress
percentage
=
"70"
size
=
"large"
textInside
/>
</
Cell
>
</>
);
};
export
default
App
;
```
:::
### 设置状态显示
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Icon
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Cell
>
<
Progress
percentage
=
"30"
strokeColor
=
"linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
status
/>
</
Cell
>
<
Cell
>
<
Progress
percentage
=
"100"
textType
=
"icon"
/>
</
Cell
>
<
Cell
>
<
Progress
percentage
=
"100"
strokeColor
=
"linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
strokeWidth
=
"15"
textType
=
"icon"
iconName
=
"issue"
iconColor
=
"red"
/>
</
Cell
>
</>
);
};
export
default
App
;
```
:::
### 动态改变
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Cell
,
Button
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
value
,
setValue
]
=
useState
(
0
);
return
(
<>
<
Cell
>
<
Progress
percentage
=
{
value
}
/>
</
Cell
>
<
Cell
>
<
Button
type
=
"default"
style
=
{
{
margin
:
8
}
}
onClick
=
{
()
=>
{
let
num
=
value
;
if
(
value
<=
0
)
{
return
false
;
}
num
-=
10
;
setValue
(
num
);
}
}
>
减少
</
Button
>
<
Button
type
=
"primary"
onClick
=
{
()
=>
{
let
num
=
value
;
if
(
value
>=
100
)
{
return
false
;
}
num
+=
10
;
setValue
(
num
);
}
}
>
增加
</
Button
>
</
Cell
>
</>
);
};
export
default
App
;
```
:::
## API
### Props
| 字段 | 说明 | 类型 | 默认值
|----- | ----- | ----- | -----
| percentage | 百分比 | Number | 0
| isShowPercentage | 是否需要展示百分号 | Boolean | true
| fillColor | 进度条填充颜色 | String | #f3f3f3
| strokeColor | 进度条线条背景色 | String | linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)
| strokeWidth | 进度条宽度 | String | -
| size | 进度条及文字尺寸,可选值
`small`
`base`
`large`
| String | base
| showText | 是否显示进度条文字内容 | Boolean | true
| textInside | 进度条文字显示位置(
`false`
外显,
`true`
内显) | Boolean | false
| textColor | 进度条文字颜色设置 | String | 外显
`#333`
内显
`#fff`
| textWidth | 进度条文字宽度 | String | 35px
| textBackground | 进度条文字背景颜色设置 | String | 同进度条颜色
| textType | 进度条文字类型,
`text`
(展示文字)/
`icon`
(展示icon标签) | String | text
| status | 进度条当前状态,
`true`
展示动画效果 | Boolean | false
| iconName | Icon 名称 | String | checked
| iconColor | Icon 颜色 | String | #439422
| iconSize | Icon 大小 | String | 16px
| rounded | 是否圆角 | boolean|String | true
src/packages/progress/doc.zh-TW.md
0 → 100644
浏览文件 @
12527126
# Progress 進度條
### 介紹
展示操作或任務的當前進度。
### 安裝
```
js
import
{
Progress
,
Icon
}
from
'
@nutui/nutui-react
'
;
```
## 代碼演示
### 基礎用法
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
Progress
percentage
=
"30"
/>
</
Cell
>
);
};
export
default
App
;
```
:::
### 線形進度條-設置顏色高度
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
Progress
percentage
=
"30"
strokeColor
=
"rgba(250,44,25,0.47)"
stroke
-
width
=
"20"
textColor
=
"red"
/>
</
Cell
>
);
};
export
default
App
;
```
:::
### 百分比不顯示
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
Progress
percentage
=
"50"
showText
=
{
false
}
/>
</
Cell
>
);
};
export
default
App
;
```
:::
### 百分比外顯
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
Progress
percentage
=
"30"
/>
</
Cell
>
);
};
export
default
App
;
```
:::
### 百分比內顯
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
Progress
percentage
=
"60"
textInside
/>
</
Cell
>
);
};
export
default
App
;
```
:::
### 百分比內顯自定義
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Icon
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
>
<
Progress
percentage
=
{
60
}
textInside
>
<
Icon
size
=
{
30
}
name
=
"https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
</
Progress
>
</
Cell
>
);
};
export
default
App
;
```
:::
### 自定義尺寸
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Cell
>
<
Progress
percentage
=
"30"
size
=
"small"
textInside
/>
</
Cell
>
<
Cell
>
<
Progress
percentage
=
"50"
size
=
"base"
textInside
/>
</
Cell
>
<
Cell
>
<
Progress
percentage
=
"70"
size
=
"large"
textInside
/>
</
Cell
>
</>
);
};
export
default
App
;
```
:::
### 狀態顯示
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Icon
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Cell
>
<
Progress
percentage
=
"30"
strokeColor
=
"linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
status
/>
</
Cell
>
<
Cell
>
<
Progress
percentage
=
"100"
textType
=
"icon"
/>
</
Cell
>
<
Cell
>
<
Progress
percentage
=
"100"
strokeColor
=
"linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
strokeWidth
=
"15"
textType
=
"icon"
iconName
=
"issue"
iconColor
=
"red"
/>
</
Cell
>
</>
);
};
export
default
App
;
```
:::
### 動態改變
:::demo
```
jsx
import
React
from
"
react
"
;
import
{
Progress
,
Cell
,
Button
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
value
,
setValue
]
=
useState
(
0
);
return
(
<>
<
Cell
>
<
Progress
percentage
=
{
value
}
/>
</
Cell
>
<
Cell
>
<
Button
type
=
"default"
style
=
{
{
margin
:
8
}
}
onClick
=
{
()
=>
{
let
num
=
value
;
if
(
value
<=
0
)
{
return
false
;
}
num
-=
10
;
setValue
(
num
);
}
}
>
減少
</
Button
>
<
Button
type
=
"primary"
onClick
=
{
()
=>
{
let
num
=
value
;
if
(
value
>=
100
)
{
return
false
;
}
num
+=
10
;
setValue
(
num
);
}
}
>
增加
</
Button
>
</
Cell
>
</>
);
};
export
default
App
;
```
:::
## API
### Props
| 屬性 | 說明 | 類型 | 預設值
|----- | ----- | ----- | -----
| percentage | 百分比 | Number | 0
| isShowPercentage | 是否需要展示百分号 | Boolean | true
| fillColor | 进度条填充颜色 | String | #f3f3f3
| strokeColor | 进度条线条背景色 | String | linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)
| strokeWidth | 进度条宽度 | String | -
| size | 进度条及文字尺寸,可选值
`small`
`base`
`large`
| String | base
| showText | 是否显示进度条文字内容 | Boolean | true
| textInside | 进度条文字显示位置(
`false`
外显,
`true`
内显) | Boolean | false
| textColor | 进度条文字颜色设置 | String | 外显
`#333`
内显
`#fff`
| textWidth | 进度条文字宽度 | String | 35px
| textBackground | 进度条文字背景颜色设置 | String | 同进度条颜色
| textType | 进度条文字类型,
`text`
(展示文字)/
`icon`
(展示icon标签) | String | text
| status | 进度条当前状态,
`true`
展示动画效果 | Boolean | false
| iconName | Icon 名称 | String | checked
| iconColor | Icon 颜色 | String | #439422
| iconSize | Icon 大小 | String | 16px
| rounded | 是否圆角 | boolean|String | true
src/packages/progress/index.ts
0 → 100644
浏览文件 @
12527126
import
{
Progress
}
from
'
./progress
'
export
default
Progress
src/packages/progress/progress.scss
0 → 100644
浏览文件 @
12527126
@import
'../icon/icon.scss'
;
.nut-progress
{
display
:
flex
;
align-items
:
center
;
position
:
relative
;
width
:
100%
;
&
-outer
{
flex
:
auto
;
.nut-progress-text
{
}
.nut-progress-active
:before
{
content
:
''
;
position
:
absolute
;
top
:
0
;
left
:
0
;
right
:
0
;
bottom
:
0
;
border-radius
:
$progress-border-radius
;
animation
:
progressActive
2s
ease-in-out
infinite
;
}
}
&
-small
{
height
:
$progress-small-height
;
.nut-progress-text
{
font-size
:
$progress-small-font-size
;
padding
:
$progress-small-padding
;
}
}
&
-base
{
height
:
$progress-base-height
;
.nut-progress-text
{
font-size
:
$progress-base-font-size
;
padding
:
$progress-base-padding
;
}
}
&
-large
{
height
:
$progress-large-height
;
.nut-progress-text
{
font-size
:
$progress-large-font-size
;
padding
:
$progress-large-padding
;
}
}
&
-inner
{
height
:
100%
;
display
:
flex
;
flex-direction
:
column
;
justify-content
:
center
;
transition
:
all
0
.4s
;
}
&
-text
{
display
:
flex
;
padding
:
$progress-text-padding
;
font-size
:
$progress-text-font-size
;
line-height
:
1
;
min-width
:
35px
;
}
&
-insidetext
{
position
:
absolute
;
top
:
-4px
;
bottom
:
-4px
;
display
:
flex
;
align-items
:
center
;
min-width
:
0px
;
transition
:
all
0
.4s
;
transform
:
translate
(
-50%
);
border-radius
:
$progress-insidetext-border-radius
;
}
@keyframes
progressActive
{
0
%
{
background
:
rgba
(
255
,
255
,
255
,
0
.1
);
width
:
0
;
}
20
%
{
background
:
rgba
(
255
,
255
,
255
,
0
.5
);
width
:
0
;
}
to
{
background
:
rgba
(
255
,
255
,
255
,
0
);
width
:
100%
;
}
}
}
src/packages/progress/progress.tsx
0 → 100644
浏览文件 @
12527126
import
React
,
{
FunctionComponent
,
CSSProperties
,
ReactNode
}
from
'
react
'
import
classNames
from
'
classnames
'
import
{
Icon
}
from
'
@/packages/icon/icon
'
import
bem
from
'
@/utils/bem
'
export
type
ProgressSize
=
'
small
'
|
'
base
'
|
'
large
'
export
type
TextType
=
'
icon
'
|
'
text
'
export
interface
ProgressProps
{
className
:
string
style
:
CSSProperties
isShowPercentage
:
boolean
percentage
:
number
fillColor
:
string
strokeColor
:
string
strokeWidth
:
string
size
:
ProgressSize
textColor
:
string
textWidth
:
string
showText
:
boolean
textInside
:
boolean
textBackground
:
string
textType
:
TextType
status
:
boolean
iconName
:
string
iconColor
:
string
iconSize
:
string
rounded
:
boolean
|
string
children
:
ReactNode
}
const
defaultProps
=
{
className
:
''
,
style
:
{},
isShowPercentage
:
true
,
percentage
:
0
,
fillColor
:
'
#f3f3f3
'
,
strokeColor
:
'
linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)
'
,
strokeWidth
:
''
,
textColor
:
''
,
textWidth
:
''
,
showText
:
true
,
textInside
:
false
,
textBackground
:
'
linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)
'
,
textType
:
'
text
'
,
status
:
false
,
iconName
:
'
checked
'
,
iconColor
:
'
#439422
'
,
iconSize
:
'
16px
'
,
rounded
:
true
,
children
:
undefined
,
}
as
ProgressProps
export
const
Progress
:
FunctionComponent
<
Partial
<
ProgressProps
>
&
React
.
HTMLAttributes
<
HTMLDivElement
>
>
=
(
props
)
=>
{
const
{
className
,
style
,
isShowPercentage
,
percentage
,
fillColor
,
strokeColor
,
strokeWidth
,
size
,
textColor
,
textWidth
,
showText
,
textInside
,
textBackground
,
textType
,
status
,
iconName
,
iconColor
,
iconSize
,
rounded
,
children
,
...
rest
}
=
{
...
defaultProps
,
...
props
}
const
b
=
bem
(
'
progress
'
)
const
classes
=
classNames
(
b
(
''
))
const
classesOuter
=
classNames
({
[
`
${
b
(
''
)}
-outer`
]:
true
,
[
`
${
b
(
''
)}
-
${
size
||
'
base
'
}
`
]:
true
,
})
const
classesInner
=
classNames
({
[
`
${
b
(
''
)}
-inner`
]:
true
,
[
`
${
b
(
''
)}
-active`
]:
status
,
})
const
classesText
=
classNames
({
[
`
${
b
(
''
)}
-text`
]:
true
,
})
const
classesInsideText
=
classNames
({
[
`
${
b
(
''
)}
-text`
]:
true
,
[
`
${
b
(
''
)}
-insidetext`
]:
true
,
})
const
classesTextInner
=
classNames
({
[
`
${
b
(
''
)}
-text__inner`
]:
true
,
})
const
stylesOuter
:
React
.
CSSProperties
=
{
height
:
`
${
strokeWidth
}
px`
,
// eslint-disable-next-line no-nested-ternary
borderRadius
:
`
${
rounded
?
(
rounded
===
true
?
'
12px
'
:
rounded
)
:
0
}
`
,
background
:
`
${
fillColor
}
`
,
}
const
stylesInner
:
React
.
CSSProperties
=
{
width
:
`
${
percentage
}
%`
,
// eslint-disable-next-line no-nested-ternary
borderRadius
:
`
${
rounded
?
(
rounded
===
true
?
'
12px
'
:
rounded
)
:
0
}
`
,
background
:
`
${
strokeColor
}
`
,
}
const
stylesInsideText
:
React
.
CSSProperties
=
{
width
:
`
${
textWidth
}
px`
,
left
:
`
${
percentage
}
%`
,
background
:
textBackground
||
strokeColor
,
}
const
stylesInsideIcon
:
React
.
CSSProperties
=
{
width
:
`
${
textWidth
}
px`
,
left
:
`
${
percentage
}
%`
,
}
const
stylesText
:
React
.
CSSProperties
=
{
width
:
`
${
textWidth
}
px`
,
}
return
(
<
div
className
=
{
`
${
classes
}
${
className
}
`
}
style
=
{
style
}
{
...
rest
}
>
<
div
className
=
{
classesOuter
}
style
=
{
stylesOuter
}
>
<
div
className
=
{
classesInner
}
style
=
{
stylesInner
}
>
{
showText
&&
textInside
&&
(
<>
{
children
?
(
<
div
className
=
{
classesInsideText
}
style
=
{
stylesInsideIcon
}
>
{
children
}
</
div
>
)
:
(
<
div
className
=
{
classesInsideText
}
style
=
{
stylesInsideText
}
>
<
span
className
=
{
classesTextInner
}
style
=
{
{
color
:
textColor
||
'
#fff
'
}
}
>
{
percentage
}
{
isShowPercentage
?
'
%
'
:
''
}
</
span
>
</
div
>
)
}
</>
)
}
</
div
>
</
div
>
{
showText
&&
!
textInside
&&
(
<
div
className
=
{
classesText
}
style
=
{
stylesText
}
>
{
textType
===
'
text
'
&&
(
<
span
className
=
{
classesTextInner
}
style
=
{
{
color
:
textColor
||
'
#333
'
}
}
>
{
percentage
}
{
isShowPercentage
?
'
%
'
:
''
}
</
span
>
)
}
{
textType
===
'
icon
'
&&
(
<
Icon
size
=
{
iconSize
}
name
=
{
iconName
}
color
=
{
iconColor
}
/>
)
}
</
div
>
)
}
</
div
>
)
}
Progress
.
defaultProps
=
defaultProps
Progress
.
displayName
=
'
NutProgress
'
src/styles/variables.scss
浏览文件 @
12527126
...
...
@@ -548,6 +548,21 @@ $row-content-height: 50px !default;
$row-content-line-height
:
40px
!
default
;
$col-default-margin-bottom
:
15px
!
default
;
// progress
$progress-border-radius
:
12px
!
default
;
$progress-text-padding
:
0
5px
!
default
;
$progress-text-font-size
:
13px
!
default
;
$progress-insidetext-border-radius
:
5px
!
default
;
$progress-small-height
:
5px
!
default
;
$progress-base-height
:
10px
!
default
;
$progress-large-height
:
15px
!
default
;
$progress-small-padding
:
0
4px
!
default
;
$progress-base-padding
:
0
5px
!
default
;
$progress-large-padding
:
0
5px
!
default
;
$progress-small-font-size
:
7px
!
default
;
$progress-base-font-size
:
9px
!
default
;
$progress-large-font-size
:
13px
!
default
;
// animatingnumbers
$countup-height
:
32px
!
default
;
$countup-base-size
:
18px
!
default
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录