Socket
Socket
Sign inDemoInstall

@uiw/react-button

Package Overview
Dependencies
Maintainers
2
Versions
172
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uiw/react-button - npm Package Compare versions

Comparing version 4.21.18 to 4.21.19

6

package.json
{
"name": "@uiw/react-button",
"version": "4.21.18",
"version": "4.21.19",
"description": "Button component",

@@ -47,5 +47,5 @@ "author": "Kenny Wong <wowohoo@qq.com>",

"dependencies": {
"@uiw/react-icon": "^4.21.18",
"@uiw/utils": "^4.21.18"
"@uiw/react-icon": "^4.21.19",
"@uiw/utils": "^4.21.19"
}
}

700

README.md

@@ -19,43 +19,9 @@ Button 按钮

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview
import React from 'react';
import { Button, Divider, Icon } from 'uiw';
ReactDOM.render(
<div>
<Button type="primary">主要按钮</Button>
<Button type="success">成功按钮</Button>
<Button type="warning">警告按钮</Button>
<Button type="danger">错误按钮</Button>
<Button type="light">亮按钮</Button>
<Button type="dark">暗按钮</Button>
<Divider />
<Button basic type="primary">主要按钮</Button>
<Button basic type="success">成功按钮</Button>
<Button basic type="warning">警告按钮</Button>
<Button basic type="danger">错误按钮</Button>
<Button basic type="light">亮按钮</Button>
<Button basic type="dark">暗按钮</Button>
<Divider />
<Button>Normal</Button>
<Button disabled>Disabled</Button>
<Button type="primary" active>Button</Button>
<Button type="primary" size="small">more <Icon type="down" /></Button>
<Button type="link"> (超连接样式)link </Button>
</div>,
_mount_
);
```
### 按钮组
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
import { Button, Divider, ButtonGroup } from 'uiw';
ReactDOM.render(
<div>
<ButtonGroup>
export default function Demo() {
return(
<div>
<Button type="primary">主要按钮</Button>

@@ -67,58 +33,91 @@ <Button type="success">成功按钮</Button>

<Button type="dark">暗按钮</Button>
</ButtonGroup>
<ButtonGroup style={{ marginTop: 5 }}>
<Button size="small" type="primary">按钮</Button>
<Button size="small" type="primary">按钮</Button>
<Button size="small" type="primary">按钮</Button>
<Button size="small" type="primary">按钮</Button>
</ButtonGroup>
<ButtonGroup style={{ marginTop: 5 }}>
<Button type="light">按钮</Button>
<Button type="light">按钮</Button>
<Button type="light">按钮</Button>
<Button type="light">按钮</Button>
</ButtonGroup>
<Divider style={{ maxWidth: 220 }}>添加图标</Divider>
<ButtonGroup>
<Button icon="copy" type="primary">复制</Button>
<Button icon="delete" type="success">删除</Button>
<Button icon="file-add" type="warning">添加文件</Button>
<Button icon="map" type="danger">地图</Button>
<Button icon="linux" type="light">Linux</Button>
<Button icon="apple" type="dark">Apple</Button>
</ButtonGroup>
<ButtonGroup style={{ marginTop: 5 }}>
<Button icon="copy" type="primary">复制</Button>
<Button icon="delete" type="primary">删除</Button>
<Button icon="file-add" type="primary">添加文件</Button>
<Button icon="map" type="primary">地图</Button>
<Button icon="linux" type="primary">Linux</Button>
<Button icon="apple" type="primary">Apple</Button>
</ButtonGroup>
<ButtonGroup style={{ marginTop: 5 }}>
<Button icon="copy">复制</Button>
<Button icon="delete">删除</Button>
<Button icon="file-add">添加文件</Button>
<Button icon="map">地图</Button>
<Button icon="linux">Linux</Button>
<Button icon="apple">Apple</Button>
</ButtonGroup>
<ButtonGroup style={{ marginTop: 5 }}>
<Button icon="copy" />
<Button icon="delete" />
<Button icon="file-add" />
<Button icon="map" />
<Button icon="linux" />
<Button icon="apple" />
</ButtonGroup>
</div>,
_mount_
);
<Divider />
<Button basic type="primary">主要按钮</Button>
<Button basic type="success">成功按钮</Button>
<Button basic type="warning">警告按钮</Button>
<Button basic type="danger">错误按钮</Button>
<Button basic type="light">亮按钮</Button>
<Button basic type="dark">暗按钮</Button>
<Divider />
<Button>Normal</Button>
<Button disabled>Disabled</Button>
<Button type="primary" active>Button</Button>
<Button type="primary" size="small">more <Icon type="down" /></Button>
<Button type="link"> (超连接样式)link </Button>
</div>
);
}
```
### 按钮组
```jsx mdx:preview
import React from 'react';
import { Button, Divider, ButtonGroup } from 'uiw';
export default function Demo() {
return(
<div>
<ButtonGroup>
<Button type="primary">主要按钮</Button>
<Button type="success">成功按钮</Button>
<Button type="warning">警告按钮</Button>
<Button type="danger">错误按钮</Button>
<Button type="light">亮按钮</Button>
<Button type="dark">暗按钮</Button>
</ButtonGroup>
<ButtonGroup style={{ marginTop: 5 }}>
<Button size="small" type="primary">按钮</Button>
<Button size="small" type="primary">按钮</Button>
<Button size="small" type="primary">按钮</Button>
<Button size="small" type="primary">按钮</Button>
</ButtonGroup>
<ButtonGroup style={{ marginTop: 5 }}>
<Button type="light">按钮</Button>
<Button type="light">按钮</Button>
<Button type="light">按钮</Button>
<Button type="light">按钮</Button>
</ButtonGroup>
<Divider style={{ maxWidth: 220 }}>添加图标</Divider>
<ButtonGroup>
<Button icon="copy" type="primary">复制</Button>
<Button icon="delete" type="success">删除</Button>
<Button icon="file-add" type="warning">添加文件</Button>
<Button icon="map" type="danger">地图</Button>
<Button icon="linux" type="light">Linux</Button>
<Button icon="apple" type="dark">Apple</Button>
</ButtonGroup>
<ButtonGroup style={{ marginTop: 5 }}>
<Button icon="copy" type="primary">复制</Button>
<Button icon="delete" type="primary">删除</Button>
<Button icon="file-add" type="primary">添加文件</Button>
<Button icon="map" type="primary">地图</Button>
<Button icon="linux" type="primary">Linux</Button>
<Button icon="apple" type="primary">Apple</Button>
</ButtonGroup>
<ButtonGroup style={{ marginTop: 5 }}>
<Button icon="copy">复制</Button>
<Button icon="delete">删除</Button>
<Button icon="file-add">添加文件</Button>
<Button icon="map">地图</Button>
<Button icon="linux">Linux</Button>
<Button icon="apple">Apple</Button>
</ButtonGroup>
<ButtonGroup style={{ marginTop: 5 }}>
<Button icon="copy" />
<Button icon="delete" />
<Button icon="file-add" />
<Button icon="map" />
<Button icon="linux" />
<Button icon="apple" />
</ButtonGroup>
</div>
);
}
```
### 图标按钮
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview
import React from 'react';
import { Button, Icon, Divider } from 'uiw';

