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( -
- } /> - U - - U - -
, - _mount_ -); +export default function Demo() { + return ( +
+ } /> + U + + U + +
+ ) +} ``` ## 图片支持 在组件上使用`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( -
- - Home - Library - Data - - - - Home - +}>Home - }>Icon - Library - Data - -
, - _mount_ -); +```jsx mdx:preview +import React from 'react'; +import { Breadcrumb, Divider, Icon } from 'uiw'; + +export default function Demo() { + return( +
+ + Home + Library + Data + + + + Home + +}>Home + }>Icon + Library + Data + +
+ ); +} ``` ### 带有图标和连接的 图标放在文字前面。注意文字要使用 `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( -
- - - - - - Library - - - Chart - - - Chart - - Data - -
, - _mount_ -); +export default function Demo() { + return( +
+ + + + + + Library + + + Chart + + + Chart + + Data + +
+ ); +} ``` ## 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( -
- - - - - - - - - - - - - - - - - - - - - 添加图标 - - - - - - - - - - - - - - - - - - - - - - - - -
- + + + + + + + + + + + + + + + + + + + 添加图标 + + + + + + + + + + + + + + + + + + + + + + + + +
+
-
, - _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://uiwjs.github.io

-
-
, - _mount_ -); +export default function Demo() { + return( + +
+ example +
+
+

我爱漂亮妹妹

+

https://uiwjs.github.io

+
+
+ ) +} ``` ## 添加页脚 - -```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://uiwjs.github.io

-
-
, - _mount_ -); +export default function Demo() { + return( + +
+ example +
+
+

我爱漂亮妹妹

+

https://uiwjs.github.io

+
+
+ ) +} ``` ## 激活 设置属性 `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://uiwjs.github.io

-
-
, - _mount_ -); +export default function Demo() { + return( + +
+ example +
+
+

我爱漂亮妹妹

+

https://uiwjs.github.io

+
+
+ ); +} ``` ## 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( -
- - - - + + - - - - - - - - - - - - - - - - - - - - - - -
, - _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( -
- - - - + + - - - - - - - - - - - - - - - - - - - - -
, - _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( -
- { console.log('item', item); }} /> -
, - _mount_ -); + +export default function Demo() { + return( +
+ { 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 = () => ( -
{ - const errorObj = {}; - if (current.userName.startsWith('u')) { - errorObj.userName = `姓名 ${current.userName} 不能以 ‘u’ 开头`; - } - if (!current.checkboxOne) { - errorObj.checkboxOne = '一个多选条件 为必填'; - } - if (!current.terms) { - errorObj.terms = '必须统一服务条款'; - } - if(Object.keys(errorObj).length > 0) { - const err = new Error(); - err.filed = errorObj; - throw err; - } - Notify.success({ - title: '提交成功!', - description: `姓名为:${current.userName},提交完成,将自动填充初始化值!`, - }); - }} - onSubmitError={(error) => { - if (error.filed) { - return { ...error.filed }; - } - return null; - }} - fields={{ - userName: { - initialValue: 'uiw', - label: '姓名', - children: , - help: '以“u”开头的名字将在此处显示错误信息' - }, - age: { - initialValue: '9', - label: '年龄', - children: - }, - checkbox: { - initialValue: ['四川菜'], - label: '选择你想吃的菜', - children: ( - -
菜系
- 四川菜 - 湖北菜 - 西北菜 - 新疆菜 - 东北菜 -
家常菜
- 红烧武昌鱼 - 麻婆豆腐 - 北京烤鸭 -
- ) - }, - checkboxOne: { - inline: true, - label: '一个多选条件', - children: 四川菜 - }, - switch: { - inline: true, - initialValue: true, - label: '开启', - children: - }, - radioGroup: { - inline: true, - initialValue: '男', - label: '单选', - children: ( - - - - 人妖 - 未知 - - ) - }, - textarea: { - initialValue: '', - label: '多行文本输入框', - children: