diff --git a/package.json b/package.json
index 1eea5f5030..d7f994ca32 100644
--- a/package.json
+++ b/package.json
@@ -4,12 +4,12 @@
"homepage": "https://uiwjs.github.io",
"private": true,
"scripts": {
- "lib": "lerna exec --scope @uiw/react-form -- tsbb build --target react",
- "lib:css": "lerna exec --scope @uiw/react-form -- compile-less -d src -o esm",
- "lib:css:dist": "lerna exec --scope @uiw/react-form -- compile-less -d src -o lib --combine=dist.css",
- "lib:css:watch": "lerna exec --scope @uiw/react-form -- compile-less -d src -o esm --watch",
- "lib:watch": "lerna exec --scope @uiw/react-form -- tsbb watch & npm run lib:css:watch",
- "lib:bootstrap": "lerna bootstrap --hoist --scope @uiw/react-form",
+ "lib": "lerna exec --scope @uiw/react-descriptions -- tsbb build --target react",
+ "lib:css": "lerna exec --scope @uiw/react-descriptions -- compile-less -d src -o esm",
+ "lib:css:dist": "lerna exec --scope @uiw/react-descriptions -- compile-less -d src -o lib --combine=dist.css",
+ "lib:css:watch": "lerna exec --scope @uiw/react-descriptions -- compile-less -d src -o esm --watch",
+ "lib:watch": "lerna exec --scope @uiw/react-descriptions -- tsbb watch & npm run lib:css:watch",
+ "lib:bootstrap": "lerna bootstrap --hoist --scope @uiw/react-descriptions",
"lib:build": "npm run lib && npm run lib:css && npm run lib:css:dist",
"//>>>>>>>>>>>>": "<<<<<<<<<<",
"watch:other:lib": "lerna exec --parallel --scope @uiw/* --ignore @uiw/doc -- tsbb watch",
@@ -63,15 +63,15 @@
"node": ">=16.0.0"
},
"devDependencies": {
- "@kkt/less-modules": "~7.1.1",
- "@kkt/ncc": "~1.0.8",
+ "@kkt/less-modules": "~7.2.1",
+ "@kkt/ncc": "~1.0.15",
"@types/react": "~18.0.0",
"@types/react-dom": "~18.0.0",
"@types/react-test-renderer": "~18.0.0",
"@types/react-transition-group": "~4.4.4",
"compile-less-cli": "~1.8.11",
"husky": "~7.0.4",
- "kkt": "~7.1.5",
+ "kkt": "~7.2.1",
"lerna": "~4.0.0",
"lint-staged": "~12.3.4",
"prettier": "~2.6.0",
diff --git a/packages/react-affix/README.md b/packages/react-affix/README.md
index ce79acb147..eb7cef02e5 100644
--- a/packages/react-affix/README.md
+++ b/packages/react-affix/README.md
@@ -15,36 +15,36 @@ import Affix from '@uiw/react-affix';
### 基本用法
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Affix, Button } from 'uiw';
-ReactDOM.render(
-
-
- ,
- _mount_
-);
+export default function Demo() {
+ return (
+
+
+
+ )
+}
```
### 钉在底部
这个实例需要你缩小窗口高度，就可以测试看效果啦。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Affix, Button } from 'uiw';
-ReactDOM.render(
- {
- console.log('affixed::', affixed);
- }}>
-
- ,
- _mount_
-);
+export default function Demo() {
+ return (
+ {
+ console.log('affixed::', affixed);
+ }}>
+
+
+ )
+}
```
### Props
diff --git a/packages/react-alert/README.md b/packages/react-alert/README.md
index fde182557b..eba5ea4f96 100644
--- a/packages/react-alert/README.md
+++ b/packages/react-alert/README.md
@@ -15,10 +15,8 @@ import Alert from '@uiw/react-alert';
## 基本用法
-
-```jsx
+```jsx mdx:preview
import React from 'react';
-import ReactDOM from 'react-dom';
import { Alert, ButtonGroup, Button } from 'uiw';
class Demo extends React.Component {
@@ -63,17 +61,15 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo
```
## 延迟关闭对话框
这里是利用 `Promise` 等它执行完成再去关闭窗口
-
-```jsx
+```jsx mdx:preview
import React from 'react';
-import ReactDOM from 'react-dom';
import { Alert, Button } from 'uiw';
class Demo extends React.Component {
@@ -118,17 +114,15 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo
```
## 带图标的弹出框
通过设置 `icon` 和 `type` 参数设置带状态的弹出对话框。
-
-```jsx
+```jsx mdx:preview
import React from 'react';
-import ReactDOM from 'react-dom';
import { Alert, ButtonGroup, Button } from 'uiw';
class Demo extends React.Component {
@@ -213,16 +207,14 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo
```
## 带标题的弹出框
-
-```jsx
+```jsx mdx:preview
import React from 'react';
-import ReactDOM from 'react-dom';
import { Alert, ButtonGroup, Button } from 'uiw';
class Demo extends React.Component {
@@ -312,17 +304,15 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo
```
### 自定义按钮
这个对话框有两个按钮，单击 **`确定按钮`** 或 **`取消按钮`** 后，此对话框将关闭，将不触发 ~~`onConfirm`~~ 或 ~~`onCancel`~~ 事件。因为这俩按钮是自定义按钮。你可以正对自定义按钮外面的对象定义 `className="w-alert-footer"` 将显示默认样式。
-
-```jsx
+```jsx mdx:preview
import React from 'react';
-import ReactDOM from 'react-dom';
import { Alert, ButtonGroup, Button } from 'uiw';
class Demo extends React.Component {
@@ -364,15 +354,13 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo
```
### 不显示遮罩层
-
-```jsx
+```jsx mdx:preview
import React from 'react';
-import ReactDOM from 'react-dom';
import { Alert, ButtonGroup, Button } from 'uiw';
class Demo extends React.Component {
@@ -409,7 +397,7 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo
```
## Props
diff --git a/packages/react-auto-link/README.md b/packages/react-auto-link/README.md
index 9b1ae9bacb..d5d04ba58b 100644
--- a/packages/react-auto-link/README.md
+++ b/packages/react-auto-link/README.md
@@ -15,20 +15,20 @@ import AutoLink from '@uiw/react-auto-link';
### 基础用法
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { AutoLink } from 'uiw';
-ReactDOM.render(
- ,
- _mount_
-);
+export default function Demo() {
+ return (
+
+ )
+}
```
## API
diff --git a/packages/react-avatar/README.md b/packages/react-avatar/README.md
index b6992f5b1b..0587de8485 100644
--- a/packages/react-avatar/README.md
+++ b/packages/react-avatar/README.md
@@ -17,58 +17,57 @@ import Avatar from '@uiw/react-avatar';
头像有四种尺寸，两种形状可选。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Avatar, Icon } from 'uiw';
-ReactDOM.render(
-
-
+export default function Demo() {
+ return (
-
-
滚动滚动条，【快看右下角】，显示返回顶部按钮。
-
Top
+
滚动滚动条，【快看右下角】，显示返回顶部按钮。
+
Top
+export default function Demo() {
+ return(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 评论
+
+
+ );
+}
+```
+
+### 封顶数字
+
+不包裹任何元素即是独立使用，可自定样式展现。
+
+```jsx mdx:preview
+import React from 'react';
+import { Badge, Row, Col, Avatar, Divider } from 'uiw';
+
+const styl={ marginRight: 20, display: 'inline-block' }
+
+export default function Demo() {
+ return (
-
+
-
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
- 评论
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
,
- _mount_
-);
+ )
+}
```
### 独立使用
不包裹任何元素即是独立使用，可自定样式展现。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Badge, Row, Col } from 'uiw';
-ReactDOM.render(
-
-
-
-
-
-
-
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
```
### 小红点
以红点的形式标注需要关注的内容。
-
-```jsx
-import ReactDOM from 'react-dom';
-import { Badge } from 'uiw';
+```jsx mdx:preview
+import React from 'react';
+import { Badge, Icon } from 'uiw';
-ReactDOM.render(
-
-
- 数据查询
-
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+
+ 数据查询
+
+
+
+
+
+ );
+}
```
### 状态点
用于表示状态的小圆点，可以设置 `processing={true}` 让状态点，显示动画效果。
-
-```jsx
+```jsx mdx:preview
+import React from 'react';
import { Badge } from 'uiw';
-ReactDOM.render(
-
-
-
-
-
-
-
-
-
-
-
- Success
-
- Error
-
- Default
-
- Processing
-
- Warning
- Warning
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ Success
+
+ Error
+
+ Default
+
+ Processing
+
+ Warning
+ Warning
+
+ );
+}
```
## API
diff --git a/packages/react-badge/src/style/index.less b/packages/react-badge/src/style/index.less
index bb3a6a13c2..8f5dd9f3b2 100644
--- a/packages/react-badge/src/style/index.less
+++ b/packages/react-badge/src/style/index.less
@@ -4,7 +4,7 @@
display: inline-block;
line-height: 1;
vertical-align: middle;
- sup&-count {
+ & sup&-count {
position: absolute;
transform: translateX(-50%);
top: -10px;
diff --git a/packages/react-breadcrumb/README.md b/packages/react-breadcrumb/README.md
index aa2e9dd6f6..9c7b06bd06 100644
--- a/packages/react-breadcrumb/README.md
+++ b/packages/react-breadcrumb/README.md
@@ -17,81 +17,82 @@ import Breadcrumb from '@uiw/react-breadcrumb';
适用广泛的基础用法，在 `Breadcrumb` 中使用 `Breadcrumb.Item` 标签表示从首页开始的每一级。
-
-```jsx
+```jsx mdx:preview
+import React from 'react';
import { Breadcrumb } from 'uiw';
-ReactDOM.render(
-
- 首页
- 活动管理
- 活动列表
- 活动详情
- ,
- _mount_
-);
+export default function Demo() {
+ return(
+
+ 首页
+ 活动管理
+ 活动列表
+ 活动详情
+
+ );
+}
```
### 自定义分隔符
使用 `separator=">"` 可以自定义分隔符，分隔符也可以是图标。
-
-```jsx
-import ReactDOM from 'react-dom';
-import { Breadcrumb, Divider } from 'uiw';
-
-ReactDOM.render(
- ,
- _mount_
-);
+```jsx mdx:preview
+import React from 'react';
+import { Breadcrumb, Divider, Icon } from 'uiw';
+
+export default function Demo() {
+ return(
+
+ );
+}
```
### 带有图标和连接的
图标放在文字前面。注意文字要使用 `span` 包裹起来，图标 `` 需要跟 `span` 同级。`Breadcrumb.Item` 定义 `href` 参数的话，`Item` 上的参数就全部是超链原始属性。
-
-```jsx
-import ReactDOM from 'react-dom';
-import { Breadcrumb } from 'uiw';
+```jsx mdx:preview
+import React from 'react';
+import { Breadcrumb, Icon } from 'uiw';
const stylIcon = { marginRight: 3, top: 2, display: 'inline-flex' }
-ReactDOM.render(
- ,
- _mount_
-);
+export default function Demo() {
+ return(
+
+ );
+}
```
## Breadcrumb
@@ -106,7 +107,7 @@ ReactDOM.render(
其它参数可根据 `tagName` 来设置，默认 `` 标签时，可设置 `href="https://wwww.google.com"` 或者 `target="_blank"` 等参数，你可以设置 [react-router-dom](https://github.com/ReactTraining/react-router) 路由 [``](https://reacttraining.com/react-router/web/api/Link)，例如：
```jsx
-import { Breadcrumb } from 'uiw';
+import { Breadcrumb, Icon } from 'uiw';
import { Link } from 'react-router-dom';
const Demo = () => {
diff --git a/packages/react-button-group/README.md b/packages/react-button-group/README.md
index 363d6720be..9a678db0da 100644
--- a/packages/react-button-group/README.md
+++ b/packages/react-button-group/README.md
@@ -16,69 +16,69 @@ import ButtonGroup from '@uiw/react-button-group';
### 基本用法
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Button, Divider, ButtonGroup } from 'uiw';
-ReactDOM.render(
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
添加图标
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
添加图标
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+export default function Demo() {
+ return(
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
添加图标
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
,
- _mount_
-);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
添加图标
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
GitHub
-
-
-
-
+
+
+
+
+
+
+
+
+
GitHub
+
+
+
+
-
-
-
-
-
-
-
-
-
Size
-
-
-
-
+
+
+
+
+
+
+
+
+
Size
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
添加图标
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+export default function Demo() {
+ return(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
添加图标
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
,
- _mount_
-);
+ );
+}
```
### 垂直按钮组
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Button, ButtonGroup, Row, Col } from 'uiw';
-ReactDOM.render(
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
```
### 基本按钮
设置 `basic=true` 即可获得基本按钮，没有背景颜色的状态按钮。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Button, Divider } from 'uiw';
-ReactDOM.render(
-
-
-
-
-
-
-
-
激活
-
-
-
-
-
-
-
禁用
-
-
-
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
+
+
+
+
+
+
激活
+
+
+
+
+
+
+
禁用
+
+
+
+
+
+
+
+ );
+}
```
### 基础按钮添加图标
设置 `basic=true` 即可获得基本按钮，没有背景颜色的状态按钮。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Button, Divider } from 'uiw';
const chat = (
@@ -344,115 +343,116 @@ const chat = (
)
-ReactDOM.render(
-
-
-
-
-
-
-
-
-
-
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
```
### 激活按钮样式
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Button } from 'uiw';
-ReactDOM.render(
-
-
-
-
-
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
+
+
+
+
+
+
+
+ );
+}
```
### 禁用按钮样式
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Button } from 'uiw';
-ReactDOM.render(
-
-
-
-
-
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
+
+
+
+
+
+
+
+ );
+}
```
### block
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Button, Row, Col } from 'uiw';
-ReactDOM.render(
-
-
-
-
-
-
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
+
+
+
+
+
+
+
+
+ );
+}
```
### size大小
`size` 在 `Button.Group`下面不支持。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Button, Divider } from 'uiw';
-ReactDOM.render(
-
-
-
-
-
-
-
-
-
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
```
## Props
diff --git a/packages/react-calendar/README.md b/packages/react-calendar/README.md
index b05b307b8a..9d10abebf8 100644
--- a/packages/react-calendar/README.md
+++ b/packages/react-calendar/README.md
@@ -17,9 +17,8 @@ import Calendar from '@uiw/react-calendar';
下面是基础使用方法，可以设置日历通知事项，在日历渲染单元格时，会根据 data 内容来渲染单元格通知事项。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Calendar, Badge } from 'uiw';
const data = [
@@ -58,17 +57,18 @@ function filterData(dt) {
});
}
-ReactDOM.render(
-
- {
- console.log('date:', date, dateSource);
- }}
- data={filterData(data)}
- />
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+ {
+ console.log('date:', date, dateSource);
+ }}
+ data={filterData(data)}
+ />
+
+ );
+}
```
@@ -76,9 +76,8 @@ ReactDOM.render(
在日历面板上面添加通知事件，还可以通过设置 `disabledDate` 来禁止部分日期点击，如下实例每月12号不能点击。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Calendar, Badge } from 'uiw';
const data = [
@@ -127,18 +126,19 @@ function disabledDate(currentDate, props) {
// return currentDate && currentDate.valueOf() < Date.now();
}
-ReactDOM.render(
-
- {
- console.log('date:', date, dateSource);
- }}
- disabledDate={disabledDate}
- data={filterData(data)}
- />
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+ {
+ console.log('date:', date, dateSource);
+ }}
+ disabledDate={disabledDate}
+ data={filterData(data)}
+ />
+
+ );
+}
```
| 参数 | 说明 | 类型 | 默认值 |
diff --git a/packages/react-card/README.md b/packages/react-card/README.md
index e0d3a46c51..8163433459 100644
--- a/packages/react-card/README.md
+++ b/packages/react-card/README.md
@@ -17,91 +17,90 @@ import Card from '@uiw/react-card';
包含标题、内容、操作区域。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Card } from 'uiw';
-ReactDOM.render(
-
- 更多} style={{ width: 300 }}>
- 卡片内容
- 卡片内容
- 卡片内容
-
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+ 更多} style={{ width: 300 }}>
+ 卡片内容
+ 卡片内容
+ 卡片内容
+
+
+ )
+}
```
## 无边框
在灰色背景上使用无边框的卡片。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Card } from 'uiw';
-ReactDOM.render(
-
- 卡片内容
- 卡片内容
- 卡片内容
- ,
- _mount_
-);
+export default function Demo() {
+ return(
+
+ 卡片内容
+ 卡片内容
+ 卡片内容
+
+ )
+}
```
## 简洁卡片
只包含内容区域。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Card } from 'uiw';
-ReactDOM.render(
-
- 卡片内容
- 卡片内容
- 卡片内容
- ,
- _mount_
-);
+export default function Demo() {
+ return(
+
+ 卡片内容
+ 卡片内容
+ 卡片内容
+
+ )
+}
```
## 更灵活的内容展示
可以调整默认边距，设定宽度。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Card } from 'uiw';
let titleStyle = { padding: `10px 16px` };
-ReactDOM.render(
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
+
+
+ )
+}
```
## 添加页脚
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Card, Icon } from 'uiw';
const footer = (
@@ -111,32 +110,32 @@ const footer = (
)
-ReactDOM.render(
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
+
+
+ )
+}
```
## 激活
设置属性 `active=true` 将激活卡片，默认展示鼠标经过的样式。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Card, Icon } from 'uiw';
const footer = (
@@ -146,24 +145,25 @@ const footer = (
)
-ReactDOM.render(
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
+
+
+ );
+}
```
## API
diff --git a/packages/react-carousel/README.md b/packages/react-carousel/README.md
index 61a3114f79..9a3101c5e2 100644
--- a/packages/react-carousel/README.md
+++ b/packages/react-carousel/README.md
@@ -17,12 +17,11 @@ import Carousel from '@uiw/react-carousel';
最简单的用法。
-
-```jsx
+```jsx mdx:preview
import React from 'react';
import { Carousel } from 'uiw';
-function Demo() {
+export default function Demo() {
return (
@@ -57,20 +56,17 @@ function Demo() {
);
}
-
-ReactDOM.render(
, _mount_);
```
## 控制播放频率
palyTime设置每帧停留时间，scrollTime设置切换帧的速度
-
-```jsx
+```jsx mdx:preview
import React from 'react';
import { Carousel } from 'uiw';
-function Demo() {
+export default function Demo() {
return (
@@ -88,55 +84,50 @@ function Demo() {
);
}
-
-ReactDOM.render(
, _mount_);
```
## 切换到指定帧
手动切换到指定帧的位置
-
-```jsx
+```jsx mdx:preview
import React from 'react';
import { Carousel } from 'uiw';
-function Demo() {
+export default function Demo() {
const ref=React.useRef()
const [autoPlay,autoPlaySet]=React.useState(true)
return (
-
- console.log('after',current)}
- beforeChange={(current)=>console.log('before',current)}
- >
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
-
-
-
-
-
- );
- }
-
-ReactDOM.render(
, _mount_);
+
+ console.log('after',current)}
+ beforeChange={(current)=>console.log('before',current)}
+ >
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+
+
+
+
+
+ );
+}
```
## Props
diff --git a/packages/react-cascader/README.md b/packages/react-cascader/README.md
index d20dcfd4ab..14ed64ba27 100644
--- a/packages/react-cascader/README.md
+++ b/packages/react-cascader/README.md
@@ -15,13 +15,11 @@ import Cascader from '@uiw/react-cascader';
## 基础示例
-
-```jsx
-import ReactDOM from 'react-dom';
-import { Cascader } from 'uiw';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
+import { Cascader, Row } from 'uiw';
const Demo = () => {
-
const options = [
{
label: '上海市',
@@ -81,18 +79,16 @@ const Demo = () => {
)
};
-ReactDOM.render(
, _mount_);
+export default Demo
```
## 尺寸
-
-```jsx
-import ReactDOM from 'react-dom';
-import { Cascader } from 'uiw';
+```jsx mdx:preview
+import React from 'react';
+import { Cascader, Row } from 'uiw';
const Demo = () => {
-
const options = [
{
label: '尺寸', value: 1,
@@ -112,38 +108,36 @@ const Demo = () => {
return (
-
-
-
+
+
+
)
};
-ReactDOM.render(
, _mount_);
+export default Demo
```
## 搜索选项
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Cascader } from 'uiw';
const Demo = () => {
-
const options = [
{
label: '上海市',
@@ -189,15 +183,15 @@ const Demo = () => {
/>
)
};
-ReactDOM.render(
, _mount_);
+
+export default Demo
```
## 移入展开菜单
-
-```jsx
-import ReactDOM from 'react-dom';
-import { Cascader } from 'uiw';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
+import { Cascader, Row } from 'uiw';
const Demo = () => {
@@ -236,29 +230,28 @@ const Demo = () => {
return (
- console.log(value, seleteds)}
- onSearch={true}
- />
+ console.log(value, seleteds)}
+ onSearch={true}
+ />
)
};
-ReactDOM.render(
, _mount_);
+export default Demo
```
### 在表单中使用
在 [`
`](#/components/form) 表单中应用 `
` 组件。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Form, Row, Col, Cascader, Button } from 'uiw';
const Demo = () => {
@@ -360,7 +353,7 @@ const options = [
- {
- console.log(e.target.checked)
- console.log(e.target)
- }}>未选中
- 选中
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+ {
+ console.log(e.target.checked)
+ console.log(e.target)
+ }}>未选中
+ 选中
+
+ );
+}
```
### Form 中使用 Checkbox
-
-
-```jsx
-import ReactDOM from 'react-dom';
+
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Form, Checkbox, Row, Col, Button, Notify } from 'uiw';
const Demo = () => (
@@ -113,33 +112,33 @@ const Demo = () => (
- 未选中禁用
- 选中禁用
- 半选中禁用
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+ 未选中禁用
+ 选中禁用
+ 半选中禁用
+
+ );
+}
```
### 全选
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Checkbox, Divider } from 'uiw';
const checkedList = [ '四川菜', '湖北菜', '西北菜', '新疆菜', '东北菜' ];
@@ -185,17 +184,15 @@ class Demo extends React.Component {
)
}
}
-
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 多选组
方便的从数组生成 `Checkbox` 组。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Checkbox, Divider, Button } from 'uiw';
class Demo extends React.Component {
@@ -237,16 +234,15 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 控制组件
通过 `checked` 属性改变 `Checkbox` 组件状态。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Checkbox, Button } from 'uiw';
class Demo extends React.Component {
@@ -277,7 +273,7 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
diff --git a/packages/react-collapse/README.md b/packages/react-collapse/README.md
index 67e98ba9ab..63c154024d 100644
--- a/packages/react-collapse/README.md
+++ b/packages/react-collapse/README.md
@@ -17,9 +17,8 @@ import Collapse from '@uiw/react-collapse';
可以同时展开多个面板，这个例子默认展开了第一个。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Collapse } from 'uiw';
const genExtra = () => (
@@ -31,62 +30,62 @@ const genExtra = () => (
>设置
);
-ReactDOM.render(
-
-
console.log('key::1:', key)}>
-
- 曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。
- 如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。
- 如果非要在这份爱上加上一个期限，我希望是……
- 一万年
-
-
- 曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；
- 曾经牵挂，才能了无牵挂。
-
-
- 古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。
-
-
-
+
console.log('key::1:', key)}>
+
+ 曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。
+ 如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。
+ 如果非要在这份爱上加上一个期限，我希望是……
+ 一万年
+
+
+ 曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；
+ 曾经牵挂，才能了无牵挂。
+
+
+ 古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。
+
+
+
-
console.log('key::1:', key)}>
-
- 曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。
- 如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。
- 如果非要在这份爱上加上一个期限，我希望是……
- 一万年
-
-
- 曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；
- 曾经牵挂，才能了无牵挂。
-
-
- 古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。
-
-
-
+
console.log('key::1:', key)}>
+
+ 曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。
+ 如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。
+ 如果非要在这份爱上加上一个期限，我希望是……
+ 一万年
+
+
+ 曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；
+ 曾经牵挂，才能了无牵挂。
+
+
+ 古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。
+
+
+
-
console.log('key::3:', key)}>
-
- 曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。
- 如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。
- 如果非要在这份爱上加上一个期限，我希望是……
- 一万年
-
-
- 曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；
- 曾经牵挂，才能了无牵挂。
-
-
- 古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。
-
-
-
+
console.log('key::3:', key)}>
+
+ 曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。
+ 如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。
+ 如果非要在这份爱上加上一个期限，我希望是……
+ 一万年
+
+
+ 曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；
+ 曾经牵挂，才能了无牵挂。
+
+
+ 古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。
+
+
+
-
console.log('key::4:', key)}>
-
- 曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。
- 如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。
- 如果非要在这份爱上加上一个期限，我希望是……
- 一万年
-
-
- 曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；
- 曾经牵挂，才能了无牵挂。
-
-
- 古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。
-
-
-
+
console.log('key::4:', key)}>
+
+ 曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。
+ 如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。
+ 如果非要在这份爱上加上一个期限，我希望是……
+ 一万年
+
+
+ 曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；
+ 曾经牵挂，才能了无牵挂。
+
+
+ 古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。
+
+
+
-
console.log('key::5:', key)}>
- 大话西游 } key="1">
- 曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。
- 如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。
- 如果非要在这份爱上加上一个期限，我希望是……
- 一万年
-
- 西游·降魔篇 } key="2">
- 曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；
- 曾经牵挂，才能了无牵挂。
-
-
- 古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。
-
-
-
+
console.log('key::5:', key)}>
+ 大话西游 } key="1">
+ 曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。
+ 如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。
+ 如果非要在这份爱上加上一个期限，我希望是……
+ 一万年
+
+ 西游·降魔篇 } key="2">
+ 曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；
+ 曾经牵挂，才能了无牵挂。
+
+
+ 古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。
+
+
+
-
console.log('key::6:', key)}>
- 大话西游 } key="1">
- 曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。
- 如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。
- 如果非要在这份爱上加上一个期限，我希望是……
- 一万年
-
- } header={西游·降魔篇 } key="2">
- 曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；
- 曾经牵挂，才能了无牵挂。
-
- 折叠-} header="国产零零漆" key="3">
- 古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。
-
-
-
+
console.log('key::6:', key)}>
+ 大话西游 } key="1">
+ 曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。
+ 如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。
+ 如果非要在这份爱上加上一个期限，我希望是……
+ 一万年
+
+ } header={西游·降魔篇 } key="2">
+ 曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；
+ 曾经牵挂，才能了无牵挂。
+
+ 折叠-} header="国产零零漆" key="3">
+ 古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。
+
+
+
@@ -74,19 +68,15 @@ function Demo() {
)
}
-
-ReactDOM.render(, _mount_);
```
### 设置本地语言
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { DatePicker } from 'uiw';
-function Demo() {
+export default function Demo() {
const [date, setDate] = React.useState(null);
return (
@@ -102,19 +92,15 @@ function Demo() {
)
}
-
-ReactDOM.render(, _mount_);
```
### 初始展示日期
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { DatePicker } from 'uiw';
-function Demo() {
+export default function Demo() {
const [date, setDate] = React.useState(null);
return (
@@ -126,18 +112,14 @@ function Demo() {
)
}
-
-ReactDOM.render(, _mount_);
```
### 禁用时间
通过 `disabledDate` 方法设置，今天和今天之前不能选择。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { DatePicker } from 'uiw';
function disabledDate(currentDate) {
@@ -145,7 +127,7 @@ function disabledDate(currentDate) {
return currentDate && currentDate.valueOf() < Date.now();
}
-function Demo() {
+export default function Demo() {
const [date, setDate] = React.useState(null);
return (
@@ -158,21 +140,17 @@ function Demo() {
);
}
-
-ReactDOM.render(, _mount_);
```
## 定制日历单元格
使用 `renderDay` 可以自定义日期单元格的内容和样式。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { DatePicker } from 'uiw';
-function Demo() {
+export default function Demo() {
const [date, setDate] = React.useState(null);
return (
@@ -194,8 +172,6 @@ function Demo() {
);
}
-
-ReactDOM.render(, _mount_);
```
## DatePicker
diff --git a/packages/react-descriptions/README.md b/packages/react-descriptions/README.md
index 002c4c160e..a3b5c80c34 100644
--- a/packages/react-descriptions/README.md
+++ b/packages/react-descriptions/README.md
@@ -17,70 +17,68 @@ import Descriptions from '@uiw/react-descriptions';
简单的展示。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Descriptions } from 'uiw';
-ReactDOM.render(
-
- 调调
- 1360000000
- 上海市，青浦区
- -
-
- 中国湖北省黄冈市罗田县666号
-
- ,
- _mount_
-);
+export default function Demo() {
+ return(
+
+ 调调
+ 1360000000
+ 上海市，青浦区
+ -
+
+ 中国湖北省黄冈市罗田县666号
+
+
+ );
+}
```
## 带边框的
带边框和背景颜色列表。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Descriptions, Badge } from 'uiw';
-ReactDOM.render(
-
- UI组件库
- 免费
- 是
- 2018-04-24 18:00:00
-
- 2019-04-24 18:00:00
-
-
- 正在运行中
-
- ￥280.00
- ￥20.00
- ￥60.00
-
- 五十多个组件库
-
- 当前版本 3.4.1
-
- 当前 react 版本 >= 16.7.0
-
- ,
- _mount_,
-);
+export default function Demo() {
+ return(
+
+ UI组件库
+ 免费
+ 是
+ 2018-04-24 18:00:00
+
+ 2019-04-24 18:00:00
+
+
+ 正在运行中
+
+ ￥280.00
+ ￥20.00
+ ￥60.00
+
+ 五十多个组件库
+
+ 当前版本 3.4.1
+
+ 当前 react 版本 >= 16.7.0
+
+
+ );
+}
```
## 自定义尺寸
自定义尺寸，适应在各种容器中展示。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
-import { Descriptions, Divider, Radio, RadioGroup } from 'uiw';
+import { Descriptions, Divider, Badge, Radio, RadioGroup } from 'uiw';
class Demo extends React.Component {
constructor() {
@@ -139,42 +137,42 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
## 垂直
垂直的列表。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Descriptions, Divider } from 'uiw';
-ReactDOM.render(
- <>
-
- 调调
- 1360000000
- 上海市，青浦区
- 垂直列表设置 layout 值为 vertical。
-
- 中国湖北省黄冈市罗田县666号
-
-
-
-
- 调调
- 1360000000
- 上海市，青浦区
- 垂直列表设置 layout 值为 vertical。
-
- 中国湖北省黄冈市罗田县666号
-
-
- ,
- _mount_,
-);
+export default function Demo() {
+ return(
+ <>
+
+ 调调
+ 1360000000
+ 上海市，青浦区
+ 垂直列表设置 layout 值为 vertical。
+
+ 中国湖北省黄冈市罗田县666号
+
+
+
+
+ 调调
+ 1360000000
+ 上海市，青浦区
+ 垂直列表设置 layout 值为 vertical。
+
+ 中国湖北省黄冈市罗田县666号
+
+
+
+ );
+}
```
## Props
diff --git a/packages/react-descriptions/src/style/index.less b/packages/react-descriptions/src/style/index.less
index 57fd5ecfe9..1a155eb9c9 100644
--- a/packages/react-descriptions/src/style/index.less
+++ b/packages/react-descriptions/src/style/index.less
@@ -7,7 +7,7 @@
border-spacing: 0;
border-collapse: collapse;
table-layout: fixed;
- width: 100%;
+ width: 100% !important;
}
.@{descriptions-prefix} {
@@ -75,6 +75,8 @@
tr td {
border-top: 1px solid #dfe2e5;
border-right: 1px solid #dfe2e5;
+ border-left: 0;
+ border-bottom: 0;
}
&:first-child tr:first-child th,
&:first-child tr:first-child td {
diff --git a/packages/react-divider/README.md b/packages/react-divider/README.md
index b549857bc4..50f4c349fc 100644
--- a/packages/react-divider/README.md
+++ b/packages/react-divider/README.md
@@ -17,64 +17,64 @@ import Divider from '@uiw/react-divider';
基础实例包含虚线分割线、带文本的分割线、实线分割线。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Divider } from 'uiw';
-ReactDOM.render(
-
-
周星驰： 香港演员、导演。祖籍浙江宁波，1962年6月22日生于香港，他是香港最为重要的喜剧片演员与编导之一。中学毕业以后考入香港无线电视台艺员训练班的夜间部。结业后成为无线艺人，最初曾在《香城浪子》《射雕英雄传》等剧集中担任临时演员。
-
-
古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。
-
大话西游
-
曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。 如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。 如果非要在这份爱上加上一个期限，我希望是…… 一万年
-
-
曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；曾经牵挂，才能了无牵挂。
-
+
周星驰： 香港演员、导演。祖籍浙江宁波，1962年6月22日生于香港，他是香港最为重要的喜剧片演员与编导之一。中学毕业以后考入香港无线电视台艺员训练班的夜间部。结业后成为无线艺人，最初曾在《香城浪子》《射雕英雄传》等剧集中担任临时演员。
+
+
古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。
+
大话西游
+
曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。 如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。 如果非要在这份爱上加上一个期限，我希望是…… 一万年
+
+
曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；曾经牵挂，才能了无牵挂。
+
-
-
周星驰： 香港演员、导演。祖籍浙江宁波，1962年6月22日生于香港，他是香港最为重要的喜剧片演员与编导之一。中学毕业以后考入香港无线电视台艺员训练班的夜间部。结业后成为无线艺人，最初曾在《香城浪子》《射雕英雄传》等剧集中担任临时演员。
-
大话西游
-
古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。
-
大话西游
-
曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。
-
大话西游
-
曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；曾经牵挂，才能了无牵挂。
-
+
+
周星驰： 香港演员、导演。祖籍浙江宁波，1962年6月22日生于香港，他是香港最为重要的喜剧片演员与编导之一。中学毕业以后考入香港无线电视台艺员训练班的夜间部。结业后成为无线艺人，最初曾在《香城浪子》《射雕英雄传》等剧集中担任临时演员。
+
大话西游
+
古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。
+
大话西游
+
曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。
+
大话西游
+
曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；曾经牵挂，才能了无牵挂。
+
-
-
-
-
+export default function Demo() {
+ return(
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
,
- _mount_
-);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -128,44 +126,43 @@ const menu = (
);
-ReactDOM.render(
-
-
-
-
-
+export default function Demo() {
+ return(
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
,
- _mount_
-);
+
+export default function Demo() {
+ return(
+
+
+ );
+}
```
## Props
diff --git a/packages/react-empty/README.md b/packages/react-empty/README.md
index 0bdfb4785a..e7d3e27958 100644
--- a/packages/react-empty/README.md
+++ b/packages/react-empty/README.md
@@ -15,25 +15,25 @@ import Empty from '@uiw/react-empty';
### 基本使用
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Empty, Button } from 'uiw';
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return
+}
```
### 自定义
通过自定义属性定制个性化展示。
-
-```jsx
-import ReactDOM from 'react-dom';
-import { Empty, Icon } from 'uiw';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
+import { Empty, Button, Icon } from 'uiw';
-const Demo = () => {
- return(
+export default function Demo() {
+ return (
@@ -46,18 +46,17 @@ const Demo = () => {
)
}
-
-ReactDOM.render(, _mount_);
```
### 无描述展示
-
-```jsx
-import ReactDOM from 'react-dom';
-import { Empty, Button } from 'uiw';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
+import { Empty } from 'uiw';
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return
+}
```
## Props
diff --git a/packages/react-file-input/README.md b/packages/react-file-input/README.md
index 07ce2d0284..b324a44bf7 100644
--- a/packages/react-file-input/README.md
+++ b/packages/react-file-input/README.md
@@ -15,12 +15,11 @@ import FileInput from '@uiw/react-file-input';
### 基础用法
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { FileInput, Button } from 'uiw';
-const Demo = () => {
+export default function Demo() {
const onChange = (e) => {
console.log(e)
}
@@ -33,21 +32,15 @@ const Demo = () => {
)
}
-
-ReactDOM.render(
- ,
- _mount_
-);
```
### 图片墙
-
-```jsx
-import ReactDOM from 'react-dom';
-import { FileInput, Button } from 'uiw';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
+import { FileInput, Button, Icon } from 'uiw';
-const Demo = () => {
+export default function Demo() {
return (
{
)
}
-
-ReactDOM.render(
- ,
- _mount_
-);
```
### 图片预览
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
-import { FileInput, Overlay } from 'uiw';
+import { FileInput, Overlay, Icon } from 'uiw';
-const Demo=()=>{
+export default function Demo() {
const [visible,visibleSet]=React.useState(false)
const [curfile,curFileSet]=React.useState(null)
console.log('curfile',curfile)
@@ -144,77 +130,72 @@ const Demo=()=>{
)
}
-
-ReactDOM.render( ,_mount_
-);
```
### 图片列表样式
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { FileInput, Button } from 'uiw';
-ReactDOM.render(
-
- console.log(234)}
- value={[
- { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }
- ]}
- >
-
-
-
- console.log(234)}
- value={[
- { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }
- ]}
- >
-
-
-
- console.log(234)}
- value={[
- { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }
- ]}
- >
-
-
-
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+ console.log(234)}
+ value={[
+ { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }
+ ]}
+ >
+
+
+
+ console.log(234)}
+ value={[
+ { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }
+ ]}
+ >
+
+
+
+ console.log(234)}
+ value={[
+ { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }
+ ]}
+ >
+
+
+
+
+
+
+
+ );
+}
```
-### 在`Form`表单中使用
+### 在 `Form` 表单中使用
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React,{ useRef } from 'react';
-import ReactDOM from 'react-dom';
import { Form, Row, Col, Icon,FileInput,Button } from 'uiw';
-function Demo() {
+export default function Demo() {
const form = useRef()
return (
@@ -304,17 +285,13 @@ function Demo() {
)
}
-ReactDOM.render(,_mount_)
```
## Props
- `uploadType: input` 基础输入框上传
-
- `uploadType: picture` 图片列展示列表，显示图片
-
- `uploadType: text` 图片列展示列表，不显示图片
-
- `uploadType: card` 图片墙列表
| 参数 | 说明 | 类型 | 默认值 |
diff --git a/packages/react-form/README.md b/packages/react-form/README.md
index 28c21ede7a..bd870b5bfe 100644
--- a/packages/react-form/README.md
+++ b/packages/react-form/README.md
@@ -15,14 +15,11 @@ import { Form, FormItem } from '@uiw/react-form';
### 基本用法
-
-```jsx
-
+```jsx mdx:preview&bg=#fff
import React, { useState, useRef } from "react";
-import ReactDOM from 'react-dom';
import { Form, Input, Row, Col, Slider, Button, Notify } from 'uiw';
-function Demo() {
+export default function Demo() {
const form = useRef()
const onSubmit = () => {
@@ -93,188 +90,39 @@ function Demo() {
)
}
-ReactDOM.render(, _mount_);
```
### 自定义校验
一般校验可不需引入外部包解决，如果遇到大型工程表单比较多的地方推荐使用 [jquense/yup](https://github.com/jquense/yup)
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Form, Input, Notify, Checkbox, Switch, RadioGroup, Radio, Textarea, Row, Col, Button } from 'uiw';
-const Demo = () => (
-
-)
-ReactDOM.render(, _mount_);
-```
-
-### 水平登录栏
-
-
-```jsx
-import ReactDOM from 'react-dom';
-import { Form, Input, Row, Col, Notify, Button } from 'uiw';
-
-const Demo = () => (
-
+export default function Demo() {
+ return(
`](#/components/form) 表单组件中，应用自定义 `
` 控件组件。
@@ -470,10 +465,8 @@ ReactDOM.render(
, _mount_);
- `value` 用于值传递，
- `onChange(value)` 用于值变更需要执行的回调函数，回调函数第一个参数必须是 `value`。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Form, Row, Col, Dropdown, Menu, Icon, Button, Notify } from 'uiw';
// 自定义组件
@@ -520,65 +513,66 @@ function CustomSelect(props) {
}
// 自定义组件应用实例
-const Demo = () => (
-
+ )
+}
```
### FormItem 竖排
@@ -588,13 +582,11 @@ ReactDOM.render(
, _mount_);
> ⚠️ 注意：`FormItem` 组件只在 `Form` 组件中使用，在 `@v4.10.4+` 以上版本可以当普通 `form` 使用。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
-import { Form, FormItem, Button } from 'uiw';
+import { Form, FormItem, Button, Input } from 'uiw';
-const Demo = () => {
+export default function Demo() {
const [formData, setFormData] = React.useState({});
const handleSubmit = (_, e) => {
e && e.preventDefault();
@@ -630,7 +622,6 @@ const Demo = () => {
);
}
-ReactDOM.render(
, _mount_);
```
### FormItem 横排
@@ -640,37 +631,37 @@ ReactDOM.render(
, _mount_);
> ⚠️ 注意：`FormItem` 组件只在 `Form` 组件中使用，在 `@v4.10.4+` 以上版本可以当普通 `form` 使用。
-
-```jsx
-import ReactDOM from 'react-dom';
-import { Form, FormItem } from 'uiw';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
+import { Form, FormItem, Input } from 'uiw';
-const Demo = () => (
-
-)
-ReactDOM.render(
, _mount_);
+export default function Demo() {
+ return (
+
+ )
+}
```
## Form
@@ -708,17 +699,17 @@ ReactDOM.render(
, _mount_);
#### ref
```jsx
- const form = useRef()
- render(
-);
-
-ReactDOM.render(
, _mount_);
+```jsx mdx:preview&bg=#fff
+import React from 'react';
+import { Form, Input, InputNumber, Row, Col, Button, Notify } from 'uiw';
+
+export default function Demo() {
+ return (
+
+ );
+}
```
### 插入图标
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Input, Row, Col } from 'uiw';
const stylItem = { margin: 20 };
-const Demo = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-)
-ReactDOM.render(
, _mount_);
+export default function Demo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
```
### 后面插入内容
向后面插入 [`Button`](#/components/button) 或者 [`Tag`](#/components/tag)
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Input, Row, Col, Button, Tag } from 'uiw';
-const Demo = () => (
-
-
-
- }
- />
-
-
- }
- />
-
-
- 按钮}
- />
-
-
- 按钮}
- />
-
-
-
-)
-ReactDOM.render(
, _mount_);
+export default function Demo() {
+ return (
+
+
+
+ }
+ />
+
+
+ }
+ />
+
+
+ 按钮}
+ />
+
+
+ 按钮}
+ />
+
+
+
+ )
+}
```
### 输入框尺寸
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Input, Row, Col, Tag, Button } from 'uiw';
-const Demo = () => (
-
-
-
- }
- />
-
-
- }
- />
-
-
- 按钮}
- />
-
-
-
-
- }
- />
-
-
- 丸}
- />
-
-
- }
- />
-
-
-
-
- 按钮}
- />
-
-
- 搜索}
- />
-
-
- 按钮}
- />
-
-
-
-
- 亮按钮}
- />
-
-
- 按钮}
- />
-
-
- 按钮}
- />
-
-
-
-
-
-
-
-
-
-
- 按钮}
- />
-
-
-
-)
-ReactDOM.render(
, _mount_);
+export default function Demo() {
+ return (
+
+
+
+ }
+ />
+
+
+ }
+ />
+
+
+ 按钮}
+ />
+
+
+
+
+ }
+ />
+
+
+ 丸}
+ />
+
+
+ }
+ />
+
+
+
+
+ 按钮}
+ />
+
+
+ 搜索}
+ />
+
+
+ 按钮}
+ />
+
+
+
+
+ 亮按钮}
+ />
+
+
+ 按钮}
+ />
+
+
+ 按钮}
+ />
+
+
+
+
+
+
+
+
+
+
+ 按钮}
+ />
+
+
+
+ )
+}
```
### 密码输入框
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Input, Row, Col, Button } from 'uiw';
class Demo extends React.Component {
@@ -401,19 +395,20 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(
, _mount_);
+
+export default Demo;
```
### 输入框被禁用
-
-```jsx
-import ReactDOM from 'react-dom';
-import { Icon, Input, Row, Col} from 'uiw';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
+import { Icon, Input, Button, Row, Col} from 'uiw';
const stylItem = { margin: 20 };
-const Demo = () => (
- <>
+
+export default function Demo() {
+ return (
@@ -435,9 +430,8 @@ const Demo = () => (
-
-);
-ReactDOM.render(
, _mount_);
+ );
+}
```
## Input
diff --git a/packages/react-list/README.md b/packages/react-list/README.md
index 561048d4cf..b66d1ea172 100644
--- a/packages/react-list/README.md
+++ b/packages/react-list/README.md
@@ -19,9 +19,8 @@ import List, { ListItem } from '@uiw/react-list'; // @ v4.10.0+
### 基础用法
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { List } from 'uiw';
const data = [
@@ -60,7 +59,7 @@ const Demo = () => (
/>
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+
+
+
+
+ );
+}
```
### 警告提示中加载
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Loader, Row, Col, Message, Icon } from "uiw";
+import { Loader, Row, Col, Message, Icon, Button } from "uiw";
class Demo extends Component {
constructor(props) {
@@ -97,66 +95,105 @@ class Demo extends Component {
);
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 卡片加载中
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Loader, Card, Col, Row } from "uiw";
-ReactDOM.render(
-
-
- 更多
}
- style={{ minWidth: 230 }}
- >
-
-
- 卡片内容
-
- 卡片内容
-
- 卡片内容
-
-
-
-
-
-
- 更多}
- style={{ minWidth: 230 }}
- >
-
-
- 卡片内容
-
- 卡片内容
-
- 卡片内容
-
-
-
-
-
-
- 更多}
- style={{ minWidth: 230 }}
- >
+export default function Demo() {
+ return (
+
+
+ 更多}
+ style={{ minWidth: 230 }}
+ >
+
+
+ 卡片内容
+
+ 卡片内容
+
+ 卡片内容
+
+
+
+
+
+
+ 更多}
+ style={{ minWidth: 230 }}
+ >
+
+
+ 卡片内容
+
+ 卡片内容
+
+ 卡片内容
+
+
+
+
+
+
+ 更多}
+ style={{ minWidth: 230 }}
+ >
+
+
+ 卡片内容
+
+ 卡片内容
+
+ 卡片内容
+
+
+
+
+
+
+ );
+}
+```
+
+
+### 自定义加载图标动画
+
+```jsx mdx:preview&bg=#fff
+import React from 'react';
+import { Loader, Card, Icon } from "uiw";
+
+export default function Demo() {
+ return (
+
+
更多} style={{ width: 300 }}>
+ }
style={{ width: "100%" }}
>
@@ -169,48 +206,9 @@ ReactDOM.render(
-
- ,
- _mount_
-);
-```
-
-
-### 自定义加载图标动画
-
-
-```jsx
-import ReactDOM from 'react-dom';
-import { Loader, Card, Icon } from "uiw";
-
-ReactDOM.render(
-
-
更多} style={{ width: 300 }}>
-
- }
- style={{ width: "100%" }}
- >
-
- 卡片内容
-
- 卡片内容
-
- 卡片内容
-
-
-
-
-
,
- _mount_
-);
+
-
-
-
-
-
-
-
-
-
-
-)
-ReactDOM.render(, _mount_);
+
+
+
+
+ )
+}
```
### 下拉菜单
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Menu, Popover, Button, Row, Col } from 'uiw';
const btnStl = {position: 'relative', width: 70 }
@@ -123,118 +121,119 @@ const content = (
)
-const Demo = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+export default function Demo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+
-
-
+
+
+
+
+
+
-
-
-
-
-
-
+
+
-
-
+
+
+
+
+
+
-
-
-
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-)
-ReactDOM.render(
, _mount_);
+ );
+}
```
### 内嵌菜单
通过设置 `overlayProps={ isOpen: true }`，让菜单默认展开。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Menu, Row, Col } from 'uiw';
-const Demo = () => (
-
-
-
-
-
-)
-ReactDOM.render(
, _mount_);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
```
### 主题
内建了两套主题 `light`、`dark`，默认 `light`。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Menu, Row, Col, Switch } from 'uiw';
class Demo extends React.Component {
@@ -292,18 +291,15 @@ class Demo extends React.Component {
);
}
}
-
-ReactDOM.render(
, _mount_);
+export default Demo;
```
### 完整菜单展示
包括点击选中效果，事件等操作，完整的实例展示。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Menu, Row, Col, Switch } from 'uiw';
class Demo extends React.Component {
@@ -406,18 +402,16 @@ class Demo extends React.Component {
}
}
-ReactDOM.render(
, _mount_);
+export default Demo;
```
### 缩起内嵌菜单
内嵌菜单可以被缩起/展开，需要 `SubMenu` 的参数 `collapse` 和 `inlineCollapsed` 配合使用。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
-import { Menu, Row, Col, Icon, Button } from 'uiw';
+import { Menu, Row, Col, Icon, Button, Switch } from 'uiw';
const menusData = [
{ key: '1', icon: 'delete', label: '删除' },
@@ -451,7 +445,7 @@ const menusData = [
},
];
-const Demo = () => {
+export default function Demo() {
const [theme, setTheme] = React.useState('dark');
const [collapse, setCollapse] = React.useState(false);
const menuRef = React.useRef();
@@ -510,8 +504,6 @@ const Demo = () => {
@@ -78,15 +76,12 @@ function Demo() {
)
}
-ReactDOM.render(, _mount_);
```
### 自定义图标
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Message, Divider } from 'uiw';
const chat = ( );
@@ -107,15 +102,13 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 关闭按钮
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Message, Divider } from 'uiw';
class Demo extends React.Component {
@@ -136,7 +129,7 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
## Props
diff --git a/packages/react-modal/README.md b/packages/react-modal/README.md
index 9087354f91..fe143ec49d 100644
--- a/packages/react-modal/README.md
+++ b/packages/react-modal/README.md
@@ -15,10 +15,8 @@ import Modal from '@uiw/react-modal';
### 基本用法
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Modal, ButtonGroup, Button } from 'uiw';
class Demo extends React.Component {
@@ -71,17 +69,15 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 延迟关闭对话框
这里是利用 `Promise` 等它执行完成再去关闭窗口
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Modal, ButtonGroup, Button } from 'uiw';
class Demo extends React.Component {
@@ -134,7 +130,7 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
@@ -142,11 +138,9 @@ ReactDOM.render(, _mount_);
这里是利用 `Promise` 等它执行完成再去关闭窗口
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
-import { Modal, ButtonGroup, Button } from 'uiw';
+import { Modal, ButtonGroup, Button, Form, Input, Textarea } from 'uiw';
class Demo extends React.Component {
constructor() {
@@ -252,17 +246,16 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+
+export default Demo;
```
### 自定义页脚
设置 `useButton={false}` 隐藏默认的按钮，再根据自己需求定义按钮。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Modal, ButtonGroup, Button } from 'uiw';
class Demo extends React.Component {
@@ -320,17 +313,15 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 快捷弹出
使用 show() 可以快捷地弹出确认框。接受的参数与 ModalProps 一样, 只是少了 isOpen 与 onClosed
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Modal, ButtonGroup, Button } from 'uiw';
class Demo extends React.Component {
@@ -349,7 +340,7 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
## Props
diff --git a/packages/react-month-picker/README.md b/packages/react-month-picker/README.md
index d14e180d7d..6b037012d8 100644
--- a/packages/react-month-picker/README.md
+++ b/packages/react-month-picker/README.md
@@ -15,13 +15,11 @@ import MonthPicker from '@uiw/react-month-picker';
### 基础用法
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { MonthPicker, Row, Col } from 'uiw';
-const Demo = () => {
+export default function Demo() {
const [formatDate, setFormatDate] = React.useState('2019/04')
function onChange(date, formatDate) {
setFormatDate(formatDate)
@@ -37,55 +35,54 @@ const Demo = () => {
)
}
-ReactDOM.render(, _mount_);
```
## 在表单中使用
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Form, MonthPicker, Notify, Row, Col, Button } from 'uiw';
-const Demo = () => (
-
-
-
-)
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+
+
+ )
+}
```
## Props
diff --git a/packages/react-notify/README.md b/packages/react-notify/README.md
index ae4230d522..7325406977 100644
--- a/packages/react-notify/README.md
+++ b/packages/react-notify/README.md
@@ -15,12 +15,11 @@ import Notify from '@uiw/react-notify';
### 基本用法
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Button, Notify } from 'uiw';
-const Demo = () => {
+export default function Demo() {
return (
);
}
-ReactDOM.render(, _mount_);
```
### 弹出位置
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Button, Notify } from 'uiw';
-const Demo = () => {
+export default function Demo() {
return (
);
}
-ReactDOM.render(, _mount_);
```
### 弹出通知不消失
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Button, Notify } from 'uiw';
-const Demo = () => {
+export default function Demo() {
return (
);
}
-ReactDOM.render(, _mount_);
```
### 标题不展示
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Button, Notify } from 'uiw';
-const Demo = () => {
+export default function Demo() {
return (
);
}
-ReactDOM.render(, _mount_);
```
### 只展示标题
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Button, Notify } from 'uiw';
-const Demo = () => {
+export default function Demo() {
return (
);
}
-ReactDOM.render(, _mount_);
```
### 不展示图标
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Button, Notify } from 'uiw';
-const Demo = () => {
+export default function Demo() {
return (
);
}
-ReactDOM.render(, _mount_);
```
## Notify
diff --git a/packages/react-overlay-trigger/README.md b/packages/react-overlay-trigger/README.md
index 930bac40a1..ca2e25c212 100644
--- a/packages/react-overlay-trigger/README.md
+++ b/packages/react-overlay-trigger/README.md
@@ -17,9 +17,8 @@ import OverlayTrigger from '@uiw/react-overlay-trigger';
最简单的用法。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { OverlayTrigger } from 'uiw';
const tooltip = (
@@ -33,16 +32,16 @@ const Demo = () => (
鼠标移动到此处，点击显示和消失触发事件
)
-ReactDOM.render(, _mount_);
+
+export default Demo;
```
### 配合组件使用
下面配合 [``](#/components/card) 组件使用。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { OverlayTrigger, Card } from 'uiw';
const card = (
@@ -56,16 +55,15 @@ const Demo = () => (
鼠标移动到此处，显示和消失触发事件
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 位置
位置有 12 个方向，根据 placement 参数来设置。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { OverlayTrigger, Card, Button } from 'uiw';
const btnStl = {position: 'relative', width: 70, height: 50 }
@@ -125,17 +123,15 @@ const Demo = () => (
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 鼠标经过事件
默认离开**触发区域**隐藏弹出目标，设置 `isOutside` 值为 `true`，在**触发区域**或**弹出目标区域**内，不隐藏**弹出目标**。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { OverlayTrigger, Card, Divider } from 'uiw';
const card = (
@@ -172,7 +168,7 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
@@ -180,9 +176,8 @@ ReactDOM.render(, _mount_);
延迟属性，只针对 `trigger=hover` 有效。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { OverlayTrigger, Card } from 'uiw';
const card = (
@@ -196,17 +191,15 @@ const Demo = () => (
鼠标移动到此处，显示和消失触发事件，延迟 `4s` 消失
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 组件受控
通过设置属性 isOpen 可以文字提示手动控制状态的展示。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { OverlayTrigger, Card, Divider, Switch } from 'uiw';
const card = (
@@ -251,17 +244,15 @@ class Demo extends React.Component {
);
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
### usePortal
设置 `usePortal={false}` 将模态对话框生成到根节点的里面。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { OverlayTrigger, Card, Divider } from 'uiw';
const card = (
@@ -303,7 +294,7 @@ class Demo extends React.Component {
);
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
## Props
diff --git a/packages/react-overlay/README.md b/packages/react-overlay/README.md
index 24ada6f54a..9cf5e0768f 100644
--- a/packages/react-overlay/README.md
+++ b/packages/react-overlay/README.md
@@ -15,13 +15,11 @@ import Overlay from '@uiw/react-overlay';
### 基本用法
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Overlay, Button, Card } from 'uiw';
-function Demo() {
+export default function Demo() {
const [isOpen, setIsOpen] = React.useState(false);
const [hasBackdrop, setHasBackdrop] = React.useState(true);
return (
@@ -61,19 +59,15 @@ function Demo() {
)
}
-
-ReactDOM.render(, _mount_);
```
### 完全定制弹出容器
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
-import { Overlay, Button } from 'uiw';
+import { Overlay, Button, Icon } from 'uiw';
-function Demo() {
+export default function Demo() {
const [isOpen, setIsOpen] = React.useState(false);
return (
@@ -134,31 +128,27 @@ function Demo() {
)
}
-
-ReactDOM.render(, _mount_);
```
### usePortal
[`Portals`](https://reactjs.org/docs/portals.html#event-bubbling-through-portals) 是 react 16 提供的官方解决方案，使得组件可以脱离父组件层级挂载在 DOM 树的任何位置，我们利用这个方法，可将模态对话框生成到根节点的外面，默认情况生成到跟节点的外面，通过将 `usePortal` 设置为 `false` 将对话框生成在父组件层级挂载的 DOM 树中。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Overlay, Button, Card } from 'uiw';
-function Demo() {
+export default function Demo() {
const [isOpen, setIsOpen] = React.useState(false);
function toggleOverlay(e) {
setIsOpen(!isOpen);
}
return (
-
+
- 基础弹出层
+ 基础弹出层1
Portals 是 react 16 提供的官方解决方案，使得组件可以脱离父组件层级挂载在DOM树的任何位置，我们利用这个方法，可将模态对话框生成到根节点的外面，默认情况生成到跟节点的外面，通过将 usePortal 设置为 false 将对话框生成在父组件层级挂载的DOM树中。
@@ -166,8 +156,6 @@ function Demo() {
)
}
-
-ReactDOM.render(
, _mount_);
```
### 自定义动画
@@ -176,13 +164,11 @@ ReactDOM.render(
, _mount_);
> 注意：`@3.2.0` ~~`transitionDuration={1000}`~~ 更名为 `timeout`
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Overlay, Button, Card } from 'uiw';
-function Demo() {
+export default function Demo() {
const [isOpen, setIsOpen] = React.useState(false);
function toggleOverlay(e) {
setIsOpen(!isOpen);
@@ -205,8 +191,6 @@ function Demo() {
-
{
- console.log(`pageNumber:${pageNumber}`)
- }}
- />
-
- {
- console.log(`pageNumber:${pageNumber}`)
- }}
- />
-
- {
- console.log(`pageNumber:${pageNumber}`)
- }}
- />
-
+
{
+ console.log(`pageNumber:${pageNumber}`)
+ }}
+ />
+
+ {
+ console.log(`pageNumber:${pageNumber}`)
+ }}
+ />
+
+ {
+ console.log(`pageNumber:${pageNumber}`)
+ }}
+ />
+
-
console.log(val)} />
-
- console.log(val)} />
-
- console.log(val)} />
-
+
console.log(val)} />
+
+ console.log(val)} />
+
+ console.log(val)} />
+ Are you sure you want to delete these items? You won't be able to recover them.
)
-const Demo = () => (
-
-
+export default function Demo() {
+ return (
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
-
+
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
+
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
+
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-)
-ReactDOM.render(
, _mount_);
+ );
+}
```
### 鼠标经过弹出目标
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Popover, Card, Button } from 'uiw';
const btnStl = {position: 'relative', width: 70 }
@@ -192,24 +189,23 @@ const content = (
这是你鼠标经过弹出的目标。
)
-const Demo = () => (
-
-)
-ReactDOM.render(
, _mount_);
+export default function Demo() {
+ return (
+
+ )
+}
```
### 焦点展示
通过设置 `trigger="focus"` 让 `Input` 组件在获取焦点的时候展示 `Popover`
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Popover, Card, Button, Input } from 'uiw';
const btnStl = {position: 'relative', width: 70 }
@@ -276,17 +272,15 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(
, _mount_);
+export default Demo;
```
### usePortal
设置 `usePortal={false}` 将模态对话框生成到根节点的里面，这样为了计算位置准确，你需要将父层样式设为 `position: relative;` 。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Popover, Card, Button } from 'uiw';
class Demo extends React.Component {
@@ -333,15 +327,13 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(
, _mount_);
+export default Demo;
```
### Confirm 用法
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Popover, Row } from 'uiw';
class Demo extends React.Component {
@@ -353,7 +345,8 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(
, _mount_);
+
+export default Demo;
```
## Props
diff --git a/packages/react-progress/README.md b/packages/react-progress/README.md
index fd48e53805..36a60b2df1 100644
--- a/packages/react-progress/README.md
+++ b/packages/react-progress/README.md
@@ -16,97 +16,99 @@ import Progress from '@uiw/react-progress';
### 基本用法
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Progress } from 'uiw';
const { Line } = Progress;
const sty = {marginBottom:10}
-const Demo = () => (
-
-);
-ReactDOM.render(
, _mount_);
+
+export default function Demo() {
+ return (
+
+ );
+}
```
### 进度条大小设置
设置参数`strokeWidth`即可
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Progress } from 'uiw';
const { Line } = Progress;
const sty = {marginBottom:10}
-const Demo = () => (
-
-);
-ReactDOM.render(
, _mount_);
+
+export default function Demo() {
+ return (
+
+ );
+}
```
### 圆圈进度条
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Progress } from 'uiw';
const { Circle } = Progress;
const sty = {marginBottom:10}
-const Demo = () => (
-
-);
-ReactDOM.render(
, _mount_);
+
+export default function Demo() {
+ return (
+
+ );
+}
```
### 不同尺寸圆圈进度条
通过`strokeWidth`设置圆圈进度宽带，通过`width`（`type="circle"`有效）设置圆圈大小，
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Progress } from 'uiw';
let sty = {marginRight:15}
-const Demo = () => (
-
-);
-ReactDOM.render(
, _mount_);
+
+export default function Demo() {
+ return (
+
+ );
+}
```
### 动态展示
进度条动态展示更直观。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Progress } from 'uiw';
class Demo extends React.Component {
@@ -144,44 +146,41 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(
, _mount_);
+
+export default Demo;
```
## 自定义文字格式
`format` 属性指定格式。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Progress } from 'uiw';
const sty = {marginRight:10}
-class Demo extends React.Component {
- render() {
- return (
-
-
(
-
- {`${percent} %`}
- 已完成
-
- )}/>
- (
+
+export default function Demo() {
+ return (
+
+
(
{`${percent} %`}
- 已关闭
+ 已完成
)}/>
- `已完成`}/>
- `${percent}℃`}/>
-
- 已关闭
+
+ )}/>
+ `已完成`}/>
+ `${percent}℃`}/>
+
+
+ )
}
-ReactDOM.render(
, _mount_);
```
diff --git a/packages/react-progress/src/Circle.tsx b/packages/react-progress/src/Circle.tsx
index 5f2fe6450f..b33d66a296 100644
--- a/packages/react-progress/src/Circle.tsx
+++ b/packages/react-progress/src/Circle.tsx
@@ -7,7 +7,8 @@ import './style/circle.less';
export type Status = 'success' | 'active' | 'exception';
-export interface ProgressCircleProps
extends IProps, HTMLDivProps {
+type TagType = React.ComponentType | keyof JSX.IntrinsicElements;
+export interface ProgressCircleProps extends IProps, HTMLDivProps {
type?: IconProps['type'];
status?: Status;
showText?: boolean; // 是否显示进度条文字内容
@@ -17,8 +18,8 @@ export interface ProgressCircleProps extends IProps, HTMLDivProps {
format?: (percent: number) => React.ReactNode;
}
-export default class Circle extends React.Component> {
- public static defaultProps: ProgressCircleProps<{}> = {
+export default class Circle extends React.Component> {
+ public static defaultProps: ProgressCircleProps<'span'> = {
prefixCls: 'w-progress',
showText: true,
percent: 0, // 百分比（必填）
diff --git a/packages/react-radio/README.md b/packages/react-radio/README.md
index 1fdd5c41a0..b5619ccb4c 100644
--- a/packages/react-radio/README.md
+++ b/packages/react-radio/README.md
@@ -17,128 +17,125 @@ import { Radio, RadioButton, RadioGroup } from '@uiw/react-radio';
适用广泛的基础最简单的用法，展示各种状态下的样式。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Radio, RadioButton } from 'uiw';
-const Demo = () => (
-
- Radio
- 选中
- 禁用
- 选中并禁用
- 选中并禁用
- RadioButton
- RadioButton 选中
-
-);
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+ Radio
+ 选中
+ 禁用
+ 选中并禁用
+ 选中并禁用
+ RadioButton
+ RadioButton 选中
+
+ );
+}
```
### Form 中使用 Radio
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Form, Radio, RadioGroup, RadioButton, Row, Col, Button, Notify } from 'uiw';
-const Demo = () => (
-
-);
-
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+ );
+}
```
### 单选
适用广泛的基础最简单的用法。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Radio, RadioGroup, RadioButton } from 'uiw';
class Demo extends React.Component {
@@ -168,18 +165,16 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 单选组
设置单选初始值
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
-import { Radio, RadioGroup, Divider, Button } from 'uiw';
+import { Radio, RadioGroup, RadioButton, Divider, Button } from 'uiw';
class Demo extends React.Component {
constructor(props) {
@@ -224,7 +219,7 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
## Radio
diff --git a/packages/react-rate/README.md b/packages/react-rate/README.md
index 4fa3d1c1ca..2058a52b8a 100644
--- a/packages/react-rate/README.md
+++ b/packages/react-rate/README.md
@@ -17,105 +17,103 @@ import Rate from '@uiw/react-rate';
按钮样式的单选组合。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Rate, Divider, Icon } from 'uiw';
-const Demo = () => (
-
-
-
-
} value={2.5} />
-
-
-
-
} value={3} />
-
-
-
+
+
+
} value={2.5} />
+
+
+
+
} value={3} />
+
+
+
@@ -132,88 +130,82 @@ const Demo = () => {
)
}
-
-ReactDOM.render(, _mount_);
```
### 只读
按钮样式的单选组合。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Rate, Divider, Icon } from 'uiw';
-const Demo = () => (
-
-
-
-
-
-
} value={3.5} />
-
-
-
+
+
+
+
+
} value={3.5} />
+
+
+
-
} value={3.3} />
-
-
} value={4.3} />
-
+
} value={3.3} />
+
+
} value={4.3} />
+
- } value={3} />
-
-)
-
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+ } value={3} />
+
+ )
+}
```
## Rate
diff --git a/packages/react-search-select/README.md b/packages/react-search-select/README.md
index a683e94c42..35475b415d 100644
--- a/packages/react-search-select/README.md
+++ b/packages/react-search-select/README.md
@@ -15,12 +15,11 @@ import SearchSelect from '@uiw/react-search-select';
## 基础示例
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { SearchSelect,Row,Col } from 'uiw';
-const Demo = () => {
+export default function Demo() {
const option=[
{ label: 'a1', value: 1 },
{ label: 'a2', value: 2 },
@@ -67,19 +66,17 @@ const Demo = () => {
);
};
-ReactDOM.render(, _mount_);
```
## 尺寸
通过 size 属性设置选择器的尺寸，提供三个尺寸参数设置。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { SearchSelect,Row,Col } from 'uiw';
-const Demo = () => {
+export default function Demo() {
const option=[
{ label: '小尺寸', value: 1 },
{ label: '默认尺寸', value: 2 },
@@ -129,19 +126,17 @@ const Demo = () => {
);
};
-ReactDOM.render(, _mount_);
```
## 不同的value类型
通`labelInValue`参数控制value类型和onChange时间返回参数的类型，设置为`true`时，`value`和`onChange`回调返回的值类型从[..., value]变成[..., { label, value}]
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { SearchSelect,Row,Col } from 'uiw';
-const Demo = () => {
+export default function Demo() {
const option=[
{ label: 'a1', value: 1 },
{ label: 'a2', value: 2 },
@@ -153,7 +148,6 @@ const Demo = () => {
{ label: 'a8', value: 8 },
]
-
const [loading, setLoading] = React.useState(false);
const [value, setValue] = React.useState([1 ,7]);
const [labelValue, setLabelValue] = React.useState([{ label: 'a1', value: 1 }, { label: 'a7', value: 7 }]);
@@ -191,19 +185,17 @@ const Demo = () => {
);
};
-ReactDOM.render(, _mount_);
```
## 限制选项个数
限制最多只能选择两个选项，达到最大后如果继续选择，会替换最后一个
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { SearchSelect,Row,Col } from 'uiw';
-const Demo = () => {
+export default function Demo() {
const selectOption=[
{ label: 'a1', value: 1 },
{ label: 'a2', value: 2 },
@@ -249,19 +241,17 @@ const Demo = () => {
);
};
-ReactDOM.render(, _mount_);
```
## 显示最大数量
使用`maxTagCount`限制显示tag的数量，超过后使用省略tag显示
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { SearchSelect,Row,Col } from 'uiw';
-const Demo = () => {
+export default function Demo() {
const selectOption=[
{ label: 'a1', value: 1 },
{ label: 'a2', value: 2 },
@@ -313,19 +303,17 @@ const Demo = () => {
);
};
-ReactDOM.render(, _mount_);
```
## 启用搜索
将`showSearch`设置为`true`启用搜索功能，组件没有内置搜索功能，但`option`是监听变化的，可以通过配合`onSearch`实现
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { SearchSelect,Row,Col } from 'uiw';
-const Demo = () => {
+export default function Demo() {
const selectOption=[
{ label: 'a1', value: 1 },
{ label: 'a2', value: 2 },
@@ -386,19 +374,17 @@ const Demo = () => {
);
};
-ReactDOM.render(, _mount_);
```
### 在表单中使用
在 [``](#/components/form) 表单中应用 `` 组件。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Form, Row, Col, SearchSelect, Button, Notify } from 'uiw';
-const Demo = () => {
+export default function Demo() {
const selectOption =[
{ label: 'a1', value: 1 },
{ label: 'a2', value: 2 },
@@ -524,7 +510,6 @@ const Demo = () => {
-
-
- console.log('singe',searchValue)}
- onChange={onChangeSinge}
- value={valueSinge}
- options={data}
- placeholder="请选择选项"
- />
-
-
-
- console.log('multiple',searchValue)}
- onChange={onChange}
- value={value}
- options={data}
- placeholder="请选择选项"
- />
-
-
-
-
+ return (
+
+
+
+ console.log('singe',searchValue)}
+ onChange={onChangeSinge}
+ value={valueSinge}
+ options={data}
+ placeholder="请选择选项"
+ />
+
+
+
+ console.log('multiple',searchValue)}
+ onChange={onChange}
+ value={value}
+ options={data}
+ placeholder="请选择选项"
+ />
+
+
+
+
+
-
- )
+ );
}
-ReactDOM.render(, _mount_);
```
## 尺寸
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React, { useState, useEffect, useRef } from 'react';
-import { SearchTree } from 'uiw';
-
-const Demo = () => {
+import { SearchTree } from 'uiw';
-const data = [
+export default function Demo() {
+ const data = [
{ label: '小尺寸', key: 1 },
{ label: '默认尺寸', key: 2 },
{ label: '大尺寸', key: 3 },
@@ -155,18 +149,15 @@ const data = [
)
}
-
-ReactDOM.render(, _mount_);
```
## 自定义空选项
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React, { useState, useEffect, useRef } from 'react';
import { SearchTree } from 'uiw';
-const Demo = () => {
+export default function Demo() {
return(
<>
{
)
}
-
-ReactDOM.render(, _mount_);
```
## Form中使用
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React, { useState, useEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
import { Notify, Form, Button, SearchTree, Card, Row, Col,Select } from 'uiw';
-const Demo = () => {
-const form=useRef()
+export default function Demo() {
+ const form=useRef()
const data = [
{
label: '上海市',
@@ -333,7 +320,6 @@ const form=useRef()
);
}
-ReactDOM.render(, _mount_);
```
## Props
diff --git a/packages/react-select/README.md b/packages/react-select/README.md
index e16a0e0046..f1500923de 100644
--- a/packages/react-select/README.md
+++ b/packages/react-select/README.md
@@ -17,81 +17,15 @@ import Select from '@uiw/react-select';
适用广泛的基础单选 `value` 的值为当前被选中的 `Option` 的 `value` 属性值。自定义 `Select` 请查看 [``](#/components/dropdown) 组件实例。
-
-```jsx
-import ReactDOM from 'react-dom';
-import { Row, Col, Select } from 'uiw';
-
-const Demo = () => (
-
-
-
-
-
-);
-ReactDOM.render(, _mount_);
-```
-
-
-### 禁用选择器
-
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Row, Col, Select } from 'uiw';
-const Demo = () => (
-
-
-
-
-
-);
-ReactDOM.render(, _mount_);
-```
-
-
-### 尺寸
-
-通过 `size` 属性设置选择器的尺寸，提供三个尺寸参数设置。
-
-
-```jsx
-import ReactDOM from 'react-dom';
-import { Row, Col, Select, Button } from 'uiw';
-
-const rowSty = { marginBottom: 10 };
-const Demo = () => (
-
-
-
-
-
-
-
-
-
-
+export default function Demo() {
+ return (
+
-
-
+ );
+}
+```
+
+
+### 禁用选择器
+
+```jsx mdx:preview&bg=#fff
+import React from 'react';
+import { Row, Col, Select } from 'uiw';
+
+export default function Demo() {
+ return (
+
-
-
-);
-ReactDOM.render(, _mount_);
+ );
+}
+```
+
+
+### 尺寸
+
+通过 `size` 属性设置选择器的尺寸，提供三个尺寸参数设置。
+
+```jsx mdx:preview&bg=#fff
+import React from 'react';
+import { Row, Col, Select, Button } from 'uiw';
+
+const rowSty = { marginBottom: 10 };
+
+export default function Demo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
```
### 选项组
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Row, Col, Select } from 'uiw';
const Option = Select.Option;
const Group = Select.Group;
-const Demo = () => (
-
-
-
-
-
-);
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+
+
+
+
+ );
+}
```
### 在表单中使用
在 [``](#/components/form) 表单中应用 [``](#/components/select) 组件
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Form, Row, Col, Select, Button, Notify } from 'uiw';
-const Demo = () => (
-
+ )
+}
```
### HTML select
@@ -235,34 +236,34 @@ ReactDOM.render(, _mount_);
import 'uiw/lib/esm/select/style/index.less';
```
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Row, Col, Select } from 'uiw';
-const Demo = () => (
-
-
-
-
-
-
-
-
-);
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
```
## Select
diff --git a/packages/react-slider/README.md b/packages/react-slider/README.md
index fc69cbbac9..acceafb749 100644
--- a/packages/react-slider/README.md
+++ b/packages/react-slider/README.md
@@ -17,13 +17,11 @@ import Slider from '@uiw/react-slider';
按钮样式的单选组合。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Slider, Divider } from 'uiw';
-function Demo() {
+export default function Demo() {
const [value, setValue] = React.useState(20);
const [value2, setValue2] = React.useState(-5);
const [value3, setValue3] = React.useState([10, 50]);
@@ -67,86 +65,82 @@ function Demo() {
)
}
-
-ReactDOM.render(, _mount_);
```
### 在表单中使用
在 [``](#/components/form) 表单中应用 [``](#/components/slider) 组件，需要设置 `initialValue` 初始值。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Form, Row, Col, Slider, Button, Notify } from 'uiw';
-const Demo = () => (
-
-)
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+ )
+}
```
### 控制提示显示
通过设置 `tooltip` 的值，来控制提示的显示。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Slider, Divider } from 'uiw';
-function Demo() {
+export default function Demo() {
return (
设置 tooltip 值为 true，提示将始终显示。
@@ -160,17 +154,14 @@ function Demo() {
)
}
-ReactDOM.render(, _mount_);
```
### 刻度
通过 `step` 设置或返回每次拖动滑块控件时的递增量。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Slider, Divider} from 'uiw';
class Demo extends React.Component {
@@ -234,15 +225,13 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 标记刻度
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Slider, Divider} from 'uiw';
class Demo extends React.Component {
@@ -312,92 +301,82 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 禁用样式
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Slider, Divider} from 'uiw';
-class Demo extends React.Component {
- render() {
- return (
-
- )
- }
+export default function Demo() {
+ return (
+
+ )
}
-ReactDOM.render(, _mount_);
```
### 垂直方向
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Row, Col, Slider } from 'uiw';
-class Demo extends React.Component {
- render() {
- return (
-
-
- 30°C,
- }
- }}
- style={{ height: 260 }}
- renderMarks={(mark) => `${mark}°C`}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
+export default function Demo() {
+ return (
+
+
+ 30°C,
+ }
+ }}
+ style={{ height: 260 }}
+ renderMarks={(mark) => `${mark}°C`}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
}
-ReactDOM.render(, _mount_);
```
## Props
diff --git a/packages/react-steps/README.md b/packages/react-steps/README.md
index 19a304b337..ce1ab9b1e2 100644
--- a/packages/react-steps/README.md
+++ b/packages/react-steps/README.md
@@ -17,13 +17,11 @@ import Steps from '@uiw/react-steps';
简单的步骤条。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Steps } from 'uiw';
-function Demo() {
+export default function Demo() {
return (
@@ -33,21 +31,17 @@ function Demo() {
)
}
-
-ReactDOM.render(, _mount_);
```
### 没有详情介绍
简单的步骤条。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Steps } from 'uiw';
-function Demo() {
+export default function Demo() {
return (
@@ -57,20 +51,17 @@ function Demo() {
)
}
-ReactDOM.render(, _mount_);
```
### 带图标的步骤条
通过设置 `Steps.Step` 的 `icon` 属性，可以启用自定义图标。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Steps, Icon } from 'uiw';
-function Demo() {
+export default function Demo() {
return (
} title="注册" description="这里是步骤一的说明，可以很长很长哦。" />
@@ -79,21 +70,17 @@ function Demo() {
)
}
-
-ReactDOM.render(, _mount_);
```
### 步骤运行错误
使用 `Steps` 的 `status` 属性来指定当前步骤的状态。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Steps } from 'uiw';
-function Demo() {
+export default function Demo() {
return (
@@ -103,21 +90,17 @@ function Demo() {
)
}
-
-ReactDOM.render(, _mount_);
```
### 点状步骤条
包含步骤点的进度条。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Steps } from 'uiw';
-function Demo() {
+export default function Demo() {
return (
@@ -127,18 +110,14 @@ function Demo() {
)
}
-
-ReactDOM.render(, _mount_);
```
### 步骤切换
通常配合内容及按钮使用，表示一个流程的处理进度。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Steps, Button, Notify } from 'uiw';
const conStyle = { minHeight: 200, backgroundColor: '#fafafa',textAlign: 'center', borderRadius: 6, paddingTop: 80, marginTop: 15 }
@@ -155,7 +134,7 @@ const steps = [
}
]
-function Demo() {
+export default function Demo() {
const [current, setCurrent] = React.useState(0);
return (
@@ -179,21 +158,17 @@ function Demo() {
);
}
-
-ReactDOM.render(, _mount_);
```
### 竖直方向的步骤条
简单的竖直方向的步骤条。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
-import { Steps, Row, Col } from 'uiw';
+import { Steps, Row, Col, Icon } from 'uiw';
-function Demo() {
+export default function Demo() {
return (
@@ -215,8 +190,6 @@ function Demo() {
)
}
-
-ReactDOM.render(, _mount_);
```
## Props
diff --git a/packages/react-switch/README.md b/packages/react-switch/README.md
index b66ac30d6e..49dcdae38a 100644
--- a/packages/react-switch/README.md
+++ b/packages/react-switch/README.md
@@ -15,148 +15,144 @@ import Switch from '@uiw/react-switch';
### 基本用法
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Switch } from 'uiw';
-const Demo = () => (
-
-
-
- 电源
-
-);
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+
+
+ 电源
+
+ );
+}
```
### Form 中使用 Switch
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Form, Switch, Row, Col, Button, Notify } from 'uiw';
-const Demo = () => (
-
-);
-
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+ );
+}
```
### 设置文字
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Switch } from 'uiw';
-const Demo = () => (
-
- {
- console.log('e', e.target.checked);
- }}
- style={{ marginRight: 10 }}
- />
-
-);
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+ {
+ console.log('e', e.target.checked);
+ }}
+ style={{ marginRight: 10 }}
+ />
+
+ );
+}
```
-
### 禁用状态
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Switch } from 'uiw';
-const Demo = () => (
-
-
-
- 电源
-
-);
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+
+
+ 电源
+
+ );
+}
```
### 尺寸
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Switch } from 'uiw';
-const Demo = () => (
-
-
-
-
-
- 电源
-
-);
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+
+
+
+
+ 电源
+
+ );
+}
```
### 控制组件
通过 `checked` 属性改变 `Switch` 组件状态。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Switch, Button } from 'uiw';
class Demo extends React.Component {
@@ -187,7 +183,7 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
## Switch
diff --git a/packages/react-table/README.md b/packages/react-table/README.md
index bd2970fdab..854cf37616 100644
--- a/packages/react-table/README.md
+++ b/packages/react-table/README.md
@@ -15,9 +15,8 @@ import Table from '@uiw/react-table';
### 基本使用
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Table, Button } from 'uiw';
const columns = [
@@ -63,15 +62,14 @@ const Demo = () => (
);
-ReactDOM.render(, _mount_);
+export default Demo
```
### 表头分组
表头分组通过 `columns` 数组中对象的 `children` 来实现，以渲染分组表头。。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Table, Button } from 'uiw';
const columns = [
@@ -138,16 +136,15 @@ const Demo = () => (
);
-ReactDOM.render(, _mount_);
+export default Demo
```
### 表格行/列合并
表头只支持列合并，使用 `columns` 里的 `colSpan` 进行设置。表格支持行/列合并，使用 `render` 里的单元格属性 `colSpan` 或者 `rowSpan` 设值为 0 时，设置的表格不会渲染。
-
-
-```jsx
-import ReactDOM from 'react-dom';
+
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Table, Button } from 'uiw';
const columns = [
@@ -199,7 +196,7 @@ const Demo = () => (
);
-ReactDOM.render(, _mount_);
+export default Demo
```
@@ -207,9 +204,8 @@ ReactDOM.render(, _mount_);
添加表格边框线，页头和页脚的展现效果。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Table, Button } from 'uiw';
const columns = [
@@ -261,14 +257,13 @@ const Demo = () => (
);
-ReactDOM.render(, _mount_);
+export default Demo
```
### 点击单元格
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Table, Button, Notify } from 'uiw';
const columns = [
@@ -335,14 +330,13 @@ const Demo = () => (
/>
);
-ReactDOM.render(, _mount_);
+export default Demo
```
### 原始HTML
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Table, Button } from 'uiw';
const Demo = () => (
@@ -422,15 +416,13 @@ const Demo = () => (
);
-ReactDOM.render(, _mount_);
+export default Demo
```
### 选择和操作
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Table, Button, Checkbox, Pagination, Loader } from 'uiw';
class Demo extends React.Component {
@@ -538,14 +530,13 @@ class Demo extends React.Component {
);
}
}
-ReactDOM.render(, _mount_);
+export default Demo
```
### 自定义单元格省略提示
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Table, Button, Notify, Tooltip } from 'uiw';
const columns = [
@@ -623,14 +614,13 @@ const Demo = () => (
/>
);
-ReactDOM.render(, _mount_);
+export default Demo
```
### 无数据状态
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Table, Button, Empty } from 'uiw';
const columns = [
@@ -666,14 +656,13 @@ const Demo = () => (
/>
);
-ReactDOM.render(, _mount_);
+export default Demo
```
### 可展开
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Table, Button, Icon } from 'uiw';
const columns = [
@@ -722,7 +711,7 @@ const Demo = () => (
/>
);
-ReactDOM.render(, _mount_);
+export default Demo
```
### 树形数据展示
@@ -731,9 +720,7 @@ ReactDOM.render(, _mount_);
可以通过设置 indentSize 以控制每一层的缩进宽度
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
import React from 'react';
import { Table, Button, Icon } from 'uiw';
@@ -809,16 +796,15 @@ const Demo = () => {
)
};
-ReactDOM.render(, _mount_);
+export default Demo
```
### 表格列过宽导致 footer 滑动出表格底部
使用 scroll 属性给表格设置宽(x)或高(y)即可
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Table, Button } from 'uiw';
const columns = [
@@ -869,7 +855,7 @@ const Demo = () => (
/>
);
-ReactDOM.render(, _mount_);
+export default Demo
```
### 固定列
@@ -878,9 +864,8 @@ ReactDOM.render(, _mount_);
> ⚠️ 注意: 若并没有 scroll 滚动条，fixed 属性并不会有直观的效果
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Table, Button } from 'uiw';
const columns = [
@@ -927,17 +912,15 @@ const Demo = () => (
);
-ReactDOM.render(, _mount_);
+export default Demo
```
### 可编辑
利用 render 属性, 传递自定义组件实现
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Table, Button, Input, Select } from 'uiw';
const columns = (onChange) => [
@@ -1046,17 +1029,15 @@ const Demo = () => {
};
-ReactDOM.render(, _mount_);
+export default Demo
```
### 可编辑行
利用 Form 组件和 render 属性, 实现编辑行效果
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Table, Button, Input, Select, Form, Notify } from 'uiw';
const columns = (actived, setChange, fields) => {
@@ -1164,7 +1145,7 @@ const Demo = () => {
{({ fields }) => }
};
-ReactDOM.render(, _mount_);
+export default Demo
```
## Props
diff --git a/packages/react-tabs/README.md b/packages/react-tabs/README.md
index 7b5c1cfb5f..02d05742c5 100644
--- a/packages/react-tabs/README.md
+++ b/packages/react-tabs/README.md
@@ -17,10 +17,8 @@ import Tabs from '@uiw/react-tabs';
基础的、简洁的卡片式标签页。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Tabs } from 'uiw';
class Demo extends React.Component {
@@ -37,17 +35,15 @@ class Demo extends React.Component {
);
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 行样式
基础的、简洁的卡片式标签页。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Tabs,Button } from 'uiw';
class Demo extends React.Component {
@@ -79,17 +75,15 @@ class Demo extends React.Component {
);
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 卡片样式
另一种样式的页签，不提供对应的垂直样式。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Tabs } from 'uiw';
class Demo extends React.Component {
@@ -106,16 +100,14 @@ class Demo extends React.Component {
);
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 卡片样式
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Tabs, Divider } from 'uiw';
class Demo extends React.Component {
@@ -158,17 +150,15 @@ class Demo extends React.Component {
);
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 超出收缩
当pane过多,超出宽度度时,会将超出部分收缩到下拉选项
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Tabs } from 'uiw';
class Demo extends React.Component {
@@ -195,7 +185,7 @@ render() {
);
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
diff --git a/packages/react-tag/README.md b/packages/react-tag/README.md
index a6ca0b58db..e8f011884c 100644
--- a/packages/react-tag/README.md
+++ b/packages/react-tag/README.md
@@ -15,74 +15,73 @@ import Tag from '@uiw/react-tag';
### 基础用法
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
import { Tag, Divider } from 'uiw';
-const Demo = () => (
-
-
-
-
-
-
-
警告-黄色
-
提醒-橙色
-
危险-红色
-
默认颜色
-
-
成功-绿色
-
主要-蓝色
-
信息-青色
-
导航-藏青
-
-
警告-黄色
-
提醒-橙色
-
危险-红色
-
默认颜色
-
+
+
+
+
+
+
警告-黄色
+
提醒-橙色
+
危险-红色
+
默认颜色
+
+
成功-绿色
+
主要-蓝色
+
信息-青色
+
导航-藏青
+
+
警告-黄色
+
提醒-橙色
+
危险-红色
+
默认颜色
+
-
-
-
-
-
警告-黄色
-
提醒-橙色
-
危险-红色
-
默认颜色
-
-
成功-绿色
-
主要-蓝色
-
信息-青色
-
导航-藏青
-
警告-黄色
-
提醒-橙色
-
危险-红色
-
默认颜色
-
+
+
+
+
+
警告-黄色
+
提醒-橙色
+
危险-红色
+
默认颜色
+
+
成功-绿色
+
主要-蓝色
+
信息-青色
+
导航-藏青
+
警告-黄色
+
提醒-橙色
+
危险-红色
+
默认颜色
+
@@ -99,13 +98,12 @@ const Demo = () => (
信息-红色
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 控制关闭标签
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
import ReactDOM from 'react-dom';
import { Tag, Icon } from 'uiw';
@@ -144,13 +142,12 @@ class Demo extends React.Component {
);
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 标签组动态删除
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
import ReactDOM from 'react-dom';
import { Tag, Button, Icon } from 'uiw';
@@ -200,15 +197,14 @@ class Demo extends React.Component {
);
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 热门标签
选择你感兴趣的话题，下面实例类似 CheckBox 多选。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
import ReactDOM from 'react-dom';
import { Tag } from 'uiw';
@@ -258,13 +254,12 @@ class Demo extends React.Component {
);
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 选择器
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
import ReactDOM from 'react-dom';
import { Dropdown, Menu, Button, Icon, Input, Checkbox, Tag, Row, Col } from 'uiw';
@@ -391,12 +386,13 @@ const option = [
{ label: '黄冈市, 中国', value: 8, color: '#dc3545' },
];
-ReactDOM.render(
-
- { console.log('item', item); }} />
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+ { console.log('item', item); }} />
+
+ )
+}
```
## Tag
diff --git a/packages/react-textarea/README.md b/packages/react-textarea/README.md
index 31e71c9980..5cdfdd45e5 100644
--- a/packages/react-textarea/README.md
+++ b/packages/react-textarea/README.md
@@ -15,9 +15,8 @@ import Textarea from '@uiw/react-textarea';
### 基础用法
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Textarea } from 'uiw';
const Demo = () => (
@@ -25,17 +24,15 @@ const Demo = () => (
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 在表单中使用
在 [``](#/components/form) 表单中应用 [``](#/components/textarea) 组件
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Form, Row, Col, Textarea, Button, Notify } from 'uiw';
const Demo = () => (
@@ -93,15 +90,14 @@ const Demo = () => (
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 禁用
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Textarea } from 'uiw';
const Demo = () => (
@@ -109,14 +105,13 @@ const Demo = () => (
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
### HTML Textarea
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Textarea } from 'uiw';
const Demo = () => (
@@ -124,7 +119,7 @@ const Demo = () => (
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
## Props
diff --git a/packages/react-time-picker/README.md b/packages/react-time-picker/README.md
index cd86e0e50f..1273706844 100644
--- a/packages/react-time-picker/README.md
+++ b/packages/react-time-picker/README.md
@@ -15,9 +15,8 @@ import TimePicker from '@uiw/react-time-picker';
## 基础用法
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { TimePicker, Row, Col } from 'uiw';
const Demo = () => (
@@ -37,14 +36,13 @@ const Demo = () => (
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
## 设置初始值
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { TimePicker, Row, Col } from 'uiw';
const Demo = () => {
@@ -63,14 +61,13 @@ const Demo = () => {
)
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
## 设置按钮大小
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { TimePicker, Row, Col } from 'uiw';
const Demo = () => {
@@ -89,16 +86,15 @@ const Demo = () => {
)
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
## 表单中应用
在表单返回的数据，并没有将 `format` 格式化后的数据返回给你，而是返回的一个 `Date`，你可以通过 [`formatter`](#/components/formatter) 重新格式化。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { TimePicker, Notify, Row, Col, Form, Button } from 'uiw';
const Demo = () => (
@@ -139,16 +135,15 @@ const Demo = () => (
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
## 禁用
可以使用 `disabledHours` `disabledMinutes` `disabledSeconds` 禁用部分时间选择。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { TimePicker, Row, Col } from 'uiw';
const Demo = () => (
@@ -173,16 +168,15 @@ const Demo = () => (
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
## 不显示禁用
可以使用 `hideDisabled` 将禁用的部分时间隐藏。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { TimePicker, Row, Col } from 'uiw';
const Demo = () => (
@@ -205,16 +199,15 @@ const Demo = () => (
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
## 间隔时间
可以使用 `hideDisabled` 将禁用的部分时间隐藏。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { TimePicker, Row, Col } from 'uiw';
const Demo = () => (
@@ -236,7 +229,7 @@ const Demo = () => (
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
## Props
diff --git a/packages/react-tooltip/README.md b/packages/react-tooltip/README.md
index 1ee313c829..32d8effd2a 100644
--- a/packages/react-tooltip/README.md
+++ b/packages/react-tooltip/README.md
@@ -17,9 +17,8 @@ import Tooltip from '@uiw/react-tooltip';
最简单的用法。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Tooltip, Button } from 'uiw';
const Demo = () => (
@@ -41,16 +40,15 @@ const Demo = () => (
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 位置
位置有 `12` 个方向，根据 `placement` 参数来设置。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Tooltip, Button, Divider } from 'uiw';
const btnStl = {position: 'relative', width: 70 }
@@ -122,40 +120,36 @@ const Demo = () => (
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 事件
文字提示组件 ``，通过设置属性 `trigger` 可以文字提示操作方式。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Tooltip, Button } from 'uiw';
const Demo = () => (
-
-
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 文字提示框不显示箭头
通过设置属性 `visibleArrow` 可以文字提示框不显示箭头。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Tooltip, Button } from 'uiw';
const Demo = () => (
@@ -170,15 +164,13 @@ const Demo = () => (
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 受控组件
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Tooltip, Switch, Divider } from 'uiw';
class Demo extends React.Component {
@@ -211,7 +203,7 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
diff --git a/packages/react-transfer/README.md b/packages/react-transfer/README.md
index 6c2cdeb6ef..7df27be28a 100644
--- a/packages/react-transfer/README.md
+++ b/packages/react-transfer/README.md
@@ -11,20 +11,17 @@ Transfer 穿梭框
最简单的用法。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import { Transfer } from 'uiw';
+import { Transfer, Row } from 'uiw';
function Demo() {
-
const options = [
{ label: '武汉市', key: 1 },
{ label: '汉南区1', key: 5 },
{ label: '汉南区2', key: 6 },
{ label: '汉南区3', key: 7 },
]
-
const [value,valueSet] = React.useState([{ label: '武汉市', key: 1 }])
return (
@@ -40,17 +37,16 @@ function Demo() {
);
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
## 树形节点
使用 [`Tree`](#/components/tree) 结构作为选项节点
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import { Transfer } from 'uiw';
+import { Transfer, Row } from 'uiw';
function Demo() {
const options = [
@@ -88,17 +84,16 @@ const options = [
);
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
## 全部选择
将`selectedAll`设置为`true`,启用全部勾选功能
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import { Transfer } from 'uiw';
+import { Transfer, Row } from 'uiw';
function Demo() {
@@ -138,17 +133,16 @@ function Demo() {
);
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
## 搜索选项
将`showSearch`设置为`true`，启用选项搜索框
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import { Transfer } from 'uiw';
+import { Transfer, Row } from 'uiw';
function Demo() {
const options = [
@@ -192,15 +186,14 @@ const options = [
);
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
## Form中使用
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import { Transfer, Form } from 'uiw';
+import { Transfer, Form, Row, Col, Button } from 'uiw';
function Demo() {
@@ -288,7 +281,7 @@ function Demo() {
);
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
## Props
diff --git a/packages/react-tree-checked/README.md b/packages/react-tree-checked/README.md
index 90729c051d..49aa169d2d 100644
--- a/packages/react-tree-checked/README.md
+++ b/packages/react-tree-checked/README.md
@@ -15,9 +15,8 @@ import TreeChecked from '@uiw/react-tree-checked';
### 基础实例
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { TreeChecked, Card, Row, Col } from 'uiw';
const data = [
@@ -106,15 +105,13 @@ const Demo = () => (
}}
/>
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 表单使用
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React, { useState, useRef } from "react";
-import ReactDOM from 'react-dom';
import { Form, Input, Row, Col, TreeChecked, Slider, Button, Notify } from 'uiw';
const data = [
@@ -219,7 +216,7 @@ function Demo() {
)
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
## Props
diff --git a/packages/react-tree/README.md b/packages/react-tree/README.md
index 49b8300de0..96a1b59b19 100644
--- a/packages/react-tree/README.md
+++ b/packages/react-tree/README.md
@@ -15,9 +15,8 @@ import Tree from '@uiw/react-tree';
### 基础用法
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Tree, Card, Row, Col, } from 'uiw';
const data = [
@@ -140,14 +139,13 @@ const Demo = () => (
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 自定义图标
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Tree, Card, Row, Col, Icon } from 'uiw';
const data = [
@@ -281,17 +279,16 @@ const Demo = () => (
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 自定义选中效果
通过设置 `checkStrictly` 父节点受子节点控制，设置 `multiple` 为多选，设置 `isSelected` 取消选中效果，也可以使用 [`TreeChecked`](#/components/tree-checked) 组件。
-
-```jsx
-import ReactDOM from 'react-dom';
-import { Tree, Card, Row, Col } from 'uiw';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
+import { Tree, Card, Row, Col, Icon } from 'uiw';
const data = [
{
@@ -396,14 +393,13 @@ const Demo = () => (
/>
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 禁用选项
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Tree, Card, Row, Col, Icon } from 'uiw';
const data = [
@@ -523,16 +519,15 @@ const Demo = () => (
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 连接线
带连接线的树，通过设置 `showLine`。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Tree, Card, Row, Col } from 'uiw';
const data = [
@@ -653,14 +648,13 @@ const Demo = () => (
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 默认展开树
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Tree, Card, Row, Col } from 'uiw';
const data = [
@@ -774,15 +768,14 @@ const Demo = () => (
)
-ReactDOM.render(, _mount_);
+export default Demo;
```
### Form中使用
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Tree, Row, Col, Form, Button } from 'uiw';
const data = [
@@ -905,7 +898,7 @@ const Demo = () => {
)
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
diff --git a/packages/uiw/package.json b/packages/uiw/package.json
index 41ed357973..c72addca36 100644
--- a/packages/uiw/package.json
+++ b/packages/uiw/package.json
@@ -105,7 +105,7 @@
"@uiw/react-search-tree": "^4.21.18",
"@uiw/react-select": "^4.21.18",
"@uiw/react-slider": "^4.21.18",
- "@uiw/react-split": "~5.8.5",
+ "@uiw/react-split": "~5.8.10",
"@uiw/react-steps": "^4.21.18",
"@uiw/react-switch": "^4.21.18",
"@uiw/react-table": "^4.21.18",
diff --git a/website/.kktrc.ts b/website/.kktrc.ts
index d138e1f375..1e5853086e 100755
--- a/website/.kktrc.ts
+++ b/website/.kktrc.ts
@@ -1,17 +1,13 @@
import { Configuration } from 'webpack';
import { LoaderConfOptions } from 'kkt';
-import path from 'path';
import lessModules from '@kkt/less-modules';
-import rawModules from '@kkt/raw-modules';
-import scopePluginOptions from '@kkt/scope-plugin-options';
+import { mdCodeModulesLoader } from 'markdown-react-code-preview-loader';
+import { disableScopePlugin } from '@kkt/scope-plugin-options';
export default (conf: Configuration, env: 'development' | 'production', options: LoaderConfOptions) => {
conf = lessModules(conf, env, options);
- conf = rawModules(conf, env, { ...options });
- conf = scopePluginOptions(conf, env, {
- ...options,
- allowedFiles: [path.resolve(process.cwd(), 'README.md')],
- });
+ conf = mdCodeModulesLoader(conf);
+ conf = disableScopePlugin(conf);
/** https://github.com/uiwjs/react-code-preview/issues/94 */
conf.module!.exprContextCritical = false;
diff --git a/website/package.json b/website/package.json
index cf67370407..a90df1e1ff 100644
--- a/website/package.json
+++ b/website/package.json
@@ -35,20 +35,22 @@
"@uiw/formatter": "~1.3.2",
"@uiw/react-back-to-top": "^1.2.0",
"@uiw/react-code-preview": "~4.0.5",
- "@uiw/react-markdown-preview": "~3.5.0",
+ "@uiw/react-markdown-preview": "~4.1.0",
"@uiw/reset.css": "~1.0.5",
+ "markdown-react-code-preview-loader": "^2.1.2",
"react": ">=16.9.0",
+ "react-code-preview-layout": "^2.0.6",
"react-dom": ">=16.9.0",
"react-router-dom": "~6.2.2",
"uiw": "^4.21.18"
},
"devDependencies": {
- "@kkt/less-modules": "~7.1.1",
- "@kkt/raw-modules": "~7.1.1",
- "@kkt/scope-plugin-options": "~7.1.1",
+ "@kkt/less-modules": "~7.2.1",
+ "@kkt/raw-modules": "~7.2.1",
+ "@kkt/scope-plugin-options": "~7.2.1",
"@types/react": "~18.0.0",
"@types/react-dom": "~18.0.0",
- "kkt": "~7.1.5",
+ "kkt": "~7.2.1",
"react-test-renderer": "~18.2.0"
},
"author": "kenny wang ",
diff --git a/website/src/components/Markdown/Footer.tsx b/website/src/components/Markdown/Footer.tsx
index 93ccb8c309..305912da5f 100644
--- a/website/src/components/Markdown/Footer.tsx
+++ b/website/src/components/Markdown/Footer.tsx
@@ -1,5 +1,5 @@
-import React, { Fragment } from 'react';
import { Divider } from 'uiw';
+import styles from './index.module.less';
export type FooterProps = {
path?: string;
@@ -9,7 +9,7 @@ export default function (props: FooterProps = {}) {
const { path } = props;
const url = /^http/.test(path || '') ? path : `https://github.com/uiwjs/uiw/blob/master/${path}`;
return (
-
+
);
}
diff --git a/website/src/components/Markdown/Markdown.tsx b/website/src/components/Markdown/Markdown.tsx
new file mode 100644
index 0000000000..19f013b9b1
--- /dev/null
+++ b/website/src/components/Markdown/Markdown.tsx
@@ -0,0 +1,78 @@
+import { Fragment, useEffect, useRef } from 'react';
+import CodeLayout from 'react-code-preview-layout';
+import { getMetaId, isMeta, getURLParameters, CodeBlockData } from 'markdown-react-code-preview-loader';
+import MarkdownPreview from '@uiw/react-markdown-preview';
+import { CodeProps } from 'react-markdown/lib/ast-to-react';
+import Footer from './Footer';
+
+/**
+ *
+ * ```js
+ * ```jsx mdx:preview&bg=#fff
+ * ```
+ */
+const CodePreview = ({ inline, node, components, data, ...props }: CodeProps & CodeBlockData) => {
+ const $dom = useRef(null);
+ const { 'data-meta': meta, ...rest } = props as any;
+
+ useEffect(() => {
+ if ($dom.current) {
+ const parentElement = $dom.current.parentElement;
+ if (parentElement && parentElement.parentElement) {
+ parentElement.parentElement.replaceChild($dom.current, parentElement);
+ }
+ }
+ }, [$dom]);
+
+ if (inline || !isMeta(meta)) {
+ return
-
{
- const { noPreview, bordered, noScroll, bgWhite, noCode, codePen, codeSandbox } = props as any;
- if (inline) {
- return
-
-
-