Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

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

未验证 提交 56d2b2d6 编写于 作者: X xiaoyatong 提交者： GitHub
浏览文件
操作

Merge pull request #84 from irisSong/main 

feat: 组件文档增加在线调试功能
上级 c7fc5ae7 20b04a52
隐藏空白更改
内联 并排
Showing with 336 addition and 91 deletion
src/packages/animatingnumbers/doc.md
浏览文件 @ 56d2b2d6
......@@ -6,7 +6,6 @@
### 安装
```javascript
import { AnimatingNumbers } from '@nutui/nutui-react'
```
......@@ -15,14 +14,32 @@ import { AnimatingNumbers } from '@nutui/nutui-react'
### AnimatingNumbers.CountUp-基础用法
```jsx
<AnimatingNumbers.CountUp endNumber="678.94" />
:::demo
```tsx
import React from "react";
import { AnimatingNumbers } from '@nutui/nutui-react';
const App = () => {
return (
<AnimatingNumbers.CountUp endNumber="678.94" />
);
};
export default App;
```
:::
### AnimatingNumbers.CountUp-自定义样式，动态修改数据（需要指定最大位数）
```jsx
const AnimatingNumbersDemo = () => {
:::demo
```tsx
import React, { useEffect, useState } from 'react'
import { AnimatingNumbers } from '@nutui/nutui-react'
const App = () => {
const [endNumber, setEndNumer] = useState('1570.99')
useEffect(() => {
setInterval(() => {
......@@ -30,16 +47,19 @@ const AnimatingNumbersDemo = () => {
}, 30000)
}, [])
return (
<AnimatingNumbers.CountUp
endNumer={endNumber}
easeSpeed={1.2}
maxLen={6}
className="custom-coutup"
/>
)
}
<AnimatingNumbers.CountUp
endNumber={endNumber}
easeSpeed={1.2}
maxLen={6}
className="custom-coutup"
/>
);
};
export default App;
```
:::
## API
### AnimatingNumbers.CountUp Props
......
src/packages/cell/doc.md
浏览文件 @ 56d2b2d6
......@@ -6,7 +6,6 @@
### 安装
```javascript
import { Cell, CellGroup } from '@nutui/nutui-react'
```
......@@ -16,6 +15,7 @@ import { Cell, CellGroup } from '@nutui/nutui-react'
### 基本用法
:::demo
```tsx
import React from "react";
import { Cell } from '@nutui/nutui-react';
......@@ -38,9 +38,13 @@ const App = () => {
};
export default App;
```
:::
### 直接使用
:::demo
```tsx
import React from "react";
import { Cell } from '@nutui/nutui-react';
......@@ -57,9 +61,12 @@ const App = () => {
export default App;
```
:::
### 链接 | 分组用法
:::demo
```tsx
import React from "react";
import { CellGroup,Cell } from '@nutui/nutui-react';
......@@ -77,11 +84,13 @@ const App = () => {
};
export default App;
```
:::
### 自定义右侧箭头区域
:::demo
```tsx
import React from "react";
import { CellGroup,Cell,Switch } from '@nutui/nutui-react';
......@@ -95,10 +104,13 @@ const App = () => {
};
export default App;
```
:::
### 单元格展示图标
:::demo
```tsx
import React from "react";
import { Cell } from '@nutui/nutui-react';
......@@ -110,10 +122,13 @@ const App = () => {
};
export default App;
```
:::
### 只展示 desc ，可通过 desc-text-align 调整内容位置
:::demo
```tsx
import React from "react";
import { Cell } from '@nutui/nutui-react';
......@@ -124,9 +139,10 @@ const App = () => {
);
};
export default App;
```
:::
## API
### Prop
......
src/packages/drag/doc.md
浏览文件 @ 56d2b2d6
......@@ -16,45 +16,147 @@ import { Drag } from '@nutui/nutui-react'
## 基本用法
:::demo
```tsx
<Drag>
<div class="touch-dom">触摸移动</div>
</Drag>
import React from "react";
import { Drag } from '@nutui/nutui-react';
const App = () => {
const btnStyle = {
borderRadius: '25px',
padding: '0 18px',
fontSize: '14px',
color: '#fff',
display: 'inline-block',
lineHeight: '36px',
background: 'linear-gradient(135deg,#fa2c19 0,#fa6419 100%)',
}
return (
<Drag>
<div class="touch-dom" style={btnStyle}>触摸移动</div>
</Drag>
);
};
export default App;
```
:::
## 限制拖拽方向
:::demo
```tsx
<Drag direction={'x'}>
<div class="touch-dom">只能在X轴拖动</div>
</Drag>
<Drag direction={'y'}>
<div class="touch-dom">只能在Y轴拖动</div>
</Drag>
import React from "react";
import { Drag } from '@nutui/nutui-react';
const App = () => {
const btnStyle = {
borderRadius: '25px',
padding: '0 18px',
fontSize: '14px',
color: '#fff',
display: 'inline-block',
lineHeight: '36px',
background: 'linear-gradient(135deg,#fa2c19 0,#fa6419 100%)',
}
return (
<>
<Drag direction={'x'} style={{ top: '200px', left: '8px' }}>
<span style={btnStyle}>只能X轴拖拽</span>
</Drag>
<Drag direction={'y'} style={{ top: '200px', right: '50px' }}>
<span style={btnStyle}>只能Y轴拖拽</span>
</Drag>
</>
);
};
export default App;
```
:::
## 自动吸边
:::demo
```tsx
<Drag direction={'x'} attract={true}>
<div class="touch-dom">拖动我</div>
</Drag>
import React from "react";
import { Drag } from '@nutui/nutui-react';
const App = () => {
const btnStyle = {
borderRadius: '25px',
padding: '0 18px',
fontSize: '14px',
color: '#fff',
display: 'inline-block',
lineHeight: '36px',
background: 'linear-gradient(135deg,#fa2c19 0,#fa6419 100%)',
}
return (
<Drag direction={'x'} attract={true}>
<div class="touch-dom" style={btnStyle}>拖动我</div>
</Drag>
);
};
export default App;
```
:::
## 限制拖拽边界
:::demo
```tsx
const right = () => {
return document.documentElement.clientWidth - 300 - 9
}
const bottom = () => {
return document.documentElement.clientHeight - 559
}
<Drag boundary={{ top: 361, left: 9, bottom: bottom(), right: right() }}>
<div class="touch-dom">拖动我</div>
</Drag>
import React from "react";
import { Drag } from '@nutui/nutui-react';
const App = () => {
const btnStyle = {
borderRadius: '25px',
padding: '0 18px',
fontSize: '14px',
color: '#fff',
display: 'inline-block',
lineHeight: '36px',
background: 'linear-gradient(135deg,#fa2c19 0,#fa6419 100%)',
}
const right = () => {
return document.documentElement.clientWidth - 300 - 9
}
const bottom = () => {
return document.documentElement.clientHeight - 202
}
return (
<>
<div
className="drag-boundary"
style={{
position: 'absolute',
top: '0px',
left: '8px',
width: '300px',
height: '200px',
border: '1px solid red',
}}
></div>
<Drag
boundary={{ top: 1, left: 9, bottom: bottom(), right: right() }}
style={{ top: '40px', left: '50px' }}
>
<span style={btnStyle}>限制拖拽边界</span>
</Drag>
</>
);
};
export default App;
```
:::
## API
### Props
......
src/packages/elevator/doc.md
浏览文件 @ 56d2b2d6
......@@ -14,7 +14,13 @@ import { Elevator } from '@nutui/nutui-react'
### 基础用法
:::demo
```tsx
import React from "react";
import { Elevator } from '@nutui/nutui-react';
const App = () => {
const dataList = [
{
title: 'A',
......@@ -73,20 +79,31 @@ const clickItem = (key: string, item: any) => {
const clickIndex = (key: string) => {
console.log(key)
}
return (
<Elevator
indexList={dataList}
height="260"
clickItem={(key: string, item: any) => clickItem(key, item)}
clickIndex={(key: string) => clickIndex(key)}
></Elevator>
);
};
export default App;
```
:::
### 自定义索引
## API
:::demo
```tsx
import React from "react";
import { Elevator } from '@nutui/nutui-react';
const App = () => {
const dataList = [
{
num: '一',
......@@ -195,16 +212,21 @@ const clickItem = (key: string, item: any) => {
const clickIndex = (key: string) => {
console.log(key)
}
return (
<Elevator
indexList={dataList2}
indexList={dataList}
height="220"
acceptKey="num"
clickItem={(key: string, item: any) => clickItem(key, item)}
clickIndex={(key: string) => clickIndex(key)}
></Elevator>
);
};
export default App;
```
:::
### Props
| 字段 | 说明 | 类型 | 默认值 |
......
src/packages/price/doc.md
浏览文件 @ 56d2b2d6
......@@ -10,43 +10,98 @@
import { Price } from '@nutui/nutui-react'
```
## 代码演示
### 基本用法
:::demo
```tsx
<Price price={1010} needSymbol={false} thousands={true} />
import React from "react"
import { Price, Cell } from '@nutui/nutui-react'
const App = () => {
return (
<Cell>
<Price price={1010} needSymbol={false} thousands={true} />
</Cell>
);
};
export default App;
```
:::
### 有人民币符号，无千位分隔
:::demo
```tsx
<Price price={10010.01} needSymbol={true} thousands={false} />
import React from "react"
import { Price, Cell } from '@nutui/nutui-react'
const App = () => {
return (
<Cell>
<Price price={10010.01} needSymbol={true} thousands={false} />
</Cell>
);
};
export default App;
```
:::
### 带人民币符号，有千位分隔，保留小数点后三位
:::demo
```tsx
<Price price={15213.1221} decimalDigits={3} needSymbol={true} thousands={true} />
import React from "react"
import { Price, Cell } from '@nutui/nutui-react'
const App = () => {
return (
<Cell>
<Price price={15213.1221} decimalDigits={3} needSymbol={true} thousands={true} />
</Cell>
);
};
export default App;
```
:::
### 异步随机变更
:::demo
```tsx
const [price, setPrice] = useState(Math.random() * 10000000)
useEffect(() => {
const timer = setInterval(() => {
setPrice(Math.random() * 10000000)
}, 1000)
return () => {
clearInterval(timer)
}
}, [])
<Price price={price} decimal-digits={3} need-symbol={true} thousands={true} />
import React, { useState, useEffect } from 'react'
import { Price, Cell } from '@nutui/nutui-react'
const App = () => {
const [price, setPrice] = useState(Math.random() * 10000000)
useEffect(() => {
const timer = setInterval(() => {
setPrice(Math.random() * 10000000)
}, 1000)
return () => {
clearInterval(timer)
}
}, [])
return (
<Cell>
<Price price={price} decimalDigits={3} needSymbol={true} thousands={true} />
</Cell>
);
};
export default App;
```
:::
## API
### Props
......
src/packages/signature/doc.md
浏览文件 @ 56d2b2d6
......@@ -14,51 +14,81 @@ import { Signature } from '@nutui/nutui-react'
### 基础用法
:::demo
```tsx
const confirm = (canvas: HTMLCanvasElement, data: string) => {
let img = document.createElement('img')
img.src = data
const demo = document.querySelector('.demo1') as HTMLElement
demo.appendChild(img)
}
const clear = () => {
let img = document.querySelector('.demo1 img')
if (img) {
img.remove()
}
}
<Signature confirm={confirm} clear={clear}></Signature>
<p className="demo-tips demo1" style={demoStyles}>
Tips: 点击确认按钮,下方显示签名图片
</p>
import React from "react";
import { Signature} from '@nutui/nutui-react';
const App = () => {
const confirm = (canvas: HTMLCanvasElement, data: string) => {
let img = document.createElement('img')
img.src = data
const demo = document.querySelector('.demo') as HTMLElement
demo.appendChild(img)
}
const clear = () => {
let img = document.querySelector('.demo img')
if (img) {
img.remove()
}
}
const demoStyles: React.CSSProperties = { margin: '1em 0' }
return (
<>
<Signature confirm={confirm} clear={clear}></Signature>
<p className="demo-tips demo" style={demoStyles}>
Tips: 点击确认按钮,下方显示签名图片
</p>
</>
);
};
export default App;
```
:::
### 修改颜色和签字粗细
:::demo
```tsx
const confirm = (canvas: HTMLCanvasElement, data: string) => {
let img = document.createElement('img')
img.src = data
const demo = document.querySelector('.demo1') as HTMLElement
demo.appendChild(img)
}
const clear = () => {
let img = document.querySelector('.demo1 img')
if (img) {
img.remove()
}
}
<Signature
lineWidth={4}
strokeStyle={'green'}
confirm={confirm1}
clear={clear1}
></Signature>
<p className="demo-tips demo2" style={demoStyles}>
Tips: 点击确认按钮,下方显示签名图片
</p>
import React from "react";
import { Signature} from '@nutui/nutui-react';
const App = () => {
const confirm = (canvas: HTMLCanvasElement, data: string) => {
let img = document.createElement('img')
img.src = data
const demo = document.querySelector('.demo') as HTMLElement
demo.appendChild(img)
}
const clear = () => {
let img = document.querySelector('.demo img')
if (img) {
img.remove()
}
}
const demoStyles: React.CSSProperties = { margin: '1em 0' }
return (
<>
<Signature
lineWidth={4}
strokeStyle={'green'}
confirm={confirm}
clear={clear}
></Signature>
<p className="demo-tips demo" style={demoStyles}>
Tips: 点击确认按钮,下方显示签名图片
</p>
</>
);
};
export default App;
```
:::
## API
### Props
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或