@@ -131,23 +130,24 @@

ReactDOM.render(
<div>
<Button icon="weibo" type="primary">主要按钮</Button>
<Button icon="chrome" type="success">成功按钮</Button>
<Button icon="taobao" type="warning">警告按钮</Button>
<Button icon="weibo" type="danger" />
<Button type="danger">
<Icon type="reload" spin={true} />
<span>错误<span>按钮</span></span>
<Icon type="weibo" />
</Button>
<Button icon="chrome" type="light">亮按钮</Button>
<Button icon="apple" type="dark">暗按钮</Button>
<Button icon={chat} type="dark">暗按钮</Button>
<Divider style={{ maxWidth: 220 }}>GitHub</Divider>
<Button icon={open} type="success">Open</Button>
<Button icon={merged} type="light" style={{ backgroundColor: '#6f42c1', color: '#fff' }}>Merged</Button>
<Button icon={closed} type="danger">Closed</Button>
</div>,
_mount_
);
export default function Demo() {
return(
<div>
<Button icon="weibo" type="primary">主要按钮</Button>
<Button icon="chrome" type="success">成功按钮</Button>
<Button icon="taobao" type="warning">警告按钮</Button>
<Button icon="weibo" type="danger" />
<Button type="danger">
<Icon type="reload" spin={true} />
<span>错误<span>按钮</span></span>
<Icon type="weibo" />
</Button>
<Button icon="chrome" type="light">亮按钮</Button>
<Button icon="apple" type="dark">暗按钮</Button>
<Button icon={chat} type="dark">暗按钮</Button>
<Divider style={{ maxWidth: 220 }}>GitHub</Divider>
<Button icon={open} type="success">Open</Button>
<Button icon={merged} type="light" style={{ backgroundColor: '#6f42c1', color: '#fff' }}>Merged</Button>
<Button icon={closed} type="danger">Closed</Button>
</div>
);
}
```

@@ -157,28 +157,28 @@

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview
import React from 'react';
import { Button, Icon, Divider } from 'uiw';
ReactDOM.render(
<div>
<Button type="danger">
<Icon type="reload" spin={true} />
<span>错误<span>按钮</span></span>
<Icon type="weibo" />
</Button>
<Button loading type="primary">主要按钮</Button>
<Button loading type="success">成功按钮</Button>
<Button loading type="warning">警告按钮</Button>
<Button loading type="danger">错误按钮</Button>
<Button loading type="light">亮按钮</Button>
<Button loading type="dark">暗按钮</Button>
<Button loading type="danger">亮按钮</Button>
<Divider style={{ maxWidth: 220 }}>Size</Divider>
<Button loading size="small" type="primary">主要按钮</Button>
<Button loading size="default" type="success">成功按钮</Button>
<Button loading size="large" type="warning">警告按钮</Button>
</div>,
_mount_
);
export default function Demo() {
return(
<div>
<Button type="danger">
<Icon type="reload" spin={true} />
<span>错误<span>按钮</span></span>
<Icon type="weibo" />
</Button>
<Button loading type="primary">主要按钮</Button>
<Button loading type="success">成功按钮</Button>
<Button loading type="warning">警告按钮</Button>
<Button loading type="danger">错误按钮</Button>
<Button loading type="light">亮按钮</Button>
<Button loading type="dark">暗按钮</Button>
<Button loading type="danger">亮按钮</Button>
<Divider style={{ maxWidth: 220 }}>Size</Divider>
<Button loading size="small" type="primary">主要按钮</Button>
<Button loading size="default" type="success">成功按钮</Button>
<Button loading size="large" type="warning">警告按钮</Button>
</div>
);
}
```

