unify all size prop to: large default small

This commit is contained in:
afc163 2015-10-22 21:01:52 +08:00
parent a687c32b1d
commit 415fa383e3
14 changed files with 39 additions and 19 deletions

View File

@ -6,9 +6,17 @@ const prefix = 'ant-btn-group-';
export default class ButtonGroup extends React.Component {
render() {
const {size, className, ...others} = this.props;
// large => lg
// small => sm
const sizeCls = ({
'large': 'lg',
'small': 'sm'
})[size] || '';
const classes = rcUtil.classSet({
'ant-btn-group': true,
[prefix + size]: size,
[prefix + sizeCls]: sizeCls,
[className]: className
});

View File

@ -28,11 +28,18 @@ export default class Button extends React.Component {
const props = this.props;
const {type, shape, size, onClick, className, htmlType, children, ...others} = props;
// large => lg
// small => sm
const sizeCls = ({
'large': 'lg',
'small': 'sm'
})[size] || '';
const classes = rcUtil.classSet({
'ant-btn': true,
[prefix + type]: type,
[prefix + shape]: shape,
[prefix + size]: size,
[prefix + sizeCls]: sizeCls,
[prefix + 'loading']: ('loading' in props && props.loading !== false),
[className]: className
});

View File

@ -4,7 +4,7 @@
可以将多个 `Button` 放入 `ButtonGroup` 的容器中。
通过设置 `size``lg` `sm` 分别把按钮组合设为大、小尺寸。若不设置 `size`,则尺寸为中。
通过设置 `size``large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`,则尺寸为中。
---
@ -64,7 +64,7 @@ ReactDOM.render(<div>
</ButtonGroup>
<h4>尺寸</h4>
<ButtonGroup size="lg">
<ButtonGroup size="large">
<Button type="ghost"></Button>
<Button type="ghost"></Button>
<Button type="ghost"></Button>
@ -74,7 +74,7 @@ ReactDOM.render(<div>
<Button type="ghost">默认</Button>
<Button type="ghost">默认</Button>
</ButtonGroup>
<ButtonGroup size="sm">
<ButtonGroup size="small">
<Button type="ghost"></Button>
<Button type="ghost"></Button>
<Button type="ghost"></Button>

View File

@ -4,7 +4,7 @@
按钮有大、中、小三种尺寸。
通过设置 `size``lg` `sm` 分别把按钮设为大、小尺寸。若不设置 `size`,则尺寸为中。
通过设置 `size``large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`,则尺寸为中。
---
@ -12,9 +12,9 @@
var Button = antd.Button;
ReactDOM.render(<div>
<Button type="primary" size="lg">大号按钮</Button>
<Button type="primary" size="large">大号按钮</Button>
<Button type="primary">中号按钮(默认)</Button>
<Button type="primary" size="sm">小号按钮</Button>
<Button type="primary" size="small">小号按钮</Button>
</div>
, document.getElementById('components-button-demo-size'));
````

View File

@ -24,7 +24,7 @@
type | 设置按钮类型,可选值为 `primary` `ghost` 或者不设 | Enum | undefined
htmlType | 设置 `button` 原生的 `type` 值,可选值请参考 HTML标准 | Enum | `button`
shape | 设置按钮形状,可选值为 `circle` `circle-outline` 或者不设 | Enum | undefined
size | 设置按钮大小,可选值为 `sm` `lg` 或者不设 | Enum | undefined
size | 设置按钮大小,可选值为 `small` `large` 或者不设 | Enum | undefined
loading | 设置按钮载入状态,存在为 `true`,不存在为 `false`,或直接设置值,如:`loading="true"` | Bool | false
onClick | `click` 事件的 handler | Function | `function() {}`

View File

@ -14,6 +14,6 @@ function onChange(page) {
}
ReactDOM.render(
<Pagination className="mini" onChange={onChange} total={50} />,
<Pagination size="small" onChange={onChange} total={50} />,
document.getElementById('components-pagination-demo-mini'));
````

View File

@ -6,9 +6,13 @@ const prefixCls = 'ant-pagination';
export default class AntPagination extends React.Component {
render() {
let className = this.props.className;
if (this.props.size === 'small') {
className += ' mini';
}
return <Pagination selectComponentClass={Select}
selectPrefixCls="ant-select"
prefixCls={prefixCls}
{...this.props} />;
{...this.props} className={className} />;
}
}

View File

@ -28,5 +28,5 @@
| showSizeChanger | 是否可以改变 pageSize | Bool | false |
| onShowSizeChange | pageSize 变化的回调 | Function | noop |
| showQuickJumper | 是否可以快速跳转至某页 | Bool | false |
| className | 当为「mini」时是小尺寸分页 | String | ant-pagination |
| size | 当为「small」时是小尺寸分页 | String | "" |
| simple | 当添加该属性时,显示为简单分页 | Object | 无 |

View File

@ -7,7 +7,8 @@ let AntSelect = React.createClass({
prefixCls: 'ant-select',
transitionName: 'slide-up',
optionLabelProp: 'children',
showSearch: false
showSearch: false,
size: 'default'
};
},
render() {

View File

@ -37,7 +37,7 @@
| searchPlaceholder | 搜索框默认文字 | string | 无 |
| optionFilterProp | 输入项过滤对应的 option 属性 | string | value |
| combobox | 输入框自动提示模式 | | false |
| size | 选择框大小 | String | 无 |
| size | 选择框大小,可选 `large` `small` | String | default |
### Option props

View File

@ -65,7 +65,7 @@ let AntTable = React.createClass({
useFixedHeader: false,
rowSelection: null,
className: '',
size: 'normal',
size: 'default',
bordered: false,
onChange: function () {
}

View File

@ -63,7 +63,7 @@ var dataSource = new Table.DataSource({
|---------------|--------------------------|-----------------|---------------------|---------|
| rowSelection | 列表项是否可选择 | Object | | false |
| pagination | 分页器 | Object | 配置项参考 [pagination](/components/pagination),设为 false 时不显示分页 | |
| size | 正常或迷你类型 | String | `normal` or `small` | normal |
| size | 正常或迷你类型 | String | `default` or `small`| default |
| dataSource | 数据源,可以为数组(本地模式)或一个数据源描述对象(远程模式) | Array or Object | | |
| columns | 表格列的配置描述,具体项见下表 | Array | | 无 |
| rowKey | 表格列 key 的取值 | Function(recode, index):string | | record.key |

View File

@ -11,7 +11,7 @@ var Tabs = antd.Tabs;
var TabPane = Tabs.TabPane;
ReactDOM.render(
<Tabs defaultActiveKey="2" size="mini">
<Tabs defaultActiveKey="2" size="small">
<TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
<TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
<TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>

View File

@ -5,7 +5,7 @@ const prefixCls = 'ant-tabs';
class AntTabs extends React.Component {
render() {
let className = (this.props.className || '');
if (this.props.size === 'mini') {
if (this.props.size === 'small' || this.props.size === 'mini') {
className += ' ' + prefixCls + '-mini';
}
if (this.props.tabPosition === 'left' || this.props.tabPosition === 'right') {
@ -17,7 +17,7 @@ class AntTabs extends React.Component {
AntTabs.defaultProps = {
prefixCls: prefixCls,
size: 'normal'
size: 'default'
};
AntTabs.TabPane = Tabs.TabPane;