mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 20:19:44 +08:00
Merge pull request #345 from benjycui/feature-button
feat: button should be a component
This commit is contained in:
偏右
commit
0d2fcf429b
22
components/button/button-group.jsx
Normal file
22
components/button/button-group.jsx
Normal file
@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
|
||||
const prefix = 'ant-btn-group-';
|
||||
|
||||
export default class ButtonGroup extends React.Component {
|
||||
render() {
|
||||
const {size, className, ...others} = this.props;
|
||||
|
||||
let classSet = ['ant-btn-group'];
|
||||
if (size) {
|
||||
classSet.push(prefix + size);
|
||||
}
|
||||
if (className) {
|
||||
classSet.push(className);
|
||||
}
|
||||
|
||||
return <div {...others} className={classSet.join(' ')} />;
|
||||
}
|
||||
}
|
||||
ButtonGroup.propTypes = {
|
||||
size: React.PropTypes.string,
|
||||
};
|
||||
55
components/button/button.jsx
Normal file
55
components/button/button.jsx
Normal file
@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
|
||||
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2,2}$/;
|
||||
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
|
||||
function isString(str) {
|
||||
return typeof str === 'string';
|
||||
}
|
||||
|
||||
const prefix = 'ant-btn-';
|
||||
function updateClassWithProp(classSet, prop) {
|
||||
if (prop) {
|
||||
classSet.push(prefix + prop);
|
||||
}
|
||||
}
|
||||
|
||||
// Insert one space between two chinese characters automatically.
|
||||
function insertSpace(child) {
|
||||
if (isString(child) && isTwoCNChar(child)) {
|
||||
return child.split('').join(' ');
|
||||
}
|
||||
|
||||
if (isString(child.type) && isTwoCNChar(child.props.children)) {
|
||||
return React.cloneElement(child, {},
|
||||
child.props.children.split('').join(' '));
|
||||
}
|
||||
|
||||
return child;
|
||||
}
|
||||
|
||||
export default class Button extends React.Component {
|
||||
render() {
|
||||
const props = this.props;
|
||||
const {type, shape, size, onClick, className, children, ...others} = props;
|
||||
|
||||
let classSet = ['ant-btn'];
|
||||
updateClassWithProp(classSet, type);
|
||||
updateClassWithProp(classSet, shape);
|
||||
updateClassWithProp(classSet, size);
|
||||
if ('loading' in props && props.loading !== false) {
|
||||
classSet.push(prefix + 'loading');
|
||||
}
|
||||
if (className) {
|
||||
classSet.push(className);
|
||||
}
|
||||
|
||||
const kids = React.Children.map(children, insertSpace);
|
||||
|
||||
return <button {...others} type="button" className={classSet.join(' ')} onClick={onClick}>
|
||||
{kids}
|
||||
</button>;
|
||||
}
|
||||
}
|
||||
Button.defaultProps = {
|
||||
onClick() {},
|
||||
};
|
||||
@ -1,29 +1,27 @@
|
||||
# 标准按钮
|
||||
# 按钮类型
|
||||
|
||||
- order: 1
|
||||
- order: 0
|
||||
|
||||
为 `<button>` `<a>` 或 `<input>` 元素添加 `.ant-btn` 类即可使用 ant-design 提供的样式。
|
||||
按钮有三种类型：主按钮、次按钮、幽灵按钮。
|
||||
|
||||
另外，通过使用下面的类可创建带有预定义样式的按钮，我们通过样式来显示重要程度的不同。
|
||||
|
||||
`.ant-btn-primary` `.ant-btn-ghost`
|
||||
|
||||
其中 `.ant-btn` 类定义了按钮的默认样式，语义上代表次按钮。
|
||||
|
||||
**注**: 当按钮文字为两个字时，中间需要**间隔一个字符**。
|
||||
通过设置 `type` 为 `primary` `ghost` 可分别创建主按钮、幽灵按钮，若不设置 `type` 值则为次按钮。不同的样式可以用来区别其重要程度。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Button = antd.Button;
|
||||
|
||||
````html
|
||||
<button class="ant-btn">Button</button>
|
||||
<a href="javascript:;" class="ant-btn" role="button">Link</a>
|
||||
<input class="ant-btn" type="button" value="Input" />
|
||||
<input class="ant-btn" type="submit" value="Submit" />
|
||||
|
||||
<br>
|
||||
|
||||
<!-- Styled Button -->
|
||||
<button class="ant-btn ant-btn-primary">主按钮</button>
|
||||
<button class="ant-btn">次按钮</button>
|
||||
<button class="ant-btn ant-btn-ghost">幽灵按钮</button>
|
||||
React.render(<div>
|
||||
<Button type="primary">主按钮</Button>
|
||||
<Button>次按钮</Button>
|
||||
<Button type="ghost">幽灵按钮</Button>
|
||||
</div>,
|
||||
document.getElementById('components-button-demo-basic'))
|
||||
````
|
||||
|
||||
<style>
|
||||
#components-button-demo-basic .ant-btn {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,78 +1,86 @@
|
||||
# 按钮组合
|
||||
|
||||
- order: 6
|
||||
- order: 5
|
||||
|
||||
将一系列的 `.ant-btn` 放入 `.ant-btn-group` 的容器中。
|
||||
可以将多个 `Button` 放入 `ButtonGroup` 的容器中。
|
||||
|
||||
按钮组合尺寸
|
||||
|
||||
只要给 `.ant-btn-group` 加上 `.ant-btn-group-*` 类，即可设置不同的尺寸，目前支持大中小三种尺寸。
|
||||
通过设置 `size` 为 `lg` `sm` 分别把按钮组合设为大、小尺寸。若不设置 `size`，则尺寸为中。
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
````jsx
|
||||
var Button = antd.Button;
|
||||
var ButtonGroup = antd.ButtonGroup;
|
||||
var Icon = antd.Icon;
|
||||
|
||||
React.render(<div>
|
||||
<h4>基本组合</h4>
|
||||
<div class="ant-btn-group">
|
||||
<button class="ant-btn ant-btn-primary">确 定</button>
|
||||
<button class="ant-btn ant-btn-primary">取 消</button>
|
||||
</div>
|
||||
<div class="ant-btn-group">
|
||||
<button class="ant-btn">左</button>
|
||||
<button class="ant-btn">中</button>
|
||||
<button class="ant-btn">右</button>
|
||||
</div>
|
||||
<div class="ant-btn-group">
|
||||
<button class="ant-btn ant-btn-primary">左</button>
|
||||
<button class="ant-btn ant-btn-ghost">中</button>
|
||||
<button class="ant-btn ant-btn-ghost">中</button>
|
||||
<button class="ant-btn">右</button>
|
||||
</div>
|
||||
<ButtonGroup>
|
||||
<Button type="primary">确定</Button>
|
||||
<Button type="primary">取消</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button>左</Button>
|
||||
<Button>中</Button>
|
||||
<Button>右</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button type="primary">左</Button>
|
||||
<Button type="ghost">中</Button>
|
||||
<Button type="ghost">中</Button>
|
||||
<Button>右</Button>
|
||||
</ButtonGroup>
|
||||
|
||||
<h4>带图标按钮组合 </h4>
|
||||
<div class="ant-btn-group">
|
||||
<button class="ant-btn ant-btn-primary">
|
||||
<span class="anticon anticon-left"></span>
|
||||
<span>后 退</span>
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-primary">
|
||||
<span>前 进</span>
|
||||
<span class="anticon anticon-right"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="ant-btn-group">
|
||||
<button class="ant-btn ant-btn-primary">
|
||||
<span class="anticon anticon-cloud"></span>
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-primary">
|
||||
<span class="anticon anticon-cloud-download"></span>
|
||||
</button>
|
||||
</div>
|
||||
<ButtonGroup>
|
||||
<Button type="primary">
|
||||
<Icon type="left" />
|
||||
<span>后退</span>
|
||||
</Button>
|
||||
<Button type="primary">
|
||||
前进
|
||||
<Icon type="right" />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button type="primary">
|
||||
<Icon type="cloud" />
|
||||
</Button>
|
||||
<Button type="primary">
|
||||
<Icon type="cloud-download" />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
|
||||
<h4>多个组合</h4>
|
||||
<div class="ant-btn-group">
|
||||
<button class="ant-btn ant-btn-ghost">1</button>
|
||||
<button class="ant-btn ant-btn-ghost">2</button>
|
||||
<button class="ant-btn ant-btn-ghost">3</button>
|
||||
<button class="ant-btn ant-btn-ghost">4</button>
|
||||
<button class="ant-btn ant-btn-ghost">
|
||||
<span>前 进</span>
|
||||
<span class="anticon anticon-right"></span>
|
||||
</button>
|
||||
</div>
|
||||
<ButtonGroup>
|
||||
<Button type="ghost">1</Button>
|
||||
<Button type="ghost">2</Button>
|
||||
<Button type="ghost">3</Button>
|
||||
<Button type="ghost">4</Button>
|
||||
<Button type="ghost">
|
||||
<span>前进</span>
|
||||
<Icon type="right" />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
|
||||
<h4>尺寸</h4>
|
||||
<div class="ant-btn-group ant-btn-group-lg">
|
||||
<button class="ant-btn ant-btn-ghost">大</button>
|
||||
<button class="ant-btn ant-btn-ghost">大</button>
|
||||
<button class="ant-btn ant-btn-ghost">大</button>
|
||||
</div>
|
||||
<div class="ant-btn-group">
|
||||
<button class="ant-btn ant-btn-ghost">默 认</button>
|
||||
<button class="ant-btn ant-btn-ghost">默 认</button>
|
||||
<button class="ant-btn ant-btn-ghost">默 认</button>
|
||||
</div>
|
||||
<div class="ant-btn-group ant-btn-group-sm">
|
||||
<button class="ant-btn ant-btn-ghost">小</button>
|
||||
<button class="ant-btn ant-btn-ghost">小</button>
|
||||
<button class="ant-btn ant-btn-ghost">小</button>
|
||||
<ButtonGroup size="lg">
|
||||
<Button type="ghost">大</Button>
|
||||
<Button type="ghost">大</Button>
|
||||
<Button type="ghost">大</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button type="ghost">默认</Button>
|
||||
<Button type="ghost">默认</Button>
|
||||
<Button type="ghost">默认</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup size="sm">
|
||||
<Button type="ghost">小</Button>
|
||||
<Button type="ghost">小</Button>
|
||||
<Button type="ghost">小</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
, document.getElementById('components-button-demo-button-group'));
|
||||
````
|
||||
|
||||
<style>
|
||||
@ -88,4 +96,12 @@
|
||||
.nico-insert-code .ant-btn {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
||||
#components-button-demo-button-group .ant-btn-group {
|
||||
margin-right: 8px;
|
||||
}
|
||||
#components-button-demo-button-group .ant-btn {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,45 +1,58 @@
|
||||
# 图标按钮
|
||||
|
||||
- order: 4
|
||||
- order: 6
|
||||
|
||||
图标一般放在文字前面，也可以单独存在。
|
||||
`Button` 内可以嵌套图标，图标可以放在文字前、后，也可以单独存在。
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
<button class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg">
|
||||
<i class="anticon anticon-search"></i>
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-primary ant-btn-lg">
|
||||
<i class="anticon anticon-search"></i>
|
||||
````jsx
|
||||
var Button = antd.Button;
|
||||
var Icon = antd.Icon;
|
||||
|
||||
React.render(<div>
|
||||
<Button type="primary" shape="circle" size="lg">
|
||||
<Icon type="search" />
|
||||
</Button>
|
||||
<Button type="primary" size="lg">
|
||||
<Icon type="search" />
|
||||
大按钮
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<button class="ant-btn ant-btn-primary ant-btn-circle">
|
||||
<i class="anticon anticon-search"></i>
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-primary">
|
||||
<i class="anticon anticon-search"></i>
|
||||
<Button type="primary" shape="circle">
|
||||
<Icon type="search" />
|
||||
</Button>
|
||||
<Button type="primary">
|
||||
<Icon type="search" />
|
||||
中按钮
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<button class="ant-btn ant-btn-primary ant-btn-circle ant-btn-sm">
|
||||
<i class="anticon anticon-search"></i>
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-primary ant-btn-sm">
|
||||
<i class="anticon anticon-search"></i>
|
||||
<Button type="primary" shape="circle" size="sm">
|
||||
<Icon type="search" />
|
||||
</Button>
|
||||
<Button type="primary" size="sm">
|
||||
<Icon type="search" />
|
||||
小按钮
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<p></p>
|
||||
<br />
|
||||
|
||||
<button class="ant-btn ant-btn-ghost ant-btn-circle-outline ant-btn-lg">
|
||||
<i class="anticon anticon-search"></i>
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-ghost ant-btn-circle-outline">
|
||||
<i class="anticon anticon-search"></i>
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-circle-outline ant-btn-sm">
|
||||
<i class="anticon anticon-search"></i>
|
||||
</button>
|
||||
<Button type="ghost" shape="circle-outline" size="lg">
|
||||
<Icon type="search" />
|
||||
</Button>
|
||||
<Button type="ghost" shape="circle-outline">
|
||||
<Icon type="search" />
|
||||
</Button>
|
||||
<Button type="ghost" shape="circle-outline" size="sm">
|
||||
<Icon type="search" />
|
||||
</Button>
|
||||
</div>,
|
||||
document.getElementById('components-button-demo-icon'));
|
||||
````
|
||||
|
||||
<style>
|
||||
#components-button-demo-icon .ant-btn {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
# 加载中
|
||||
|
||||
- order: 7
|
||||
- order: 4
|
||||
|
||||
加载按钮。最后一个按钮演示点击后进入加载状态。
|
||||
添加 `loading` 属性即可让按钮处于加载状态，最后一个按钮演示点击后进入加载状态。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Button = antd.Button;
|
||||
|
||||
var App = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
@ -19,21 +21,20 @@ var App = React.createClass({
|
||||
});
|
||||
},
|
||||
render() {
|
||||
var loadingClass = this.state.loading ? 'ant-btn-loading' : '';
|
||||
return <div>
|
||||
<button className="ant-btn ant-btn-primary ant-btn-lg ant-btn-loading">
|
||||
<Button type="primary" size="lg" loading>
|
||||
加载中
|
||||
</button>
|
||||
<button className="ant-btn ant-btn-primary ant-btn-loading">
|
||||
</Button>
|
||||
<Button type="primary" loading="true">
|
||||
加载中
|
||||
</button>
|
||||
<button className="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading">
|
||||
</Button>
|
||||
<Button type="primary" size="sm" loading>
|
||||
加载中
|
||||
</button>
|
||||
</Button>
|
||||
<br />
|
||||
<button className={'ant-btn ant-btn-primary ' + loadingClass} onClick={this.enterLoading}>
|
||||
<Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
|
||||
点击变加载
|
||||
</button>
|
||||
</Button>
|
||||
</div>;
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
# 菜单按钮
|
||||
|
||||
- order: 5
|
||||
|
||||
**注**: 下拉按钮的 icon 大小统一成 **10px**。
|
||||
|
||||
> 更多交互，详见 [Dropdown 下拉菜单](http://ant.design/components/dropdown/)。
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
<button class="ant-btn ant-btn-primary ant-btn-menu">
|
||||
<span>菜单按钮</span>
|
||||
<span class="anticon anticon-down"></span>
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-ghost ant-btn-circle ant-btn-menu">
|
||||
<span class="anticon anticon-down"></span>
|
||||
</button>
|
||||
````
|
||||
42
components/button/demo/shape.md
Normal file
42
components/button/demo/shape.md
Normal file
@ -0,0 +1,42 @@
|
||||
# 按钮形状
|
||||
|
||||
- order: 1
|
||||
|
||||
通过设置 `shape` 为 `circle` `circle-outline`，可以把按钮形状设为圆形，并且 `circle-outline` 在 hover 时会有动画效果。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Button = antd.Button;
|
||||
var Icon = antd.Icon;
|
||||
|
||||
React.render(<div>
|
||||
<Button type="primary" shape="circle" size="lg">
|
||||
<Icon type="search" />
|
||||
</Button>
|
||||
<Button type="primary" shape="circle">
|
||||
<Icon type="search" />
|
||||
</Button>
|
||||
<Button type="primary" shape="circle" size="sm">
|
||||
<Icon type="search" />
|
||||
</Button>
|
||||
<br />
|
||||
<Button type="ghost" shape="circle-outline" size="lg">
|
||||
<Icon type="search" />
|
||||
</Button>
|
||||
<Button type="ghost" shape="circle-outline">
|
||||
<Icon type="search" />
|
||||
</Button>
|
||||
<Button type="ghost" shape="circle-outline" size="sm">
|
||||
<Icon type="search" />
|
||||
</Button>
|
||||
</div>
|
||||
, document.getElementById('components-button-demo-shape'));
|
||||
````
|
||||
|
||||
<style>
|
||||
#components-button-demo-shape .ant-btn {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
@ -2,14 +2,25 @@
|
||||
|
||||
- order: 2
|
||||
|
||||
提供 大 中 小 三种尺寸。
|
||||
按钮有大、中、小三种尺寸。
|
||||
|
||||
使用 `.ant-btn-lg` `.ant-btn-sm` 即可获得大 小尺寸，默认尺寸为中。
|
||||
通过设置 `size` 为 `lg` `sm` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
<button class="ant-btn ant-btn-primary ant-btn-lg">大号按钮</button>
|
||||
<button class="ant-btn ant-btn-primary">中号按钮(默认)</button>
|
||||
<button class="ant-btn ant-btn-primary ant-btn-sm">小号按钮</button>
|
||||
````jsx
|
||||
var Button = antd.Button;
|
||||
|
||||
React.render(<div>
|
||||
<Button type="primary" size="lg">大号按钮</Button>
|
||||
<Button type="primary">中号按钮(默认)</Button>
|
||||
<Button type="primary" size="sm">小号按钮</Button>
|
||||
</div>
|
||||
, document.getElementById('components-button-demo-size'));
|
||||
````
|
||||
|
||||
<style>
|
||||
#components-button-demo-size .ant-btn {
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,19 +2,31 @@
|
||||
|
||||
- order: 3
|
||||
|
||||
通过背景色透明度的变化来体现不同的操作状态，移入或点击元素可以查看状态。
|
||||
|
||||
失效状态：为 `<button>` 元素添加 `disabled` 属性，即可体现。
|
||||
添加 `disabled` 属性即可让按钮处于不可用状态，同时按钮样式也会改变。如果只是想使用按钮 disabled 后的样式，以便继续处理用户的点击事件，则使用 `.disabled` class 而非 `disabled` 属性。
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
<button class="ant-btn ant-btn-primary">主按钮</button>
|
||||
<button class="ant-btn ant-btn-primary disabled">主按钮(失效)</button>
|
||||
<p></p>
|
||||
<button class="ant-btn">次按钮</button>
|
||||
<button class="ant-btn disabled">次按钮(失效)</button>
|
||||
<p></p>
|
||||
<button class="ant-btn ant-btn-ghost">幽灵按钮</button>
|
||||
<button class="ant-btn ant-btn-ghost disabled">幽灵按钮(失效)</button>
|
||||
````jsx
|
||||
var Button = antd.Button;
|
||||
|
||||
React.render(<div>
|
||||
<h4>使用 `disabled` 属性</h4>
|
||||
<Button type="primary">主按钮</Button>
|
||||
<Button type="primary" disabled>主按钮(失效)</Button>
|
||||
<br />
|
||||
<Button>次按钮</Button>
|
||||
<Button disabled>次按钮(失效)</Button>
|
||||
<br />
|
||||
<h4>使用 `.disabled` class</h4>
|
||||
<Button type="ghost">幽灵按钮</Button>
|
||||
<Button type="ghost" className="disabled">幽灵按钮(失效)</Button>
|
||||
</div>
|
||||
, document.getElementById('components-button-demo-status'));
|
||||
````
|
||||
|
||||
<style>
|
||||
#components-button-demo-status .ant-btn {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
7
components/button/index.jsx
Normal file
7
components/button/index.jsx
Normal file
@ -0,0 +1,7 @@
|
||||
import Button from './button';
|
||||
import ButtonGroup from './button-group';
|
||||
|
||||
export {
|
||||
Button,
|
||||
ButtonGroup,
|
||||
};
|
||||
@ -15,27 +15,16 @@
|
||||
|
||||
## 如何使用
|
||||
|
||||
- 按钮的基础样式为 `ant-btn`。
|
||||
- 通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`
|
||||
|
||||
- 通过类组装的形式来产生不同的按钮样式，推荐遵循如下顺序：
|
||||
```
|
||||
.ant-btn
|
||||
↓
|
||||
.ant-btn-primary | .ant-btn-ghost
|
||||
↓
|
||||
.ant-btn-circle | .ant-btn-circle-outline
|
||||
↓
|
||||
.ant-btn-lg | .ant-btn-sm
|
||||
```
|
||||
- 按钮的属性说明如下：
|
||||
|
||||
- 按钮的样式参数说明如下：
|
||||
属性 | 说明 | 类型 | 默认值
|
||||
-----|-----|-----|------
|
||||
type | 设置按钮类型，可选值为 `primary` `ghost` 或者不设 | Enum | undefined
|
||||
shape | 设置按钮形状，可选值为 `circle` `circle-outline` 或者不设 | Enum | undefined
|
||||
size | 设置按钮大小，可选值为 `sm` `lg` 或者不设 | Enum | undefined
|
||||
loading | 设置按钮载入状态，存在为 `true`，不存在为 `false`，或直接设置值，如：`loading="true"` | Bool | false
|
||||
onClick | `click` 事件的 handler | Function | `function() {}`
|
||||
|
||||
| 类名 | 说明 |
|
||||
| ------------- | ------------- |
|
||||
| `.ant-btn` | 按钮基础样式。 |
|
||||
| `.ant-btn-primary` `.ant-btn-ghost` | 使用这些列出的类可以快速创建一个带有预定义样式的按钮。 |
|
||||
| `.ant-btn-circle` `.ant-btn-circle-outline` | 用于创建圆形按钮，`.ant-btn-circle-outline` 为描边按钮。 |
|
||||
| `.ant-btn-lg` `.ant-btn-sm` | 定义按钮大小尺寸，目前提供三种尺寸：大中小，默认为中。 |
|
||||
| `.ant-btn-group` | 按钮组合，通过按钮组容器把一组按钮放在同一行里。 |
|
||||
|
||||
> 当按钮只有两个汉字时，需要在两字中加空格。
|
||||
- `<Button>Hello world!</Button>` 最终会被渲染为 `<button type="button">Hello world!</button>`，并且除了上表中的属性，其它属性都会直接传到 `<button></button>`
|
||||
|
||||
2
index.js
2
index.js
@ -44,6 +44,8 @@ const antd = {
|
||||
Badge: require('./components/badge'),
|
||||
Menu: require('./components/menu'),
|
||||
Timeline: require('./components/timeline'),
|
||||
Button: require('./components/button').Button,
|
||||
ButtonGroup: require('./components/button').ButtonGroup,
|
||||
Icon: require('./components/iconfont')
|
||||
};
|
||||
|
||||
|
||||
@ -81,4 +81,9 @@
|
||||
&-group {
|
||||
.btn-group(@btn-prefix-cls);
|
||||
}
|
||||
|
||||
// To ensure that a space will be placed between character and `Icon`.
|
||||
> .@{iconfont-css-prefix} + span, > span + .@{iconfont-css-prefix} {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user