@@ -188,64 +188,64 @@

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview
import React from 'react';
import { Button, ButtonGroup, Divider } from 'uiw';
ReactDOM.render(
<div>
<ButtonGroup>
<Button disabled type="primary">主要按钮</Button>
<Button disabled type="success">成功按钮</Button>
<Button disabled type="warning">警告按钮</Button>
<Button disabled type="danger">错误按钮</Button>
<Button disabled type="light">亮按钮</Button>
<Button disabled type="dark">暗按钮</Button>
</ButtonGroup>
<ButtonGroup style={{ marginTop: 5 }}>
<Button disabled type="primary">按钮</Button>
<Button disabled type="primary">按钮</Button>
<Button disabled type="primary">按钮</Button>
<Button disabled type="primary">按钮</Button>
</ButtonGroup>
<ButtonGroup style={{ marginTop: 5 }}>
<Button disabled type="light">按钮</Button>
<Button disabled type="light">按钮</Button>
<Button type="light">按钮</Button>
<Button disabled type="light">按钮</Button>
</ButtonGroup>
<Divider style={{ maxWidth: 220 }}>添加图标</Divider>
<ButtonGroup>
<Button disabled icon="copy" type="primary">复制</Button>
<Button disabled icon="delete" type="success">删除</Button>
<Button disabled icon="file-add" type="warning">添加文件</Button>
<Button disabled icon="map" type="danger">地图</Button>
<Button disabled icon="linux" type="light">Linux</Button>
<Button disabled icon="apple" type="dark">Apple</Button>
</ButtonGroup>
<ButtonGroup style={{ marginTop: 5 }}>
<Button disabled icon="copy" type="primary">复制</Button>
<Button disabled icon="delete" type="primary">删除</Button>
<Button icon="file-add" type="primary">添加文件</Button>
<Button disabled icon="map" type="primary">地图</Button>
<Button disabled icon="linux" type="primary">Linux</Button>
<Button disabled icon="apple" type="primary">Apple</Button>
</ButtonGroup>
<ButtonGroup style={{ marginTop: 5 }}>
<Button disabled icon="copy">复制</Button>
<Button disabled icon="delete">删除</Button>
<Button disabled icon="file-add">添加文件</Button>
<Button disabled icon="map">地图</Button>
<Button disabled icon="linux">Linux</Button>
<Button disabled icon="apple">Apple</Button>
</ButtonGroup>
<div style={{ marginTop: 5 }}>
<Button disabled icon="weibo" basic type="primary" />
<Button disabled icon="chrome" basic type="success" />
<Button disabled icon="taobao" basic type="warning" />
<Button disabled icon="apple" basic type="danger" />
<Button disabled icon="weibo" basic type="dark" />
export default function Demo() {
return(
<div>
<ButtonGroup>
<Button disabled type="primary">主要按钮</Button>
<Button disabled type="success">成功按钮</Button>
<Button disabled type="warning">警告按钮</Button>
<Button disabled type="danger">错误按钮</Button>
<Button disabled type="light">亮按钮</Button>
<Button disabled type="dark">暗按钮</Button>
</ButtonGroup>
<ButtonGroup style={{ marginTop: 5 }}>
<Button disabled type="primary">按钮</Button>
<Button disabled type="primary">按钮</Button>
<Button disabled type="primary">按钮</Button>
<Button disabled type="primary">按钮</Button>
</ButtonGroup>
<ButtonGroup style={{ marginTop: 5 }}>
<Button disabled type="light">按钮</Button>
<Button disabled type="light">按钮</Button>
<Button type="light">按钮</Button>
<Button disabled type="light">按钮</Button>
</ButtonGroup>
<Divider style={{ maxWidth: 220 }}>添加图标</Divider>
<ButtonGroup>
<Button disabled icon="copy" type="primary">复制</Button>
<Button disabled icon="delete" type="success">删除</Button>
<Button disabled icon="file-add" type="warning">添加文件</Button>
<Button disabled icon="map" type="danger">地图</Button>
<Button disabled icon="linux" type="light">Linux</Button>
<Button disabled icon="apple" type="dark">Apple</Button>
</ButtonGroup>
<ButtonGroup style={{ marginTop: 5 }}>
<Button disabled icon="copy" type="primary">复制</Button>
<Button disabled icon="delete" type="primary">删除</Button>
<Button icon="file-add" type="primary">添加文件</Button>
<Button disabled icon="map" type="primary">地图</Button>
<Button disabled icon="linux" type="primary">Linux</Button>
<Button disabled icon="apple" type="primary">Apple</Button>
</ButtonGroup>
<ButtonGroup style={{ marginTop: 5 }}>
<Button disabled icon="copy">复制</Button>
<Button disabled icon="delete">删除</Button>
<Button disabled icon="file-add">添加文件</Button>
<Button disabled icon="map">地图</Button>
<Button disabled icon="linux">Linux</Button>
<Button disabled icon="apple">Apple</Button>
</ButtonGroup>
<div style={{ marginTop: 5 }}>
<Button disabled icon="weibo" basic type="primary" />
<Button disabled icon="chrome" basic type="success" />
<Button disabled icon="taobao" basic type="warning" />
<Button disabled icon="apple" basic type="danger" />
<Button disabled icon="weibo" basic type="dark" />
</div>
</div>
</div>,
_mount_
);
);
}
```

@@ -255,46 +255,46 @@

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview
import React from 'react';
import { Button, ButtonGroup, Row, Col } from 'uiw';
ReactDOM.render(
<Row gutter={10}>
<Col style={{ maxWidth: 120 }}>
<ButtonGroup vertical>
<Button type="primary">按钮</Button>
<Button type="primary">按钮</Button>
<Button type="primary">按钮</Button>
<Button type="primary">按钮</Button>
</ButtonGroup>
</Col>
<Col style={{ maxWidth: 120 }}>
<ButtonGroup vertical>
<Button type="success">按钮</Button>
<Button disabled type="success">按钮</Button>
<Button type="success">按钮</Button>
<Button type="success">按钮</Button>
</ButtonGroup>
</Col>
<Col style={{ maxWidth: 120 }}>
<ButtonGroup vertical>
<Button type="light">按钮</Button>
<Button type="light">按钮</Button>
<Button type="light">按钮</Button>
<Button type="light">按钮</Button>
</ButtonGroup>
</Col>
<Col style={{ maxWidth: 120 }}>
<ButtonGroup vertical>
<Button type="primary">主要按钮</Button>
<Button type="success">成功按钮</Button>
<Button type="warning">警告按钮</Button>
<Button type="danger">错误按钮</Button>
<Button type="light">亮按钮</Button>
<Button type="dark">暗按钮</Button>
</ButtonGroup>
</Col>
</Row>,
_mount_
);
export default function Demo() {
return(
<Row gutter={10}>
<Col style={{ maxWidth: 120 }}>
<ButtonGroup vertical>
<Button type="primary">按钮</Button>
<Button type="primary">按钮</Button>
<Button type="primary">按钮</Button>
<Button type="primary">按钮</Button>
</ButtonGroup>
</Col>
<Col style={{ maxWidth: 120 }}>
<ButtonGroup vertical>
<Button type="success">按钮</Button>
<Button disabled type="success">按钮</Button>
<Button type="success">按钮</Button>
<Button type="success">按钮</Button>
</ButtonGroup>
</Col>
<Col style={{ maxWidth: 120 }}>
<ButtonGroup vertical>
<Button type="light">按钮</Button>
<Button type="light">按钮</Button>
<Button type="light">按钮</Button>
<Button type="light">按钮</Button>
</ButtonGroup>
</Col>
<Col style={{ maxWidth: 120 }}>
<ButtonGroup vertical>
<Button type="primary">主要按钮</Button>
<Button type="success">成功按钮</Button>
<Button type="warning">警告按钮</Button>
<Button type="danger">错误按钮</Button>
<Button type="light">亮按钮</Button>
<Button type="dark">暗按钮</Button>
</ButtonGroup>
</Col>
</Row>
);
}
```

