Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 b4fc286c 编写于 作者: L lkjh3214 提交者： GitHub
浏览文件
操作

feat: indicator指示器组件，新增国际化文档 (#166)

上级 e10a6204
隐藏空白更改
内联 并排
Showing with 376 addition and 38 deletion
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.
先完成此消息的编辑！
想要评论请 注册 或