Skip to content

A
ant-design

wanjj_1210 / ant-design
与 Fork 源项目一致

从无法访问的项目Fork

通知 10
Star 0
Fork 0
A
ant-design

体验新版 GitCode，发现更多精彩内容 >>

提交 2f771b04 编写于 作者: B Benjy Cui
浏览文件
操作

feat: button should be a component

上级 2ec165d2
隐藏空白更改
内联 并排
Showing with 345 addition and 191 deletion
components/button/button-group.jsx 0 → 100644
浏览文件 @ 2f771b04
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,
};
components/button/button.jsx 0 → 100644
浏览文件 @ 2f771b04
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() {},
};
components/button/demo/basic.md
浏览文件 @ 2f771b04
# 标准按钮
# 按钮类型
- order: 1
- order: 0
为 `<button>` `<a>` 或 `<input>` 元素添加 `.ant-btn` 类即可使用 ant-design 提供的样式。
按钮有三种类型：主按钮、次按钮、幽灵按钮。
另外，通过使用下面的类可创建带有预定义样式的按钮，我们通过样式来显示重要程度的不同。
`.ant-btn-primary` `.ant-btn-ghost`
其中 `.ant-btn` 类定义了按钮的默认样式，语义上代表次按钮。
**注**: 当按钮文字为两个字时，中间需要**间隔一个字符**。
通过设置 `type` 为 `primary` `ghost` 可分别创建主按钮、幽灵按钮，若不设置 `type` 值则为次按钮。不同的样式可以用来区别其重要程度。
---
````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>
````jsx
var Button = antd.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>
components/button/demo/button-group.md
浏览文件 @ 2f771b04
# 按钮组合
- 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>
components/button/demo/icon.md
浏览文件 @ 2f771b04
# 图标按钮
- 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>
<p></p>
<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>
<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-icon'));
````
<style>
#components-button-demo-icon .ant-btn {
margin-right: 8px;
margin-bottom: 12px;
}
</style>
components/button/demo/loading.md
浏览文件 @ 2f771b04
# 加载中
- 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>;
}
});
......
components/button/demo/menu.md 已删除 100644 → 0
浏览文件 @ 2ec165d2
# 菜单按钮
- 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>
````
components/button/demo/shape.md 0 → 100644
浏览文件 @ 2f771b04
# 按钮形状
- 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>
components/button/demo/size.md
浏览文件 @ 2f771b04
......@@ -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>
components/button/demo/status.md
浏览文件 @ 2f771b04
......@@ -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>
components/button/index.jsx 0 → 100644
浏览文件 @ 2f771b04
import Button from './button';
import ButtonGroup from './button-group';
export {
Button,
ButtonGroup,
};
components/button/index.md
浏览文件 @ 2f771b04
......@@ -15,27 +15,16 @@
## 如何使用
- 按钮的基础样式为 `ant-btn`。
- 通过类组装的形式来产生不同的按钮样式，推荐遵循如下顺序：
```
.ant-btn
&darr;
.ant-btn-primary | .ant-btn-ghost
&darr;
.ant-btn-circle | .ant-btn-circle-outline
&darr;
.ant-btn-lg | .ant-btn-sm
```
- 按钮的样式参数说明如下：
| 类名 | 说明 |
| ------------- | ------------- |
| `.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 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`
- 按钮的属性说明如下：
属性 | 说明 | 类型 | 默认值
-----|-----|-----|------
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() {}`
- `<Button>Hello world!</Button>` 最终会被渲染为 `<button type="button">Hello world!</button>`，并且除了上表中的属性，其它属性都会直接传到 `<button></button>`
index.js
浏览文件 @ 2f771b04
......@@ -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')
};
......
style/components/button.less
浏览文件 @ 2f771b04
......@@ -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;
}
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或