@@ -306,32 +306,32 @@

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview
import React from 'react';
import { Button, Divider } from 'uiw';
ReactDOM.render(
<div>
<Button basic type="primary">主要按钮</Button>
<Button basic type="success">成功按钮</Button>
<Button basic type="warning">警告按钮</Button>
<Button basic type="danger">错误按钮</Button>
<Button basic type="light">亮按钮</Button>
<Button basic type="dark">暗按钮</Button>
<Divider style={{ maxWidth: 220 }}>激活</Divider>
<Button basic active type="primary">主要按钮</Button>
<Button basic active type="success">成功按钮</Button>
<Button basic active type="warning">警告按钮</Button>
<Button basic active type="danger">错误按钮</Button>
<Button basic active type="light">亮按钮</Button>
<Button basic active type="dark">暗按钮</Button>
<Divider style={{ maxWidth: 220 }}>禁用</Divider>
<Button basic disabled type="primary">主要按钮</Button>
<Button basic disabled type="success">成功按钮</Button>
<Button basic disabled type="warning">警告按钮</Button>
<Button basic disabled type="danger">错误按钮</Button>
<Button basic disabled type="light">亮按钮</Button>
<Button basic disabled type="dark">暗按钮</Button>
</div>,
_mount_
);
export default function Demo() {
return(
<div>
<Button basic type="primary">主要按钮</Button>
<Button basic type="success">成功按钮</Button>
<Button basic type="warning">警告按钮</Button>
<Button basic type="danger">错误按钮</Button>
<Button basic type="light">亮按钮</Button>
<Button basic type="dark">暗按钮</Button>
<Divider style={{ maxWidth: 220 }}>激活</Divider>
<Button basic active type="primary">主要按钮</Button>
<Button basic active type="success">成功按钮</Button>
<Button basic active type="warning">警告按钮</Button>
<Button basic active type="danger">错误按钮</Button>
<Button basic active type="light">亮按钮</Button>
<Button basic active type="dark">暗按钮</Button>
<Divider style={{ maxWidth: 220 }}>禁用</Divider>
<Button basic disabled type="primary">主要按钮</Button>
<Button basic disabled type="success">成功按钮</Button>
<Button basic disabled type="warning">警告按钮</Button>
<Button basic disabled type="danger">错误按钮</Button>
<Button basic disabled type="light">亮按钮</Button>
<Button basic disabled type="dark">暗按钮</Button>
</div>
);
}
```

@@ -343,5 +343,4 @@

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview
import React from 'react';
import { Button, Divider } from 'uiw';

@@ -355,19 +354,20 @@

ReactDOM.render(
<div>
<Button icon="weibo" basic type="primary">主要按钮</Button>
<Button icon="chrome" basic type="success">成功按钮</Button>
<Button icon="taobao" basic type="warning">警告按钮</Button>
<Button icon="apple" basic type="danger">错误按钮</Button>
<Button icon="weibo" basic type="dark">暗按钮</Button>
<Divider />
<Button icon="weibo" basic type="primary" />
<Button icon="chrome" basic type="success" />
<Button icon="taobao" basic type="warning" />
<Button icon="apple" basic type="danger" />
<Button icon="weibo" basic type="dark" />
<Button icon="weibo" basic type="dark" />
</div>,
_mount_
);
export default function Demo() {
return(
<div>
<Button icon="weibo" basic type="primary">主要按钮</Button>
<Button icon="chrome" basic type="success">成功按钮</Button>
<Button icon="taobao" basic type="warning">警告按钮</Button>
<Button icon="apple" basic type="danger">错误按钮</Button>
<Button icon="weibo" basic type="dark">暗按钮</Button>
<Divider />
<Button icon="weibo" basic type="primary" />
<Button icon="chrome" basic type="success" />
<Button icon="taobao" basic type="warning" />
<Button icon="apple" basic type="danger" />
<Button icon="weibo" basic type="dark" />
<Button icon="weibo" basic type="dark" />
</div>
);
}
```

