mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-19 14:53:16 +08:00
Merge branch 'master' of github.com:ant-design/ant-design
This commit is contained in:
afc163
commit
07ee1fd734
@ -22,19 +22,20 @@ Ant Design has 3 types Tabs for different situation.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|--------------|-----------------------|----------|--------------|
|
||||
| activeKey | Current TabPane's key| String | _ |
|
||||
| activeKey | Current TabPane's key| string | _ |
|
||||
| defaultActiveKey | Default actived tabPanel's key, if activeKey is not setted. | - |
|
||||
| onChange | Callback when tab is switched | Function | - |
|
||||
| onTabClick | Callback when tab is clicked | Function | - |
|
||||
| tabBarExtraContent | Extra element in tab bar | React Node | - |
|
||||
| type | Basic style of tabs. Options: line, card & editable-card | String | line |
|
||||
| size | Tab bar size. Options: default, small | String | default |
|
||||
| tabPosition | Position of tabs. Options: top, right, bottom & left | String | top |
|
||||
| onEdit | Callback when tab is added or removed, which is executing when set type as editable-card | Function(targetKey, action) | - |
|
||||
| hideAdd | Hide plus icon or not, which is effective when set type as editable-card | Boolean | false |
|
||||
| tabBarExtraContent | Extra element in tab bar | React.ReactNode | - |
|
||||
| type | Basic style of tabs. Options: line, card & editable-card | string | line |
|
||||
| size | Tab bar size. Options: default, small | string | default |
|
||||
| tabPosition | Position of tabs. Options: top, right, bottom & left | string | top |
|
||||
| onEdit | Callback when tab is added or removed, which is executing when set type as editable-card | (targetKey, action): void | - |
|
||||
| hideAdd | Hide plus icon or not, which is effective when set type as editable-card | boolean | false |
|
||||
| animated | Whether to change tabs with animation, this property only works with `tabPosition=top|bottom` | boolean | true |
|
||||
|
||||
### Tabs.TabPane
|
||||
| Property | Description | Type | Default |
|
||||
|--------------|-----------------------|----------|--------------|
|
||||
| key | TabPane's key | String | _ |
|
||||
| tab | Show text in TabPane's head | React.Element or String | _ |
|
||||
| key | TabPane's key | string | _ |
|
||||
| tab | Show text in TabPane's head | React.ReactNode | _ |
|
||||
|
||||
@ -23,7 +23,7 @@ export interface TabsProps {
|
||||
style?: React.CSSProperties;
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
animation?: string;
|
||||
animated?: boolean;
|
||||
}
|
||||
|
||||
// Tabs
|
||||
@ -38,11 +38,11 @@ export default class Tabs extends React.Component<TabsProps, any> {
|
||||
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-tabs',
|
||||
animation: 'slide-horizontal',
|
||||
type: 'line', // or 'card' 'editable-card'
|
||||
onChange() { },
|
||||
onEdit() { },
|
||||
hideAdd: false,
|
||||
animated: true,
|
||||
};
|
||||
|
||||
createNewTab = (targetKey) => {
|
||||
@ -67,11 +67,11 @@ export default class Tabs extends React.Component<TabsProps, any> {
|
||||
size,
|
||||
type,
|
||||
tabPosition,
|
||||
animation,
|
||||
children,
|
||||
tabBarExtraContent,
|
||||
hideAdd,
|
||||
onTabClick,
|
||||
animated,
|
||||
} = this.props;
|
||||
let className = classNames({
|
||||
[this.props.className]: !!this.props.className,
|
||||
@ -79,10 +79,8 @@ export default class Tabs extends React.Component<TabsProps, any> {
|
||||
[`${prefixCls}-vertical`]: tabPosition === 'left' || tabPosition === 'right',
|
||||
[`${prefixCls}-card`]: type.indexOf('card') >= 0,
|
||||
[`${prefixCls}-${type}`]: true,
|
||||
[`${prefixCls}-no-animation`]: !animated,
|
||||
});
|
||||
if (tabPosition === 'left' || tabPosition === 'right' || type.indexOf('card') >= 0) {
|
||||
animation = null;
|
||||
}
|
||||
// only card type tabs can be added and closed
|
||||
let childrenWithClose;
|
||||
if (type === 'editable-card') {
|
||||
@ -125,7 +123,7 @@ export default class Tabs extends React.Component<TabsProps, any> {
|
||||
onTabClick={onTabClick}
|
||||
/>
|
||||
)}
|
||||
renderTabContent={() => <TabContent />}
|
||||
renderTabContent={() => <TabContent animated={animated} />}
|
||||
onChange={this.handleChange}
|
||||
>
|
||||
{childrenWithClose || children}
|
||||
|
||||
@ -23,20 +23,21 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------------------|----------------------------------------------|----------|---------------|
|
||||
| activeKey | 当前激活 tab 面板的 key | String | 无 |
|
||||
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | String | 第一个面板 |
|
||||
| activeKey | 当前激活 tab 面板的 key | string | 无 |
|
||||
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板 |
|
||||
| onChange | 切换面板的回调 | Function | 无 |
|
||||
| onTabClick | tab 被点击的回调 | Function | 无 |
|
||||
| tabBarExtraContent | tab bar 上额外的元素 | React Node | 无 |
|
||||
| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | String | 'line' |
|
||||
| size | 大小，提供 `default` 和 `small` 两种大小 | String | 'default' |
|
||||
| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | String | 'top' |
|
||||
| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | Function(targetKey, action) | 无 |
|
||||
| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | Boolean | false |
|
||||
| tabBarExtraContent | tab bar 上额外的元素 | React.ReactNode | 无 |
|
||||
| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | 'line' |
|
||||
| size | 大小，提供 `default` 和 `small` 两种大小 | string | 'default' |
|
||||
| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | 'top' |
|
||||
| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | 无 |
|
||||
| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |
|
||||
| animated | 是否使用动画切换 Tabs，在 `tabPosition=top|bottom` 时有效 | boolean | true |
|
||||
|
||||
### Tabs.TabPane
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------------------|-------------------------|--------|
|
||||
| key | 对应 activeKey | String | 无 |
|
||||
| tab | 选项卡头显示文字 | React.Element or String | 无 |
|
||||
| key | 对应 activeKey | string | 无 |
|
||||
| tab | 选项卡头显示文字 | React.ReactNode | 无 |
|
||||
|
||||
@ -381,6 +381,7 @@
|
||||
}
|
||||
|
||||
.no-flex,
|
||||
.@{tab-prefix-cls}-no-animation,
|
||||
.@{tab-prefix-cls}-vertical {
|
||||
.@{tab-prefix-cls}-content {
|
||||
&-animated {
|
||||
|
||||
@ -21,7 +21,7 @@ describe('Button', function() {
|
||||
expect(buttonNode.className).toBe('ant-btn');
|
||||
});
|
||||
|
||||
it('should has a whitespace in two Chinese charactor', () => {
|
||||
it('should has a whitespace in two Chinese characters', () => {
|
||||
button = TestUtils.renderIntoDocument(
|
||||
<Button>按钮</Button>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user