mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-04 04:58:55 +08:00
feat: Implement centered prop in Tabs (#24958)
* Implement centered in Tabs along with its tests and docs * Fix build error * Add Chinese translations and remove test case Co-authored-by: Ashkan Pourghasem <ashkan.pourghasem@gmail.com>
This commit is contained in:
Ashkan Pourghasem
GitHub
parent
77ddbfc525
commit
cc12109d46
@ -363,6 +363,123 @@ exports[`renders ./components/tabs/demo/card-top.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tabs/demo/centered.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-tabs ant-tabs-top ant-tabs-centered"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-nav"
|
||||
role="tablist"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-nav-wrap"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-nav-list"
|
||||
style="transform:translate(0px, 0px)"
|
||||
>
|
||||
<button
|
||||
aria-selected="true"
|
||||
class="ant-tabs-tab ant-tabs-tab-active"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
Tab 1
|
||||
</button>
|
||||
<button
|
||||
aria-selected="false"
|
||||
class="ant-tabs-tab"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
Tab 2
|
||||
</button>
|
||||
<button
|
||||
aria-selected="false"
|
||||
class="ant-tabs-tab"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
Tab 3
|
||||
</button>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
|
||||
>
|
||||
<button
|
||||
aria-controls="null-more-popup"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-hidden="true"
|
||||
class="ant-tabs-nav-more"
|
||||
id="null-more"
|
||||
style="visibility:hidden;order:1"
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="ellipsis"
|
||||
class="anticon anticon-ellipsis"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="ellipsis"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-content-holder"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-content ant-tabs-content-top"
|
||||
>
|
||||
<div
|
||||
aria-hidden="false"
|
||||
class="ant-tabs-tabpane ant-tabs-tabpane-active"
|
||||
role="tabpanel"
|
||||
tabindex="0"
|
||||
>
|
||||
Content of Tab Pane 1
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="ant-tabs-tabpane"
|
||||
role="tabpanel"
|
||||
style="visibility:hidden;height:0;overflow-y:hidden"
|
||||
tabindex="-1"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="ant-tabs-tabpane"
|
||||
role="tabpanel"
|
||||
style="visibility:hidden;height:0;overflow-y:hidden"
|
||||
tabindex="-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tabs/demo/custom-add-trigger.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
|
||||
36
components/tabs/demo/centered.md
Normal file
36
components/tabs/demo/centered.md
Normal file
@ -0,0 +1,36 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 居中
|
||||
en-US: Centered
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
标签居中展示。
|
||||
|
||||
## en-US
|
||||
|
||||
Centered tabs.
|
||||
|
||||
```jsx
|
||||
import { Tabs } from 'antd';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
const Demo = () => (
|
||||
<Tabs defaultActiveKey="1" centered>
|
||||
<TabPane tab="Tab 1" key="1">
|
||||
Content of Tab Pane 1
|
||||
</TabPane>
|
||||
<TabPane tab="Tab 2" key="2">
|
||||
Content of Tab Pane 2
|
||||
</TabPane>
|
||||
<TabPane tab="Tab 3" key="3">
|
||||
Content of Tab Pane 3
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
);
|
||||
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
```
|
||||
@ -28,6 +28,7 @@ Ant Design has 3 types of Tabs for different situations.
|
||||
| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set. | string | - | |
|
||||
| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | `false` | |
|
||||
| size | preset tab bar size | `large` \| `default` \| `small` | `default` | |
|
||||
| centered | Centers tabs | boolean | false | 4.4.0 |
|
||||
| tabBarExtraContent | Extra content in tab bar | React.ReactNode | - | |
|
||||
| tabBarGutter | The gap between tabs | number | - | |
|
||||
| tabBarStyle | Tab bar style object | object | - | |
|
||||
|
||||
@ -19,10 +19,11 @@ export interface TabsProps extends Omit<RcTabsProps, 'editable'> {
|
||||
type?: TabsType;
|
||||
size?: SizeType;
|
||||
hideAdd?: boolean;
|
||||
centered?: boolean;
|
||||
onEdit?: (e: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
|
||||
}
|
||||
|
||||
function Tabs({ type, className, size, onEdit, hideAdd, ...props }: TabsProps) {
|
||||
function Tabs({ type, className, size, onEdit, hideAdd, centered, ...props }: TabsProps) {
|
||||
const { prefixCls: customizePrefixCls } = props;
|
||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('tabs', customizePrefixCls);
|
||||
@ -54,6 +55,7 @@ function Tabs({ type, className, size, onEdit, hideAdd, ...props }: TabsProps) {
|
||||
[`${prefixCls}-${size}`]: size,
|
||||
[`${prefixCls}-card`]: ['card', 'editable-card'].includes(type as string),
|
||||
[`${prefixCls}-editable-card`]: type === 'editable-card',
|
||||
[`${prefixCls}-centered`]: centered,
|
||||
})}
|
||||
editable={editable}
|
||||
moreIcon={<EllipsisOutlined />}
|
||||
|
||||
@ -31,6 +31,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
|
||||
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板 | |
|
||||
| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | |
|
||||
| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | 'default' | |
|
||||
| centered | 标签居中展示 | boolean | false | 4.4.0 |
|
||||
| tabBarExtraContent | tab bar 上额外的元素 | React.ReactNode | - | |
|
||||
| tabBarGutter | tabs 之间的间隙 | number | - | |
|
||||
| tabBarStyle | tab bar 的样式对象 | object | - | |
|
||||
|
||||
@ -103,6 +103,17 @@
|
||||
flex: none;
|
||||
}
|
||||
|
||||
&-centered {
|
||||
> .@{tab-prefix-cls}-nav,
|
||||
> div > .@{tab-prefix-cls}-nav {
|
||||
.@{tab-prefix-cls}-nav-wrap {
|
||||
&:not([class*='@{tab-prefix-cls}-nav-wrap-ping']) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================ InkBar ============================
|
||||
&-ink-bar {
|
||||
position: absolute;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user