@@ -377,19 +377,19 @@

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview
import React from 'react';
import { Button } from 'uiw';
ReactDOM.render(
<div>
<Button active type="primary">主要按钮</Button>
<Button active type="success">成功按钮</Button>
<Button active type="warning">警告按钮</Button>
<Button active type="danger">错误按钮</Button>
<Button active type="light">亮按钮</Button>
<Button active type="dark">暗按钮</Button>
<Button active type="link"> (超连接样式)link </Button>
</div>,
_mount_
);
export default function Demo() {
return(
<div>
<Button active type="primary">主要按钮</Button>
<Button active type="success">成功按钮</Button>
<Button active type="warning">警告按钮</Button>
<Button active type="danger">错误按钮</Button>
<Button active type="light">亮按钮</Button>
<Button active type="dark">暗按钮</Button>
<Button active type="link"> (超连接样式)link </Button>
</div>
);
}
```

@@ -399,19 +399,19 @@

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview
import React from 'react';
import { Button } from 'uiw';
ReactDOM.render(
<div>
<Button disabled type="primary">主要按钮</Button>
<Button disabled type="success">成功按钮</Button>
<Button disabled type="warning">警告按钮</Button>
<Button disabled type="danger">错误按钮</Button>
<Button disabled type="light">亮按钮</Button>
<Button disabled type="dark">暗按钮</Button>
<Button disabled type="link"> (超连接样式)link </Button>
</div>,
_mount_
);
export default function Demo() {
return(
<div>
<Button disabled type="primary">主要按钮</Button>
<Button disabled type="success">成功按钮</Button>
<Button disabled type="warning">警告按钮</Button>
<Button disabled type="danger">错误按钮</Button>
<Button disabled type="light">亮按钮</Button>
<Button disabled type="dark">暗按钮</Button>
<Button disabled type="link"> (超连接样式)link </Button>
</div>
);
}
```

