mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-08 01:53:34 +08:00
feat: Tabs add slot to support extra position (#25138)
* Update package.json * update API * update Demo * update test * Update components/tabs/index.zh-CN.md Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> * Update components/tabs/demo/extra.md Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> * update index.en-US Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>
This commit is contained in:
jesse
GitHub
parent
f928baf52a
commit
7121760f52
@ -1316,6 +1316,7 @@ exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tabs/demo/extra.md correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-tabs ant-tabs-top"
|
||||
>
|
||||
@ -1450,7 +1451,212 @@ exports[`renders ./components/tabs/demo/extra.md correctly 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<br />,
|
||||
<br />,
|
||||
<br />,
|
||||
<div>
|
||||
You can also specify its direction or both side
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal"
|
||||
role="separator"
|
||||
/>,
|
||||
<div
|
||||
class="ant-checkbox-group"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-wrapper-checked"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-checkbox-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value="left"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
left
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-wrapper-checked"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-checkbox-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value="right"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
right
|
||||
</span>
|
||||
</label>
|
||||
</div>,
|
||||
<br />,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-tabs ant-tabs-top"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-nav"
|
||||
role="tablist"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-extra-content"
|
||||
>
|
||||
<button
|
||||
class="ant-btn"
|
||||
style="margin-right:15px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Left Extra Action
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-nav-wrap"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-nav-list"
|
||||
style="transform:translate(0px, 0px)"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-tab ant-tabs-tab-active"
|
||||
>
|
||||
<div
|
||||
aria-selected="true"
|
||||
class="ant-tabs-tab-btn"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
Tab 1
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-tab"
|
||||
>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-tabs-tab-btn"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
Tab 2
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-tab"
|
||||
>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-tabs-tab-btn"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
Tab 3
|
||||
</div>
|
||||
</div>
|
||||
<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
|
||||
class="ant-tabs-extra-content"
|
||||
>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Right Extra Action
|
||||
</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 1
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="ant-tabs-tabpane"
|
||||
role="tabpanel"
|
||||
style="display:none"
|
||||
tabindex="-1"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="ant-tabs-tabpane"
|
||||
role="tabpanel"
|
||||
style="display:none"
|
||||
tabindex="-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tabs/demo/icon.md correctly 1`] = `
|
||||
|
||||
@ -7,20 +7,42 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以在页签右边添加附加操作。
|
||||
可以在页签两边添加附加操作。
|
||||
|
||||
## en-US
|
||||
|
||||
You can add extra actions to the right of Tabs.
|
||||
You can add extra actions to the right or left or even both side of Tabs.
|
||||
|
||||
```jsx
|
||||
import { Tabs, Button } from 'antd';
|
||||
import { Tabs, Button, Divider, Checkbox } from 'antd';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
const CheckboxGroup = Checkbox.Group;
|
||||
|
||||
const operations = <Button>Extra Action</Button>;
|
||||
|
||||
ReactDOM.render(
|
||||
const OperationsSlot = {
|
||||
left: <Button style={{ marginRight: 15 }}>Left Extra Action</Button>,
|
||||
right: <Button>Right Extra Action</Button>,
|
||||
};
|
||||
|
||||
const options = ['left', 'right'];
|
||||
|
||||
const Demo = () => {
|
||||
const [positon, setPosition] = React.useState(['left', 'right']);
|
||||
|
||||
const slot = React.useMemo(() => {
|
||||
if (positon.length === 0) return null;
|
||||
|
||||
return positon.reduce(
|
||||
(acc, direaction) => ({ ...acc, [direaction]: OperationsSlot[direaction] }),
|
||||
{},
|
||||
);
|
||||
}, [positon]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tabs tabBarExtraContent={operations}>
|
||||
<TabPane tab="Tab 1" key="1">
|
||||
Content of tab 1
|
||||
@ -31,7 +53,35 @@ ReactDOM.render(
|
||||
<TabPane tab="Tab 3" key="3">
|
||||
Content of tab 3
|
||||
</TabPane>
|
||||
</Tabs>,
|
||||
mountNode,
|
||||
</Tabs>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<div>You can also specify its direction or both side</div>
|
||||
<Divider />
|
||||
<CheckboxGroup
|
||||
options={options}
|
||||
value={positon}
|
||||
onChange={value => {
|
||||
setPosition(value);
|
||||
}}
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<Tabs tabBarExtraContent={slot}>
|
||||
<TabPane tab="Tab 1" key="1">
|
||||
Content of tab 1
|
||||
</TabPane>
|
||||
<TabPane tab="Tab 2" key="2">
|
||||
Content of tab 2
|
||||
</TabPane>
|
||||
<TabPane tab="Tab 3" key="3">
|
||||
Content of tab 3
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
```
|
||||
|
||||
@ -30,7 +30,7 @@ Ant Design has 3 types of Tabs for different situations.
|
||||
| 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 | ReactNode | - | |
|
||||
| tabBarExtraContent | Extra content in tab bar | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | |
|
||||
| tabBarGutter | The gap between tabs | number | - | |
|
||||
| tabBarStyle | Tab bar style object | object | - | |
|
||||
| tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` | |
|
||||
|
||||
@ -33,7 +33,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
|
||||
| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | |
|
||||
| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | `default` | |
|
||||
| centered | 标签居中展示 | boolean | false | 4.4.0 |
|
||||
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
|
||||
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | |
|
||||
| tabBarGutter | tabs 之间的间隙 | number | - | |
|
||||
| tabBarStyle | tab bar 的样式对象 | object | - | |
|
||||
| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` | |
|
||||
|
||||
@ -139,7 +139,7 @@
|
||||
"rc-steps": "~4.1.0",
|
||||
"rc-switch": "~3.2.0",
|
||||
"rc-table": "~7.8.0",
|
||||
"rc-tabs": "~11.5.0",
|
||||
"rc-tabs": "~11.6.0",
|
||||
"rc-textarea": "~0.3.0",
|
||||
"rc-tooltip": "~4.2.0",
|
||||
"rc-tree": "~3.8.5",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user