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 (
-
,
- _mount_
-);
+ )
+}
```
## 其它类型
支持三种类型:Icon 以及字符,其中 Icon 和字符型可以自定义图标颜色及背景色。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Avatar, Icon } from 'uiw';
-ReactDOM.render(
- ,
- _mount_
-);
+export default function Demo() {
+ return (
+
+ )
+}
```
## 图片支持
在组件上使用`onError`事件,处理显示错误的图片。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Avatar, Icon } from 'uiw';
const App = () => {
@@ -96,27 +95,27 @@ const App = () => {
)
}
-ReactDOM.render(, _mount_);
+export default App;
```
## 带徽标的头像
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Avatar, Badge } from 'uiw';
-ReactDOM.render(
- ,
- _mount_
-);
+export default function Demo() {
+ return (
+
+ )
+}
```
## Props
diff --git a/packages/react-back-top/README.md b/packages/react-back-top/README.md
index f7145e9130..190457a57c 100644
--- a/packages/react-back-top/README.md
+++ b/packages/react-back-top/README.md
@@ -15,68 +15,68 @@ import BackTop from '@uiw/react-back-top';
## 基本用法
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { BackTop } from 'uiw';
-ReactDOM.render(
-
-
滚动滚动条,【快看右下角】,显示返回顶部按钮。
-
Top }
- />
- ,
- _mount_
-);
+export default function Demo() {
+ return (
+
+
滚动滚动条,【快看右下角】,显示返回顶部按钮。
+
Top }
+ />
+
+ )
+}
```
## 函数子组件
点击按钮滚动到顶部
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { BackTop, Button } from 'uiw';
-ReactDOM.render(
-
- {({ percent, scrollToTop }) => (
-
- )}
- ,
- _mount_
-);
+export default function Demo() {
+ return (
+
+ {({ percent, scrollToTop }) => (
+
+ )}
+
+ )
+}
```
## 组件子节点
点击按钮滚动到顶部
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { BackTop, Button } from 'uiw';
-ReactDOM.render(
-
-
- ,
- _mount_
-);
+export default function Demo() {
+ return (
+
+
+
+ )
+}
```
## Params
diff --git a/packages/react-badge/README.md b/packages/react-badge/README.md
index c4df521bc4..71eb485328 100644
--- a/packages/react-badge/README.md
+++ b/packages/react-badge/README.md
@@ -15,162 +15,163 @@ import Badge from '@uiw/react-badge';
### 基础用法
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Badge, Row, Col, Avatar, Divider } from 'uiw';
-ReactDOM.render(
-
+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';
-import { Badge, Row, Col, Avatar, Divider } from 'uiw';
-
-const styl={ marginRight: 20, display: 'inline-block' }
-
-ReactDOM.render(
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
,
- _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(
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
添加图标
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
添加图标
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
```
## Props
diff --git a/packages/react-button/README.md b/packages/react-button/README.md
index bf88102925..57dad338b5 100644
--- a/packages/react-button/README.md
+++ b/packages/react-button/README.md
@@ -16,109 +16,108 @@ import ButtonGroup from '@uiw/react-button-group';
### 基本用法
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Button, Divider, Icon } from 'uiw';
-ReactDOM.render(
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
,
- _mount_
-);
-```
-
-### 按钮组
-
-
-```jsx
-import ReactDOM from 'react-dom';
-import { Button, Divider, ButtonGroup } from 'uiw';
-
-ReactDOM.render(
-
-
+export default function Demo() {
+ return(
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
添加图标
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
,
- _mount_
-);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+### 按钮组
+
+```jsx mdx:preview
+import React from 'react';
+import { Button, Divider, ButtonGroup } from 'uiw';
+
+export default function Demo() {
+ return(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
添加图标
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
```
### 图标按钮
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Button, Icon, Divider } from 'uiw';
const chat = ;
@@ -126,216 +125,216 @@ const open = ;
const closed = ;
-ReactDOM.render(
-
-
-
-
-
-
-
-
-
-
GitHub
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
+
+
+
+
+
+
+
+
GitHub
+
+
+
+
+ );
+}
```
### 按钮加载状态
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Button, Icon, Divider } from 'uiw';
-ReactDOM.render(
-
-
-
-
-
-
-
-
-
-
Size
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
+
+
+
+
+
+
+
+
Size
+
+
+
+
+ );
+}
```
### 禁用按钮组
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { Button, ButtonGroup, Divider } from 'uiw';
-ReactDOM.render(
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
添加图标
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+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(
-
-
-
![example](https://avatars1.githubusercontent.com/u/1680273?v=4)
-
-
- ,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
+
![example](https://avatars1.githubusercontent.com/u/1680273?v=4)
+
+
+
+ )
+}
```
## 添加页脚
-
-```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(
-
-
-
![example](https://avatars1.githubusercontent.com/u/1680273?v=4)
-
-
- ,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
+
![example](https://avatars1.githubusercontent.com/u/1680273?v=4)
+
+
+
+ )
+}
```
## 激活
设置属性 `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(
-
-
-
![example](https://avatars1.githubusercontent.com/u/1680273?v=4)
-
-
- ,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
+
![example](https://avatars1.githubusercontent.com/u/1680273?v=4)
+
+
+
+ );
+}
```
## 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 = [
);
}
-ReactDOM.render(, _mount_);
+export default Demo
```
## Props
diff --git a/packages/react-checkbox/README.md b/packages/react-checkbox/README.md
index 4843c67cb0..bc00f696ad 100644
--- a/packages/react-checkbox/README.md
+++ b/packages/react-checkbox/README.md
@@ -17,28 +17,27 @@ import Checkbox from '@uiw/react-checkbox';
单独使用可以表示两种状态之间的切换,半选中只是样式上的表现。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Checkbox } from 'uiw';
-ReactDOM.render(
-
- {
- 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 = () => (
)
-ReactDOM.render(, _mount_);
+
+export default Demo;
```
### 禁用样式
通过设置 `disabled` 属性来禁用多选框。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Checkbox } from 'uiw';
-ReactDOM.render(
-
- 未选中禁用
- 选中禁用
- 半选中禁用
-
,
- _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片挖骨取弹头。
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
console.log('key::1:', key)}>
+
+ 曾经有一份真诚的爱情放在我面前,我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此。
+ 如果上天能够给我一个再来一次的机会,我会对那个女孩子说三个字:我爱你。
+ 如果非要在这份爱上加上一个期限,我希望是……
+ 一万年
+
+
+ 曾经痛苦,才知道真正的痛苦;曾经执著,才能放下执著;
+ 曾经牵挂,才能了无牵挂。
+
+
+ 古有关云长全神贯注下象棋刮骨疗毒,今有我零零漆聚精会神看A片挖骨取弹头。
+
+
+
+ );
+}
```
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Collapse } from 'uiw';
-ReactDOM.render(
-
-
console.log('key::1:', key)}>
-
- 曾经有一份真诚的爱情放在我面前,我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此。
- 如果上天能够给我一个再来一次的机会,我会对那个女孩子说三个字:我爱你。
- 如果非要在这份爱上加上一个期限,我希望是……
- 一万年
-
-
- 曾经痛苦,才知道真正的痛苦;曾经执著,才能放下执著;
- 曾经牵挂,才能了无牵挂。
-
-
- 古有关云长全神贯注下象棋刮骨疗毒,今有我零零漆聚精会神看A片挖骨取弹头。
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
console.log('key::1:', key)}>
+
+ 曾经有一份真诚的爱情放在我面前,我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此。
+ 如果上天能够给我一个再来一次的机会,我会对那个女孩子说三个字:我爱你。
+ 如果非要在这份爱上加上一个期限,我希望是……
+ 一万年
+
+
+ 曾经痛苦,才知道真正的痛苦;曾经执著,才能放下执著;
+ 曾经牵挂,才能了无牵挂。
+
+
+ 古有关云长全神贯注下象棋刮骨疗毒,今有我零零漆聚精会神看A片挖骨取弹头。
+
+
+
+ );
+}
```
## 手风琴折叠面板
手风琴,每次只打开一个tab。默认打开第一个。`Panel` 的 `key` 属性并非必须。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Collapse, Button } from 'uiw';
class Demo extends React.Component {
@@ -126,49 +125,48 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
## 简洁风格无边框
通过设置`bordered={true}`没有边框的简洁样式。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Collapse } from 'uiw';
const Panel = Collapse.Panel;
-ReactDOM.render(
-
-
console.log('key::3:', key)}>
-
- 曾经有一份真诚的爱情放在我面前,我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此。
- 如果上天能够给我一个再来一次的机会,我会对那个女孩子说三个字:我爱你。
- 如果非要在这份爱上加上一个期限,我希望是……
- 一万年
-
-
- 曾经痛苦,才知道真正的痛苦;曾经执著,才能放下执著;
- 曾经牵挂,才能了无牵挂。
-
-
- 古有关云长全神贯注下象棋刮骨疗毒,今有我零零漆聚精会神看A片挖骨取弹头。
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
console.log('key::3:', key)}>
+
+ 曾经有一份真诚的爱情放在我面前,我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此。
+ 如果上天能够给我一个再来一次的机会,我会对那个女孩子说三个字:我爱你。
+ 如果非要在这份爱上加上一个期限,我希望是……
+ 一万年
+
+
+ 曾经痛苦,才知道真正的痛苦;曾经执著,才能放下执著;
+ 曾经牵挂,才能了无牵挂。
+
+
+ 古有关云长全神贯注下象棋刮骨疗毒,今有我零零漆聚精会神看A片挖骨取弹头。
+
+
+
+ );
+}
```
## 自定义面板
自定义各个面板的背景色、圆角、边距和图标。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Collapse } from 'uiw';
const customPanelStyle = {
@@ -181,88 +179,89 @@ const customPanelStyle = {
const Panel = Collapse.Panel;
-ReactDOM.render(
-
-
console.log('key::4:', key)}>
-
- 曾经有一份真诚的爱情放在我面前,我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此。
- 如果上天能够给我一个再来一次的机会,我会对那个女孩子说三个字:我爱你。
- 如果非要在这份爱上加上一个期限,我希望是……
- 一万年
-
-
- 曾经痛苦,才知道真正的痛苦;曾经执著,才能放下执著;
- 曾经牵挂,才能了无牵挂。
-
-
- 古有关云长全神贯注下象棋刮骨疗毒,今有我零零漆聚精会神看A片挖骨取弹头。
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
console.log('key::4:', key)}>
+
+ 曾经有一份真诚的爱情放在我面前,我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此。
+ 如果上天能够给我一个再来一次的机会,我会对那个女孩子说三个字:我爱你。
+ 如果非要在这份爱上加上一个期限,我希望是……
+ 一万年
+
+
+ 曾经痛苦,才知道真正的痛苦;曾经执著,才能放下执著;
+ 曾经牵挂,才能了无牵挂。
+
+
+ 古有关云长全神贯注下象棋刮骨疗毒,今有我零零漆聚精会神看A片挖骨取弹头。
+
+
+
+ );
+}
```
## 自定义面板标题
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Collapse, Icon } from 'uiw';
const Panel = Collapse.Panel;
-ReactDOM.render(
-
-
console.log('key::5:', key)}>
- 大话西游 } key="1">
- 曾经有一份真诚的爱情放在我面前,我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此。
- 如果上天能够给我一个再来一次的机会,我会对那个女孩子说三个字:我爱你。
- 如果非要在这份爱上加上一个期限,我希望是……
- 一万年
-
- 西游·降魔篇 } key="2">
- 曾经痛苦,才知道真正的痛苦;曾经执著,才能放下执著;
- 曾经牵挂,才能了无牵挂。
-
-
- 古有关云长全神贯注下象棋刮骨疗毒,今有我零零漆聚精会神看A片挖骨取弹头。
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
console.log('key::5:', key)}>
+ 大话西游 } key="1">
+ 曾经有一份真诚的爱情放在我面前,我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此。
+ 如果上天能够给我一个再来一次的机会,我会对那个女孩子说三个字:我爱你。
+ 如果非要在这份爱上加上一个期限,我希望是……
+ 一万年
+
+ 西游·降魔篇 } key="2">
+ 曾经痛苦,才知道真正的痛苦;曾经执著,才能放下执著;
+ 曾经牵挂,才能了无牵挂。
+
+
+ 古有关云长全神贯注下象棋刮骨疗毒,今有我零零漆聚精会神看A片挖骨取弹头。
+
+
+
+ );
+}
```
## 指定折叠图标
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Collapse, Icon } from 'uiw';
const Panel = Collapse.Panel;
-ReactDOM.render(
-
-
console.log('key::6:', key)}>
- 大话西游 } key="1">
- 曾经有一份真诚的爱情放在我面前,我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此。
- 如果上天能够给我一个再来一次的机会,我会对那个女孩子说三个字:我爱你。
- 如果非要在这份爱上加上一个期限,我希望是……
- 一万年
-
- } header={西游·降魔篇 } key="2">
- 曾经痛苦,才知道真正的痛苦;曾经执著,才能放下执著;
- 曾经牵挂,才能了无牵挂。
-
- 折叠-} header="国产零零漆" key="3">
- 古有关云长全神贯注下象棋刮骨疗毒,今有我零零漆聚精会神看A片挖骨取弹头。
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
console.log('key::6:', key)}>
+ 大话西游 } key="1">
+ 曾经有一份真诚的爱情放在我面前,我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此。
+ 如果上天能够给我一个再来一次的机会,我会对那个女孩子说三个字:我爱你。
+ 如果非要在这份爱上加上一个期限,我希望是……
+ 一万年
+
+ } header={西游·降魔篇 } key="2">
+ 曾经痛苦,才知道真正的痛苦;曾经执著,才能放下执著;
+ 曾经牵挂,才能了无牵挂。
+
+ 折叠-} header="国产零零漆" key="3">
+ 古有关云长全神贯注下象棋刮骨疗毒,今有我零零漆聚精会神看A片挖骨取弹头。
+
+
+
+ );
+}
```
## Props
diff --git a/packages/react-copy-to-clipboard/README.md b/packages/react-copy-to-clipboard/README.md
index 1d1b17077e..7ff3be4810 100644
--- a/packages/react-copy-to-clipboard/README.md
+++ b/packages/react-copy-to-clipboard/README.md
@@ -15,10 +15,8 @@ import CopyToClipboard from '@uiw/react-copy-to-clipboard';
### 基础实例
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { CopyToClipboard } from 'uiw';
class Demo extends React.Component {
@@ -48,15 +46,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 { CopyToClipboard, Input, Button } from 'uiw';
class Demo extends React.Component {
@@ -104,7 +100,7 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
## CopyToClipboard
diff --git a/packages/react-date-input/README.md b/packages/react-date-input/README.md
index 62f4557f10..25259a5717 100644
--- a/packages/react-date-input/README.md
+++ b/packages/react-date-input/README.md
@@ -16,14 +16,11 @@ import DateInput,{ DateInputRange } from '@uiw/react-date-input';
## 基本使用
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { DateInput, DateInputRange, Row, Col } from 'uiw';
-function Demo () {
-
+export default function Demo () {
const [dataRange,dataRangeSet] =React.useState(['2022/02/25 15:06:24','2022/02/27 14:47:32'])
function onChange(selectedDate,dataRange) {
@@ -60,20 +57,17 @@ function Demo () {
)
}
-ReactDOM.render(, _mount_);
```
## 在表单中使用
在 [``](#/components/form) 表单中应用 [``](#/components/date-input) 组件。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { DateInput,DateInputRange, Notify, Button, Form, Row, Col } from 'uiw';
-function Demo(){
+export default function Demo() {
const form = React.useRef(null)
const resetDateRange = () => {
@@ -142,16 +136,12 @@ function Demo(){
)
}
-
-ReactDOM.render(, _mount_);
```
## 日期格式
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { DateInput } from 'uiw';
class Demo extends React.Component {
@@ -170,15 +160,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 { DateInput } from 'uiw';
class Demo extends React.Component {
@@ -197,15 +185,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 { DateInput } from 'uiw';
class Demo extends React.Component {
@@ -225,7 +212,8 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+
+export default Demo;
```
## Props
diff --git a/packages/react-date-picker/README.md b/packages/react-date-picker/README.md
index ddedd86b5f..f64cd8e601 100644
--- a/packages/react-date-picker/README.md
+++ b/packages/react-date-picker/README.md
@@ -15,13 +15,11 @@ import DatePicker from '@uiw/react-date-picker';
### 基础用法
-
-```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(new Date('2019-02-26 02:00:00'));
return (
@@ -48,19 +46,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 (
@@ -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片挖骨取弹头。
-
大话西游
-
曾经有一份真诚的爱情放在我面前,我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此。 如果上天能够给我一个再来一次的机会,我会对那个女孩子说三个字:我爱你。 如果非要在这份爱上加上一个期限,我希望是…… 一万年
-
-
曾经痛苦,才知道真正的痛苦;曾经执著,才能放下执著;曾经牵挂,才能了无牵挂。
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+
周星驰: 香港演员、导演。祖籍浙江宁波,1962年6月22日生于香港,他是香港最为重要的喜剧片演员与编导之一。中学毕业以后考入香港无线电视台艺员训练班的夜间部。结业后成为无线艺人,最初曾在《香城浪子》《射雕英雄传》等剧集中担任临时演员。
+
+
古有关云长全神贯注下象棋刮骨疗毒,今有我零零漆聚精会神看A片挖骨取弹头。
+
大话西游
+
曾经有一份真诚的爱情放在我面前,我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此。 如果上天能够给我一个再来一次的机会,我会对那个女孩子说三个字:我爱你。 如果非要在这份爱上加上一个期限,我希望是…… 一万年
+
+
曾经痛苦,才知道真正的痛苦;曾经执著,才能放下执著;曾经牵挂,才能了无牵挂。
+
+ );
+}
```
### 垂直分割线
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Divider } from 'uiw';
-ReactDOM.render(
- ,
- _mount_
-);
+export default function Demo() {
+ return (
+
+ );
+}
```
### 标题对齐位置
-
-```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片挖骨取弹头。
-
大话西游
-
曾经有一份真诚的爱情放在我面前,我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此。
-
大话西游
-
曾经痛苦,才知道真正的痛苦;曾经执著,才能放下执著;曾经牵挂,才能了无牵挂。
-
,
- _mount_
-);
+export default function Demo() {
+ return(
+
+
+
周星驰: 香港演员、导演。祖籍浙江宁波,1962年6月22日生于香港,他是香港最为重要的喜剧片演员与编导之一。中学毕业以后考入香港无线电视台艺员训练班的夜间部。结业后成为无线艺人,最初曾在《香城浪子》《射雕英雄传》等剧集中担任临时演员。
+
大话西游
+
古有关云长全神贯注下象棋刮骨疗毒,今有我零零漆聚精会神看A片挖骨取弹头。
+
大话西游
+
曾经有一份真诚的爱情放在我面前,我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此。
+
大话西游
+
曾经痛苦,才知道真正的痛苦;曾经执著,才能放下执著;曾经牵挂,才能了无牵挂。
+
+ );
+}
```
## API
diff --git a/packages/react-drawer/README.md b/packages/react-drawer/README.md
index c0020d0304..f272273b24 100644
--- a/packages/react-drawer/README.md
+++ b/packages/react-drawer/README.md
@@ -15,10 +15,8 @@ import Drawer from '@uiw/react-drawer';
### 基础用法
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Drawer, ButtonGroup, Button } from 'uiw';
class Demo extends React.Component {
@@ -63,15 +61,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 { Drawer, ButtonGroup, Button } from 'uiw';
class Demo extends React.Component {
@@ -121,16 +118,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 { Drawer, ButtonGroup, Button } from 'uiw';
class Demo extends React.Component {
@@ -181,7 +177,8 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+
+export default Demo;
```
## Props
diff --git a/packages/react-dropdown/README.md b/packages/react-dropdown/README.md
index e09bdaafc1..8131a8b8a5 100644
--- a/packages/react-dropdown/README.md
+++ b/packages/react-dropdown/README.md
@@ -15,10 +15,8 @@ import Dropdown from '@uiw/react-dropdown';
### 基本用法
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Dropdown, Menu, ButtonGroup, Button, Divider, Icon } from 'uiw';
const menu = (
@@ -51,14 +49,14 @@ 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 { Dropdown, Menu, ButtonGroup, Button } from 'uiw';
const menu = (
@@ -74,46 +72,46 @@ const menu = (
);
-ReactDOM.render(
-
-
-
-
-
+export default function Demo() {
+ return(
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
,
- _mount_
-);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
```
### 弹出位置
-
-```jsx
-import ReactDOM from 'react-dom';
-import { Dropdown, Menu, ButtonGroup, Button } from 'uiw';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
+import { Dropdown, Menu, Divider, ButtonGroup, Button } from 'uiw';
const menu = (
@@ -128,44 +126,43 @@ const menu = (
);
-ReactDOM.render(
-
-
-
-
-
+export default function Demo() {
+ return(
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
,
- _mount_
-);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
```
### 选择器
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Dropdown, Menu, Button, Icon } from 'uiw';
function Select(props) {
@@ -226,13 +223,15 @@ const option2 = [
{ label: '头等舱', value: 4 },
];
-ReactDOM.render(
-
-
,
- _mount_
-);
+
+export default function Demo() {
+ return(
+
+ { console.log('item', item); }} />
+ { console.log('item', item); }} />
+
+ );
+}
```
## 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 = () => (
-
-
{
- if (error.filed) {
- return { ...error.filed };
- }
- return null;
- }}
- onSubmit={({initial, current}) => {
- console.log('~~~', current);
- const errorObj = {};
- if (!current.select) {
- errorObj.select = '内容为空,请输入内容';
- }
- if(Object.keys(errorObj).length > 0) {
- const err = new Error();
- err.filed = errorObj;
- Notify.error({ title: '提交失败!', description: '请确认提交表单是否正确!' });
- throw err;
- }
- Notify.success({
- title: '提交成功!',
- description: `表单提交成功,内容为:${current.select},将自动填充初始化值!`,
- });
- }}
- fields={{
- select: {
- initialValue: 0,
- children: (
-
+export default function Demo() {
+ return (
+
+
{
+ if (error.filed) {
+ return { ...error.filed };
+ }
+ return null;
+ }}
+ onSubmit={({initial, current}) => {
+ console.log('~~~', current);
+ const errorObj = {};
+ if (!current.select) {
+ errorObj.select = '内容为空,请输入内容';
+ }
+ if(Object.keys(errorObj).length > 0) {
+ const err = new Error();
+ err.filed = errorObj;
+ Notify.error({ title: '提交失败!', description: '请确认提交表单是否正确!' });
+ throw err;
+ }
+ Notify.success({
+ title: '提交成功!',
+ description: `表单提交成功,内容为:${current.select},将自动填充初始化值!`,
+ });
+ }}
+ fields={{
+ select: {
+ initialValue: 0,
+ children: (
+
+ )
+ },
+ }}
+ >
+ {({ fields, state, canSubmit }) => {
+ return (
+
+
+ {fields.select}
+
+
+
+
+
+
+
)
- },
- }}
- >
- {({ fields, state, canSubmit }) => {
- return (
-
-
- {fields.select}
-
-
-
-
-
-
-
- )
- }}
-
-
-)
-ReactDOM.render(, _mount_);
+ }}
+
+
+ )
+}
```
### 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 = () => (
-
- 在上面的字段中输入一个值}
- onChange={() => {
- console.log('TEST::');
- }}
- >
-
-
-
-
-
-
-)
-ReactDOM.render(
, _mount_);
+export default function Demo() {
+ return (
+
+ 在上面的字段中输入一个值}
+ onChange={() => {
+ console.log('TEST::');
+ }}
+ >
+
+
+
+
+
+
+ )
+}
```
## Form
@@ -708,17 +699,17 @@ ReactDOM.render(
, _mount_);
#### ref
```jsx
- const form = useRef()
- render(
)
+const form = useRef()
+render()
```
```js
- form.current.onSubmit() // 提交表单
- form.current.resetForm() // 重置form
- const fieldValues = form.current.getFieldValues() // 获取所有 field的 value对象
- const error = form.current.getError() // 获取所有提交时验证错误
- form.current.setFields({ /** [fieldName]: value **/ }) // 设置表单的值,覆盖 form所有 field的值
- form.current.setFieldValue(fieldName, value) // 对单个 field设置 value,如果 value为数组请自行深度拷贝后传值,以免破坏原数组
+form.current.onSubmit() // 提交表单
+form.current.resetForm() // 重置form
+const fieldValues = form.current.getFieldValues() // 获取所有 field的 value对象
+const error = form.current.getError() // 获取所有提交时验证错误
+form.current.setFields({ /** [fieldName]: value **/ }) // 设置表单的值,覆盖 form所有 field的值
+form.current.setFieldValue(fieldName, value) // 对单个 field设置 value,如果 value为数组请自行深度拷贝后传值,以免破坏原数组
```
## FormItem
diff --git a/packages/react-grid/README.md b/packages/react-grid/README.md
index 91f76ec83a..22e8532b60 100644
--- a/packages/react-grid/README.md
+++ b/packages/react-grid/README.md
@@ -15,217 +15,223 @@ import { Row, Col } from '@uiw/react-grid';
### 基础用法
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Row, Col } from 'uiw';
const Box = ({ num, height, width, style, background }) => Col {num}
-const Demo = () => (
-
-
-
-
-
-);
-ReactDOM.render(, _mount_);
+
+export default function Demo() {
+ return (
+
+
+
+
+
+ );
+}
```
### Gutter
栅格间隔,可以写成像素值
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Row, Col } from 'uiw';
const Blank = ({ num, height, width, style, background }) => Col {num}
-ReactDOM.render(
-
-
-
-
-
-
-
-
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
```
### Flex 行设置列对齐
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Row, Col } from 'uiw';
const colStyl = { backgroundColor: 'rgba(230, 230, 230, 0.67)', marginBottom: 10 }
const Blank = ({ num, height, style, background = '#2EA3F4' }) => Col {num}
-const Demo = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
-ReactDOM.render(, _mount_);
+
+export default function Demo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
```
### Flex 列对齐
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Row, Col } from 'uiw';
const Blank = ({ num, style, background = '#2EA3F4' }) => Col {num}
-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 { Row, Col } from 'uiw';
const rowStyl = { backgroundColor: 'rgba(230, 230, 230, 0.67)', marginBottom: 10 }
const Blank = ({ num, height, width, style, background = '#2EA3F4' }) => Col {num}
-const Demo = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
-ReactDOM.render(, _mount_);
+
+export default function Demo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
```
### 24栅格
可以通过指定 `24` 列中每列的宽度来创建基本网格系统。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Row, Col } from 'uiw';
const Blank = ({ num, height, width, style, background = '#2EA3F4' }) => Col {num}
-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 { Row, Col } from 'uiw';
const Blank = ({ num, style, background = '#2EA3F4' }) => Col {num}
-const Demo = () => (
-
-
-
-
-
-
-
-
-
-
-
-);
-ReactDOM.render(, _mount_);
+
+export default function Demo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
```
## Row
diff --git a/packages/react-icon/README.md b/packages/react-icon/README.md
index df72fd34ac..4f093f5dbe 100644
--- a/packages/react-icon/README.md
+++ b/packages/react-icon/README.md
@@ -15,10 +15,8 @@ import Icon from '@uiw/react-icon';
### 搜索图标
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Input, CopyToClipboard, Icon, Notify } from 'uiw';
const icons = ["adobe", "alipay", "aliwangwang", "android-o", "android", "apple", "appstore-o", "appstore", "area-chart", "down", "left", "right", "up", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "arrows-alt", "asterisk", "backward", "baidu", "bar-chart", "barcode", "bell", "camera-o", "caret-down", "caret-left", "caret-right", "caret-up", "check-square-o", "check-square", "check", "chrome", "circle-check-o", "circle-check", "circle-close-o", "circle-close", "close-square-o", "close-square", "close", "cloud-download-o", "cloud-download", "cloud-upload-o", "cloud-upload", "coffee", "component", "copy", "copyright", "css3", "cut", "d-arrow-left", "d-arrow-right", "d-caret", "dashboard", "date", "delete", "dingding", "dislike-o", "document", "dot-chart", "circle-o", "down-circle-o", "down-circle", "down-square-o", "down-square", "square-o", "download", "edit", "enter", "environment-o", "environment", "eye-o", "eye", "facebook", "file-add", "file-excel", "file-jpg", "file-pdf", "file-text", "file-unknown", "filter", "firefox", "folder-add", "folder-open", "folder", "forward", "foursquare", "frown-o", "frown", "github-o", "github", "global", "heart-off", "heart-on", "home", "html5", "ie", "inbox", "information-o", "information", "laptop", "left-circle-o", "left-circle", "left-square-o", "left-square", "like-o", "link", "linkedin", "linux", "loading", "lock", "login", "logout", "man", "map", "meh-o", "meh", "menu-fold", "menu-unfold", "menu", "mail", "mail-o", "message", "minus-circle-o", "minus-circle", "minus-square-o", "minus-square", "minus", "mobile", "more", "notification", "opera", "paper-clip", "pause-circle-o", "pause-circle", "pause", "pay-circle-o", "pay", "picasa", "picture", "pie-chart", "pinterest", "play-circle-o", "play-circle", "plus-circle-o", "plus-circle", "plus-square-o", "plus-square", "plus", "poweroff", "printer", "qq", "qrcode", "question-circle-o", "question-circle", "reddit", "reload", "right-circle-o", "right-circle", "right-square-o", "right-square", "rollback", "safari", "safety", "save", "search", "setting-o", "setting", "share", "shopping-cart", "shrink", "smile-o", "smile", "star-off", "star-on", "swap-left", "swap-right", "swap", "table", "tag-o", "tag", "tags-o", "tags", "taobao", "time-o", "time", "twitter", "uiw", "unlock", "up-circle-o", "up-circle", "up-square-o", "up-square", "upload", "user-add", "user-delete", "user", "usergroup-add", "usergroup-delete", "verification", "verticle-left", "verticle-right", "video-camera", "warning-o", "warning", "weibo", "weixin", "wifi", "windows", "woman", "zoom-in", "zoom-out", 'stop-o', 'stop'];
@@ -80,7 +78,8 @@ class Demo extends React.Component {
);
}
}
-ReactDOM.render(, _mount_);
+
+export default Demo;
```
## 如何使用
@@ -120,38 +119,38 @@ const Demo = () => (
)
```
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Icon } from 'uiw';
-ReactDOM.render(
-
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+
+
+
+
+ );
+}
```
### 图标尺寸
默认情况下,图标非常小,它们继承了父级的字体大小。 如果没有设置字体大小,可以通过 `size` 来设置尺寸。通常情况 `size` 会很累赘没有什么用。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Icon } from 'uiw';
-ReactDOM.render(
-
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+
+
+
+
+ );
+}
```
### 图标颜色
@@ -161,35 +160,36 @@ ReactDOM.render(
> 一个有用的技巧是将 `fill` 设置为 `currentColor`,以便从图标容器的文本颜色继承填充颜色。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Icon } from 'uiw';
-ReactDOM.render(
-
-
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+
+
+
+
+
+ );
+}
```
### 与文本对齐
-
-```jsx
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Icon } from 'uiw';
-ReactDOM.render(
-
-
Exit
- uiw
- ,
- _mount_
-);
+export default function Demo() {
+ return (
+
+
Exit
+ uiw
+
+ );
+}
```
### 图标的命名规范
@@ -202,46 +202,45 @@ ReactDOM.render(
> 默认:`w-icon-` 默认引用的字体文件作用域
> 自定定义:`w-icon-uiw-` 自定定义作用域
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Icon } from 'uiw';
-ReactDOM.render(
-
- 图标名称:circle-close,[circle圈]-[关闭close]
-
- 图标名称:circle-close-o,[circle圈]-[关闭close]-[o描线]
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+ 图标名称:circle-close,[circle圈]-[关闭close]
+
+ 图标名称:circle-close-o,[circle圈]-[关闭close]-[o描线]
+
+ );
+}
```
### 图标旋转实例
通过设置参数 `spin={true}` 来设置图标旋转。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Icon } from 'uiw';
-ReactDOM.render(
-
-
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+
+
+
+
+
+ );
+}
```
### 自定义图标
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Icon } from 'uiw';
const chat = (
@@ -256,13 +255,14 @@ const contrast = (
)
const styl = { marginRight: 10 };
-ReactDOM.render(
-
-
-
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+
+
+
+ );
+}
```
## 字体图标
@@ -311,9 +311,9 @@ const Demo = () => (
### 方向性图标
-
-```js
-import ReactDOM from 'react-dom';
+
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Icon } from 'uiw';
const iconList = [
@@ -324,26 +324,26 @@ const itemStyl = {
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',
}
-ReactDOM.render(
-
- {iconList.map((type, idx) => {
- return (
-
- )
- })}
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+ {iconList.map((type, idx) => {
+ return (
+
+ )
+ })}
+
+ );
+}
```
圆圈方向性图标
-
-```js
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Icon } from 'uiw';
const iconList = [
@@ -353,26 +353,27 @@ const itemStyl = {
fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',
}
-ReactDOM.render(
-
- {iconList.map((type, idx) => {
- return (
-
- )
- })}
-
,
- _mount_
-);
+
+export default function Demo() {
+ return (
+
+ {iconList.map((type, idx) => {
+ return (
+
+ )
+ })}
+
+ );
+}
```
其它方向性图标
-
-```js
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Icon } from 'uiw';
const iconList = [
@@ -386,26 +387,27 @@ const itemStyl = {
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',
}
-ReactDOM.render(
-
- {iconList.map((type, idx) => {
- return (
-
- )
- })}
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+ {iconList.map((type, idx) => {
+ return (
+
+ )
+ })}
+
+ );
+}
```
### 提示建议性图标
-
-```js
-import ReactDOM from 'react-dom';
+
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Icon } from 'uiw';
const iconList = [
@@ -418,26 +420,26 @@ const itemStyl = {
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',
}
-ReactDOM.render(
-
- {iconList.map((type, idx) => {
- return (
-
- )
- })}
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+ {iconList.map((type, idx) => {
+ return (
+
+ )
+ })}
+
+ );
+}
```
## 符号
-
-```js
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Icon } from 'uiw';
const iconList = [
@@ -451,26 +453,27 @@ const itemStyl = {
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',
}
-ReactDOM.render(
-
- {iconList.map((type, idx) => {
- return (
-
- )
- })}
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+ {iconList.map((type, idx) => {
+ return (
+
+ )
+ })}
+
+ );
+}
```
### 文件
-
-```js
-import ReactDOM from 'react-dom';
+
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Icon } from 'uiw';
const iconList = [
@@ -482,26 +485,26 @@ const itemStyl = {
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',
}
-ReactDOM.render(
-
- {iconList.map((type, idx) => {
- return (
-
- )
- })}
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+ {iconList.map((type, idx) => {
+ return (
+
+ )
+ })}
+
+ );
+}
```
### 其它
-
-```js
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Icon } from 'uiw';
const iconList = [
@@ -519,26 +522,26 @@ const itemStyl = {
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',
}
-ReactDOM.render(
-
- {iconList.map((type, idx) => {
- return (
-
- )
- })}
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+ {iconList.map((type, idx) => {
+ return (
+
+ )
+ })}
+
+ );
+}
```
### 品牌标识
-
-```js
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Icon } from 'uiw';
const iconList = ['uiw', 'windows', 'linux', 'apple', 'facebook', 'twitter', 'adobe', 'baidu', 'alipay', 'android-o', 'android','reddit', 'github', 'github-o', 'aliwangwang', 'dingding', 'foursquare', 'linkedin', 'pinterest', 'qq', 'weibo', 'taobao', 'weixin', 'css3', 'html5'];
@@ -548,26 +551,26 @@ const itemStyl = {
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',
}
-ReactDOM.render(
-
- {iconList.map((type, idx) => {
- return (
-
- )
- })}
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+ {iconList.map((type, idx) => {
+ return (
+
+ )
+ })}
+
+ );
+}
```
### 浏览器图标
-
-```js
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Icon } from 'uiw';
const iconList = [ "chrome", "safari", "firefox", "opera", "ie", ];
@@ -576,17 +579,18 @@ const itemStyl = {
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',
}
-ReactDOM.render(
-
- {iconList.map((type, idx) => {
- return (
-
- )
- })}
-
,
- _mount_
-);
+export default function Demo() {
+ return (
+
+ {iconList.map((type, idx) => {
+ return (
+
+ )
+ })}
+
+ );
+}
```
diff --git a/packages/react-input/README.md b/packages/react-input/README.md
index a223fe7941..a1db73da13 100644
--- a/packages/react-input/README.md
+++ b/packages/react-input/README.md
@@ -15,29 +15,27 @@ import Input from '@uiw/react-input';
### 基础用法
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Input } from 'uiw';
-const Demo = () => (
-
-
-
-);
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+
+
+ );
+}
```
### 数字输入框
-
-```jsx
-import ReactDOM from 'react-dom';
-import { InputNumber } from 'uiw';
-
-const Demo = () => {
+```jsx mdx:preview&bg=#fff
+import React from 'react';
+import { InputNumber, Row, Col } from 'uiw';
- return(
+export default function Demo() {
+ return (
@@ -77,296 +75,292 @@ const Demo = () => {
)
};
-ReactDOM.render(, _mount_);
```
### Form 中使用 Input
-
-```jsx
-import ReactDOM from 'react-dom';
-import { Form, Input, Row, Col, Button, Notify } from 'uiw';
-
-const Demo = () => (
- { }}
- onSubmitError={(error) => {
- console.log('error:', error)
- return error && error.filed ? { ...error.filed } : null;
- }}
- onSubmit={({initial, current}) => {
- if (current.input && current.input.length > 3) {
- Notify.success({
- title: '提交成功!',
- description: `填写:【${current.input.toString()}】!`
- });
- } else {
- Notify.error({ title: '提交失败!', description: '必须长度超过 3 个字符!' });
- }
- const ErrObj = {};
- if (current.input && current.input.length < 4) {
- ErrObj.input = '😆 必须长度超过 3 个字符!';
- }
- if(Object.keys(ErrObj).length > 0) {
- const err = new Error();
- err.filed = ErrObj;
- throw err;
- }
- }}
- fields={{
- input: {
- value: 'www',
- label: '请输入内容',
- help: '必须长度超过 3 个字符!',
- validator: (value = '') => value.length < 4 ? '必填选项!' : null,
- children: ,
- },
- inputNumber: {
- value: 'www',
- label: '请输入内容',
- help: '必须长度超过 3 个字符!',
- validator: (value = '') => value.length < 4 ? '必填选项!' : null,
- children: ,
- },
- }}
- >
- {({ fields, state, canSubmit }) => {
- return (
-
-
- {fields.input}
-
-
- {fields.inputNumber}
-
-
-
-
-
-
-
-
-
- {JSON.stringify(state.current, null, 2)}
-
-
-
-
- );
- }}
-
-);
-
-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 (
+
{ }}
+ onSubmitError={(error) => {
+ console.log('error:', error)
+ return error && error.filed ? { ...error.filed } : null;
+ }}
+ onSubmit={({initial, current}) => {
+ if (current.input && current.input.length > 3) {
+ Notify.success({
+ title: '提交成功!',
+ description: `填写:【${current.input.toString()}】!`
+ });
+ } else {
+ Notify.error({ title: '提交失败!', description: '必须长度超过 3 个字符!' });
+ }
+ const ErrObj = {};
+ if (current.input && current.input.length < 4) {
+ ErrObj.input = '😆 必须长度超过 3 个字符!';
+ }
+ if(Object.keys(ErrObj).length > 0) {
+ const err = new Error();
+ err.filed = ErrObj;
+ throw err;
+ }
+ }}
+ fields={{
+ input: {
+ value: 'www',
+ label: '请输入内容',
+ help: '必须长度超过 3 个字符!',
+ validator: (value = '') => value.length < 4 ? '必填选项!' : null,
+ children: ,
+ },
+ inputNumber: {
+ value: 'www',
+ label: '请输入内容',
+ help: '必须长度超过 3 个字符!',
+ validator: (value = '') => value.length < 4 ? '必填选项!' : null,
+ children: ,
+ },
+ }}
+ >
+ {({ fields, state, canSubmit }) => {
+ return (
+
+
+ {fields.input}
+
+
+ {fields.inputNumber}
+
+
+
+
+
+
+
+
+
+ {JSON.stringify(state.current, null, 2)}
+
+
+
+
+ );
+ }}
+
+ );
+}
```
### 插入图标
-
-```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 = () => (
/>
)
-ReactDOM.render(, _mount_);
+export default Demo
```
@@ -68,9 +67,8 @@ ReactDOM.render(, _mount_);
通过`dataSource`和`renderItem`来创建列表,这两个属性是一起使用。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { List } from 'uiw';
const data = [
@@ -88,14 +86,13 @@ const Demo = () => (
}}
/>
)
-ReactDOM.render(, _mount_);
+export default Demo
```
### 禁用行
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { List } from 'uiw';
const data = [
@@ -132,17 +129,15 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo
```
-
### 行激活
`List.Item` 设置 `active` 属性即可设置这张被激活的样式。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { List } from 'uiw';
const Demo = () => (
@@ -152,14 +147,13 @@ const Demo = () => (
快跑!《侏罗纪世界2》正式预告要来了
)
-ReactDOM.render(, _mount_);
+export default Demo
```
### 斑马线
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { List } from 'uiw';
const data = [
@@ -178,16 +172,15 @@ const Demo = () => (
}}
/>
)
-ReactDOM.render(, _mount_);
+export default Demo
```
### 列表为超链接
`List.Item` 设置了 `href`,`List.Item`就可以设置标签``的所有属性了。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { List } from 'uiw';
const data = [
@@ -220,7 +213,7 @@ const Demo = () => (
}}
/>
)
-ReactDOM.render(, _mount_);
+export default Demo
```
@@ -228,9 +221,8 @@ ReactDOM.render(, _mount_);
`List.Item` 设置了 `extra`,`List.Item` 就可以设置右侧内容。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview
+import React from 'react';
import { List } from 'uiw';
const data = [
@@ -263,7 +255,7 @@ const Demo = () => (
}}
/>
)
-ReactDOM.render(, _mount_);
+export default Demo
```
## List
diff --git a/packages/react-loader/README.md b/packages/react-loader/README.md
index e52d373971..e7728e32ec 100644
--- a/packages/react-loader/README.md
+++ b/packages/react-loader/README.md
@@ -15,29 +15,27 @@ import Loader from '@uiw/react-loader';
### 基础实例
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Loader } from "uiw";
-ReactDOM.render(
-
-
-
-
-
,
- _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_
-);
+
+ );
+}
```
@@ -218,10 +216,8 @@ ReactDOM.render(
页面数据加载时显示。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Loader, Icon, Button } from "uiw";
class Demo extends React.Component {
@@ -267,7 +263,7 @@ class Demo extends React.Component {
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
diff --git a/packages/react-menu/README.md b/packages/react-menu/README.md
index e0c2dcfd43..2fefa527f6 100644
--- a/packages/react-menu/README.md
+++ b/packages/react-menu/README.md
@@ -20,93 +20,91 @@ import Menu, { MenuItem, MenuDivider, SubMenu } from '@uiw/react-menu'; // @ v4.
### 基本用法
-
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Menu, MenuItem, Row, Col } from 'uiw';
-const Demo = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
+
-
+
+
+
+
-
-
-
-
-
-)
-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 = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+export default function Demo() {
+ return (
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-)
-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 = () => {
)
}
-
-ReactDOM.render(, _mount_);
```
## Menu.Props
diff --git a/packages/react-message/README.md b/packages/react-message/README.md
index 9a1fbcba2d..1909ab7f19 100644
--- a/packages/react-message/README.md
+++ b/packages/react-message/README.md
@@ -15,9 +15,8 @@ import Message from '@uiw/react-message';
### 基础用法
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Message, Divider } from 'uiw';
class Demo extends React.Component {
@@ -42,17 +41,16 @@ 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 { Message, Divider } from 'uiw';
-function Demo() {
+export default function Demo() {
return (
@@ -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 = () => (
-
-
{
- if(current.date) {
- Notify.success({
- title: '提交成功!',
- description: `表单提交时间成功,时间为:${current.date}`,
- });
- } else {
- Notify.error({
- title: '提交失败!',
- description: `表单提交时间成功,时间为:${current.date},将自动填充初始化值!`,
- });
- }
- console.log('-->>', initial, current);
- }}
- fields={{
- date: {
- labelClassName: 'fieldLabel',
- labelFor: 'date-inline',
- children:
- },
- }}
- >
- {({ fields, state, canSubmit }) => {
- return (
-
- {fields.date}
-
-
-
-
- )
- }}
-
-
-)
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+
{
+ if(current.date) {
+ Notify.success({
+ title: '提交成功!',
+ description: `表单提交时间成功,时间为:${current.date}`,
+ });
+ } else {
+ Notify.error({
+ title: '提交失败!',
+ description: `表单提交时间成功,时间为:${current.date},将自动填充初始化值!`,
+ });
+ }
+ console.log('-->>', initial, current);
+ }}
+ fields={{
+ date: {
+ labelClassName: 'fieldLabel',
+ labelFor: 'date-inline',
+ children:
+ },
+ }}
+ >
+ {({ fields, state, canSubmit }) => {
+ return (
+
+ {fields.date}
+
+
+
+
+ )
+ }}
+
+
+ )
+}
```
## 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() {
)
}
-
-ReactDOM.render(, _mount_);
```
你可以根据动画样式库 [**`animate.css`**](https://daneden.github.io/animate.css/) 添加不同的出入动画。默认通过的 [`Less`](http://lesscss.org/) 生成 CSS 动画的实例代码,定义 `transitionName` 动画样式名字为 `animation-bouce`,下面是上面实例的样式:
diff --git a/packages/react-pagination/README.md b/packages/react-pagination/README.md
index 8741663889..ac8f0a6e2c 100644
--- a/packages/react-pagination/README.md
+++ b/packages/react-pagination/README.md
@@ -15,14 +15,11 @@ import Pagination from '@uiw/react-pagination';
### 基本用法
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Pagination, Divider } from 'uiw';
-
-const Demo = () => {
+export default function Demo() {
const [pageObj, setPageObj] = React.useState({
current: 2,
pageSize: 10
@@ -53,69 +50,64 @@ const Demo = () => {
)
}
-
-ReactDOM.render(
- ,
- _mount_
-);
```
### 迷你分页
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Pagination, Divider } from 'uiw';
-ReactDOM.render(
- ,
- _mount_
-);
+export default function Demo() {
+ return (
+
+ );
+}
```
### 对齐
目前有三种对齐方式 `左边(left)`、`中间(center)`、`右边(right)`。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Pagination, Divider } from 'uiw';
-ReactDOM.render(
-
-
{
- console.log(`pageNumber:${pageNumber}`)
- }}
- />
-
- {
- console.log(`pageNumber:${pageNumber}`)
- }}
- />
-
- {
- console.log(`pageNumber:${pageNumber}`)
- }}
- />
- ,
- _mount_
-);
+export default function Demo() {
+ return (
+
+
{
+ console.log(`pageNumber:${pageNumber}`)
+ }}
+ />
+
+ {
+ console.log(`pageNumber:${pageNumber}`)
+ }}
+ />
+
+ {
+ console.log(`pageNumber:${pageNumber}`)
+ }}
+ />
+
+ );
+}
```
### Props
diff --git a/packages/react-pin-code/README.md b/packages/react-pin-code/README.md
index 937270fa21..9ddb662009 100644
--- a/packages/react-pin-code/README.md
+++ b/packages/react-pin-code/README.md
@@ -15,150 +15,150 @@ import PinCode from '@uiw/react-pin-code';
### 基础用法
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { PinCode } from 'uiw';
-const Demo = () => (
-
-);
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+ );
+}
```
### 在表单中使用
在 [``](#/components/form) 表单中应用 [``](#/components/pin-code) 组件
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Form, Row, Col, Icon, PinCode, Button, Notify } from 'uiw';
-const Demo = () => (
-
-
{
- if (error.filed) {
- return { ...error.filed };
- }
- return null;
- }}
- onSubmit={({initial, current}) => {
- const errorObj = {};
- if (current.pinCode.join('').length === 0) {
- errorObj.pinCode = '请输入安全码!';
- }
- if (current.pinCode.join('').length < 5) {
- errorObj.pinCode = '安全码没有输入完整!';
- }
- if(Object.keys(errorObj).length > 0) {
- const err = new Error();
- err.filed = errorObj;
- Notify.error({ title: '提交失败!', description: '请确认提交表单是否正确!' });
- throw err;
- }
- Notify.success({
- title: '提交成功!',
- description: `表单提交成功,安全码为:${current.pinCode.join('')}!`,
- });
- }}
- fields={{
- pinCode: {
- initialValue: ['', '', '', '', ''],
- children:
- },
- }}
- >
- {({ fields, state, canSubmit }) => {
- console.log('state:',state.current.pinCode.join(''))
- return (
-
-
- {fields.pinCode}
-
-
-
-
-
- {state.current.pinCode.join('')}
-
-
-
-
-
-
- {JSON.stringify(state.current, null, 2)}
-
-
-
-
- )
- }}
-
-
-)
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+
{
+ if (error.filed) {
+ return { ...error.filed };
+ }
+ return null;
+ }}
+ onSubmit={({initial, current}) => {
+ const errorObj = {};
+ if (current.pinCode.join('').length === 0) {
+ errorObj.pinCode = '请输入安全码!';
+ }
+ if (current.pinCode.join('').length < 5) {
+ errorObj.pinCode = '安全码没有输入完整!';
+ }
+ if(Object.keys(errorObj).length > 0) {
+ const err = new Error();
+ err.filed = errorObj;
+ Notify.error({ title: '提交失败!', description: '请确认提交表单是否正确!' });
+ throw err;
+ }
+ Notify.success({
+ title: '提交成功!',
+ description: `表单提交成功,安全码为:${current.pinCode.join('')}!`,
+ });
+ }}
+ fields={{
+ pinCode: {
+ initialValue: ['', '', '', '', ''],
+ children:
+ },
+ }}
+ >
+ {({ fields, state, canSubmit }) => {
+ console.log('state:',state.current.pinCode.join(''))
+ return (
+
+
+ {fields.pinCode}
+
+
+
+
+
+ {state.current.pinCode.join('')}
+
+
+
+
+
+
+ {JSON.stringify(state.current, null, 2)}
+
+
+
+
+ )
+ }}
+
+
+ )
+}
```
### 更改占位符
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { PinCode, Divider } from 'uiw';
-const Demo = () => (
-
-
console.log(val)} />
-
- console.log(val)} />
-
- console.log(val)} />
-
-);
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+
console.log(val)} />
+
+ console.log(val)} />
+
+ console.log(val)} />
+
+ );
+}
```
### 输入框被禁用
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { PinCode, Divider } 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 { PinCode, Divider } from 'uiw';
-const Demo = () => (
-
-);
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+ );
+}
```
## PinCode
diff --git a/packages/react-popover/README.md b/packages/react-popover/README.md
index 3df07eb800..96ddff8343 100644
--- a/packages/react-popover/README.md
+++ b/packages/react-popover/README.md
@@ -17,10 +17,8 @@ import Popover from '@uiw/react-popover';
最简单的用法。
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import ReactDOM from 'react-dom';
import { Popover, Card, Icon,Row,Col, Button } from 'uiw';
class Demo extends React.Component {
@@ -91,16 +89,15 @@ class Demo extends React.Component {
)
}
}
-ReactDOM.render(, _mount_);
+export default Demo;
```
### 位置
位置有 `12` 个方向,根据 `placement` 参数来设置。
-
-```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 }
@@ -109,74 +106,74 @@ const content = (
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} %`}
+ 已关闭
+
+ )}/>
+ `已完成`}/>
+ `${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 = () => (
- {}}
- resetOnSubmit={false}
- onSubmitError={(error) => error && error.filed ? { ...error.filed } : null}
- onSubmit={({initial, current}) => {
- const ErrObj = {};
- if (current.radioGroup === 'unknown') {
- ErrObj.radioGroup = '请选择性别!';
- }
-
- if(Object.keys(ErrObj).length > 0) {
- const err = new Error();
- err.filed = ErrObj;
- throw err;
- }
-
- Notify.success({
- title: '提交成功!', description: `填写:【填写成功】!`
- });
- }}
- fields={{
- radioGroup: {
- value: 'girl',
- label: '请输入内容',
- help: '必须选择性别!',
- children: (
-
- 男
- 女
- 中性
- 未知
-
- ),
- },
- radioButtonGroup: {
- value: 'girl',
- label: '请输入内容',
- help: '必须选择性别!',
- children: (
-
- 男
- 女
- 中性
- 未知
-
- ),
- },
- radio: {
- help: '请选择!该选项为必选!',
- validator: (value) => !value ? '必填选项!' : null,
- children: 已阅读,
- },
- }}
- >
- {({ fields, state, canSubmit }) => {
- return (
-
-
- {fields.radioGroup}
-
-
- {fields.radioButtonGroup}
-
-
- {fields.radio}
-
-
-
-
-
-
-
-
-
- {JSON.stringify(state.current, null, 2)}
-
-
-
-
- );
- }}
-
-);
-
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+ {}}
+ resetOnSubmit={false}
+ onSubmitError={(error) => error && error.filed ? { ...error.filed } : null}
+ onSubmit={({initial, current}) => {
+ const ErrObj = {};
+ if (current.radioGroup === 'unknown') {
+ ErrObj.radioGroup = '请选择性别!';
+ }
+
+ if(Object.keys(ErrObj).length > 0) {
+ const err = new Error();
+ err.filed = ErrObj;
+ throw err;
+ }
+
+ Notify.success({
+ title: '提交成功!', description: `填写:【填写成功】!`
+ });
+ }}
+ fields={{
+ radioGroup: {
+ value: 'girl',
+ label: '请输入内容',
+ help: '必须选择性别!',
+ children: (
+
+ 男
+ 女
+ 中性
+ 未知
+
+ ),
+ },
+ radioButtonGroup: {
+ value: 'girl',
+ label: '请输入内容',
+ help: '必须选择性别!',
+ children: (
+
+ 男
+ 女
+ 中性
+ 未知
+
+ ),
+ },
+ radio: {
+ help: '请选择!该选项为必选!',
+ validator: (value) => !value ? '必填选项!' : null,
+ children: 已阅读,
+ },
+ }}
+ >
+ {({ fields, state, canSubmit }) => {
+ return (
+
+
+ {fields.radioGroup}
+
+
+ {fields.radioButtonGroup}
+
+
+ {fields.radio}
+
+
+
+
+
+
+
+
+
+ {JSON.stringify(state.current, null, 2)}
+
+
+
+
+ );
+ }}
+
+ );
+}
```
### 单选
适用广泛的基础最简单的用法。
-
-```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} />
-
-
-
-)
-
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+
+
+
} value={2.5} />
+
+
+
+
} value={3} />
+
+
+
+ )
+}
```
### 在表单中使用
在 [``](#/components/form) 表单中应用 [``](#/components/rate) 组件
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Form, Row, Col, Icon, Rate, Button, Notify } from 'uiw';
-const Demo = () => (
-
-
{
- if (error.filed) {
- return { ...error.filed };
- }
- return null;
- }}
- onSubmit={({initial, current}) => {
- const errorObj = {};
- if (current.rate < 2) {
- errorObj.rate = '评分低于 2 拒绝提交评分!';
- }
- if(Object.keys(errorObj).length > 0) {
- const err = new Error();
- err.filed = errorObj;
- Notify.error({ title: '提交失败!', description: '请确认提交表单是否正确!' });
- throw err;
- }
- Notify.success({
- title: '提交成功!',
- description: `表单提交成功,选择值为:${current.rate}!`,
- });
- }}
- fields={{
- rate: {
- initialValue: 3,
- children: } />
- },
- }}
- >
- {({ fields, state, canSubmit }) => {
- return (
-
-
- {fields.rate}
-
-
-
-
-
-
-
-
-
- {JSON.stringify(state.current, null, 2)}
-
-
-
-
- )
- }}
-
-
-)
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+
{
+ if (error.filed) {
+ return { ...error.filed };
+ }
+ return null;
+ }}
+ onSubmit={({initial, current}) => {
+ const errorObj = {};
+ if (current.rate < 2) {
+ errorObj.rate = '评分低于 2 拒绝提交评分!';
+ }
+ if(Object.keys(errorObj).length > 0) {
+ const err = new Error();
+ err.filed = errorObj;
+ Notify.error({ title: '提交失败!', description: '请确认提交表单是否正确!' });
+ throw err;
+ }
+ Notify.success({
+ title: '提交成功!',
+ description: `表单提交成功,选择值为:${current.rate}!`,
+ });
+ }}
+ fields={{
+ rate: {
+ initialValue: 3,
+ children: } />
+ },
+ }}
+ >
+ {({ fields, state, canSubmit }) => {
+ return (
+
+
+ {fields.rate}
+
+
+
+
+
+
+
+
+
+ {JSON.stringify(state.current, null, 2)}
+
+
+
+
+ )
+ }}
+
+
+ )
+}
```
### 受控
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Rate, Divider, Icon, RadioGroup, Radio } from 'uiw';
-const Demo = () => {
+export default function Demo() {
const [value, setValue] = React.useState(4);
return (
@@ -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} />
-
-
-
-)
-
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+
+
+
+
+
} value={3.5} />
+
+
+
+ );
+}
```
### 文本
按钮样式的单选组合。
-
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&bg=#fff
+import React from 'react';
import { Rate, Divider } 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 { Rate, Divider, Icon } from 'uiw';
-const Demo = () => (
-
-
} value={3.3} />
-
-
} value={4.3} />
-
-);
-
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+
} value={3.3} />
+
+
} value={4.3} />
+
+ );
+}
```
### 尺寸
-
-```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} />
-
-)
-
-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 = () => {
);
}
-ReactDOM.render(, _mount_);
```
## Props
diff --git a/packages/react-search-tree/README.md b/packages/react-search-tree/README.md
index b034cdae91..d0e44234dc 100644
--- a/packages/react-search-tree/README.md
+++ b/packages/react-search-tree/README.md
@@ -1,4 +1,4 @@
-SearchTree 带搜索的Tree选择控件
+SearchTree 带搜索的 Tree 选择控件
===
[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-tree/file/README.md)
@@ -15,11 +15,9 @@ import SearchTree from '@uiw/react-search-tree';
### 基础实例
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React, { useState, useEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
-import { SearchTree } from 'uiw';
+import { SearchTree, Row } from 'uiw';
const data = [
{
@@ -59,75 +57,71 @@ const data = [
{ label: '澳门', key: 16 },
];
-const Demo = () => {
-
-const [value,valueSet]=useState([{ label: '黄浦区', key: 12 }])
-const [valueSinge,valueSingeSet]=useState([{ label: '上海市', key: '1-0-0' }])
+export default function Demo() {
+ const [value,valueSet]=useState([{ label: '黄浦区', key: 12 }])
+ const [valueSinge,valueSingeSet]=useState([{ label: '上海市', key: '1-0-0' }])
-const onChange=(selectd, selectedAll, isChecked)=>{
- console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)
- valueSet(selectedAll)
-}
+ const onChange=(selectd, selectedAll, isChecked)=>{
+ console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)
+ valueSet(selectedAll)
+ }
-const onChangeSinge=(selectd, selectedAll, isChecked)=>{
- console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)
- valueSingeSet(selectedAll)
-}
+ const onChangeSinge=(selectd, selectedAll, isChecked)=>{
+ console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)
+ valueSingeSet(selectedAll)
+ }
- return (
-
-
-
- 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 = () => (
-
-
-
- Choose an item...
- One
- Two
- Three
- Four
-
-
-
-);
-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 = () => (
-
-
-
- Choose an item...
- One
- Two
- Three
- Four
-
-
-
-);
-ReactDOM.render(, _mount_);
-```
-
-
-### 尺寸
-
-通过 `size` 属性设置选择器的尺寸,提供三个尺寸参数设置。
-
-
-```jsx
-import ReactDOM from 'react-dom';
-import { Row, Col, Select, Button } from 'uiw';
-
-const rowSty = { marginBottom: 10 };
-const Demo = () => (
-
-
-
-
- Choose an item...
- One
- Two
- Three
- Four
-
-
-
-
-
-
-
+export default function Demo() {
+ return (
+
-
+
Choose an item...
One
Two
@@ -99,13 +33,23 @@ const Demo = () => (
Four
-
-
-
-
+ );
+}
+```
+
+
+### 禁用选择器
+
+```jsx mdx:preview&bg=#fff
+import React from 'react';
+import { Row, Col, Select } from 'uiw';
+
+export default function Demo() {
+ return (
+
-
+
Choose an item...
One
Two
@@ -113,118 +57,175 @@ const Demo = () => (
Four
-
-
-
-
-);
-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 (
+
+
+
+
+ Choose an item...
+ One
+ Two
+ Three
+ Four
+
+
+
+
+
+
+
+
+
+ Choose an item...
+ One
+ Two
+ Three
+ Four
+
+
+
+
+
+
+
+
+
+ Choose an item...
+ One
+ Two
+ Three
+ Four
+
+
+
+
+
+
+
+ );
+}
```
### 选项组
-
-```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 = () => (
-
-
{
- if (error.filed) {
- return { ...error.filed };
- }
- return null;
- }}
- onSubmit={({initial, current}) => {
- const errorObj = {};
- if (!current.selectField) {
- errorObj.selectField = '默认需要选择内容,选择入内容';
- }
- if(Object.keys(errorObj).length > 0) {
- const err = new Error();
- err.filed = errorObj;
- Notify.error({ title: '提交失败!', description: '请确认提交表单是否正确!' });
- throw err;
- }
- Notify.success({
- title: '提交成功!',
- description: `表单提交成功,选择值为:${current.selectField},将自动填充初始化值!`,
- });
- }}
- fields={{
- selectField: {
- children: (
-
- Choose an item...
- One
- Two
- Three
- Four
-
+export default function Demo() {
+ return (
+
+
{
+ if (error.filed) {
+ return { ...error.filed };
+ }
+ return null;
+ }}
+ onSubmit={({initial, current}) => {
+ const errorObj = {};
+ if (!current.selectField) {
+ errorObj.selectField = '默认需要选择内容,选择入内容';
+ }
+ if(Object.keys(errorObj).length > 0) {
+ const err = new Error();
+ err.filed = errorObj;
+ Notify.error({ title: '提交失败!', description: '请确认提交表单是否正确!' });
+ throw err;
+ }
+ Notify.success({
+ title: '提交成功!',
+ description: `表单提交成功,选择值为:${current.selectField},将自动填充初始化值!`,
+ });
+ }}
+ fields={{
+ selectField: {
+ children: (
+
+ Choose an item...
+ One
+ Two
+ Three
+ Four
+
+ )
+ },
+ }}
+ >
+ {({ fields, state, canSubmit }) => {
+ return (
+
+
+ {fields.selectField}
+
+
+
+
+
+
+
+
+
+ {JSON.stringify(state.current, null, 2)}
+
+
+
+
)
- },
- }}
- >
- {({ fields, state, canSubmit }) => {
- return (
-
-
- {fields.selectField}
-
-
-
-
-
-
-
-
-
- {JSON.stringify(state.current, null, 2)}
-
-
-
-
- )
- }}
-
-
-)
-ReactDOM.render(, _mount_);
+ }}
+
+
+ )
+}
```
### 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 = () => (
-
-
{
- if(current.age === initial.age) {
- Notify.error({
- title: '提交失败!',
- description: `表单提交年龄失败,年龄为:${current.age},与初始化值是一样滴!`,
- });
- } else {
- Notify.success({
- title: '提交成功!',
- description: `表单提交年龄成功,年龄为:${current.age},将自动填充初始化值!`,
- });
- }
- }}
- fields={{
- age: {
- initialValue: 0,
- inline: true,
- label: '年龄',
- help: '值必须大于 10',
- validator: (value) => value < 10 ? '必填选项!' : null,
- children:
- },
- }}
- >
- {({ fields, state, canSubmit }) => {
- console.log('state:', state)
- return (
-
-
- {fields.age}
- {state.current.age}
-
-
-
-
-
-
-
-
-
- {JSON.stringify(state.current, null, 2)}
-
-
-
-
- )
- }}
-
-
-)
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+
{
+ if(current.age === initial.age) {
+ Notify.error({
+ title: '提交失败!',
+ description: `表单提交年龄失败,年龄为:${current.age},与初始化值是一样滴!`,
+ });
+ } else {
+ Notify.success({
+ title: '提交成功!',
+ description: `表单提交年龄成功,年龄为:${current.age},将自动填充初始化值!`,
+ });
+ }
+ }}
+ fields={{
+ age: {
+ initialValue: 0,
+ inline: true,
+ label: '年龄',
+ help: '值必须大于 10',
+ validator: (value) => value < 10 ? '必填选项!' : null,
+ children:
+ },
+ }}
+ >
+ {({ fields, state, canSubmit }) => {
+ console.log('state:', state)
+ return (
+
+
+ {fields.age}
+ {state.current.age}
+
+
+
+
+
+
+
+
+
+ {JSON.stringify(state.current, null, 2)}
+
+
+
+
+ )
+ }}
+
+
+ )
+}
```
### 控制提示显示
通过设置 `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 = () => (
- { }}
- resetOnSubmit={false}
- onSubmitError={(error) => error && error.filed ? { ...error.filed } : null}
- onSubmit={({initial, current}) => {
- console.log('switch::', initial, current)
- const ErrObj = {};
- if(Object.keys(ErrObj).length > 0) {
- const err = new Error();
- err.filed = ErrObj;
- throw err;
- }
- }}
- fields={{
- switch: {
- checked: true,
- initialValue: true,
- label: '请输入内容',
- help: '必选选项!',
- validator: value => !value ? '必填选项!' : null,
- children: ,
- },
- }}
- >
- {({ fields, state, canSubmit }) => {
- return (
-
-
- {fields.switch}
-
-
-
-
-
-
-
-
-
- {JSON.stringify(state.current, null, 2)}
-
-
-
-
- );
- }}
-
-);
-
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+ { }}
+ resetOnSubmit={false}
+ onSubmitError={(error) => error && error.filed ? { ...error.filed } : null}
+ onSubmit={({initial, current}) => {
+ console.log('switch::', initial, current)
+ const ErrObj = {};
+ if(Object.keys(ErrObj).length > 0) {
+ const err = new Error();
+ err.filed = ErrObj;
+ throw err;
+ }
+ }}
+ fields={{
+ switch: {
+ checked: true,
+ initialValue: true,
+ label: '请输入内容',
+ help: '必选选项!',
+ validator: value => !value ? '必填选项!' : null,
+ children: ,
+ },
+ }}
+ >
+ {({ fields, state, canSubmit }) => {
+ return (
+
+
+ {fields.switch}
+
+
+
+
+
+
+
+
+
+ {JSON.stringify(state.current, null, 2)}
+
+
+
+
+ );
+ }}
+
+ );
+}
```
### 设置文字
-
-```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 = () => (
-
-
-
-
-
-
-
警告-黄色
-
提醒-橙色
-
危险-红色
-
默认颜色
-
-
成功-绿色
-
主要-蓝色
-
信息-青色
-
导航-藏青
-
-
警告-黄色
-
提醒-橙色
-
危险-红色
-
默认颜色
-
-)
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+
+
+
+
+
+
警告-黄色
+
提醒-橙色
+
危险-红色
+
默认颜色
+
+
成功-绿色
+
主要-蓝色
+
信息-青色
+
导航-藏青
+
+
警告-黄色
+
提醒-橙色
+
危险-红色
+
默认颜色
+
+ )
+}
```
### 标签禁用
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
import { Tag, Divider } from 'uiw';
-const Demo = () => (
-
-
-
-
-
-
警告-黄色
-
提醒-橙色
-
危险-红色
-
默认颜色
-
-
成功-绿色
-
主要-蓝色
-
信息-青色
-
导航-藏青
-
警告-黄色
-
提醒-橙色
-
危险-红色
-
默认颜色
-
-)
-ReactDOM.render(, _mount_);
+export default function Demo() {
+ return (
+
+
+
+
+
+
警告-黄色
+
提醒-橙色
+
危险-红色
+
默认颜色
+
+
成功-绿色
+
主要-蓝色
+
信息-青色
+
导航-藏青
+
警告-黄色
+
提醒-橙色
+
危险-红色
+
默认颜色
+
+ )
+}
```
### 添加图标
-
-```jsx
+```jsx mdx:preview&bg=#fff
import React from 'react';
-import { Tag, Divider } from 'uiw';
+import { Tag, Divider, Icon } 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 line = node.position?.start.line;
+ const metaId = getMetaId(meta) || String(line);
+ const Child = components[`${metaId}`];
+ if (metaId && typeof Child === 'function') {
+ const code = data[metaId].value || '';
+ const param = getURLParameters(meta);
+ console.log(':param:', param);
+ return (
+ }
+ text={code}
+ >
+
+
+ );
+ }
+ return
;
+};
+
+interface MarkdownProps extends CodeBlockData {
+ path: string;
+}
+
+export default function Markdown(props: MarkdownProps) {
+ return (
+
+ {
+ return ;
+ },
+ }}
+ />
+
+
+ );
+}
diff --git a/website/src/components/Markdown/index.tsx b/website/src/components/Markdown/index.tsx
deleted file mode 100755
index e4cc23c4d4..0000000000
--- a/website/src/components/Markdown/index.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { useEffect, useState } from 'react';
-import MarkdownPreview from '@uiw/react-markdown-preview';
-import pkg from 'uiw/package.json';
-import Code from './Code';
-import Footer from './Footer';
-import styles from './index.module.less';
-
-export type CreatePageProps = {
- dependencies?: T;
- path: string;
- renderPage?: () => Promise;
-};
-
-const getCodeStr = (data: any[] = [], code: string = '') => {
- data.forEach((node) => {
- if (node.type === 'text') {
- code += node.value;
- } else if (node.children && Array.isArray(node.children)) {
- code += getCodeStr(node.children);
- }
- });
- return code;
-};
-
-export default function CreatePage(props: CreatePageProps) {
- const { renderPage, dependencies, path } = props;
- const [mdStr, setMdStr] = useState('');
-
- const version = pkg.version || '2.0.0';
- useEffect(() => {
- if (renderPage) {
- renderPage()
- .then((str) => {
- setMdStr(str);
- })
- .catch(() => {});
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
-
- if (!mdStr) {
- return null;
- }
-
- return (
-
-
{
- const { noPreview, bordered, noScroll, bgWhite, noCode, codePen, codeSandbox } = props as any;
- if (inline) {
- return
;
- }
- const config = {
- noPreview,
- bordered,
- noScroll,
- bgWhite,
- noCode,
- codePen,
- codeSandbox,
- } as any;
- if (Object.keys(config).filter((name) => config[name] !== undefined).length === 0) {
- return
;
- }
- return (
-
- );
- },
- }}
- />
-
-
-
-
- );
-}
diff --git a/website/src/index.tsx b/website/src/index.tsx
index ee199cf507..6f11e4a513 100755
--- a/website/src/index.tsx
+++ b/website/src/index.tsx
@@ -1,5 +1,5 @@
import React, { useReducer } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
import { useRoutes, HashRouter } from 'react-router-dom';
import BackToUp from '@uiw/react-back-to-top';
import '@uiw/reset.css';
@@ -13,12 +13,13 @@ export const Provider = ({ children }: { children: React.ReactNode }) => {
return {children};
};
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(
Top
,
- document.getElementById('root'),
);
diff --git a/website/src/menu.json b/website/src/menu.json
index 72e9762f47..16eadf9d3f 100755
--- a/website/src/menu.json
+++ b/website/src/menu.json
@@ -85,6 +85,10 @@
"name": "HeatMap 日历热图",
"path": "https://uiwjs.github.io/react-heat-map"
},
+ {
+ "name": "Watermark 水印",
+ "path": "https://uiwjs.github.io/react-watermark"
+ },
{
"name": "Markdown Preview",
"path": "https://uiwjs.github.io/react-markdown-preview/"
diff --git a/website/src/react-app-env.d.ts b/website/src/react-app-env.d.ts
index 633c503798..e6fe23ea3f 100644
--- a/website/src/react-app-env.d.ts
+++ b/website/src/react-app-env.d.ts
@@ -11,3 +11,9 @@ declare module '*.less' {
}
declare module '*.md';
+
+// declare module '*.md' {
+// import { CodeBlockData } from 'markdown-react-code-preview-loader';
+// const src: CodeBlockData;
+// export default src;
+// }
diff --git a/website/src/routes/components/affix/index.tsx b/website/src/routes/components/affix/index.tsx
index 78b55698b9..b84381726d 100755
--- a/website/src/routes/components/affix/index.tsx
+++ b/website/src/routes/components/affix/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Affix, Button } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-affix/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-affix/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/alert/index.tsx b/website/src/routes/components/alert/index.tsx
index d93de22deb..2c2f636f5d 100755
--- a/website/src/routes/components/alert/index.tsx
+++ b/website/src/routes/components/alert/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Alert, Button, ButtonGroup } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-alert/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-alert/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/auto-link/index.tsx b/website/src/routes/components/auto-link/index.tsx
index b7a4017625..b153d67156 100755
--- a/website/src/routes/components/auto-link/index.tsx
+++ b/website/src/routes/components/auto-link/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { AutoLink } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-auto-link/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-auto-link/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/avatar/index.tsx b/website/src/routes/components/avatar/index.tsx
index 9d4582a6a6..f8682bb64c 100755
--- a/website/src/routes/components/avatar/index.tsx
+++ b/website/src/routes/components/avatar/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Icon, Avatar, Badge } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-avatar/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-avatar/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/back-top/index.tsx b/website/src/routes/components/back-top/index.tsx
index 0149d2e304..83540e3c62 100755
--- a/website/src/routes/components/back-top/index.tsx
+++ b/website/src/routes/components/back-top/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { BackTop, Button } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-back-top/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-back-top/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/badge/index.tsx b/website/src/routes/components/badge/index.tsx
index 3ca69edb7f..d44c24e680 100755
--- a/website/src/routes/components/badge/index.tsx
+++ b/website/src/routes/components/badge/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Badge, Divider, Row, Col, Avatar, Icon } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-badge/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-badge/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/breadcrumb/index.tsx b/website/src/routes/components/breadcrumb/index.tsx
index 86860bf7b5..245d46e07b 100755
--- a/website/src/routes/components/breadcrumb/index.tsx
+++ b/website/src/routes/components/breadcrumb/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Breadcrumb, Icon, Divider } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-breadcrumb/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-breadcrumb/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/button/index.tsx b/website/src/routes/components/button/index.tsx
index af98617f37..05999e3ead 100755
--- a/website/src/routes/components/button/index.tsx
+++ b/website/src/routes/components/button/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Icon, Divider, Button, ButtonGroup, Row, Col } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-button/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-button/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/calendar/index.tsx b/website/src/routes/components/calendar/index.tsx
index e9088f0e37..c177cf50ff 100755
--- a/website/src/routes/components/calendar/index.tsx
+++ b/website/src/routes/components/calendar/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Calendar, Badge } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-calendar/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-calendar/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/card/index.tsx b/website/src/routes/components/card/index.tsx
index 44ea2bc5f1..90c2511a43 100755
--- a/website/src/routes/components/card/index.tsx
+++ b/website/src/routes/components/card/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Card, Icon } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-card/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-card/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/carousel/index.tsx b/website/src/routes/components/carousel/index.tsx
index 7497a0ed9a..6a26820c2c 100755
--- a/website/src/routes/components/carousel/index.tsx
+++ b/website/src/routes/components/carousel/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Carousel, Row, Col } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-carousel/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-carousel/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/cascader/index.tsx b/website/src/routes/components/cascader/index.tsx
index 6627040298..97bc6cb61e 100644
--- a/website/src/routes/components/cascader/index.tsx
+++ b/website/src/routes/components/cascader/index.tsx
@@ -1,14 +1,6 @@
-import React from 'react';
-import { Form, Row, Col, Cascader, Button } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-cascader/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('uiw/node_modules/@uiw/react-cascader/README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/components/checkbox/index.tsx b/website/src/routes/components/checkbox/index.tsx
index 7504feeb80..9b7b441dc6 100755
--- a/website/src/routes/components/checkbox/index.tsx
+++ b/website/src/routes/components/checkbox/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Checkbox, Button, Form, Row, Col, Divider, Notify } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-checkbox/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-checkbox/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/collapse/index.tsx b/website/src/routes/components/collapse/index.tsx
index d4aa7f722c..653625706d 100755
--- a/website/src/routes/components/collapse/index.tsx
+++ b/website/src/routes/components/collapse/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Collapse, Button, Icon } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-collapse/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-collapse/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/colors/README.md b/website/src/routes/components/colors/README.md
index 4d5ee06307..e40c727bba 100755
--- a/website/src/routes/components/colors/README.md
+++ b/website/src/routes/components/colors/README.md
@@ -6,8 +6,8 @@ Color 色彩
主色以象征广阔海洋的湖蓝色作为主色调,它给人以年轻、鲜明、清爽的形象多展现出来,湖蓝色是一种纯洁的颜色,象征着大海。
( 取色含义:我们致力于创新,积极并且不断努力,这正是我们团队的精神追求。)
-
-```js
+```jsx mdx:preview&bg=#fff&toolbar=true
+import React from 'react';
const colors = [
{ name: 'Light Blue', cn: '主要-浅蓝色', color: '#5BB5F4', des: '通常用于按钮、及任何修饰元素', },
{ name: 'Blue', cn: '主要-蓝色', color: '#2EA3F4', des: '通常用于按钮、及任何修饰元素', },
@@ -29,15 +29,16 @@ const Demo = () => (
})}
);
-ReactDOM.render(, _mount_);
+
+export default Demo;
```
## 辅助颜色
这些亮丽的辅助色多用于按钮,提示,警告等修饰元素,以及一些侧边修饰的元素上。
-
-```js
+```jsx mdx:preview&bg=#fff&toolbar=true
+import React from 'react';
const colors = [
{ name: 'Green', cn: '成功-绿色', color: '#28a745' },
{ name: 'Blue', cn: '主要-蓝色', color: '#008EF0' },
@@ -65,15 +66,16 @@ const Demo = () => (
})}
);
-ReactDOM.render(, _mount_);
+
+export default Demo;
```
## 极简中性色
极简中性色是白色从灰色再到深灰色的一个过渡颜色,可以搭配文字以及任何元素,以这种色调来缓解视觉疲劳,低调内敛!
-
-```js
+```jsx mdx:preview&bg=#fff&toolbar=true
+import React from 'react';
const colors = [
{ name: '白色', color: '#FFFFFF', fontColor: '#6F6F6F' },
{ name: '背景', color: '#F6F6F6', fontColor: '#6F6F6F' },
@@ -105,15 +107,17 @@ const Demo = () => (
})}
);
-ReactDOM.render(, _mount_);
+
+export default Demo;
```
## 背景色
这内置的几种颜色可以用于各种元素中,比如:导航,按钮,徽章等背景中。
-
-```js
+```jsx mdx:preview&bg=#fff&toolbar=true
+import React from 'react';
+
const colors = [
{ name: '警告-黄色', backgroundColor: '#ffc107', des: 'warning', },
{ name: '提醒-橙色', backgroundColor: '#F95C2B', des: 'remind', },
@@ -146,5 +150,6 @@ const Demo = () => (
})}
);
-ReactDOM.render(, _mount_);
+
+export default Demo;
```
diff --git a/website/src/routes/components/colors/index.tsx b/website/src/routes/components/colors/index.tsx
index 58d479884a..a372026e07 100755
--- a/website/src/routes/components/colors/index.tsx
+++ b/website/src/routes/components/colors/index.tsx
@@ -1,14 +1,11 @@
-import React from 'react';
-import Markdown from '../../../components/Markdown';
+import data from './README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
return (
{
- const md = await import('./README.md');
- return md.default || md;
- }}
/>
);
}
diff --git a/website/src/routes/components/copy-to-clipboard/index.tsx b/website/src/routes/components/copy-to-clipboard/index.tsx
index 634b42294c..c2c40d25e4 100755
--- a/website/src/routes/components/copy-to-clipboard/index.tsx
+++ b/website/src/routes/components/copy-to-clipboard/index.tsx
@@ -1,16 +1,8 @@
-import React from 'react';
-import { CopyToClipboard, Button, Input } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-copy-to-clipboard/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
return (
- {
- const md = await import('uiw/node_modules/@uiw/react-copy-to-clipboard/README.md');
- return md.default || md;
- }}
- />
+
);
}
diff --git a/website/src/routes/components/date-input/index.tsx b/website/src/routes/components/date-input/index.tsx
index 99b791f34f..49ef4ac30a 100755
--- a/website/src/routes/components/date-input/index.tsx
+++ b/website/src/routes/components/date-input/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { DateInput, DateInputRange, Notify, Form, Row, Col, Button } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-date-input/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-date-input/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/date-picker/index.tsx b/website/src/routes/components/date-picker/index.tsx
index cf524a78c4..376179fc54 100755
--- a/website/src/routes/components/date-picker/index.tsx
+++ b/website/src/routes/components/date-picker/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { DatePicker } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-date-picker/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-date-picker/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/descriptions/index.tsx b/website/src/routes/components/descriptions/index.tsx
index 9aa8dbc792..1fd0c82ac6 100644
--- a/website/src/routes/components/descriptions/index.tsx
+++ b/website/src/routes/components/descriptions/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Descriptions, Divider, Badge, Radio, RadioGroup } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-descriptions/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-descriptions/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/divider/index.tsx b/website/src/routes/components/divider/index.tsx
index 6932bf95d9..70e8544153 100755
--- a/website/src/routes/components/divider/index.tsx
+++ b/website/src/routes/components/divider/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Divider } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-divider/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-divider/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/drawer/index.tsx b/website/src/routes/components/drawer/index.tsx
index 1898dbde85..f5214df9ff 100755
--- a/website/src/routes/components/drawer/index.tsx
+++ b/website/src/routes/components/drawer/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Drawer, ButtonGroup, Button } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-drawer/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-drawer/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/dropdown/index.tsx b/website/src/routes/components/dropdown/index.tsx
index 7aae488944..bb33a709ff 100755
--- a/website/src/routes/components/dropdown/index.tsx
+++ b/website/src/routes/components/dropdown/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Dropdown, Divider, Menu, Button, ButtonGroup, Icon } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-dropdown/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-dropdown/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/empty/index.tsx b/website/src/routes/components/empty/index.tsx
index 655799ccb8..d228d3ed1c 100755
--- a/website/src/routes/components/empty/index.tsx
+++ b/website/src/routes/components/empty/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Empty, Icon, Button } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-empty/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-empty/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/file-input/index.tsx b/website/src/routes/components/file-input/index.tsx
index 7c2b5285d9..f1c4041a4e 100755
--- a/website/src/routes/components/file-input/index.tsx
+++ b/website/src/routes/components/file-input/index.tsx
@@ -1,16 +1,6 @@
-import React, { useRef } from 'react';
-import { FileInput, Overlay, Button, Icon, Form, Row, Col } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-file-input/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-file-input/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/form/index.tsx b/website/src/routes/components/form/index.tsx
index 2d4b797b19..1b20f81ffe 100755
--- a/website/src/routes/components/form/index.tsx
+++ b/website/src/routes/components/form/index.tsx
@@ -1,55 +1,6 @@
-import React, { useRef } from 'react';
-import {
- Form,
- FormItem,
- Row,
- Col,
- Icon,
- Divider,
- Button,
- Input,
- Checkbox,
- Switch,
- Radio,
- RadioGroup,
- Select,
- Textarea,
- Notify,
- Menu,
- Dropdown,
- TreeChecked,
-} from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-form/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-form/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/formatter/index.tsx b/website/src/routes/components/formatter/index.tsx
index b50ef4585f..613b0bac3f 100755
--- a/website/src/routes/components/formatter/index.tsx
+++ b/website/src/routes/components/formatter/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { formatter, Divider, Tag, Icon } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/formatter/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('@uiw/formatter/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/grid/index.tsx b/website/src/routes/components/grid/index.tsx
index e81b6b5da9..e7757eee40 100755
--- a/website/src/routes/components/grid/index.tsx
+++ b/website/src/routes/components/grid/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Col, Row } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-grid/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-grid/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/icon/index.tsx b/website/src/routes/components/icon/index.tsx
index c45c5d0a3e..9b8d59056c 100755
--- a/website/src/routes/components/icon/index.tsx
+++ b/website/src/routes/components/icon/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Icon, CopyToClipboard, Notify, Input } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-icon/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-icon/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/input/index.tsx b/website/src/routes/components/input/index.tsx
index 748b960c0b..74de283a2a 100755
--- a/website/src/routes/components/input/index.tsx
+++ b/website/src/routes/components/input/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Divider, Input, InputNumber, Form, Notify, Button, Tag, Row, Col } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-input/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-input/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/layout/index.tsx b/website/src/routes/components/layout/index.tsx
index 26afd570bf..9ba725d040 100755
--- a/website/src/routes/components/layout/index.tsx
+++ b/website/src/routes/components/layout/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import * as uiw from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-layout/README-zh.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('@uiw/react-layout/README-zh.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/list/index.tsx b/website/src/routes/components/list/index.tsx
index 54d8479262..743c91872a 100755
--- a/website/src/routes/components/list/index.tsx
+++ b/website/src/routes/components/list/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { List } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-list/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-list/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/loader/index.tsx b/website/src/routes/components/loader/index.tsx
index ee082339fe..770dfa7c11 100755
--- a/website/src/routes/components/loader/index.tsx
+++ b/website/src/routes/components/loader/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Loader, Row, Col, Message, Card, Icon, Button } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-loader/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-loader/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/menu/index.tsx b/website/src/routes/components/menu/index.tsx
index 4e3d8eecc0..5589a65f8c 100755
--- a/website/src/routes/components/menu/index.tsx
+++ b/website/src/routes/components/menu/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Menu, Drawer, MenuItem, MenuDivider, SubMenu, Row, Col, Switch, Icon, Popover, Button } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-menu/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-menu/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/message/index.tsx b/website/src/routes/components/message/index.tsx
index 23158964fb..8aa75efb55 100755
--- a/website/src/routes/components/message/index.tsx
+++ b/website/src/routes/components/message/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Message, Divider } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-message/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-message/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/modal/index.tsx b/website/src/routes/components/modal/index.tsx
index da0b1c2693..74d8738a2b 100755
--- a/website/src/routes/components/modal/index.tsx
+++ b/website/src/routes/components/modal/index.tsx
@@ -1,44 +1,6 @@
-import React from 'react';
-import {
- Modal,
- ButtonGroup,
- Button,
- Notify,
- Form,
- Input,
- Checkbox,
- Switch,
- RadioGroup,
- Radio,
- Textarea,
- Row,
- Col,
-} from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-modal/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-modal/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/month-picker/index.tsx b/website/src/routes/components/month-picker/index.tsx
index 724d17e49b..d0d8a03971 100755
--- a/website/src/routes/components/month-picker/index.tsx
+++ b/website/src/routes/components/month-picker/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { MonthPicker, Button, Notify, Form, Row, Col } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-month-picker/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-month-picker/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/notify/index.tsx b/website/src/routes/components/notify/index.tsx
index 6273077f42..cb3cf03a01 100755
--- a/website/src/routes/components/notify/index.tsx
+++ b/website/src/routes/components/notify/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Notify, ButtonGroup, Button } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-notify/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-notify/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/overlay-trigger/index.tsx b/website/src/routes/components/overlay-trigger/index.tsx
index 07e2cae0c9..07b4fe001f 100755
--- a/website/src/routes/components/overlay-trigger/index.tsx
+++ b/website/src/routes/components/overlay-trigger/index.tsx
@@ -1,16 +1,8 @@
-import React from 'react';
-import { OverlayTrigger, Card, Button, Switch, Divider } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-overlay-trigger/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
return (
- {
- const md = await import('uiw/node_modules/@uiw/react-overlay-trigger/README.md');
- return md.default || md;
- }}
- />
+
);
}
diff --git a/website/src/routes/components/overlay/index.tsx b/website/src/routes/components/overlay/index.tsx
index 8c7e720ea2..8745f45e46 100755
--- a/website/src/routes/components/overlay/index.tsx
+++ b/website/src/routes/components/overlay/index.tsx
@@ -1,17 +1,8 @@
-import React from 'react';
-import { Overlay, Button, Icon, Card, Divider } from 'uiw';
-import Markdown from '../../../components/Markdown';
import './index.less';
+import data from '@uiw/react-overlay/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
+
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-overlay/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/pagination/index.tsx b/website/src/routes/components/pagination/index.tsx
index 98abc0015f..12c7d2bdc9 100755
--- a/website/src/routes/components/pagination/index.tsx
+++ b/website/src/routes/components/pagination/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Pagination, Divider } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-pagination/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-pagination/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/pin-code/index.tsx b/website/src/routes/components/pin-code/index.tsx
index 48f6b68eb7..a93b556f53 100755
--- a/website/src/routes/components/pin-code/index.tsx
+++ b/website/src/routes/components/pin-code/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Divider, PinCode, Form, Row, Col, Icon, Button, Notify } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-pin-code/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-pin-code/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/popover/index.tsx b/website/src/routes/components/popover/index.tsx
index fe41c7ac5a..1cbbfbe02c 100755
--- a/website/src/routes/components/popover/index.tsx
+++ b/website/src/routes/components/popover/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Popover, Button, Icon, Row, Col, Input, Card } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-popover/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-popover/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/portal/index.tsx b/website/src/routes/components/portal/index.tsx
index bbf8812015..c546a3c4e9 100755
--- a/website/src/routes/components/portal/index.tsx
+++ b/website/src/routes/components/portal/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Portal } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-portal/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-portal/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/progress/index.tsx b/website/src/routes/components/progress/index.tsx
index e875f38713..609e88c755 100755
--- a/website/src/routes/components/progress/index.tsx
+++ b/website/src/routes/components/progress/index.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import { Progress } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-progress/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-progress/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/radio/index.tsx b/website/src/routes/components/radio/index.tsx
index 2d62c655b9..64fd8c3fa6 100755
--- a/website/src/routes/components/radio/index.tsx
+++ b/website/src/routes/components/radio/index.tsx
@@ -1,24 +1,6 @@
-import React from 'react';
-import { Radio, RadioGroup, RadioButton, Button, Divider, Form, Row, Col, Notify } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-radio/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('uiw/node_modules/@uiw/react-radio/README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/components/rate/index.tsx b/website/src/routes/components/rate/index.tsx
index 31aa51c601..adffd9762b 100755
--- a/website/src/routes/components/rate/index.tsx
+++ b/website/src/routes/components/rate/index.tsx
@@ -1,25 +1,6 @@
-import React from 'react';
-import { Rate, Radio, RadioGroup, Icon, Divider, Form, Row, Col, Button, Notify } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-rate/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('uiw/node_modules/@uiw/react-rate/README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/components/reset-css/index.tsx b/website/src/routes/components/reset-css/index.tsx
index 0fa1c4fdd1..bc46411378 100755
--- a/website/src/routes/components/reset-css/index.tsx
+++ b/website/src/routes/components/reset-css/index.tsx
@@ -1,12 +1,6 @@
-import React from 'react';
-import Markdown from '../../../components/Markdown';
+import data from './README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('./README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/components/search-select/index.tsx b/website/src/routes/components/search-select/index.tsx
index a5b71ac4c4..aa8d0ecac4 100644
--- a/website/src/routes/components/search-select/index.tsx
+++ b/website/src/routes/components/search-select/index.tsx
@@ -1,14 +1,6 @@
-import React from 'react';
-import { Form, Row, Col, Button, Notify, SearchSelect } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-search-select/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('uiw/node_modules/@uiw/react-search-select/README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/components/search-tree/index.tsx b/website/src/routes/components/search-tree/index.tsx
index 1f400c1f4b..e256d0be53 100644
--- a/website/src/routes/components/search-tree/index.tsx
+++ b/website/src/routes/components/search-tree/index.tsx
@@ -1,14 +1,6 @@
-import React, { useState, useRef } from 'react';
-import { Form, Button, TreeChecked, SearchTree, Row, Col, Card, Icon, Notify } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-search-tree/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('uiw/node_modules/@uiw/react-search-tree/README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/components/select/index.tsx b/website/src/routes/components/select/index.tsx
index e9b5ed0ef7..c41f9473c0 100755
--- a/website/src/routes/components/select/index.tsx
+++ b/website/src/routes/components/select/index.tsx
@@ -1,14 +1,6 @@
-import React from 'react';
-import { Select, Form, Notify, Row, Col, Button, SearchSelect } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-select/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('uiw/node_modules/@uiw/react-select/README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/components/slider/index.tsx b/website/src/routes/components/slider/index.tsx
index b6fbd0b924..73a3342e76 100755
--- a/website/src/routes/components/slider/index.tsx
+++ b/website/src/routes/components/slider/index.tsx
@@ -1,14 +1,6 @@
-import React from 'react';
-import { Slider, Divider, Button, Notify, Form, Row, Col } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-slider/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('uiw/node_modules/@uiw/react-slider/README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/components/split/index.tsx b/website/src/routes/components/split/index.tsx
index 0ea9fee815..836baa105e 100755
--- a/website/src/routes/components/split/index.tsx
+++ b/website/src/routes/components/split/index.tsx
@@ -1,14 +1,6 @@
-import React from 'react';
-import { Split, Divider, Button, Menu } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-split/README-zh.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('@uiw/react-split/README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/components/steps/index.tsx b/website/src/routes/components/steps/index.tsx
index 4bf2ff350c..7e5ccda76a 100755
--- a/website/src/routes/components/steps/index.tsx
+++ b/website/src/routes/components/steps/index.tsx
@@ -1,14 +1,6 @@
-import React from 'react';
-import { Steps, Icon, Button, Notify, Row, Col } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-steps/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('uiw/node_modules/@uiw/react-steps/README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/components/switch/index.tsx b/website/src/routes/components/switch/index.tsx
index 84eae2f821..5dcef5f858 100755
--- a/website/src/routes/components/switch/index.tsx
+++ b/website/src/routes/components/switch/index.tsx
@@ -1,14 +1,6 @@
-import React from 'react';
-import { Switch, Divider, Button, Form, Row, Col, Notify } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-switch/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('uiw/node_modules/@uiw/react-switch/README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/components/table/index.tsx b/website/src/routes/components/table/index.tsx
index ab87ae4813..6411941e9e 100755
--- a/website/src/routes/components/table/index.tsx
+++ b/website/src/routes/components/table/index.tsx
@@ -1,27 +1,6 @@
-import React from 'react';
-import { Table, Icon, Empty, Notify, Button, Checkbox, Pagination, Loader, Tooltip, Input, Select, Form } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-table/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('uiw/node_modules/@uiw/react-table/README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/components/tabs/index.tsx b/website/src/routes/components/tabs/index.tsx
index 9b9cd92e06..4e6d75e391 100755
--- a/website/src/routes/components/tabs/index.tsx
+++ b/website/src/routes/components/tabs/index.tsx
@@ -1,14 +1,6 @@
-import React from 'react';
-import { Tabs, Divider, Button } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-tabs/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('uiw/node_modules/@uiw/react-tabs/README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/components/tag/index.tsx b/website/src/routes/components/tag/index.tsx
index e575fb95c9..4ad5131017 100755
--- a/website/src/routes/components/tag/index.tsx
+++ b/website/src/routes/components/tag/index.tsx
@@ -1,27 +1,6 @@
-import React from 'react';
-import { Tag, Divider, Dropdown, Checkbox, Menu, Button, Input, Icon, Row, Col } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-tag/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
export default function Page() {
- return (
- {
- const md = await import('uiw/node_modules/@uiw/react-tag/README.md');
- return md.default || md;
- }}
- />
- );
+ return ;
}
diff --git a/website/src/routes/components/textarea/index.tsx b/website/src/routes/components/textarea/index.tsx
index 3b99dd8324..9963f6870f 100755
--- a/website/src/routes/components/textarea/index.tsx
+++ b/website/src/routes/components/textarea/index.tsx
@@ -1,14 +1,6 @@
-import React from 'react';
-import { Textarea, Divider, Icon, Form, Row, Col, Button, Notify } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-textarea/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('uiw/node_modules/@uiw/react-textarea/README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/components/time-picker/index.tsx b/website/src/routes/components/time-picker/index.tsx
index bcf06970de..370f1bce32 100755
--- a/website/src/routes/components/time-picker/index.tsx
+++ b/website/src/routes/components/time-picker/index.tsx
@@ -1,14 +1,6 @@
-import React from 'react';
-import { TimePicker, formatter, Notify, Button, Form, Row, Col } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-time-picker/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('uiw/node_modules/@uiw/react-time-picker/README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/components/tooltip/index.tsx b/website/src/routes/components/tooltip/index.tsx
index 0c9053a212..8d921271c3 100755
--- a/website/src/routes/components/tooltip/index.tsx
+++ b/website/src/routes/components/tooltip/index.tsx
@@ -1,14 +1,6 @@
-import React from 'react';
-import { Tooltip, OverlayTrigger, Switch, Button, Input, Divider } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-tooltip/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('uiw/node_modules/@uiw/react-tooltip/README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/components/transfer/index.tsx b/website/src/routes/components/transfer/index.tsx
index e481270814..976bbe7c0f 100644
--- a/website/src/routes/components/transfer/index.tsx
+++ b/website/src/routes/components/transfer/index.tsx
@@ -1,14 +1,6 @@
-import React from 'react';
-import { Form, Button, TreeChecked, Transfer, Row, Col, Card, Icon } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-transfer/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('uiw/node_modules/@uiw/react-transfer/README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/components/tree-checked/index.tsx b/website/src/routes/components/tree-checked/index.tsx
index 70cf8e806f..40c1c0c75b 100644
--- a/website/src/routes/components/tree-checked/index.tsx
+++ b/website/src/routes/components/tree-checked/index.tsx
@@ -1,14 +1,6 @@
-import React, { useRef } from 'react';
-import Markdown from '../../../components/Markdown';
-import { Form, Input, Row, Col, TreeChecked, Slider, Button, Notify } from 'uiw';
+import data from '@uiw/react-tree-checked/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('uiw/node_modules/@uiw/react-tree-checked/README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/components/tree/index.tsx b/website/src/routes/components/tree/index.tsx
index 754892eefc..eb6814ebeb 100755
--- a/website/src/routes/components/tree/index.tsx
+++ b/website/src/routes/components/tree/index.tsx
@@ -1,14 +1,6 @@
-import React from 'react';
-import { Tree, Row, Col, Card, Icon, Form, Button } from 'uiw';
-import Markdown from '../../../components/Markdown';
+import data from '@uiw/react-tree/README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('uiw/node_modules/@uiw/react-tree/README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/extensions/index.tsx b/website/src/routes/extensions/index.tsx
index e0bdad23f5..1475a10727 100644
--- a/website/src/routes/extensions/index.tsx
+++ b/website/src/routes/extensions/index.tsx
@@ -1,12 +1,6 @@
-import React from 'react';
-import Markdown from '../../components/Markdown';
+import data from './README.md';
+import Markdown from '../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('./README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/guide/changelog/index.tsx b/website/src/routes/guide/changelog/index.tsx
index da23dc1d46..1e77b3c3e6 100755
--- a/website/src/routes/guide/changelog/index.tsx
+++ b/website/src/routes/guide/changelog/index.tsx
@@ -1,12 +1,8 @@
-import React from 'react';
-import Markdown from '../../../components/Markdown';
+import data from './README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('./README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return (
+
+ );
+}
diff --git a/website/src/routes/guide/create-react-app/index.tsx b/website/src/routes/guide/create-react-app/index.tsx
index 3a5c331f47..a958838aa7 100755
--- a/website/src/routes/guide/create-react-app/index.tsx
+++ b/website/src/routes/guide/create-react-app/index.tsx
@@ -1,12 +1,11 @@
-import React from 'react';
-import Markdown from '../../../components/Markdown';
+import data from './README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('./README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return (
+
+ );
+}
diff --git a/website/src/routes/guide/docs/index.tsx b/website/src/routes/guide/docs/index.tsx
index ccf8e7d655..424343ed69 100755
--- a/website/src/routes/guide/docs/index.tsx
+++ b/website/src/routes/guide/docs/index.tsx
@@ -1,12 +1,6 @@
-import React from 'react';
-import Markdown from '../../../components/Markdown';
+import data from './README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('./README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/guide/import/index.tsx b/website/src/routes/guide/import/index.tsx
index 279861ca1c..b1fd53d71d 100644
--- a/website/src/routes/guide/import/index.tsx
+++ b/website/src/routes/guide/import/index.tsx
@@ -1,12 +1,8 @@
-import React from 'react';
-import Markdown from '../../../components/Markdown';
+import data from './README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('./README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return (
+
+ );
+}
diff --git a/website/src/routes/guide/kkt/index.tsx b/website/src/routes/guide/kkt/index.tsx
index 567ecf0291..8c7a90f64b 100755
--- a/website/src/routes/guide/kkt/index.tsx
+++ b/website/src/routes/guide/kkt/index.tsx
@@ -1,12 +1,6 @@
-import React from 'react';
-import Markdown from '../../../components/Markdown';
+import data from './README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('./README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return ;
+}
diff --git a/website/src/routes/guide/quick-start/index.tsx b/website/src/routes/guide/quick-start/index.tsx
index deef874ac9..b033caa45d 100755
--- a/website/src/routes/guide/quick-start/index.tsx
+++ b/website/src/routes/guide/quick-start/index.tsx
@@ -1,12 +1,11 @@
-import React from 'react';
-import Markdown from '../../../components/Markdown';
+import data from './README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('./README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return (
+
+ );
+}
diff --git a/website/src/routes/guide/recommendation/index.tsx b/website/src/routes/guide/recommendation/index.tsx
index d4fbe67ecf..14e50a42c2 100755
--- a/website/src/routes/guide/recommendation/index.tsx
+++ b/website/src/routes/guide/recommendation/index.tsx
@@ -1,12 +1,11 @@
-import React from 'react';
-import Markdown from '../../../components/Markdown';
+import data from './README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('./README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return (
+
+ );
+}
diff --git a/website/src/routes/guide/vscode/index.tsx b/website/src/routes/guide/vscode/index.tsx
index 097f9721bc..5792b89bbd 100644
--- a/website/src/routes/guide/vscode/index.tsx
+++ b/website/src/routes/guide/vscode/index.tsx
@@ -1,12 +1,8 @@
-import React from 'react';
-import Markdown from '../../../components/Markdown';
+import data from './README.md';
+import Markdown from '../../../components/Markdown/Markdown';
-export default () => (
- {
- const md = await import('./README.md');
- return md.default || md;
- }}
- />
-);
+export default function Page() {
+ return (
+
+ );
+}