@@ -422,20 +422,20 @@

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview
import React from 'react';
import { Button, Row, Col } from 'uiw';
ReactDOM.render(
<Row gutter={10}>
<Col style={{ maxWidth: 320 }}>
<Button block type="primary">主要按钮</Button>
<Button block type="success">成功按钮</Button>
<Button block type="warning">警告按钮</Button>
<Button block type="danger">错误按钮</Button>
<Button block type="light">亮按钮</Button>
<Button block type="dark">暗按钮</Button>
</Col>
</Row>,
_mount_
);
export default function Demo() {
return(
<Row gutter={10}>
<Col style={{ maxWidth: 320 }}>
<Button block type="primary">主要按钮</Button>
<Button block type="success">成功按钮</Button>
<Button block type="warning">警告按钮</Button>
<Button block type="danger">错误按钮</Button>
<Button block type="light">亮按钮</Button>
<Button block type="dark">暗按钮</Button>
</Col>
</Row>
);
}
```

@@ -447,23 +447,23 @@

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview
import React from 'react';
import { Button, Divider } from 'uiw';
ReactDOM.render(
<div>
<Button size="small" type="primary">主要按钮</Button>
<Button size="default" type="success">成功按钮</Button>
<Button size="large" type="warning">警告按钮</Button>
<Button size="small" type="danger">错误按钮</Button>
<Button size="default" type="light">亮按钮</Button>
<Button size="large" type="dark">暗按钮</Button>
<Divider />
<Button icon="weibo" size="small" type="primary">微博</Button>
<Button icon="chrome" size="small" type="success">谷歌浏览器</Button>
<Button icon="chrome" type="success">谷歌浏览器</Button>
<Button icon="apple" size="large" type="warning">淘宝</Button>
</div>,
_mount_
);
export default function Demo() {
return(
<div>
<Button size="small" type="primary">主要按钮</Button>
<Button size="default" type="success">成功按钮</Button>
<Button size="large" type="warning">警告按钮</Button>
<Button size="small" type="danger">错误按钮</Button>
<Button size="default" type="light">亮按钮</Button>
<Button size="large" type="dark">暗按钮</Button>
<Divider />
<Button icon="weibo" size="small" type="primary">微博</Button>
<Button icon="chrome" size="small" type="success">谷歌浏览器</Button>
<Button icon="chrome" type="success">谷歌浏览器</Button>
<Button icon="apple" size="large" type="warning">淘宝</Button>
</div>
);
}
```

@@ -470,0 +470,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc