Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

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

提交 8dfdff8d 编写于 作者: O oasis-cloud
浏览文件
操作

chore: update git hooks

上级 11e2a07f 613de2b7
隐藏空白更改
内联 并排
Showing with 681 addition and 559 deletion
src/packages/avatar/doc.en-US.md
浏览文件 @ 8dfdff8d
# Avatar 头像
# Avatar
### 介绍
### Intro
用来代表用户或事物，支持图片、图标或字符展示。
Avatars can be used to represent people or objects. It supports images, Icons, or letters.
### 安装
### Install
``` ts
import { Avatar } from '@nutui/nutui-react';
```
### Basic usage
## 代码示例
### 基本用法
内置 smal / normal / large 三种尺寸规格
Support three sizes：small、normal、large
:::demo
``` tsx
......@@ -23,11 +20,11 @@ import { Avatar } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Avatar size="large" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
<Avatar size="large" icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
/>
<Avatar size="normal" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
<Avatar size="normal" icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
/>
<Avatar size="small" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
<Avatar size="small" icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
/>
</>
)
......@@ -36,7 +33,9 @@ export default App;
```
:::
### 修改形状类型
### Shape
Support two shapes：square、round
:::demo
``` tsx
......@@ -55,20 +54,21 @@ export default App;
```
:::
### 修改背景色
### Type
Support three types：picture、icon、letter
:::demo
``` tsx
import React from "react";
import { Avatar } from '@nutui/nutui-react';
const styles = {
color: "#fff"
}
const App = () => {
return (
<>
<Avatar className="demo-avatar" bgColor="#FA2C19" icon="my" style={styles} />
<Avatar url="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" />
<Avatar icon="my" />
<Avatar>N</Avatar>
</>
)
}
......@@ -76,7 +76,9 @@ export default App;
```
:::
### 修改背景icon
### Custom colors and background colors
Icon and letter types can have custom colors and background colors
:::demo
``` tsx
......@@ -86,7 +88,8 @@ import { Avatar } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Avatar icon="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
<Avatar className="demo-avatar" icon="my" color="#fff" bgColor="#FA2C19" />
<Avatar color="rgb(245, 106, 0)" bgColor="rgb(253, 227, 207)">U</Avatar>
</>
)
}
......@@ -94,17 +97,55 @@ export default App;
```
:::
### 设置头像的文本内容
### Avatar with badge
:::demo
``` tsx
import React from "react";
import { Avatar } from '@nutui/nutui-react';
import { Avatar, Badge } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Badge value="8">
<Avatar icon="my" shape="square" />
</Badge>
<Badge dot>
<Avatar icon="my" shape="square" />
</Badge>
</>
)
}
export default App;
```
:::
### Avatar group display
:::demo
``` tsx
import React from "react";
import { Avatar, AvatarGroup } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Avatar icon="">N</Avatar>
<AvatarGroup span="-4">
<Avatar url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
<Avatar icon="my" />
<Avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">
U
</Avatar>
</AvatarGroup>
<AvatarGroup maxCount="3" maxColor="#fff" maxBgColor="#498ff2">
<Avatar url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
<Avatar icon="my" />
<Avatar color="rgb(245, 106, 0)" bgColor="rgb(253, 227, 207)">
U
</Avatar>
<Avatar icon="my" />
</AvatarGroup>
</>
)
}
......@@ -112,7 +153,32 @@ export default App;
```
:::
### 点击头像触发事件
### Avatar group to control hierarchy direction
:::demo
``` tsx
import React from "react";
import { Avatar, AvatarGroup } from '@nutui/nutui-react';
const App = () => {
return (
<>
<AvatarGroup maxCount="3" zIndex="right" maxContent="...">
<Avatar url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
<Avatar icon="my" />
<Avatar color="rgb(245, 106, 0)" bgColor="rgb(253, 227, 207)">
U
</Avatar>
<Avatar icon="my" />
</AvatarGroup>
</>
)
}
export default App;
```
:::
### Click on the avatar to trigger the event
:::demo
``` tsx
......@@ -120,12 +186,12 @@ import React from "react";
import { Avatar } from '@nutui/nutui-react';
const App = () => {
const handleClick = () => {
console.log('触发点击头像')
const activeAvatar = () => {
console.log('Trigger click on avatar')
}
return (
<>
<Avatar icon="my" onClick={handleClick} />
<Avatar icon="my" activeAvatar={activeAvatar} />
</>
)
}
......@@ -135,16 +201,30 @@ export default App;
### Prop
| 字段 | 说明 | 类型 | 默认值 |
|----------|--------------------------------------------------------------------------|--------|--------|
| bgColor | 设置头像背景色 | String | #eee |
| size | 设置头像的大小，提供三种：large/normal/small，支持直接输入数字 | String | normal |
| shape | 设置头像的形状，默认是圆形，可以设置为square方形 | String | round |
| src | 设置头像的背景图片 | String | '' |
| icon | 设置头像的icon图标, 优先级低于src,类似Icon组件的name属性，支持名称和链接 | String | '' |
| Attribute | Description | Type | Default |
| -------- | ---------------------------------------------------------------- | ------ | ------ |
| size | The size of the avatar,eg：`large`、`normal`、`small`,and numbers | String | normal |
| shape | The shape of avatar，eg：`square`、`round` | String | round |
| bgColor | The colors of Icon and letter types | String | #eee |
| color | The background colors of Icon and letter types | String | #666 |
| url | The address of the image for an image avatar or image element | String | - |
| alt | This attribute defines the alternative text describing the image | String | - |
| icon | Custom icon type for an icon avatar, Refer to the name attribute of Icon component | String | - |
### avatarGroup
| Attribute | Description | Type | Default |
| -------- | ---------------------------------------------------------------- | ------ | ------ |
| maxCount | Max avatars to show | Number、String | - |
| maxContent | When the number of avatars exceeds, a avatar folding element will appear，The content of this element can be `...`、`more`、`+N`。默认为 +N |
| size | The size of the avatar，eg：`large`、`normal`、`small`，supports direct input of numbers | String | +N |
| shape | The shape of avatar，eg：`square`、`round` | String | round |
| maxBgColor | The colors of Icon and letter types | String | #eee |
| maxColor | The background colors of Icon and letter types | String | #666 |
| span | Distance between avatars | String | -8 |
| zIndex | Hierarchy direction between avatar group，eg：`left`、`right` | String | left |
### Events
| 字段 | 说明 | 类型 | 回调参数 |
|----------|----------------------|----------|----------|
| onClick | 点击图片触发事件 | Function | event |
\ No newline at end of file
| Event | Description | Type | Arguments |
| ---------------- | ------------ | -------- | -------- |
| activeAvatar | Emitted when cell is clicked | Function | event |
| onError | Handler when img load error | Function | event |
\ No newline at end of file
src/packages/avatar/doc.zh-TW.md
浏览文件 @ 8dfdff8d
# Avatar 头像
# Avatar 頭像
### 介绍
### 介紹
用来代表用户或事物，支持图片、图标或字符展示。
用來代表用戶或事物，支持圖片、圖標或字符展示。
### 安装
### 安裝
``` ts
import { Avatar } from '@nutui/nutui-react';
```
## 代码示例
### 基本用法
内置 smal / normal / large 三种尺寸规格
支持三種尺寸：small、normal、large
:::demo
``` tsx
......@@ -23,11 +21,11 @@ import { Avatar } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Avatar size="large" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
<Avatar size="large" icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
/>
<Avatar size="normal" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
<Avatar size="normal" icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
/>
<Avatar size="small" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
<Avatar size="small" icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
/>
</>
)
......@@ -36,7 +34,9 @@ export default App;
```
:::
### 修改形状类型
### 頭像形狀
支持兩種形狀：square、round
:::demo
``` tsx
......@@ -55,20 +55,21 @@ export default App;
```
:::
### 修改背景色
### 頭像類型
支持三種類型：圖片、Icon 以及字符
:::demo
``` tsx
import React from "react";
import { Avatar } from '@nutui/nutui-react';
const styles = {
color: "#fff"
}
const App = () => {
return (
<>
<Avatar className="demo-avatar" bgColor="#FA2C19" icon="my" style={styles} />
<Avatar url="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" />
<Avatar icon="my" />
<Avatar>N</Avatar>
</>
)
}
......@@ -76,7 +77,9 @@ export default App;
```
:::
### 修改背景icon
### 自定義顏色及背景色
Icon 和字符型可以自定義圖標顏色及背景色
:::demo
``` tsx
......@@ -86,7 +89,8 @@ import { Avatar } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Avatar icon="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
<Avatar className="demo-avatar" icon="my" color="#fff" bgColor="#FA2C19" />
<Avatar color="rgb(245, 106, 0)" bgColor="rgb(253, 227, 207)">U</Avatar>
</>
)
}
......@@ -94,17 +98,22 @@ export default App;
```
:::
### 设置头像的文本内容
### 帶徽標的頭像
:::demo
``` tsx
import React from "react";
import { Avatar } from '@nutui/nutui-react';
import { Avatar, Badge } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Avatar icon="">N</Avatar>
<Badge value="8">
<Avatar icon="my" shape="square" />
</Badge>
<Badge dot>
<Avatar icon="my" shape="square" />
</Badge>
</>
)
}
......@@ -112,7 +121,65 @@ export default App;
```
:::
### 点击头像触发事件
### 頭像組合展現
:::demo
``` tsx
import React from "react";
import { Avatar, AvatarGroup } from '@nutui/nutui-react';
const App = () => {
return (
<>
<AvatarGroup span="-4">
<Avatar url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
<Avatar icon="my" />
<Avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">
U
</Avatar>
</AvatarGroup>
<AvatarGroup maxCount="3" maxColor="#fff" maxBgColor="#498ff2">
<Avatar url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
<Avatar icon="my" />
<Avatar color="rgb(245, 106, 0)" bgColor="rgb(253, 227, 207)">
U
</Avatar>
<Avatar icon="my" />
</AvatarGroup>
</>
)
}
export default App;
```
:::
### 組合頭像可控制層級方向
:::demo
``` tsx
import React from "react";
import { Avatar, AvatarGroup } from '@nutui/nutui-react';
const App = () => {
return (
<>
<AvatarGroup maxCount="3" zIndex="right" maxContent="...">
<Avatar url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
<Avatar icon="my" />
<Avatar color="rgb(245, 106, 0)" bgColor="rgb(253, 227, 207)">
U
</Avatar>
<Avatar icon="my" />
</AvatarGroup>
</>
)
}
export default App;
```
:::
### 點擊頭像觸發事件
:::demo
``` tsx
......@@ -120,12 +187,12 @@ import React from "react";
import { Avatar } from '@nutui/nutui-react';
const App = () => {
const handleClick = () => {
console.log('触发点击头像')
const activeAvatar = () => {
console.log('觸發點擊頭像')
}
return (
<>
<Avatar icon="my" onClick={handleClick} />
<Avatar icon="my" activeAvatar={activeAvatar} />
</>
)
}
......@@ -135,16 +202,30 @@ export default App;
### Prop
| 字段 | 说明 | 类型 | 默认值 |
|----------|--------------------------------------------------------------------------|--------|--------|
| bgColor | 设置头像背景色 | String | #eee |
| size | 设置头像的大小，提供三种：large/normal/small，支持直接输入数字 | String | normal |
| shape | 设置头像的形状，默认是圆形，可以设置为square方形 | String | round |
| src | 设置头像的背景图片 | String | '' |
| icon | 设置头像的icon图标, 优先级低于src,类似Icon组件的name属性，支持名称和链接 | String | '' |
| 字段 | 說明 | 類型 | 默認值 |
| -------- | ---------------------------------------------------------------- | ------ | ------ |
| size | 設置頭像的大小，可選值為：large、normal、small，支持直接輸入數字 | String | normal |
| shape | 設置頭像的形狀，可選值為：square、round | String | round |
| bgColor | 設置 Icon、字符類型頭像的背景色 | String | #eee |
| color | 設置 Icon、字符類型頭像的顏色 | String | #666 |
| url | 設置圖片類型頭像的地址 | String | - |
| alt | 設置圖片類型頭像無法顯示時的替代文本 | String | - |
| icon | 設置 Icon 類型頭像圖標, 類似 Icon 組件的 name 屬性 | String | - |
### avatarGroup
| 字段 | 說明 | 類型 | 默認值 |
| -------- | ---------------------------------------------------------------- | ------ | ------ |
| maxCount | 顯示的最大頭像個數 | Number、String | - |
| maxContent | 頭像數量超出時，會出現一個頭像折疊元素。該元素內容可為...、more、+N。默認為 +N |
| size | 設置頭像的大小，可選值為：large、normal、small，支持直接輸入數字 | String | +N |
| shape | 設置頭像的形狀，可選值為：square、round | String | round |
| maxBgColor | 設置 Icon、字符類型頭像的背景色 | String | #eee |
| maxColor | 設置 Icon、字符類型頭像的顏色 | String | #666 |
| span | 設置頭像之間的間距 | String | -8 |
| zIndex | 頭像之間的層級關係，可選值為：left、right | String | left |
### Events
| 字段 | 说明 | 类型 | 回调参数 |
|----------|----------------------|----------|----------|
| onClick | 点击图片触发事件 | Function | event |
\ No newline at end of file
| 字段 | 說明 | 類型 | 回調參數 |
| ---------------- | ------------ | -------- | -------- |
| activeAvatar | 點擊頭像觸發事件 | Function | event |
| onError | 圖片加載失敗的事件 | Function | event |
\ No newline at end of file
src/packages/barrage/doc.en-US.md
浏览文件 @ 8dfdff8d
# Barrage 弹幕
# Barrage
### 介绍
### Intro
用于话语和词组的轮播展示，适用于视频中或其他类似需求中。
It is used for the rotation display of words and phrases, which is suitable for video or other similar needs.
### 安装
### Install
``` ts
import { Barrage } from '@nutui/nutui-react';
```
## 代码演示
## Code demonstration
### 基础用法
### Basic usage
:::demo
```tsx
......@@ -25,23 +25,23 @@ const barrageStyle = {
boxSizing: 'border-box'
}
const App = () => {
const list = ['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-']
const list = ['beautiful painting', 'Unconsciously', 'Super Plus enjoy', 'male silent female tears', 'Tired of not loving', 'cool-']
const barrageRef = useRef(null)
const addBarrage = () => {
const n = Math.random()
if (barrageRef.current) {
barrageRef.current.add(`随机——${ String(n).substr(2, 10)}`)
barrageRef.current.add(`random——${ String(n).substr(2, 10)}`)
}
}
return (
<div className="demo">
<h2>基础用法</h2>
<h2>Basic usage</h2>
<Cell className="barrage-demo-wrap" style={barrageStyle}>
<Barrage className="barrage-demo" ref={barrageRef} barrageList={list} style={barrageStyle} />
</Cell>
<div className="test" style={{ textAlign: 'center' }}>
<Button type="danger" onClick={addBarrage}>
随机添加
add randomly
</Button>
</div>
</div>
......@@ -56,17 +56,17 @@ export default App;
### Props
| 参数 | 说明 | 类型 | 默认值 |
| Attribute | Description | Type | Default |
|--------------|----------------------------------|--------|------------------|
| barrageList | 弹幕列表数据 | Array | [] |
| frequency | 可视区域内每个弹幕出现的时间间隔 | Number | 500 |
| speeds | 每个弹幕的滚动时间 | Number | 2000 |
| rows | 弹幕行数，分几行展示 | Number | 1 |
| top | 弹幕垂直距离 | Number | 10 |
| loop | 是否循环播放 | Boolean | true |
| barrageList | Barrage list data | Array | [] |
| frequency | The time interval between the occurrence of each barrage in the visual area | Number | 500 |
| speeds | Rolling time of each barrage | Number | 2000 |
| rows | The number of bullet screen lines is displayed in several lines | Number | 1 |
| top | Vertical distance of barrage | Number | 10 |
| loop | Loop play | Boolean | true |
### Events
| 事件名 | 说明 | 回调参数 |
| Event | Description | Arguments |
|--------|----------------|--------------|
| add | 添加数据 | - |
\ No newline at end of file
| add | Add data | - |
\ No newline at end of file
src/packages/barrage/doc.zh-TW.md
浏览文件 @ 8dfdff8d
# Barrage 弹幕
# Barrage 彈幕
### 介绍
### 介紹
用于话语和词组的轮播展示，适用于视频中或其他类似需求中。
用於話語和詞組的輪播展示，適用於視頻中或其他類似需求中。
### 安装
### 安裝
``` ts
import { Barrage } from '@nutui/nutui-react';
```
## 代码演示
## 代碼演示
### 基础用法
### 基礎用法
:::demo
```tsx
......@@ -25,23 +25,23 @@ const barrageStyle = {
boxSizing: 'border-box'
}
const App = () => {
const list = ['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-']
const list = ['畫美不看', '不明覺厲', '喜大普奔', '男默女淚', '累覺不愛', '爺青結-']
const barrageRef = useRef(null)
const addBarrage = () => {
const n = Math.random()
if (barrageRef.current) {
barrageRef.current.add(`随机——${ String(n).substr(2, 10)}`)
barrageRef.current.add(`隨機——${ String(n).substr(2, 10)}`)
}
}
return (
<div className="demo">
<h2>基础用法</h2>
<h2>基礎用法</h2>
<Cell className="barrage-demo-wrap" style={barrageStyle}>
<Barrage className="barrage-demo" ref={barrageRef} barrageList={list} style={barrageStyle} />
</Cell>
<div className="test" style={{ textAlign: 'center' }}>
<Button type="danger" onClick={addBarrage}>
随机添加
隨機添加
</Button>
</div>
</div>
......@@ -56,17 +56,17 @@ export default App;
### Props
| 参数 | 说明 | 类型 | 默认值 |
| 參數 | 說明 | 類型 | 默認值 |
|--------------|----------------------------------|--------|------------------|
| barrageList | 弹幕列表数据 | Array | [] |
| frequency | 可视区域内每个弹幕出现的时间间隔 | Number | 500 |
| speeds | 每个弹幕的滚动时间 | Number | 2000 |
| rows | 弹幕行数，分几行展示 | Number | 1 |
| top | 弹幕垂直距离 | Number | 10 |
| loop | 是否循环播放 | Boolean | true |
| barrageList | 彈幕列表數據 | Array | [] |
| frequency | 可視區域內每個彈幕出現的時間間隔 | Number | 500 |
| speeds | 每個彈幕的滾動時間 | Number | 2000 |
| rows | 彈幕行數，分幾行展示 | Number | 1 |
| top | 彈幕垂直距離 | Number | 10 |
| loop | 是否循環播放 | Boolean | true |
### Events
| 事件名 | 说明 | 回调参数 |
| 事件名 | 說明 | 回調參數 |
|--------|----------------|--------------|
| add | 添加数据 | - |
\ No newline at end of file
| add | 添加數據 | - |
\ No newline at end of file
src/packages/circleprogress/doc.en-US.md
浏览文件 @ 8dfdff8d
# CricleProgress 进度条
# CricleProgress
### 介绍
### Intro
展示操作或任务的当前进度。
Circular progress bar component
### 安装
### Install
``` ts
import { CirecleProgress } from '@nutui/nutui-react';
```
## 代码演示
### 基础用法
### Basic Usage
:::demo
```tsx
......@@ -30,7 +28,7 @@ export default App;
```
:::
### 环形进度条自定义样式
### Ring progress bar custom style
:::demo
```tsx
......@@ -54,7 +52,7 @@ export default App;
```
:::
### 环形进度条自定义内容
### Ring progress bar custom content
:::demo
```tsx
import React from "react";
......@@ -70,7 +68,7 @@ const App = () => {
return (
<>
<CircleProgress progress={50} isAuto>
<div>自定义</div>
<div>custom</div>
</CircleProgress>
</>
)
......@@ -79,7 +77,7 @@ export default App;
```
:::
### 动态改变环形进度条的进度
### Dynamically change the progress of the circular progress bar
:::demo
```tsx
import React, { useState } from "react";
......@@ -133,10 +131,10 @@ const App = () => {
</div>
<div className="demo__btn" style={demoBtnStyle}>
<Button type="primary" onClick={setReduceVal} style={{ marginRight: '10px' }}>
减少
reduce
</Button>
<Button type="primary" onClick={setAddVal}>
增加
add
</Button>
</div>
</>
......@@ -149,9 +147,12 @@ export default App;
## Prop
| 字段 | 说明 | 类型 | 默认值
| Attribute | Description | Type | Default
|----- | ----- | ----- | -----
| progress | 百分比 | Number,String | 必传项，无默认值
| strokeInnerWidth | 圆弧的宽度 | Number,String | 10
| isAuto | 是否自定义内容显示（taro暂不支持） | Boolean | false
| progressOption | 外圆相关参数对象,其中包括半径，宽度，背景颜色，进度色值 | Object | {radius: 50,strokeOutWidth: 10, backColor: '#d9d9d9',progressColor: 'red'}
\ No newline at end of file
| progress | Progress Rate | Number,String | Required, no default value
| strokeWidth | Stroke width | Number,String | 5
| radius | radius | Number,String | 50
| circleColor | Progress color, passing object to render gradient | Number,String | '#fa2c19'
| pathColor | Track Color | String | '#d9d9d9'
| strokeLinecap | Stroke linecap, can be set to square butt | String | 'round'
| clockwise| Whether to be clockwise | Boolean | true
\ No newline at end of file
src/packages/circleprogress/doc.md
浏览文件 @ 8dfdff8d
......@@ -10,8 +10,6 @@
import { CircleProgress } from '@nutui/nutui-react';
```
## 代码演示
### 基础用法
:::demo
......
src/packages/circleprogress/doc.zh-TW.md
浏览文件 @ 8dfdff8d
# CricleProgress 进度条
# CricleProgress 進度條
### 介绍
### 介紹
展示操作或任务的当前进度。
展示操作或任務的當前進度。
### 安装
### 安裝
``` ts
import { CirecleProgress } from '@nutui/nutui-react';
```
## 代码演示
### 基础用法
### 基礎用法
:::demo
```tsx
......@@ -30,7 +27,7 @@ export default App;
```
:::
### 环形进度条自定义样式
### 環形進度條自定義樣式
:::demo
```tsx
......@@ -54,7 +51,7 @@ export default App;
```
:::
### 环形进度条自定义内容
### 環形進度條自定義內容
:::demo
```tsx
import React from "react";
......@@ -70,7 +67,7 @@ const App = () => {
return (
<>
<CircleProgress progress={50} isAuto>
<div>自定义</div>
<div>自定義</div>
</CircleProgress>
</>
)
......@@ -79,7 +76,7 @@ export default App;
```
:::
### 动态改变环形进度条的进度
### 動態改變環形進度條的進度
:::demo
```tsx
import React, { useState } from "react";
......@@ -133,7 +130,7 @@ const App = () => {
</div>
<div className="demo__btn" style={demoBtnStyle}>
<Button type="primary" onClick={setReduceVal} style={{ marginRight: '10px' }}>
减少
減少
</Button>
<Button type="primary" onClick={setAddVal}>
增加
......@@ -149,9 +146,12 @@ export default App;
## Prop
| 字段 | 说明 | 类型 | 默认值
| 字段 | 說明 | 類型 | 默認值
|----- | ----- | ----- | -----
| progress | 百分比 | Number,String | 必传项，无默认值
| strokeInnerWidth | 圆弧的宽度 | Number,String | 10
| isAuto | 是否自定义内容显示（taro暂不支持） | Boolean | false
| progressOption | 外圆相关参数对象,其中包括半径，宽度，背景颜色，进度色值 | Object | {radius: 50,strokeOutWidth: 10, backColor: '#d9d9d9',progressColor: 'red'}
\ No newline at end of file
| progress | 百分比 | Number,String | 必傳項，無默認值
| strokeWidth | 圓弧的寬度 | Number,String | 5
| radius | 半徑 | Number,String | 50
| circleColor | 圓環進度條顏色 | Number,String | '#fa2c19'
| pathColor | 圓環軌道顏色 | String | '#d9d9d9'
| strokeLinecap | 圓環進度條端點形狀可選值為 square butt | String | 'round'
| clockwise| 是否順時針展示 | Boolean | true
\ No newline at end of file
src/packages/infiniteloading/doc.en-US.md
浏览文件 @ 8dfdff8d
# Infiniteloading 滚动加载
# Infiniteloading
### 介绍
### Intro
列表滚动到底部自动加载更多数据。
Scrolling to the bottom of the list automatically loads more data.
### 安装
### Install
```ts
import { InfiniteLoading } from '@nutui/nutui-react';
```
## 代码演示
### 基础用法
### Basic Usage
:::demo
```tsx
......@@ -65,7 +63,7 @@ const App = () => {
return (
<>
<h2>基础用法</h2>
<h2>Basic Usage</h2>
<Cell>
<ul className="infiniteUl" id="scroll" style={InfiniteUlStyle}>
<Infiniteloading
......@@ -91,7 +89,7 @@ export default App;
```
:::
### 下拉刷新
### Pull to refresh
:::demo
```tsx
......@@ -144,14 +142,14 @@ const App = () => {
const refresh = (done: () => void) => {
setTimeout(() => {
Toast.text('刷新成功')
Toast.text('Refresh success!')
done()
}, 1000)
}
return (
<>
<h2>下拉刷新</h2>
<h2>Pull to refresh</h2>
<Cell>
<ul className="infiniteUl" id="refreshScroll" style={InfiniteUlStyle}>
<Infiniteloading
......@@ -179,7 +177,7 @@ const App = () => {
export default App;
```
:::
### 自定义加载文案
### Custom loading copywriting
:::demo
```tsx
......@@ -232,14 +230,14 @@ const App = () => {
return (
<>
<h2>自定义加载文案</h2>
<h2>Custom loading copywriting</h2>
<Cell>
<ul className="infiniteUl" id="customScroll" style={InfiniteUlStyle}>
<Infiniteloading
containerId="customScroll"
useWindow={false}
loadTxt="loading"
loadMoreTxt="没有啦～"
loadMoreTxt="none～"
hasMore={customHasMore}
loadMore={customLoadMore}
>
......@@ -264,24 +262,24 @@ export default App;
### Props
| 参数 | 说明 | 类型 | 默认值 |
| Attribute | Description | Type | Default |
|--------------|----------------------------------|--------|------------------|
| hasMore | 是否还有更多数据 | Boolean | `true` |
| threshold | 距离底部多远加载 | Number | `200` |
| useWindow | 将滚动侦听器添加到 window 否则侦听组件的父节点 | Boolean | `true` |
| useCapture | 是否使用捕获模式 true 捕获 false 冒泡 | Boolean | `false` |
| containerId | 在 useWindow 属性为 false 的时候，自定义设置节点ID | String | `''` |
| loadMoreTxt | “没有更多数”据展示文案 | String | `'哎呀，这里是底部了啦'` |
| isOpenRefresh | 是否开启下拉刷新 | Boolean | `false` |
| pullIcon | 下拉刷新[图标名称](#/icon) | String | '' |
| pullTxt | 下拉刷新提示文案 | String | `松手刷新` |
| loadIcon | 上拉加载[图标名称](#/icon) | String | '' |
| loadTxt | 上拉加载提示文案 | String | `加载中...` |
| hasMore | Has more data | Boolean | `true` |
| threshold | The loadMore event will be Emitted when the distance between the scrollbar and the bottom is less than threshold | Number | `200` |
| useWindow | Add the scroll listener to the window or the parent of the listening component | Boolean | `true` |
| useCapture | Whether to use capture mode | Boolean | `false` |
| containerId | When useWindow is false, set the node ID by default | String | `''` |
| loadMoreTxt | “No more” text | String | `‘Oops, this is the bottom’` |
| isOpenRefresh | Enable pull refresh | Boolean | `false` |
| pullIcon | Pull refresh[icon name](#/icon) | String | '' |
| pullTxt | Pull refresh text | String | `Loose to refresh` |
| loadIcon | Pull on loading[icon name](#/icon) | String | '' |
| loadTxt | Pull on loading text | String | `Loading...` |
### Events
| 事件名 | 说明 | 回调参数 |
|--------|----------------|--------------|
| loadMore | 继续加载的回调函数 | done 函数，用于关闭加载中状态 |
| scrollChange | 实时监听滚动高度 | 滚动高度 |
| refresh | 下拉刷新事件回调 | done 函数，用于关闭加载中状态 |
\ No newline at end of file
| loadMore | Emitted when continues to load | done() |
| scrollChange | Real-time monitoring of roll height | height |
| refresh | Emitted when pull refresh | done() |
\ No newline at end of file
src/packages/infiniteloading/doc.md
浏览文件 @ 8dfdff8d
......@@ -9,9 +9,6 @@
```ts
import { InfiniteLoading } from '@nutui/nutui-react';
```
## 代码演示
### 基础用法
:::demo
......
src/packages/infiniteloading/doc.zh-TW.md
浏览文件 @ 8dfdff8d
# Infiniteloading 滚动加载
# Infiniteloading 滾動加載
### 介绍
### 介紹
列表滚动到底部自动加载更多数据。
列表滾動到底部自動加載更多數據。
### 安装
### 安裝
```ts
import { InfiniteLoading } from '@nutui/nutui-react';
```
## 代码演示
### 基础用法
### 基礎用法
:::demo
```tsx
......@@ -65,7 +63,7 @@ const App = () => {
return (
<>
<h2>基础用法</h2>
<h2>基礎用法</h2>
<Cell>
<ul className="infiniteUl" id="scroll" style={InfiniteUlStyle}>
<Infiniteloading
......@@ -179,7 +177,7 @@ const App = () => {
export default App;
```
:::
### 自定义加载文案
### 自定義加載文案
:::demo
```tsx
......@@ -232,14 +230,14 @@ const App = () => {
return (
<>
<h2>自定义加载文案</h2>
<h2>自定義加載文案</h2>
<Cell>
<ul className="infiniteUl" id="customScroll" style={InfiniteUlStyle}>
<Infiniteloading
containerId="customScroll"
useWindow={false}
loadTxt="loading"
loadMoreTxt="没有啦～"
loadMoreTxt="沒有啦～"
hasMore={customHasMore}
loadMore={customLoadMore}
>
......@@ -264,24 +262,24 @@ export default App;
### Props
| 参数 | 说明 | 类型 | 默认值 |
| 參數 | 說明 | 類型 | 默認值 |
|--------------|----------------------------------|--------|------------------|
| hasMore | 是否还有更多数据 | Boolean | `true` |
| threshold | 距离底部多远加载 | Number | `200` |
| useWindow | 将滚动侦听器添加到 window 否则侦听组件的父节点 | Boolean | `true` |
| useCapture | 是否使用捕获模式 true 捕获 false 冒泡 | Boolean | `false` |
| containerId | 在 useWindow 属性为 false 的时候，自定义设置节点ID | String | `''` |
| loadMoreTxt | “没有更多数”据展示文案 | String | `'哎呀，这里是底部了啦'` |
| isOpenRefresh | 是否开启下拉刷新 | Boolean | `false` |
| pullIcon | 下拉刷新[图标名称](#/icon) | String | '' |
| pullTxt | 下拉刷新提示文案 | String | `松手刷新` |
| loadIcon | 上拉加载[图标名称](#/icon) | String | '' |
| loadTxt | 上拉加载提示文案 | String | `加载中...` |
| hasMore | 是否還有更多數據 | Boolean | `true` |
| threshold | 距離底部多遠加載 | Number | `200` |
| useWindow | 將滾動偵聽器添加到 window 否則偵聽組件的父節點 | Boolean | `true` |
| useCapture | 是否使用捕獲模式 true 捕獲 false 冒泡 | Boolean | `false` |
| containerId | 在 useWindow 屬性為 false 的時候，自定義設置節點ID | String | `''` |
| loadMoreTxt | “沒有更多數”據展示文案 | String | `'哎呀，這裡是底部了啦'` |
| isOpenRefresh | 是否開啟下拉刷新 | Boolean | `false` |
| pullIcon | 下拉刷新[圖標名稱](#/icon) | String | '' |
| pullTxt | 下拉刷新提示文案 | String | `鬆手刷新` |
| loadIcon | 上拉加載[圖標名稱](#/icon) | String | '' |
| loadTxt | 上拉加載提示文案 | String | `加載中...` |
### Events
| 事件名 | 说明 | 回调参数 |
| 事件名 | 說明 | 回調參數 |
|--------|----------------|--------------|
| loadMore | 继续加载的回调函数 | done 函数，用于关闭加载中状态 |
| scrollChange | 实时监听滚动高度 | 滚动高度 |
| refresh | 下拉刷新事件回调 | done 函数，用于关闭加载中状态 |
\ No newline at end of file
| loadMore | 繼續加載的回調函數 | done() |
| scrollChange | 實時監聽滾動高度 | 滾動高度 |
| refresh | 下拉刷新事件回調 | done() |
\ No newline at end of file
src/packages/inputnumber/doc.en-US.md
浏览文件 @ 8dfdff8d
# InputNumber 数字输入框
# InputNumber
### 介绍
### Intro
通过点击按钮控制数字增减。
Control the number increase or decrease by clicking the button.
### 安装
### Install
``` ts
import { InputNumber } from '@nutui/nutui-react';
```
## 代码演示
### Basic Usage
### 基础用法
初始化一个默认值
Initialize a default value
:::demo
```tsx
......@@ -42,9 +40,9 @@ export default App;
```
:::
### 步长设置
### Step size setting
设置步长 `step` 5
Set step `step` 5
:::demo
```tsx
......@@ -72,9 +70,9 @@ export default App;
```
:::
### 限制输入范围
### Limit input range
`min` 和 `max` 属性分别表示最小值和最大值
`min` and `max` attributes represent the minimum and maximum values respectively
:::demo
```tsx
......@@ -94,7 +92,7 @@ const App = () => {
})
const overlimit = (e: MouseEvent) => {
console.log(e)
Toast.warn('超出限制事件触发')
Toast.warn('Exceeded limit event triggered')
}
return (
<>
......@@ -106,9 +104,9 @@ export default App;
```
:::
### 禁用状态
### Disabled state
`disabled` 禁用状态下无法点击按钮或修改输入框。
`disabled` When disabled, you cannot click the button or modify the input box.
:::demo
```tsx
......@@ -136,9 +134,9 @@ export default App;
```
:::
### 只读禁用输入框
### Read only disable input box
`readonly` 设置只读禁用输入框输入行为
`readonly` Set read-only disable input box input behavior
:::demo
```tsx
......@@ -166,9 +164,9 @@ export default App;
```
:::
### 支持小数点
### Support decimal point
设置步长 `step` 0.1 `decimal-places` 小数保留1位
Set step size `step` 0.1 `decimal-places` keep 1 decimal place
:::demo
```tsx
......@@ -195,9 +193,9 @@ const App = () => {
export default App;
```
:::
### 支持异步修改
### Support asynchronous modification
通过 `change` 事件和 `model-value` 进行异步修改
Asynchronous modification through `change` event and `model-value`
:::demo
```tsx
......@@ -216,7 +214,7 @@ const App = () => {
val8: 1,
})
const onChange = (value: string | number) => {
Toast.loading('异步演示 2 秒后更改')
Toast.loading('Asynchronous demo changes after 2 seconds')
setTimeout(() => {
inputState.val7 = Number(value)
setInputState({ ...inputState })
......@@ -233,9 +231,7 @@ export default App;
```
:::
### 自定义按钮大小
设置步长 `step` 0.1 `decimal-places` 小数保留1位
### Custom button size
:::demo
```tsx
......@@ -267,26 +263,26 @@ export default App;
### Props
| 参数 | 说明 | 类型 | 默认值 |
| Attribute | Description | Type | Default |
|----------------|----------------------------|----------------|------------|
| modelValue | 初始值 | String、Number | - |
| inputWidth | 输入框宽度 | String | `40px` |
| buttonSize | 操作符+、-尺寸 | String | `20px` |
| min | 最小值限制 | String、Number | `1` |
| max | 最大值限制 | String、Number | `9999` |
| step | 步长 | String、Number | `1` |
| decimalPlaces | 设置保留的小数位 | String、Number | `0` |
| disabled | 禁用所有功能 | Boolean | false |
| readonly | 只读状态禁用输入框操作行为 | Boolean | false |
| isAsync | 支持异步修改 | Boolean | false |
| modelValue | Initial value | String、Number | - |
| inputWidth | Input box width | String | `40px` |
| buttonSize | Operators +, - Dimensions | String | `20px` |
| min | Minimum limit | String、Number | `1` |
| max | Maximum limit | String、Number | `9999` |
| step | step | String、Number | `1` |
| decimalPlaces | Set reserved decimal places | String、Number | `0` |
| disabled | Disable all features | Boolean | false |
| readonly | Read only status disables input box operation behavior | Boolean | false |
| isAsync | Support for asynchronous modification | Boolean | false |
### Events
| 事件名 | 说明 | 回调参数 |
| Event | Description | Arguments |
|-----------|------------------------|--------------------------------|
| add | 点击增加按钮时触发 | event: Event |
| reduce | 点击减少按钮时触发 | event: Event |
| overlimit | 点击不可用的按钮时触发 | event: Event |
| change | 值改变时触发 | value: number , event : Event |
| blur | 输入框失去焦点时触发 | event: Event |
| focus | 输入框获得焦点时触发 | event: Event |
\ No newline at end of file
| add | Triggered when the Add button is clicked | event: Event |
| reduce | Triggered when the decrease button is clicked | event: Event |
| overlimit | Triggered when an unavailable button is clicked | event: Event |
| change | Triggered when the value changes | value: number , event : Event |
| blur | Triggered when the input box blur | event: Event |
| focus | Triggered when the input box focus | event: Event |
\ No newline at end of file
src/packages/inputnumber/doc.md
浏览文件 @ 8dfdff8d
......@@ -9,9 +9,6 @@
``` ts
import { InputNumber } from '@nutui/nutui-react';
```
## 代码演示
### 基础用法
初始化一个默认值
......@@ -235,8 +232,6 @@ export default App;
### 自定义按钮大小
设置步长 `step` 0.1 `decimal-places` 小数保留1位
:::demo
```tsx
import React, { useState } from "react";
......
src/packages/inputnumber/doc.zh-TW.md
浏览文件 @ 8dfdff8d
# InputNumber 数字输入框
# InputNumber 數字輸入框
### 介绍
### 介紹
通过点击按钮控制数字增减。
通過點擊按鈕控制數字增減。
### 安装
### 安裝
``` ts
import { InputNumber } from '@nutui/nutui-react';
```
### 基礎用法
## 代码演示
### 基础用法
初始化一个默认值
初始化一個默認值
:::demo
```tsx
......@@ -42,9 +39,9 @@ export default App;
```
:::
### 步长设置
### 步長設置
设置步长 `step` 5
設置步長 `step` 5
:::demo
```tsx
......@@ -72,9 +69,9 @@ export default App;
```
:::
### 限制输入范围
### 限制輸入範圍
`min` 和 `max` 属性分别表示最小值和最大值
`min` 和 `max` 屬性分別表示最小值和最大值
:::demo
```tsx
......@@ -94,7 +91,7 @@ const App = () => {
})
const overlimit = (e: MouseEvent) => {
console.log(e)
Toast.warn('超出限制事件触发')
Toast.warn('超出限制事件觸發')
}
return (
<>
......@@ -106,9 +103,9 @@ export default App;
```
:::
### 禁用状态
### 禁用狀態
`disabled` 禁用状态下无法点击按钮或修改输入框。
`disabled` 禁用狀態下無法點擊按鈕或修改輸入框。
:::demo
```tsx
......@@ -136,9 +133,9 @@ export default App;
```
:::
### 只读禁用输入框
### 只讀禁用輸入框
`readonly` 设置只读禁用输入框输入行为
`readonly` 設置只讀禁用輸入框輸入行為
:::demo
```tsx
......@@ -166,9 +163,9 @@ export default App;
```
:::
### 支持小数点
### 支持小數點
设置步长 `step` 0.1 `decimal-places` 小数保留1位
設置步長 `step` 0.1 `decimal-places` 小數保留1位
:::demo
```tsx
......@@ -195,9 +192,9 @@ const App = () => {
export default App;
```
:::
### 支持异步修改
### 支持異步修改
通过 `change` 事件和 `model-value` 进行异步修改
通過 `change` 事件和 `model-value` 進行異步修改
:::demo
```tsx
......@@ -216,7 +213,7 @@ const App = () => {
val8: 1,
})
const onChange = (value: string | number) => {
Toast.loading('异步演示 2 秒后更改')
Toast.loading('異步演示 2 秒後更改')
setTimeout(() => {
inputState.val7 = Number(value)
setInputState({ ...inputState })
......@@ -233,9 +230,7 @@ export default App;
```
:::
### 自定义按钮大小
设置步长 `step` 0.1 `decimal-places` 小数保留1位
### 自定義按鈕大小
:::demo
```tsx
......@@ -267,26 +262,26 @@ export default App;
### Props
| 参数 | 说明 | 类型 | 默认值 |
| 參數 | 說明 | 類型 | 默認值 |
|----------------|----------------------------|----------------|------------|
| modelValue | 初始值 | String、Number | - |
| inputWidth | 输入框宽度 | String | `40px` |
| inputWidth | 輸入框寬度 | String | `40px` |
| buttonSize | 操作符+、-尺寸 | String | `20px` |
| min | 最小值限制 | String、Number | `1` |
| max | 最大值限制 | String、Number | `9999` |
| step | 步长 | String、Number | `1` |
| decimalPlaces | 设置保留的小数位 | String、Number | `0` |
| step | 步長 | String、Number | `1` |
| decimalPlaces | 設置保留的小數位 | String、Number | `0` |
| disabled | 禁用所有功能 | Boolean | false |
| readonly | 只读状态禁用输入框操作行为 | Boolean | false |
| isAsync | 支持异步修改 | Boolean | false |
| readonly | 只讀狀態禁用輸入框操作行為 | Boolean | false |
| isAsync | 支持異步修改 | Boolean | false |
### Events
| 事件名 | 说明 | 回调参数 |
| 事件名 | 說明 | 回調參數 |
|-----------|------------------------|--------------------------------|
| add | 点击增加按钮时触发 | event: Event |
| reduce | 点击减少按钮时触发 | event: Event |
| overlimit | 点击不可用的按钮时触发 | event: Event |
| change | 值改变时触发 | value: number , event : Event |
| blur | 输入框失去焦点时触发 | event: Event |
| focus | 输入框获得焦点时触发 | event: Event |
\ No newline at end of file
| add | 點擊增加按鈕時觸發 | event: Event |
| reduce | 點擊減少按鈕時觸發 | event: Event |
| overlimit | 點擊不可用的按鈕時觸發 | event: Event |
| change | 值改變時觸發 | value: number , event : Event |
| blur | 輸入框失去焦點時觸發 | event: Event |
| focus | 輸入框獲得焦點時觸發 | event: Event |
\ No newline at end of file
src/packages/skeleton/doc.en-US.md
浏览文件 @ 8dfdff8d
# Skeleton组件
# Skeleton
### 介绍
### Intro
在页面上待加载区域填充灰色的占位图，本质上是界面加载过程中的过渡效果。
Filling gray bitmap in the area to be loaded on the page is essentially the transition effect in the process of interface loading.
### 安装
### Install
``` ts
import { Skeleton } from '@nutui/nutui-react';
```
## 代码演示
## Code demonstration
### 基础用法
### Basic usage
:::demo
```tsx
......@@ -30,7 +30,7 @@ export default App;
```
:::
### 传入多行
### Incoming multiline
:::demo
```tsx
......@@ -48,7 +48,7 @@ export default App;
```
:::
### 显示头像
### Show Faces
:::demo
```tsx
......@@ -66,7 +66,7 @@ export default App;
```
:::
### 标题段落圆角风格
### Title paragraph fillet style
:::demo
```tsx
......@@ -84,7 +84,7 @@ export default App;
```
:::
### 显示子组件
### Display subcomponents
:::demo
```tsx
......@@ -117,7 +117,6 @@ const DescStyle = {
const App = () => {
const [checked, setChecked] = useState(false)
const changeStatus = (value: boolean, event: React.MouseEvent<Element, MouseEvent>) => {
console.log(`触发了change事件，开关状态：${value}`)
setChecked(value)
}
return (
......@@ -133,7 +132,7 @@ const App = () => {
<div className="right-content" className={RightContentStyle}>
<span className="title" className={TitleStyle}>NutUI-React</span>
<div className="desc" className={DescStyle}>
一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
A set of JD style lightweight mobile terminal Vue group library provides rich basic components and business components to help developers quickly build mobile applications.
</div>
</div>
</div>
......@@ -153,15 +152,15 @@ export default App;
### Prop
| 字段 | 说明 | 类型 | 默认值 |
| Attribute | Description | Type | Default |
|------------|-------------------------------------------------|---------|----------|
| loading | 是否显示骨架屏 | Boolean | `false` |
| width | 每行宽度 | Number | 100 |
| height | 每行高度 | Number | 100 |
| animated | 是否开启骨架屏动画 | Boolean | `false` |
| avatar | 是否显示头像 | Boolean | `false` |
| avatarShape | 头像形状：正方形/圆形 | String | `round` |
| avatarSize | 头像大小 | String | `50px` |
| round | 标题/段落是否采用圆角风格 | Boolean | `false` |
| row | 设置段落行数 | Number | 1 |
| title | 是否显示段落标题 | Boolean | `false` |
| loading | Whether to display skeleton screen | Boolean | `false` |
| width | Width per row | Number | 100 |
| height | Height of each row | Number | 100 |
| animated | Whether to turn on skeleton screen animation | Boolean | `false` |
| avatar | Show avatar | Boolean | `false` |
| avatarShape | Avatar shape: square / round | String | `round` |
| avatarSize | Avatar size | String | `50px` |
| round | Is the title / paragraph rounded | Boolean | `false` |
| row | Set the number of paragraph lines | Number | 1 |
| title | Show paragraph titles | Boolean | `false` |
src/packages/skeleton/doc.zh-TW.md
浏览文件 @ 8dfdff8d
# Skeleton组件
# Skeleton組件
### 介绍
### 介紹
在页面上待加载区域填充灰色的占位图，本质上是界面加载过程中的过渡效果。
在頁面上待加載區域填充灰色的佔位圖，本質上是界面加載過程中的過渡效果。
### 安装
### 安裝
``` ts
import { Skeleton } from '@nutui/nutui-react';
```
## 代码演示
## 代碼演示
### 基础用法
### 基礎用法
:::demo
```tsx
......@@ -30,7 +30,7 @@ export default App;
```
:::
### 传入多行
### 傳入多行
:::demo
```tsx
......@@ -48,7 +48,7 @@ export default App;
```
:::
### 显示头像
### 顯示頭像
:::demo
```tsx
......@@ -66,7 +66,7 @@ export default App;
```
:::
### 标题段落圆角风格
### 標題段落圓角風格
:::demo
```tsx
......@@ -84,7 +84,7 @@ export default App;
```
:::
### 显示子组件
### 顯示子組件
:::demo
```tsx
......@@ -117,7 +117,6 @@ const DescStyle = {
const App = () => {
const [checked, setChecked] = useState(false)
const changeStatus = (value: boolean, event: React.MouseEvent<Element, MouseEvent>) => {
console.log(`触发了change事件，开关状态：${value}`)
setChecked(value)
}
return (
......@@ -133,7 +132,7 @@ const App = () => {
<div className="right-content" className={RightContentStyle}>
<span className="title" className={TitleStyle}>NutUI-React</span>
<div className="desc" className={DescStyle}>
一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
一套京東風格的輕量級移動端React組件庫，提供豐富的基礎組件和業務組件，幫助開發者快速搭建移動應用。
</div>
</div>
</div>
......@@ -153,15 +152,15 @@ export default App;
### Prop
| 字段 | 说明 | 类型 | 默认值 |
| 字段 | 說明 | 類型 | 默認值 |
|------------|-------------------------------------------------|---------|----------|
| loading | 是否显示骨架屏 | Boolean | `false` |
| width | 每行宽度 | Number | 100 |
| loading | 是否顯示骨架屏 | Boolean | `false` |
| width | 每行寬度 | Number | 100 |
| height | 每行高度 | Number | 100 |
| animated | 是否开启骨架屏动画 | Boolean | `false` |
| avatar | 是否显示头像 | Boolean | `false` |
| avatarShape | 头像形状：正方形/圆形 | String | `round` |
| avatarSize | 头像大小 | String | `50px` |
| round | 标题/段落是否采用圆角风格 | Boolean | `false` |
| row | 设置段落行数 | Number | 1 |
| title | 是否显示段落标题 | Boolean | `false` |
| animated | 是否開啟骨架屏動畫 | Boolean | `false` |
| avatar | 是否顯示頭像 | Boolean | `false` |
| avatarShape | 頭像形狀：正方形/圓形 | String | `round` |
| avatarSize | 頭像大小 | String | `50px` |
| round | 標題/段落是否採用圓角風格 | Boolean | `false` |
| row | 設置段落行數 | Number | 1 |
| title | 是否顯示段落標題 | Boolean | `false` |
src/packages/steps/doc.en-US.md
浏览文件 @ 8dfdff8d
# Steps 步骤条
# Steps
### 介绍
### Intro
拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。
Split and display the steps of a process, guide users to complete tasks according to the process, or show users the current status.
### 安装
### Install
```ts
import { Steps } from '@nutui/nutui-react';
```
## 代码演示
### 基本用法
### Basic Usage
:::demo
```tsx
......@@ -39,13 +37,13 @@ const App = () => {
return (
<>
<Steps current={stepState.current1}>
<Step activeIndex={1} title="步骤一">1</Step>
<Step activeIndex={2} title="步骤二">2</Step>
<Step activeIndex={3} title="步骤三">3</Step>
<Step activeIndex={1} title="Step One">1</Step>
<Step activeIndex={2} title="Step Two">2</Step>
<Step activeIndex={3} title="Step Three">3</Step>
</Steps>
<div className="steps-button" style={{ textAlign: 'center' }}>
<Button type="danger" onClick={() => handleStep('current1')}>
下一步
Next Step
</Button>
</div>
</>
......@@ -55,7 +53,7 @@ export default App;
```
:::
### 标题和描述信息
### Title and description information
:::demo
```tsx
......@@ -82,15 +80,15 @@ const App = () => {
return (
<>
<Steps current={stepState.current2}>
<Step activeIndex={1} title="步骤一" content="步骤描述">
<Step activeIndex={1} title="Step One" content="Step description">
1
</Step>
<Step activeIndex={2} title="步骤二" content="步骤描述" />
<Step activeIndex={3} title="步骤三" content="步骤描述" />
<Step activeIndex={2} title="Step Two" content="Step description" />
<Step activeIndex={3} title="Step Three" content="Step description" />
</Steps>
<div className="steps-button" style={{ marginTop: '10px', textAlign: 'center' }}>
<Button type="danger" onClick={() => handleStep('current2')}>
下一步
Next Step
</Button>
</div>
</>
......@@ -100,7 +98,7 @@ export default App;
```
:::
### 自定义图标
### Custom icon
:::demo
```tsx
......@@ -127,13 +125,13 @@ const App = () => {
return (
<>
<Steps current={1}>
<Step activeIndex={1} title="已完成" icon="service">
<Step activeIndex={1} title="Completed" icon="service">
1
</Step>
<Step activeIndex={2} title="进行中" icon="people">
<Step activeIndex={2} title="In progress" icon="people">
2
</Step>
<Step activeIndex={3} title="未开始" icon="location2">
<Step activeIndex={3} title="Not started" icon="location2">
3
</Step>
</Steps>
......@@ -144,7 +142,7 @@ export default App;
```
:::
### 竖向步骤条
### Vertical step bar
:::demo
```tsx
import React, { useState } from "react";
......@@ -170,16 +168,16 @@ const App = () => {
return (
<div className="steps-wrapper" style={{ height: '300px', padding: '15px 30px' }}>
<Steps direction="vertical" current={2}>
<Step activeIndex={1} title="已完成" content="您的订单已经打包完成，商品已发出">
<Step activeIndex={1} title="Completed" content="Your order has been packaged and the goods have been delivered">
1
</Step>
<Step activeIndex={2} title="进行中" content="您的订单正在配送途中">
<Step activeIndex={2} title="In progress" content="Your order is in transit">
2
</Step>
<Step
activeIndex={3}
title="未开始"
content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦"
title="Not started"
content="The receiving address is Jingdong building, yard 18, Kechuang 11th Street, Beijing Economic and Technological Development Zone"
>
3
</Step>
......@@ -191,7 +189,7 @@ export default App;
```
:::
### 点状步骤和垂直方向
### Point step and vertical direction
:::demo
```tsx
import React, { useState } from "react";
......@@ -217,19 +215,19 @@ const App = () => {
return (
<div className="steps-wrapper" style={{ height: '300px', padding: '15px 30px' }}>
<Steps direction="vertical" progressDot current={2}>
<Step activeIndex={1} title="已完成" content="您的订单已经打包完成，商品已发出">
<Step activeIndex={1} title="Completed" content="Your order has been packaged and the goods have been delivered">
1
</Step>
<Step activeIndex={2} title="进行中" content="您的订单正在配送途中">
<Step activeIndex={2} title="In progress" content="Your order is in transit">
2
</Step>
<Step
activeIndex={3}
title="未开始"
title="Has not started"
renderContent={() => (
<>
<p>收货地址为：</p>
<p>北京市经济技术开发区科创十一街18号院京东大厦</p>
<p>The receiving address is：</p>
<p>Jingdong building, yard 18, Kechuang 11th Street, Beijing Economic and Technological</p>
</>
)}
>
......@@ -250,21 +248,21 @@ export default App;
#### Steps
| 参数 | 说明 | 类型 | 默认值 |
| Attribute | Description | Type | Default |
| ---------------------- | ----------------------------------------------------------- | -------------- | ----------- |
| direction | 显示方向，`horizontal`,`vertical` | String | 'horizontal' |
| current | 当前所在的步骤 | Number | 0 |
| progressDot | 点状步骤条 | Boolean | false |
| direction | Show direction，`horizontal`,`vertical` | String | 'horizontal' |
| current | Current step | Number | 0 |
| progressDot | Dot step bar | Boolean | false |
#### Step
| 参数 | 说明 | 类型 | 默认值 |
| Attribute | Description | Type | Default |
| ---------------- | ---------------------- | ------------ | ----------- |
| title | 流程步骤的标题 | String | '' |
| content | 流程步骤的描述性文字 | String | '' |
| icon | 图标 | String | '' |
| size | 图标尺寸大小 | String | '' |
| activeIndex | 流程步骤的索引 | Number | 0 |
| renderContent | 流程步骤的描述性文字的html结构 | React.ReactNode | - |
\ No newline at end of file
| title | Title of the process step | String | '' |
| content | Descriptive text of process steps (supporting HTML structure) | String | '' |
| icon | Icon | String | '' |
| size | Icon size | String | '' |
| activeIndex | Index of process steps | Number | 0 |
| renderContent | The html structure of the descriptive text of the process steps | React.ReactNode | - |
\ No newline at end of file
src/packages/steps/doc.md
浏览文件 @ 8dfdff8d
......@@ -10,8 +10,6 @@
import { Steps } from '@nutui/nutui-react';
```
## 代码演示
### 基本用法
:::demo
......
src/packages/steps/doc.zh-TW.md
浏览文件 @ 8dfdff8d
# Steps 步骤条
# Steps 步驟條
### 介绍
### 介紹
拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。
拆分展示某項流程的步驟，引導用戶按流程完成任務或向用戶展示當前狀態。
### 安装
### 安裝
```ts
import { Steps } from '@nutui/nutui-react';
```
## 代码演示
### 基本用法
:::demo
......@@ -39,9 +37,9 @@ const App = () => {
return (
<>
<Steps current={stepState.current1}>
<Step activeIndex={1} title="步骤一">1</Step>
<Step activeIndex={2} title="步骤二">2</Step>
<Step activeIndex={3} title="步骤三">3</Step>
<Step activeIndex={1} title="步驟一">1</Step>
<Step activeIndex={2} title="步驟二">2</Step>
<Step activeIndex={3} title="步驟三">3</Step>
</Steps>
<div className="steps-button" style={{ textAlign: 'center' }}>
<Button type="danger" onClick={() => handleStep('current1')}>
......@@ -55,7 +53,7 @@ export default App;
```
:::
### 标题和描述信息
### 標題和描述信息
:::demo
```tsx
......@@ -82,11 +80,11 @@ const App = () => {
return (
<>
<Steps current={stepState.current2}>
<Step activeIndex={1} title="步骤一" content="步骤描述">
<Step activeIndex={1} title="步驟一" content="步驟描述">
1
</Step>
<Step activeIndex={2} title="步骤二" content="步骤描述" />
<Step activeIndex={3} title="步骤三" content="步骤描述" />
<Step activeIndex={2} title="步驟二" content="步驟描述" />
<Step activeIndex={3} title="步驟三" content="步驟描述" />
</Steps>
<div className="steps-button" style={{ marginTop: '10px', textAlign: 'center' }}>
<Button type="danger" onClick={() => handleStep('current2')}>
......@@ -100,7 +98,7 @@ export default App;
```
:::
### 自定义图标
### 自定義圖標
:::demo
```tsx
......@@ -130,10 +128,10 @@ const App = () => {
<Step activeIndex={1} title="已完成" icon="service">
1
</Step>
<Step activeIndex={2} title="进行中" icon="people">
<Step activeIndex={2} title="進行中" icon="people">
2
</Step>
<Step activeIndex={3} title="未开始" icon="location2">
<Step activeIndex={3} title="未開始" icon="location2">
3
</Step>
</Steps>
......@@ -144,7 +142,7 @@ export default App;
```
:::
### 竖向步骤条
### 豎向步驟條
:::demo
```tsx
import React, { useState } from "react";
......@@ -170,16 +168,16 @@ const App = () => {
return (
<div className="steps-wrapper" style={{ height: '300px', padding: '15px 30px' }}>
<Steps direction="vertical" current={2}>
<Step activeIndex={1} title="已完成" content="您的订单已经打包完成，商品已发出">
<Step activeIndex={1} title="已完成" content="您的訂單已經打包完成，商品已發出">
1
</Step>
<Step activeIndex={2} title="进行中" content="您的订单正在配送途中">
<Step activeIndex={2} title="進行中" content="您的訂單正在配送途中">
2
</Step>
<Step
activeIndex={3}
title="未开始"
content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦"
title="未開始"
content="收貨地址為：北京市經濟技術開發區科創十一街18號院京東大廈"
>
3
</Step>
......@@ -191,7 +189,7 @@ export default App;
```
:::
### 点状步骤和垂直方向
### 點狀步驟和垂直方向
:::demo
```tsx
import React, { useState } from "react";
......@@ -217,19 +215,19 @@ const App = () => {
return (
<div className="steps-wrapper" style={{ height: '300px', padding: '15px 30px' }}>
<Steps direction="vertical" progressDot current={2}>
<Step activeIndex={1} title="已完成" content="您的订单已经打包完成，商品已发出">
<Step activeIndex={1} title="已完成" content="您的訂單已經打包完成，商品已發出">
1
</Step>
<Step activeIndex={2} title="进行中" content="您的订单正在配送途中">
<Step activeIndex={2} title="進行中" content="您的訂單正在配送途中">
2
</Step>
<Step
activeIndex={3}
title="未开始"
title="未開始"
renderContent={() => (
<>
<p>收货地址为：</p>
<p>北京市经济技术开发区科创十一街18号院京东大厦</p>
<p>收貨地址為：</p>
<p>北京市經濟技術開發區科創十一街18號院京東大廈</p>
</>
)}
>
......@@ -250,21 +248,21 @@ export default App;
#### Steps
| 参数 | 说明 | 类型 | 默认值 |
| 參數 | 說明 | 類型 | 默認值 |
| ---------------------- | ----------------------------------------------------------- | -------------- | ----------- |
| direction | 显示方向，`horizontal`,`vertical` | String | 'horizontal' |
| current | 当前所在的步骤 | Number | 0 |
| progressDot | 点状步骤条 | Boolean | false |
| direction | 顯示方向，`horizontal`,`vertical` | String | 'horizontal' |
| current | 當前所在的步驟 | Number | 0 |
| progressDot | 點狀步驟條 | Boolean | false |
#### Step
| 参数 | 说明 | 类型 | 默认值 |
| 參數 | 說明 | 類型 | 默認值 |
| ---------------- | ---------------------- | ------------ | ----------- |
| title | 流程步骤的标题 | String | '' |
| content | 流程步骤的描述性文字 | String | '' |
| icon | 图标 | String | '' |
| size | 图标尺寸大小 | String | '' |
| activeIndex | 流程步骤的索引 | Number | 0 |
| renderContent | 流程步骤的描述性文字的html结构 | React.ReactNode | - |
\ No newline at end of file
| title | 流程步驟的標題 | String | '' |
| content | 流程步驟的描述性文字 | String | '' |
| icon | 圖標 | String | '' |
| size | 圖標尺寸大小 | String | '' |
| activeIndex | 流程步驟的索引 | Number | 0 |
| renderContent | 流程步驟的描述性文字的html結構 | React.ReactNode | - |
\ No newline at end of file
src/packages/uploader/doc.en-US.md
浏览文件 @ 8dfdff8d
# Uploader 上传
# Uploader
### 介绍
### Intro
用于将本地的图片或文件上传至服务器。
Used to upload local pictures or files to the server.
### 安装
### Install
``` ts
import { Uploader } from '@nutui/nutui-react';
```
## 代码示例
### 基本用法
### Basic Usage
:::demo
``` tsx
......@@ -22,11 +19,11 @@ import { Uploader } from '@nutui/nutui-react';
const App = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
const onStart = () => {
console.log('start 触发')
console.log('start ！！')
}
return (
<>
<h2>基础用法</h2>
<h2>Basic Usage</h2>
<Uploader url={uploadUrl} start={onStart} />
</>
)
......@@ -35,7 +32,7 @@ export default App;
```
:::
### 自定义上传样式
### Customize the upload style
:::demo
``` tsx
......@@ -46,10 +43,10 @@ const App = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
return (
<>
<h2>自定义上传样式</h2>
<h2>Customize the upload style</h2>
<Uploader url={uploadUrl}>
<Button type="primary" icon="uploader">
上传文件
Upload the file
</Button>
</Uploader>
</>
......@@ -59,7 +56,7 @@ export default App;
```
:::
### 直接调起摄像头（移动端生效）
### Direct camera up (mobile)
:::demo
``` tsx
......@@ -70,7 +67,7 @@ const App = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
return (
<>
<h2>直接调起摄像头（移动端生效）</h2>
<h2>Direct camera up (mobile)</h2>
<Uploader capture url={uploadUrl} />
</>
)
......@@ -79,7 +76,7 @@ export default App;
```
:::
### 上传状态
### Upload status
:::demo
``` tsx
......@@ -89,11 +86,11 @@ import { Uploader, Button } from '@nutui/nutui-react';
const App = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
const onDelete = (file: FileItem, fileList: FileItem[]) => {
console.log('delete 事件触发', file, fileList)
console.log('delete event start', file, fileList)
}
return (
<>
<h2>上传状态</h2>
<h2>Upload status</h2>
<Uploader url={uploadUrl} multiple removeImage={onDelete} />
</>
)
......@@ -103,7 +100,7 @@ export default App;
:::
### 限制上传数量5个
### Limit the number of uploads to 5
:::demo
``` tsx
......@@ -114,7 +111,7 @@ const App = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
return (
<>
<h2>限制上传数量5个</h2>
<h2>Limit the number of uploads to 5</h2>
<Uploader url={uploadUrl} multiple maximum="5" />
</>
)
......@@ -123,7 +120,7 @@ export default App;
```
:::
### 限制上传大小（每个文件最大不超过 50kb，也可以在beforeupload中自行处理）
### Limit upload size (maximum 50kb per file)
:::demo
``` tsx
......@@ -133,11 +130,11 @@ import { Uploader, Button } from '@nutui/nutui-react';
const App = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
const onOversize = (files: File[]) => {
console.log('oversize 触发 文件大小不能超过 50kb', files)
console.log('Oversize triggers the file size cannot exceed 50kb', files)
}
return (
<>
<h2>限制上传大小（每个文件最大不超过 50kb）</h2>
<h2>Limit upload size (maximum 50kb per file)</h2>
<Uploader url={uploadUrl} multiple maximize={1024 * 50} oversize={onOversize} />
</>
)
......@@ -147,7 +144,7 @@ export default App;
:::
### 自定义 FormData headers
### Custom data FormData, headers
:::demo
``` tsx
......@@ -161,7 +158,7 @@ const App = () => {
}
return (
<>
<h2>自定义 FormData headers</h2>
<h2>Custom data FormData, headers</h2>
<Uploader
url={uploadUrl}
data={formData}
......@@ -175,7 +172,7 @@ export default App;
```
:::
### 手动上传
### Manual upload
:::demo
``` tsx
......@@ -190,11 +187,11 @@ const App = () => {
}
return (
<>
<h2>手动上传</h2>
<h2>Manual upload</h2>
<Uploader url={uploadUrl} maximum="5" autoUpload={false} ref={uploadRef} />
<br />
<Button type="success" size="small" onClick={submitUpload}>
执行上传
perform upload
</Button>
</>
)
......@@ -203,7 +200,7 @@ export default App;
```
:::
### 禁用状态
### Disabled state
:::demo
``` tsx
......@@ -213,7 +210,7 @@ import { Uploader, Button } from '@nutui/nutui-react';
const App = () => {
return (
<>
<h2>禁用状态</h2>
<h2>Disabled state</h2>
<Uploader disabled />
</>
)
......@@ -224,52 +221,52 @@ export default App;
### Prop
| 字段 | 说明 | 类型 | 默认值 |
| Attribute |Description | Type | Default |
|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|------------------|
| name | `input` 标签 `name` 的名称，发到后台的文件参数名 | String | "file" |
| url | 上传服务器的接口地址 | String | - |
| isPreview | 是否上传成功后展示预览图 | Boolean | true |
| defaultImg | 当上传非图片('image')格式的默认图片地址 | String | '' |
| isDeletable | 是否展示删除按钮 | Boolean | true |
| method | 上传请求的 http method | String | "post" |
| capture | 图片[选取模式](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture)，直接调起摄像头 | String | false |
| maximize | 可以设定最大上传文件的大小（字节） | Number丨String | Number.MAX_VALUE |
| maximum | 文件上传数量限制 | Number丨String | 1 |
| clearInput | 是否需要清空`input`内容，设为`true`支持重复选择上传同一个文件 | Boolean | false |
| accept | 允许上传的文件类型，[详细说明](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | String | * |
| headers | 设置上传的请求头部 | Object | {} |
| data | 附加上传的信息 formData | Object | {} |
| uploadIcon | 上传区域[图标名称](#/zh-CN/icon)或图片链接 | String | "photograph" |
| xhrState | 接口响应的成功状态（status）值 | Number | 200 |
| withCredentials | 支持发送 cookie 凭证信息 | Boolean | fasle |
| multiple | 是否支持文件多选 | Boolean | fasle |
| disabled | 是否禁用文件上传 | Boolean | fasle |
| timeout | 超时时间，单位为毫秒 | Number丨String | 1000 * 30 |
| beforeUpload | 上传前的函数需要返回一个`Promise`对象 | Function | null |
| beforeDelete | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除 | Function(file): boolean 丨Promise | - |
| name | The name of the `input` tag `name`, the file parameter name sent to the background | String | "file" |
| url | The interface address of the upload server | String | - |
| isPreview | Whether to display the preview image after the upload is successful | Boolean | true |
| defaultImg | When uploading a default image URL in a non-image ('image') format | String | '' |
| isDeletable | Whether to display the delete button | Boolean | true |
| method | The http method of upload request | String | "post" |
| capture | Capture, can be set to[camera](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture)，，turn on the camera directly | String | false |
| maximize | You can set the maximum upload file size (bytes) | Number丨String | Number.MAX_VALUE |
| maximum | File upload limit | Number丨String | 1 |
| clearInput | Whether to clear the `input` content, set to `true` to support repeated selection and upload of the same file | Boolean | false |
| accept | File types that can be accepted. See[Des](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | String | * |
| headers | Set request headers | Object | {} |
| data | Uploading extra params or function which can return uploading extra params formData | Object | {} |
| uploadIcon | Upload area[icon name](#/zh-CN/icon)or image link | String | "photograph" |
| xhrState | The success status (status) value of the interface response | Number | 200 |
| withCredentials | The ajax upload with cookie sent | Boolean | fasle |
| multiple | Whether to support multiple file selection | Boolean | fasle |
| disabled | Whether to disable file upload | Boolean | fasle |
| timeout | timeout, in milliseconds | Number丨String | 1000 * 30 |
| beforeUpload | Hook before reading the file, return false to stop reading the file, can return Promise | Function | null |
| beforeDelete | Hook before delete the file, return false to stop reading the file, can return Promise | Function(file): boolean 丨Promise | - |
### FileItem
| 名称 | 说明 | 默认值 |
| Attribute | Description | Default |
|----------|---------------------------------------------------------|---------------------------------|
| status | 文件状态值，可选'ready,uploading,success,error,removed' | "ready" |
| uid | 文件的唯一标识 | new Date().getTime().toString() |
| name | 文件名称 | "" |
| url | 文件路径 | "" |
| type | 文件类型 | "image/jpeg" |
| formData | 上传所需的data | new FormData() |
| status | File status value, optional ‘ready,uploading,success,error’' | "ready" |
| uid | Unique ID of the file | new Date().getTime().toString() |
| name | File name | "" |
| url | File path | "" |
| type | File type | "image/jpeg" |
| formData | Upload the required data | new FormData() |
### Event
| 名称 | 说明 | 回调参数 |
| Event | Description | Arguments |
|----------|------------------------|----------------------|
| start | 文件上传开始 | options |
| progress | 文件上传的进度 | event,options |
| oversize | 文件大小超过限制时触发 | files |
| success | 上传成功 | responseText,options |
| failure | 上传失败 | responseText,options |
| change | 上传文件改变时的状态 | fileList,event |
| removeImage | 文件删除之前的状态 | files,fileList |
| start | File upload starts | options |
| progress | The progress of the file upload | event,options |
| oversize | Triggered when the file size exceeds the limit | files |
| success | Uploaded successfully | responseText,options |
| failure | Upload failed | responseText,options |
| change | The state when the uploaded file changes | fileList,event |
| removeImage | File delete event | files,fileList |
src/packages/uploader/doc.md
浏览文件 @ 8dfdff8d
......@@ -9,9 +9,6 @@
``` ts
import { Uploader } from '@nutui/nutui-react';
```
## 代码示例
### 基本用法
:::demo
......
src/packages/uploader/doc.zh-TW.md
浏览文件 @ 8dfdff8d
# Uploader 上传
# Uploader 上傳
### 介绍
### 介紹
用于将本地的图片或文件上传至服务器。
用於將本地的圖片或文件上傳至服務器。
### 安装
### 安裝
``` ts
import { Uploader } from '@nutui/nutui-react';
```
## 代码示例
### 基本用法
:::demo
......@@ -22,11 +19,11 @@ import { Uploader } from '@nutui/nutui-react';
const App = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
const onStart = () => {
console.log('start 触发')
console.log('start 觸發')
}
return (
<>
<h2>基础用法</h2>
<h2>基本用法</h2>
<Uploader url={uploadUrl} start={onStart} />
</>
)
......@@ -35,7 +32,7 @@ export default App;
```
:::
### 自定义上传样式
### 自定義上傳樣式
:::demo
``` tsx
......@@ -46,10 +43,10 @@ const App = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
return (
<>
<h2>自定义上传样式</h2>
<h2>自定義上傳樣式</h2>
<Uploader url={uploadUrl}>
<Button type="primary" icon="uploader">
上传文件
上傳文件
</Button>
</Uploader>
</>
......@@ -59,7 +56,7 @@ export default App;
```
:::
### 直接调起摄像头（移动端生效）
### 直接調起攝像頭（移動端生效）
:::demo
``` tsx
......@@ -70,7 +67,7 @@ const App = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
return (
<>
<h2>直接调起摄像头（移动端生效）</h2>
<h2>直接調起攝像頭（移動端生效）</h2>
<Uploader capture url={uploadUrl} />
</>
)
......@@ -79,7 +76,7 @@ export default App;
```
:::
### 上传状态
### 上傳狀態
:::demo
``` tsx
......@@ -89,11 +86,11 @@ import { Uploader, Button } from '@nutui/nutui-react';
const App = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
const onDelete = (file: FileItem, fileList: FileItem[]) => {
console.log('delete 事件触发', file, fileList)
console.log('delete 事件觸發', file, fileList)
}
return (
<>
<h2>上传状态</h2>
<h2>上傳狀態</h2>
<Uploader url={uploadUrl} multiple removeImage={onDelete} />
</>
)
......@@ -103,7 +100,7 @@ export default App;
:::
### 限制上传数量5个
### 限制上傳數量5個
:::demo
``` tsx
......@@ -114,7 +111,7 @@ const App = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
return (
<>
<h2>限制上传数量5个</h2>
<h2>限制上傳數量5個</h2>
<Uploader url={uploadUrl} multiple maximum="5" />
</>
)
......@@ -123,7 +120,7 @@ export default App;
```
:::
### 限制上传大小（每个文件最大不超过 50kb，也可以在beforeupload中自行处理）
### 限制上傳大小（每個文件最大不超過 50kb，也可以在beforeupload中自行處理）
:::demo
``` tsx
......@@ -133,11 +130,11 @@ import { Uploader, Button } from '@nutui/nutui-react';
const App = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
const onOversize = (files: File[]) => {
console.log('oversize 触发 文件大小不能超过 50kb', files)
console.log('oversize 觸發 文件大小不能超過 50kb', files)
}
return (
<>
<h2>限制上传大小（每个文件最大不超过 50kb）</h2>
<h2>限制上傳大小（每個文件最大不超過 50kb）</h2>
<Uploader url={uploadUrl} multiple maximize={1024 * 50} oversize={onOversize} />
</>
)
......@@ -147,7 +144,7 @@ export default App;
:::
### 自定义 FormData headers
### 自定義 FormData headers
:::demo
``` tsx
......@@ -161,7 +158,7 @@ const App = () => {
}
return (
<>
<h2>自定义 FormData headers</h2>
<h2>自定義 FormData headers</h2>
<Uploader
url={uploadUrl}
data={formData}
......@@ -175,7 +172,7 @@ export default App;
```
:::
### 手动上传
### 手動上傳
:::demo
``` tsx
......@@ -190,11 +187,11 @@ const App = () => {
}
return (
<>
<h2>手动上传</h2>
<h2>手動上傳</h2>
<Uploader url={uploadUrl} maximum="5" autoUpload={false} ref={uploadRef} />
<br />
<Button type="success" size="small" onClick={submitUpload}>
执行上传
執行上傳
</Button>
</>
)
......@@ -203,7 +200,7 @@ export default App;
```
:::
### 禁用状态
### 禁用狀態
:::demo
``` tsx
......@@ -213,7 +210,7 @@ import { Uploader, Button } from '@nutui/nutui-react';
const App = () => {
return (
<>
<h2>禁用状态</h2>
<h2>禁用狀態</h2>
<Uploader disabled />
</>
)
......@@ -224,52 +221,52 @@ export default App;
### Prop
| 字段 | 说明 | 类型 | 默认值 |
| 字段 | 說明 | 類型 | 默認值 |
|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|------------------|
| name | `input` 标签 `name` 的名称，发到后台的文件参数名 | String | "file" |
| url | 上传服务器的接口地址 | String | - |
| isPreview | 是否上传成功后展示预览图 | Boolean | true |
| defaultImg | 当上传非图片('image')格式的默认图片地址 | String | '' |
| isDeletable | 是否展示删除按钮 | Boolean | true |
| method | 上传请求的 http method | String | "post" |
| capture | 图片[选取模式](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture)，直接调起摄像头 | String | false |
| maximize | 可以设定最大上传文件的大小（字节） | Number丨String | Number.MAX_VALUE |
| maximum | 文件上传数量限制 | Number丨String | 1 |
| clearInput | 是否需要清空`input`内容，设为`true`支持重复选择上传同一个文件 | Boolean | false |
| accept | 允许上传的文件类型，[详细说明](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | String | * |
| headers | 设置上传的请求头部 | Object | {} |
| data | 附加上传的信息 formData | Object | {} |
| uploadIcon | 上传区域[图标名称](#/zh-CN/icon)或图片链接 | String | "photograph" |
| xhrState | 接口响应的成功状态（status）值 | Number | 200 |
| withCredentials | 支持发送 cookie 凭证信息 | Boolean | fasle |
| multiple | 是否支持文件多选 | Boolean | fasle |
| disabled | 是否禁用文件上传 | Boolean | fasle |
| timeout | 超时时间，单位为毫秒 | Number丨String | 1000 * 30 |
| beforeUpload | 上传前的函数需要返回一个`Promise`对象 | Function | null |
| beforeDelete | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除 | Function(file): boolean 丨Promise | - |
| name | `input` 標籤 `name` 的名稱，發到後台的文件參數名 | String | "file" |
| url | 上傳服務器的接口地址 | String | - |
| isPreview | 是否上傳成功後展示預覽圖 | Boolean | true |
| defaultImg | 當上傳非圖片('image')格式的默認圖片地址 | String | '' |
| isDeletable | 是否展示刪除按鈕 | Boolean | true |
| method | 上傳請求的 http method | String | "post" |
| capture | 圖片[選取模式](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture)，直接調起攝像頭 | String | false |
| maximize | 可以設定最大上傳文件的大小（字節） | Number丨String | Number.MAX_VALUE |
| maximum | 文件上傳數量限制 | Number丨String | 1 |
| clearInput | 是否需要清空`input`內容，設為`true`支持重複選擇上傳同一個文件 | Boolean | false |
| accept | 允許上傳的文件類型，[詳細說明](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | String | * |
| headers | 設置上傳的請求頭部 | Object | {} |
| data | 附加上傳的信息 formData | Object | {} |
| uploadIcon | 上傳區域[圖標名稱](#/zh-CN/icon)或圖片鏈接 | String | "photograph" |
| xhrState | 接口響應的成功狀態（status）值 | Number | 200 |
| withCredentials | 支持發送 cookie 憑證信息 | Boolean | fasle |
| multiple | 是否支持文件多選 | Boolean | fasle |
| disabled | 是否禁用文件上傳 | Boolean | fasle |
| timeout | 超時時間，單位為毫秒 | Number丨String | 1000 * 30 |
| beforeUpload | 上傳前的函數需要返回一個`Promise`對象 | Function | null |
| beforeDelete | 除文件時的回調，返回值為 false 時不移除。支持返回一個 `Promise` 對象，`Promise` 對象 resolve(false) 或 reject 時不移除 | Function(file): boolean 丨Promise | - |
### FileItem
| 名称 | 说明 | 默认值 |
| 名稱 | 說明 | 默認值 |
|----------|---------------------------------------------------------|---------------------------------|
| status | 文件状态值，可选'ready,uploading,success,error,removed' | "ready" |
| uid | 文件的唯一标识 | new Date().getTime().toString() |
| name | 文件名称 | "" |
| url | 文件路径 | "" |
| type | 文件类型 | "image/jpeg" |
| formData | 上传所需的data | new FormData() |
| status | 文件狀態值，可選'ready,uploading,success,error,removed' | "ready" |
| uid | 文件的唯一標識 | new Date().getTime().toString() |
| name | 文件名稱 | "" |
| url | 文件路徑 | "" |
| type | 文件類型 | "image/jpeg" |
| formData | 上傳所需的data | new FormData() |
### Event
| 名称 | 说明 | 回调参数 |
| 名稱 | 說明 | 回調參數 |
|----------|------------------------|----------------------|
| start | 文件上传开始 | options |
| progress | 文件上传的进度 | event,options |
| oversize | 文件大小超过限制时触发 | files |
| success | 上传成功 | responseText,options |
| failure | 上传失败 | responseText,options |
| change | 上传文件改变时的状态 | fileList,event |
| removeImage | 文件删除之前的状态 | files,fileList |
| start | 文件上傳開始 | options |
| progress | 文件上傳的進度 | event,options |
| oversize | 文件大小超過限制時觸發 | files |
| success | 上傳成功 | responseText,options |
| failure | 上傳失敗 | responseText,options |
| change | 上傳文件改變時的狀態 | fileList,event |
| removeImage | 文件刪除之前的狀態 | files,fileList |
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或