Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Tabs support indicatorLength #44406

Merged
merged 8 commits into from
Aug 29, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -5269,6 +5269,7 @@ Array [
</div>
<li
class="ant-dropdown-menu-item-divider"
role="separator"
afc163 marked this conversation as resolved.
Show resolved Hide resolved
/>
<li
aria-disabled="true"
Expand Down Expand Up @@ -9261,6 +9262,7 @@ Array [
</div>
<li
class="ant-dropdown-menu-item-divider"
role="separator"
/>
<li
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2549,6 +2549,7 @@ Array [
</li>
<li
class="ant-menu-item-divider"
role="separator"
/>
<li
class="ant-menu-submenu ant-menu-submenu-inline"
Expand Down
1 change: 1 addition & 0 deletions components/menu/__tests__/__snapshots__/demo.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -955,6 +955,7 @@ Array [
</li>
<li
class="ant-menu-item-divider"
role="separator"
/>
<li
class="ant-menu-submenu ant-menu-submenu-inline"
Expand Down
2 changes: 2 additions & 0 deletions components/menu/__tests__/__snapshots__/index.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,7 @@ exports[`Menu all types must be available in the "items" syntax 1`] = `
</li>
<li
class="ant-menu-item-divider"
role="separator"
/>
<li
class="ant-menu-item-group"
Expand Down Expand Up @@ -260,6 +261,7 @@ exports[`Menu all types must be available in the "items" syntax 1`] = `
</li>
<li
class="ant-menu-item-divider"
role="separator"
/>
<li
class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open"
Expand Down
1 change: 1 addition & 0 deletions components/tabs/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ Common props ref:[Common props](/docs/react/common-props)
| centered | Centers tabs | boolean | false | 4.4.0 |
| 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 | |
| indicatorLength | Customize length of indicator, which is the same as tab by default | number \| (origin: number) => number | - | 5.9.0 |
| items | Configure tab content | [TabItemType](#tabitemtype) | [] | 4.23.0 |
| moreIcon | The custom icon of ellipsis | ReactNode | &lt;EllipsisOutlined /> | 4.14.0 |
| popupClassName | `className` for more dropdown. | string | - | 4.21.0 |
Expand Down
1 change: 1 addition & 0 deletions components/tabs/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ Ant Design 依次提供了三级选项卡,分别用于不同的场景。
| centered | 标签居中展示 | boolean | false | 4.4.0 |
| defaultActiveKey | 初始化选中面板的 key,如果没有设置 activeKey | string | `第一个面板` | |
| hideAdd | 是否隐藏加号图标,在 `type="editable-card"` 时有效 | boolean | false | |
| indicatorLength | 自定义指示条长度,默认与 tab 等宽 | number \| (origin: number) => number | - | 5.9.0 |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这居然是个属性,为啥不用 token 来搞

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

如果需求是比文字短 32px,怎么设置?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

因为指示条的长度是自动匹配 tab 宽度的,不是纯样式。

如果需求是比文字短 32px,怎么设置?

indicatorLength={(origin: number) => origin - 32}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • 建议 ConfigProvider 支持配置 Tabs 的 indicatorLength,因为一般都是全局设置。
  • 如果支持 ConfigProvider,还需要同步到 Card tabList

| items | 配置选项卡内容 | [TabItemType](#tabitemtype) | [] | 4.23.0 |
| moreIcon | 自定义折叠 icon | ReactNode | &lt;EllipsisOutlined /> | 4.14.0 |
| popupClassName | 更多菜单的 `className` | string | - | 4.21.0 |
Expand Down
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,8 @@
"rc-image": "~7.2.0",
"rc-input": "~1.1.0",
"rc-input-number": "~8.0.2",
"rc-mentions": "~2.5.0",
"rc-menu": "~9.10.0",
"rc-mentions": "~2.6.0",
"rc-menu": "~9.11.0",
"rc-motion": "^2.7.3",
"rc-notification": "~5.0.4",
"rc-pagination": "~3.6.0",
Expand All @@ -148,7 +148,7 @@
"rc-steps": "~6.0.1",
"rc-switch": "~4.1.0",
"rc-table": "~7.33.1",
"rc-tabs": "~12.9.0",
"rc-tabs": "~12.11.0",
"rc-textarea": "~1.3.3",
"rc-tooltip": "~6.0.0",
"rc-tree": "~5.7.6",
Expand Down