Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

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

提交 74581570 编写于 作者: S songchenglin3
浏览文件
操作

Merge remote-tracking branch 'upstream/main'

上级 4a007dfb 516df9ee
展开全部 隐藏空白更改
内联 并排
Showing with 1468 addition and 620 deletion
src/packages/address/doc.md
浏览文件 @ 74581570
此差异已折叠。
src/packages/avatar/doc.md
浏览文件 @ 74581570
......@@ -5,7 +5,7 @@
用来代表用户或事物，支持图片、图标或字符展示。
### 安装
``` javascript
``` ts
import { Avatar } from '@nutui/nutui-react';
```
......@@ -15,38 +15,109 @@ import { Avatar } from '@nutui/nutui-react';
内置 smal / normal / large 三种尺寸规格
:::demo
``` tsx
<Avatar size="large" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></Avatar>
<Avatar size="normal" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></Avatar>
<Avatar size="small" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></Avatar>
import React from "react";
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>
<Avatar size="normal" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></Avatar>
<Avatar size="small" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></Avatar>
</>
)
}
export default App;
```
### 修改形状类型
``` tsx
<Avatar shape="square"></Avatar>
<Avatar shape="round"></Avatar>
import React from "react";
import { Avatar } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Avatar icon="my" shape="square"></Avatar>
<Avatar icon="my" shape="round"></Avatar>
</>
)
}
export default App;
```
### 修改背景色
``` tsx
<Avatar bg-color="#f0250f"></Avatar>
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>
</>
)
}
export default App;
```
### 修改背景icon
``` tsx
<Avatar icon="https://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"></Avatar>
import React from "react";
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>
</>
)
}
export default App;
```
### 设置头像的文本内容
``` tsx
<Avatar icon>N</Avatar>
import React from "react";
import { Avatar } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Avatar icon="">N</Avatar>
</>
)
}
export default App;
```
### 点击头像触发事件
``` tsx
import React from "react";
import { Avatar } from '@nutui/nutui-react';
const App = () => {
const handleClick = () => {
console.log('触发点击头像')
}
return (
<>
<Avatar icon="my" onClick={handleClick}></Avatar>
</>
)
}
export default App;
```
......
src/packages/barrage/barrage.tsx
浏览文件 @ 74581570
......@@ -68,6 +68,7 @@ const InternalBarrage: ForwardRefRenderFunction<unknown, Partial<BarrageProps>>
const width = el.offsetWidth
const height = el.offsetHeight
console.log(el.offsetWidth, el.offsetHeight)
el.classList.add('move')
el.style.animationDuration = `${speeds}ms`
el.style.top = (_index % rows) * (height + top) + 20 + 'px'
......
src/packages/barrage/doc.md
浏览文件 @ 74581570
......@@ -6,37 +6,51 @@
### 安装
``` javascript
``` ts
import { Barrage } from '@nutui/nutui-react';
```
## 代码演示
### 基础用法1
### 基础用法
:::demo
```tsx
<h2>基础用法</h2>
<Cell>
<Barrage ref={barrageRef} barrageList={list}></Barrage>
</Cell>
<div className="test" style={{ textAlign: 'center' }}>
<Button type="danger" onClick={addBarrage}>随机添加</Button>
</div>
```
import React, { useRef } from "react";
import { Cell, Button, Barrage } from '@nutui/nutui-react';
```tsx
let list = ['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-']
const barrageRef = useRef(null)
const addBarrage = () => {
let n = Math.random()
if (barrageRef.current) {
barrageRef.current.add('随机——' + String(n).substr(2, 10))
const barrageStyle = {
padding: '20px 0',
height: '150px',
boxSizing: 'border-box'
}
const App = () => {
let list = ['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-']
const barrageRef = useRef(null)
const addBarrage = () => {
let n = Math.random()
if (barrageRef.current) {
barrageRef.current.add('随机——' + String(n).substr(2, 10))
}
}
return (
<div className="demo">
<h2>基础用法</h2>
<Cell className={'barrage-demo-wrap'} style={barrageStyle}>
<Barrage className={'barrage-demo'} ref={barrageRef} barrageList={list} style={barrageStyle}></Barrage>
</Cell>
<div className="test" style={{ textAlign: 'center' }}>
<Button type="danger" onClick={addBarrage}>
随机添加
</Button>
</div>
</div>
)
}
export default App;
```
## API
### Props
......
src/packages/circleprogress/doc.md
浏览文件 @ 74581570
......@@ -6,7 +6,7 @@
### 安装
``` javascript
``` ts
import { CirecleProgress } from '@nutui/nutui-react';
```
......@@ -14,54 +14,128 @@ import { CirecleProgress } from '@nutui/nutui-react';
### 基础用法
:::demo
```tsx
<CircleProgress progress={10}></CircleProgress>
import React from "react";
import { CircleProgress } from '@nutui/nutui-react';
const App = () => {
return (
<>
<CircleProgress progress={10}></CircleProgress>
</>
)
}
export default App;
```
### 环形进度条自定义样式
```tsx
<CircleProgress progress={50} progressOption={progressOption}></CircleProgress>
import React from "react";
import { CircleProgress } from '@nutui/nutui-react';
const progressOption = {
radius: 50,
strokeOutWidth: 10,
backColor: '#d9d9d9',
progressColor: 'red',
}
const App = () => {
return (
<>
<CircleProgress progress={50} progressOption={progressOption}></CircleProgress>
</>
)
}
export default App;
```
### 环形进度条自定义内容
```tsx
<CircleProgress progress={50} isAuto={true}>
<div>自定义</div>
</CircleProgress>
import React from "react";
import { CircleProgress } from '@nutui/nutui-react';
const progressOption = {
radius: 50,
strokeOutWidth: 10,
backColor: '#d9d9d9',
progressColor: 'red',
}
const App = () => {
return (
<>
<CircleProgress progress={50} isAuto={true}>
<div>自定义</div>
</CircleProgress>
</>
)
}
export default App;
```
### 动态改变环形进度条的进度
```tsx
<CircleProgress
progress={percent}
progressOption={progressOption}
strokeInnerWidth={strokeInnerWidth}
></CircleProgress>
```
```tsx
const [percent, setPercent] = useState(50)
const [strokeInnerWidth, setStrokeInnerWidth] = useState(10)
import React, { useState } from "react";
import { Button, CircleProgress } from '@nutui/nutui-react';
const progressOption = {
radius: 50,
strokeOutWidth: 10,
backColor: '#d9d9d9',
progressColor: 'red',
}
const setReduceVal = () => {
if (percent - 10 <= 0) {
setStrokeInnerWidth(0)
setPercent(0)
return
}
setPercent(percent - 10)
const demoBtnStyle = {
textAlign: 'center',
width: '100%',
height: '50px',
borderTop: '1px solid rgba(234, 240, 251, 1)',
paddingTop: '6px',
background: 'rgba(255, 255, 255, 1)'
}
const demoPieceStyle = {
display: 'flex',
justifyContent: 'center',
background: 'rgba(255, 255, 255, 1)'
}
const setAddVal = () => {
setStrokeInnerWidth(10)
if (percent >= 100) {
return
const App = () => {
const [percent, setPercent] = useState(50)
const [strokeInnerWidth, setStrokeInnerWidth] = useState(10)
const setReduceVal = () => {
if (percent - 10 <= 0) {
setStrokeInnerWidth(0)
setPercent(0)
return
}
setPercent(percent - 10)
}
const setAddVal = () => {
setStrokeInnerWidth(10)
if (percent >= 100) {
return
}
setPercent(percent + 10)
}
setPercent(percent + 10)
return (
<>
<div className="demo__piece" style={demoPieceStyle}>
<CircleProgress
progress={percent}
progressOption={progressOption}
strokeInnerWidth={strokeInnerWidth}
></CircleProgress>
</div>
<div className="demo__btn" style={demoBtnStyle}>
<Button type="primary" onClick={setReduceVal} style={{ marginRight: '10px' }}>
减少
</Button>
<Button type="primary" onClick={setAddVal}>
增加
</Button>
</div>
</>
)
}
export default App;
```
......
src/packages/infiniteloading/doc.md
浏览文件 @ 74581570
......@@ -6,168 +6,254 @@
### 安装
```javascript
import { InfiniteLoading } from '@nutui/nutui-react';
```ts
import { InfiniteLoading } from '@nutui/nutui-react';
```
## 代码演示
### 基础用法
:::demo
```tsx
<ul className="infiniteUl" id="scroll">
<Infiniteloading
containerId="scroll"
useWindow={false}
hasMore={hasMore}
loadMore={loadMore}
>
{defultList.map((item, index) => {
return (
<li className="infiniteLi" key={index}>
{item}
</li>
)
})}
</Infiniteloading>
</ul>
```
```tsx
const [defultList, setDefultList] = useState<string[]>([])
const [hasMore, setHasMore] = useState(true)
import React, { useState, useEffect } from "react";
import { Cell, Infiniteloading } from '@nutui/nutui-react';
useEffect(() => {
init()
}, [])
const InfiniteUlStyle = {
height: '300px',
width: '100%',
padding: '0',
overflowY: 'auto',
overflowX: 'hidden'
}
const loadMore = (done: () => void) => {
setTimeout(() => {
const curLen = defultList.length
for (let i = curLen; i < curLen + 10; i++) {
defultList.push(`${i}`)
}
if (defultList.length >= 30) {
setHasMore(false)
} else {
setDefultList([...defultList])
}
done()
}, 500)
const InfiniteLiStyle = {
marginTop: '10px',
fontSize: '14px',
color: 'rgba(100, 100, 100, 1)',
textAlign: 'center'
}
const App = () => {
const [defultList, setDefultList] = useState<string[]>([])
const [hasMore, setHasMore] = useState(true)
useEffect(() => {
init()
}, [])
const loadMore = (done: () => void) => {
setTimeout(() => {
const curLen = defultList.length
for (let i = curLen; i < curLen + 10; i++) {
defultList.push(`${i}`)
}
if (defultList.length >= 30) {
setHasMore(false)
} else {
setDefultList([...defultList])
}
done()
}, 500)
}
const init = () => {
for (let i = 0; i < 10; i++) {
defultList.push(`${i}`)
const init = () => {
for (let i = 0; i < 10; i++) {
defultList.push(`${i}`)
}
setDefultList([...defultList])
}
setDefultList([...defultList])
return (
<>
<h2>基础用法</h2>
<Cell>
<ul className="infiniteUl" id="scroll" style={InfiniteUlStyle}>
<Infiniteloading
containerId="scroll"
useWindow={false}
hasMore={hasMore}
loadMore={loadMore}
>
{defultList.map((item, index) => {
return (
<li className="infiniteLi" key={index} style={InfiniteLiStyle}>
{item}
</li>
)
})}
</Infiniteloading>
</ul>
</Cell>
</>
)
}
export default App;
```
### 下拉刷新
```tsx
<ul className="infiniteUl" id="refreshScroll">
<Infiniteloading
pullIcon="JD"
containerId="refreshScroll"
useWindow={false}
isOpenRefresh={true}
hasMore={refreshHasMore}
loadMore={refreshLoadMore}
refresh={refresh}
>
{refreshList.map((item, index) => {
return (
<li className="infiniteLi" key={index}>
{item}
</li>
)
})}
</Infiniteloading>
</ul>
```
```tsx
const [refreshList, setRefreshList] = useState<string[]>([])
const [refreshHasMore, setRefreshHasMore] = useState(true)
import React, { useState, useEffect } from "react";
import { Cell, Infiniteloading } from '@nutui/nutui-react';
const InfiniteUlStyle = {
height: '300px',
width: '100%',
padding: '0',
overflowY: 'auto',
overflowX: 'hidden'
}
const InfiniteLiStyle = {
marginTop: '10px',
fontSize: '14px',
color: 'rgba(100, 100, 100, 1)',
textAlign: 'center'
}
const App = () => {
const [refreshList, setRefreshList] = useState<string[]>([])
const [refreshHasMore, setRefreshHasMore] = useState(true)
useEffect(() => {
init()
}, [])
useEffect(() => {
init()
}, [])
const refreshLoadMore = (done: () => void) => {
setTimeout(() => {
const curLen = refreshList.length
for (let i = curLen; i < curLen + 10; i++) {
const init = () => {
for (let i = 0; i < 10; i++) {
refreshList.push(`${i}`)
}
if (refreshList.length >= 30) {
setRefreshHasMore(false)
} else {
setRefreshList([...refreshList])
}
done()
}, 500)
}
setRefreshList([...refreshList])
}
const init = () => {
for (let i = 0; i < 10; i++) {
refreshList.push(`${i}`)
const refreshLoadMore = (done: () => void) => {
setTimeout(() => {
const curLen = refreshList.length
for (let i = curLen; i < curLen + 10; i++) {
refreshList.push(`${i}`)
}
if (refreshList.length >= 30) {
setRefreshHasMore(false)
} else {
setRefreshList([...refreshList])
}
done()
}, 500)
}
setRefreshList([...refreshList])
const refresh = (done: () => void) => {
setTimeout(() => {
Toast.text('刷新成功')
done()
}, 1000)
}
return (
<>
<h2>下拉刷新</h2>
<Cell>
<ul className="infiniteUl" id="refreshScroll" style={InfiniteUlStyle}>
<Infiniteloading
pullIcon="JD"
containerId="refreshScroll"
useWindow={false}
isOpenRefresh={true}
hasMore={refreshHasMore}
loadMore={refreshLoadMore}
refresh={refresh}
>
{refreshList.map((item, index) => {
return (
<li className="infiniteLi" key={index} style={InfiniteLiStyle}>
{item}
</li>
)
})}
</Infiniteloading>
</ul>
</Cell>
</>
)
}
export default App;
```
### 自定义加载文案
```tsx
<ul className="infiniteUl" id="scroll">
<Infiniteloading
containerId="customScroll"
useWindow={false}
loadTxt="loading"
loadMoreTxt="没有啦～"
hasMore={customHasMore}
loadMore={customLoadMore}
>
{customList.map((item, index) => {
return (
<li className="infiniteLi" key={index}>
{item}
</li>
)
})}
</Infiniteloading>
</ul>
```
```tsx
const [customList, setCustomList] = useState<string[]>([])
const [customHasMore, setCustomHasMore] = useState(true)
import React, { useState, useEffect } from "react";
import { Cell, Infiniteloading } from '@nutui/nutui-react';
useEffect(() => {
init()
}, [])
const InfiniteUlStyle = {
height: '300px',
width: '100%',
padding: '0',
overflowY: 'auto',
overflowX: 'hidden'
}
const InfiniteLiStyle = {
marginTop: '10px',
fontSize: '14px',
color: 'rgba(100, 100, 100, 1)',
textAlign: 'center'
}
const App = () => {
const [customList, setCustomList] = useState<string[]>([])
const [customHasMore, setCustomHasMore] = useState(true)
const customLoadMore = (done: () => void) => {
setTimeout(() => {
const curLen = customList.length
for (let i = curLen; i < curLen + 10; i++) {
useEffect(() => {
init()
}, [])
const init = () => {
for (let i = 0; i < 10; i++) {
customList.push(`${i}`)
}
if (customList.length >= 30) {
setCustomHasMore(false)
} else {
setCustomList([...customList])
}
done()
}, 500)
}
setCustomList([...customList])
}
const init = () => {
for (let i = 0; i < 10; i++) {
customList.push(`${i}`)
const customLoadMore = (done: () => void) => {
setTimeout(() => {
const curLen = customList.length
for (let i = curLen; i < curLen + 10; i++) {
customList.push(`${i}`)
}
if (customList.length >= 30) {
setCustomHasMore(false)
} else {
setCustomList([...customList])
}
done()
}, 500)
}
setCustomList([...customList])
return (
<>
<h2>自定义加载文案</h2>
<Cell>
<ul className="infiniteUl" id="customScroll" style={InfiniteUlStyle}>
<Infiniteloading
containerId="customScroll"
useWindow={false}
loadTxt="loading"
loadMoreTxt="没有啦～"
hasMore={customHasMore}
loadMore={customLoadMore}
>
{customList.map((item, index) => {
return (
<li className="infiniteLi" key={index} style={InfiniteLiStyle}>
{item}
</li>
)
})}
</Infiniteloading>
</ul>
</Cell>
</>
)
}
export default App;
```
## API
### Props
......@@ -181,9 +267,9 @@ const init = () => {
| containerId | 在 useWindow 属性为 false 的时候，自定义设置节点ID | String | `''` |
| loadMoreTxt | “没有更多数”据展示文案 | String | `'哎呀，这里是底部了啦'` |
| isOpenRefresh | 是否开启下拉刷新 | Boolean | `false` |
| pullIcon | 下拉刷新[图标名称](#/icon) | String | <img src="https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png" width=40/> |
| pullIcon | 下拉刷新[图标名称](#/icon) | String | '' |
| pullTxt | 下拉刷新提示文案 | String | `松手刷新` |
| loadIcon | 上拉加载[图标名称](#/icon) | Boolean | <img src="https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png" width=40 /> |
| loadIcon | 上拉加载[图标名称](#/icon) | String | '' |
| loadTxt | 上拉加载提示文案 | String | `加载中...` |
### Events
......
src/packages/inputnumber/demo.tsx
浏览文件 @ 74581570
......@@ -59,7 +59,7 @@ const InputNumberDemo = () => {
<Cell>
<InputNumber modelValue={inputState.val5} readonly />
</Cell>
<h2>支持小数</h2>
<h2>支持小数点</h2>
<Cell>
<InputNumber modelValue={inputState.val6} step="0.1" decimalPlaces="1" readonly />
</Cell>
......
src/packages/inputnumber/doc.md
浏览文件 @ 74581570
......@@ -6,7 +6,7 @@
### 安装
``` javascript
``` ts
import { InputNumber } from '@nutui/nutui-react';
```
......@@ -16,13 +16,29 @@ import { InputNumber } from '@nutui/nutui-react';
初始化一个默认值
:::demo
```tsx
<InputNumber modelValue={inputState.val1} />
```
```tsx
const [inputState, setInputState] = useState({
val1: 1,
})
import React, { useState } from "react";
import { InputNumber } from '@nutui/nutui-react';
const App = () => {
const [inputState, setInputState] = useState({
val1: 1,
val2: 0,
val3: 10,
val4: 0,
val5: 1,
val6: 5.5,
val7: 1,
val8: 1,
})
return (
<>
<InputNumber modelValue={inputState.val1} />
</>
)
}
export default App;
```
### 步长设置
......@@ -30,7 +46,27 @@ const [inputState, setInputState] = useState({
设置步长 `step` 5
```tsx
<InputNumber modelValue={inputState.val2} step="5" />
import React, { useState } from "react";
import { InputNumber } from '@nutui/nutui-react';
const App = () => {
const [inputState, setInputState] = useState({
val1: 1,
val2: 0,
val3: 10,
val4: 0,
val5: 1,
val6: 5.5,
val7: 1,
val8: 1,
})
return (
<>
<InputNumber modelValue={inputState.val2} step="5" />
</>
)
}
export default App;
```
### 限制输入范围
......@@ -38,13 +74,31 @@ const [inputState, setInputState] = useState({
`min` 和 `max` 属性分别表示最小值和最大值
```tsx
<InputNumber modelValue={inputState.val3} min="10" max="20" overlimit={overlimit} />
```
```tsx
const overlimit = (e: MouseEvent) => {
console.log(e)
Toast.warn('超出限制事件触发')
import React, { useState } from "react";
import { InputNumber } from '@nutui/nutui-react';
const App = () => {
const [inputState, setInputState] = useState({
val1: 1,
val2: 0,
val3: 10,
val4: 0,
val5: 1,
val6: 5.5,
val7: 1,
val8: 1,
})
const overlimit = (e: MouseEvent) => {
console.log(e)
Toast.warn('超出限制事件触发')
}
return (
<>
<InputNumber modelValue={inputState.val3} min="10" max="20" overlimit={overlimit} />
</>
)
}
export default App;
```
### 禁用状态
......@@ -52,7 +106,27 @@ const overlimit = (e: MouseEvent) => {
`disabled` 禁用状态下无法点击按钮或修改输入框。
```tsx
<InputNumber modelValue={inputState.val4} disabled />
import React, { useState } from "react";
import { InputNumber } from '@nutui/nutui-react';
const App = () => {
const [inputState, setInputState] = useState({
val1: 1,
val2: 0,
val3: 10,
val4: 0,
val5: 1,
val6: 5.5,
val7: 1,
val8: 1,
})
return (
<>
<InputNumber modelValue={inputState.val4} disabled />
</>
)
}
export default App;
```
### 只读禁用输入框
......@@ -60,7 +134,27 @@ const overlimit = (e: MouseEvent) => {
`readonly` 设置只读禁用输入框输入行为
```tsx
<InputNumber modelValue={inputState.val5} readonly />
import React, { useState } from "react";
import { InputNumber } from '@nutui/nutui-react';
const App = () => {
const [inputState, setInputState] = useState({
val1: 1,
val2: 0,
val3: 10,
val4: 0,
val5: 1,
val6: 5.5,
val7: 1,
val8: 1,
})
return (
<>
<InputNumber modelValue={inputState.val5} readonly />
</>
)
}
export default App;
```
### 支持小数点
......@@ -68,32 +162,90 @@ const overlimit = (e: MouseEvent) => {
设置步长 `step` 0.1 `decimal-places` 小数保留1位
```tsx
<InputNumber modelValue={inputState.val6} step="0.1" decimalPlaces="1" readonly />
import React, { useState } from "react";
import { InputNumber } from '@nutui/nutui-react';
const App = () => {
const [inputState, setInputState] = useState({
val1: 1,
val2: 0,
val3: 10,
val4: 0,
val5: 1,
val6: 5.5,
val7: 1,
val8: 1,
})
return (
<>
<InputNumber modelValue={inputState.val6} step="0.1" decimalPlaces="1" readonly />
</>
)
}
export default App;
```
### 支持异步修改
通过 `change` 事件和 `model-value` 进行异步修改
```tsx
<InputNumber modelValue={inputState.val7} change={onChange} isAsync={true} />
```
```tsx
const onChange = (value: string | number) => {
Toast.loading('异步演示 2 秒后更改')
setTimeout(() => {
inputState.val7 = Number(value)
setInputState({ ...inputState })
Toast.hide()
}, 2000)
import React, { useState } from "react";
import { InputNumber, Toast } from '@nutui/nutui-react';
const App = () => {
const [inputState, setInputState] = useState({
val1: 1,
val2: 0,
val3: 10,
val4: 0,
val5: 1,
val6: 5.5,
val7: 1,
val8: 1,
})
const onChange = (value: string | number) => {
Toast.loading('异步演示 2 秒后更改')
setTimeout(() => {
inputState.val7 = Number(value)
setInputState({ ...inputState })
Toast.hide()
}, 2000)
}
return (
<>
<InputNumber modelValue={inputState.val7} change={onChange} isAsync={true} />
</>
)
}
export default App;
```
### 自定义按钮大小
设置步长 `step` 0.1 `decimal-places` 小数保留1位
```tsx
<InputNumber modelValue={inputState.val8} buttonSize="30" inputWidth="50" />
import React, { useState } from "react";
import { InputNumber, Toast } from '@nutui/nutui-react';
const App = () => {
const [inputState, setInputState] = useState({
val1: 1,
val2: 0,
val3: 10,
val4: 0,
val5: 1,
val6: 5.5,
val7: 1,
val8: 1,
})
return (
<>
<InputNumber modelValue={inputState.val8} buttonSize="30" inputWidth="50" />
</>
)
}
export default App;
```
## API
......
src/packages/overlay/doc.md
浏览文件 @ 74581570
......@@ -7,7 +7,7 @@
### 安装
``` javascript
``` ts
import { OverLay } from '@nutui/nutui-react';
```
......@@ -15,18 +15,75 @@ import { OverLay } from '@nutui/nutui-react';
### 基础用法
:::demo
```tsx
<Overlay visible={true} zindex={2000}></Overlay>
import React, { useState } from "react";
import { Button, Overlay } from '@nutui/nutui-react';
const App = () => {
const [visible, setVisible] = useState(false)
const handleToggleShow = () => {
setVisible(true)
}
const onClose = () => {
setVisible(false)
}
return (
<>
<Button type="primary" onClick={handleToggleShow}>
显示遮罩层
</Button>
<Overlay visible={visible} onClick={onClose}></Overlay>
</>
)
}
export default App;
```
### 嵌套内容
```tsx
<nut-overlay visible={true} zIndex={2000}>
<div className="wrapper">
<div className="content">这里是正文</div>
</div>
</nut-overlay>
import React, { useState } from "react";
import { Button, Overlay } from '@nutui/nutui-react';
const WrapperStyle = {
display: 'flex',
height: '100%',
alignItems: 'center',
justifyContent: 'center'
}
const ContentStyle = {
display: 'flex',
width: '150px',
height: '150px',
background: '#fff',
borderRadius: '8px',
alignItems: 'center',
justifyContent: 'center',
color: 'red'
}
const App = () => {
const [visible2, setVisible2] = useState(false)
const handleToggleShow2 = () => {
setVisible2(true)
}
const onClose2 = () => {
setVisible2(false)
}
return (
<>
<Button type="success" onClick={handleToggleShow2}>
嵌套内容
</Button>
<Overlay visible={visible2} onClick={onClose2}>
<div className="wrapper" style={WrapperStyle}>
<div className="content" style={ContentStyle}>这里是正文</div>
</div>
</Overlay>
</>
)
}
export default App;
```
## API
......
src/packages/steps/demo.tsx
浏览文件 @ 74581570
......@@ -90,7 +90,7 @@ const StepsDemo = () => {
</Step>
</Steps>
</div>
<h2>竖向步骤条</h2>
<h2>点状步骤和垂直方向</h2>
<div className="steps-wrapper" style={{ height: '300px', padding: '15px 40px' }}>
<Steps direction="vertical" progressDot current={2}>
<Step activeIndex={1} title="已完成" content="您的订单已经打包完成，商品已发出">
......
src/packages/steps/doc.md
浏览文件 @ 74581570
......@@ -6,7 +6,7 @@
### 安装
```javascript
```ts
import { Steps } from '@nutui/nutui-react';
```
......@@ -14,56 +14,225 @@ import { Steps } from '@nutui/nutui-react';
### 基本用法
:::demo
```tsx
<Steps current={1}>
<Step activeIndex={1} title="步骤一">1</Step>
<Step activeIndex={2} title="步骤二">2</Step>
<Step activeIndex={3} title="步骤三">3</Step>
</Steps>
import React, { useState } from "react";
import { Steps, Step, Button } from '@nutui/nutui-react';
const App = () => {
const [stepState, setStepState] = useState<any>({
current1: 1,
current2: 1,
current3: 1,
current4: 1,
current5: 1,
})
const handleStep = (params: string) => {
if (stepState[params] >= 3) {
stepState[params] = 1
setStepState({ ...stepState })
} else {
stepState[params] += 1
setStepState({ ...stepState })
}
}
return (
<>
<Steps current={stepState.current1}>
<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')}>
下一步
</Button>
</div>
</>
)
}
export default App;
```
### 标题和描述信息
```tsx
<Steps current={2}>
<Step activeIndex={1} title="步骤一" content="步骤描述">1</Step>
<Step activeIndex={2} title="步骤二" content="步骤描述">2</Step>
<Step activeIndex={3} title="步骤三" content="步骤描述">3</Step>
</Steps>
import React, { useState } from "react";
import { Steps, Step, Button } from '@nutui/nutui-react';
const App = () => {
const [stepState, setStepState] = useState<any>({
current1: 1,
current2: 1,
current3: 1,
current4: 1,
current5: 1,
})
const handleStep = (params: string) => {
if (stepState[params] >= 3) {
stepState[params] = 1
setStepState({ ...stepState })
} else {
stepState[params] += 1
setStepState({ ...stepState })
}
}
return (
<>
<Steps current={stepState.current2}>
<Step activeIndex={1} title="步骤一" content="步骤描述">
1
</Step>
<Step activeIndex={2} title="步骤二" content="步骤描述"></Step>
<Step activeIndex={3} title="步骤三" content="步骤描述"></Step>
</Steps>
<div className="steps-button" style={{ marginTop: '10px', textAlign: 'center' }}>
<Button type="danger" onClick={() => handleStep('current2')}>
下一步
</Button>
</div>
</>
)
}
export default App;
```
### 自定义图标
```tsx
<Steps current={1}>
<Step activeIndex={1} title="已完成" icon="service">1</Step>
<Step activeIndex={2} title="进行中" icon="people">2</Step>
<Step activeIndex={3} title="未开始" icon="location2">3</Step>
</Steps>
import React, { useState } from "react";
import { Steps, Step, Button } from '@nutui/nutui-react';
const App = () => {
const [stepState, setStepState] = useState<any>({
current1: 1,
current2: 1,
current3: 1,
current4: 1,
current5: 1,
})
const handleStep = (params: string) => {
if (stepState[params] >= 3) {
stepState[params] = 1
setStepState({ ...stepState })
} else {
stepState[params] += 1
setStepState({ ...stepState })
}
}
return (
<>
<Steps current={1}>
<Step activeIndex={1} title="已完成" icon="service">
1
</Step>
<Step activeIndex={2} title="进行中" icon="people">
2
</Step>
<Step activeIndex={3} title="未开始" icon="location2">
3
</Step>
</Steps>
</>
)
}
export default App;
```
### 竖向步骤条
```tsx
<Steps direction="vertical" current={2}>
<Step activeIndex={1} title="已完成" content="您的订单已经打包完成，商品已发出">1</Step>
<Step activeIndex={2} title="进行中" content="您的订单正在配送途中">2</Step>
<Step activeIndex={3} title="未开始" content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦">3</Step>
</Steps>
import React, { useState } from "react";
import { Steps, Step, Button } from '@nutui/nutui-react';
const App = () => {
const [stepState, setStepState] = useState<any>({
current1: 1,
current2: 1,
current3: 1,
current4: 1,
current5: 1,
})
const handleStep = (params: string) => {
if (stepState[params] >= 3) {
stepState[params] = 1
setStepState({ ...stepState })
} else {
stepState[params] += 1
setStepState({ ...stepState })
}
}
return (
<div className="steps-wrapper" style={{ height: '300px', padding: '15px 30px' }}>
<Steps direction="vertical" current={2}>
<Step activeIndex={1} title="已完成" content="您的订单已经打包完成，商品已发出">
1
</Step>
<Step activeIndex={2} title="进行中" content="您的订单正在配送途中">
2
</Step>
<Step
activeIndex={3}
title="未开始"
content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦"
>
3
</Step>
</Steps>
</div>
)
}
export default App;
```
### 点状步骤和垂直方向
```tsx
<Steps direction="vertical" progressDot current={2}>
<Step activeIndex={1} title="已完成" content="您的订单已经打包完成，商品已发出">1</Step>
<Step activeIndex={2} title="进行中" content="您的订单正在配送途中">2</Step>
<Step activeIndex={3} title="未开始" renderContent={() => (
<>
<p>收货地址为：</p>
<p>北京市经济技术开发区科创十一街18号院京东大厦</p>
</>
)}>3</Step>
</Steps>
import React, { useState } from "react";
import { Steps, Step, Button } from '@nutui/nutui-react';
const App = () => {
const [stepState, setStepState] = useState<any>({
current1: 1,
current2: 1,
current3: 1,
current4: 1,
current5: 1,
})
const handleStep = (params: string) => {
if (stepState[params] >= 3) {
stepState[params] = 1
setStepState({ ...stepState })
} else {
stepState[params] += 1
setStepState({ ...stepState })
}
}
return (
<div className="steps-wrapper" style={{ height: '300px', padding: '15px 30px' }}>
<Steps direction="vertical" progressDot current={2}>
<Step activeIndex={1} title="已完成" content="您的订单已经打包完成，商品已发出">
1
</Step>
<Step activeIndex={2} title="进行中" content="您的订单正在配送途中">
2
</Step>
<Step
activeIndex={3}
title="未开始"
renderContent={() => (
<>
<p>收货地址为：</p>
<p>北京市经济技术开发区科创十一街18号院京东大厦</p>
</>
)}
>
3
</Step>
</Steps>
</div>
)
}
export default App;
```
......
src/packages/uploader/doc.md
浏览文件 @ 74581570
......@@ -6,7 +6,7 @@
### 安装
``` javascript
``` ts
import { Uploader } from '@nutui/nutui-react';
```
......@@ -14,71 +14,195 @@ import { Uploader } from '@nutui/nutui-react';
### 基本用法
:::demo
``` tsx
<Uploader url="http://服务器地址"></Uploader>
import React, { useState } from "react";
import { Uploader } from '@nutui/nutui-react';
const App = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
const onStart = () => {
console.log('start 触发')
}
return (
<>
<h2>基础用法</h2>
<Uploader url={uploadUrl} start={onStart}></Uploader>
</>
)
}
export default App;
```
### 自定义上传样式
``` tsx
<Uploader url="http://服务器地址">
<Button type="primary" icon="uploader">上传文件</Button>
</Uploader>
import React, { useState } from "react";
import { Uploader, Button } from '@nutui/nutui-react';
const App = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
return (
<>
<h2>自定义上传样式</h2>
<Uploader url={uploadUrl}>
<Button type="primary" icon="uploader">
上传文件
</Button>
</Uploader>
</>
)
}
export default App;
```
### 直接调起摄像头（移动端生效）
``` tsx
<Uploader url="http://服务器地址" capture></Uploader>
import React, { useState } from "react";
import { Uploader, Button } from '@nutui/nutui-react';
const App = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
return (
<>
<h2>直接调起摄像头（移动端生效）</h2>
<Uploader capture url={uploadUrl}></Uploader>
</>
)
}
export default App;
```
### 上传状态
``` tsx
import React, { useState } from "react";
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)
}
return (
<>
<h2>上传状态</h2>
<Uploader url={uploadUrl} multiple removeImage={onDelete}></Uploader>
</>
)
}
export default App;
```
### 限制上传数量5个
``` tsx
<Uploader url="http://服务器地址" multiple maximum="5"></Uploader>
import React, { useState } from "react";
import { Uploader, Button } from '@nutui/nutui-react';
const App = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
return (
<>
<h2>限制上传数量5个</h2>
<Uploader url={uploadUrl} multiple maximum="5"></Uploader>
</>
)
}
export default App;
```
### 限制上传大小（每个文件最大不超过 50kb，也可以在beforeupload中自行处理）
``` tsx
<Uploader url="http://服务器地址" multiple maximize={1024 * 50} beforeUpload={beforeUpload} oversize={onOversize}></Uploader>
```
import React, { useState } from "react";
import { Uploader, Button } from '@nutui/nutui-react';
``` javascript
const formData = {
custom: 'test'
};
const onOversize = (files: File[]) => {
console.log('oversize 触发 文件大小不能超过 50kb', files);
};
const beforeUpload = (files: File[]) => {
//自定义处理
return files;
const App = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
const onOversize = (files: File[]) => {
console.log('oversize 触发 文件大小不能超过 50kb', files)
}
return (
<>
<h2>限制上传大小（每个文件最大不超过 50kb）</h2>
<Uploader url={uploadUrl} multiple maximize={1024 * 50} oversize={onOversize}></Uploader>
</>
)
}
export default App;
```
### 自定义 FormData headers
``` tsx
<Uploader url="http://服务器地址" data={formData} headers={formData} withCredentials={true}></Uploader>
import React, { useState } from "react";
import { Uploader, Button } from '@nutui/nutui-react';
const App = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
const formData = {
custom: 'test',
}
return (
<>
<h2>自定义 FormData headers</h2>
<Uploader
url={uploadUrl}
data={formData}
headers={formData}
withCredentials={true}
></Uploader>
</>
)
}
export default App;
```
``` javascript
const formData = {
custom: 'test'
};
const onOversize = (files: File[]) => {
console.log('oversize 触发 文件大小不能超过 50kb', files);
};
const beforeUpload = (files: File[]) => {
//自定义处理
return files;
### 手动上传
``` tsx
import React, { useState, useRef } from "react";
import { Uploader, Button } from '@nutui/nutui-react';
const App = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
const uploadRef = useRef(null)
const submitUpload = () => {
uploadRef.current.submit()
}
return (
<>
<h2>手动上传</h2>
<Uploader url={uploadUrl} maximum="5" autoUpload={false} ref={uploadRef}></Uploader>
<br />
<Button type="success" size="small" onClick={submitUpload}>
执行上传
</Button>
</>
)
}
export default App;
```
### 禁用状态
``` tsx
<Uploader disabled></Uploader>
import React, { useState } from "react";
import { Uploader, Button } from '@nutui/nutui-react';
const App = () => {
return (
<>
<h2>禁用状态</h2>
<Uploader disabled></Uploader>
</>
)
}
export default App;
```
### Prop
......
src/sites/doc/components/demoblock/basedUtil.ts
浏览文件 @ 74581570
......@@ -18,7 +18,7 @@ export function decompressText(str: string): any {
}
export function copyCodeHtml(code: string, callback: any): void {
const oInput = document.createElement('input')
const oInput = document.createElement('textarea')
oInput.value = code
document.body.appendChild(oInput)
oInput.select() // 选择对象
......
src/sites/doc/components/demoblock/demoblock.tsx
浏览文件 @ 74581570
......@@ -11,7 +11,7 @@ const DemoBlock: React.FunctionComponent<A> = (props) => {
import React from "react";
import ReactDOM from "react-dom";
import '@nutui/nutui-react/dist/style.css'
import App from "./app.jsx";
import App from "./app.tsx";
import "./app.scss";
ReactDOM.render(
<App/>,
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或