mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
fix: collapse end arrow rotate (#38547)
* fix: collapse end arrow rotate * chore: menu layout
This commit is contained in:
MadCcc
GitHub
parent
5b8ebdc337
commit
49aaa23691
@ -67,6 +67,7 @@ const useStyle = () => {
|
||||
&${antCls}-menu-inline {
|
||||
${antCls}-menu-item-group-title {
|
||||
padding-left: 60px;
|
||||
margin-left: 4px;
|
||||
|
||||
${antCls}-row-rtl & {
|
||||
padding-right: 60px;
|
||||
@ -137,7 +138,7 @@ const Sidebar: FC = () => {
|
||||
css={styles.asideContainer}
|
||||
mode="inline"
|
||||
selectedKeys={[selectedKey]}
|
||||
defaultOpenKeys={sidebarData?.map(({ title }) => title).filter(item => item) as string[]}
|
||||
defaultOpenKeys={sidebarData?.map(({ title }) => title).filter((item) => item) as string[]}
|
||||
/>
|
||||
);
|
||||
|
||||
|
||||
@ -3,8 +3,6 @@ category: Components
|
||||
group: Data Display
|
||||
title: Collapse
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
|
||||
demo:
|
||||
cols: 2
|
||||
---
|
||||
|
||||
A content area which can be collapsed and expanded.
|
||||
@ -30,26 +28,26 @@ A content area which can be collapsed and expanded.
|
||||
|
||||
### Collapse
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| accordion | If true, Collapse renders as Accordion | boolean | false | |
|
||||
| activeKey | Key of the active panel | string\[] \| string <br/> number\[] \| number | No default value. In `accordion` mode, it's the key of the first panel | |
|
||||
| bordered | Toggles rendering of the border around the collapse block | boolean | true | |
|
||||
| collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.9.0 |
|
||||
| defaultActiveKey | Key of the initial active panel | string\[] \| string <br/> number\[] \| number | - | |
|
||||
| destroyInactivePanel | Destroy Inactive Panel | boolean | false | |
|
||||
| expandIcon | Allow to customize collapse icon | (panelProps) => ReactNode | - | |
|
||||
| expandIconPosition | Set expand icon position | `start` \| `end` | - | 4.21.0 |
|
||||
| ghost | Make the collapse borderless and its background transparent | boolean | false | 4.4.0 |
|
||||
| onChange | Callback function executed when active panel is changed | function | - | |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| -------------------- | ---------------------------------------------------------------------------------------- | --------------------------------------------- | ---------------------------------------------------------------------- | ------- |
|
||||
| accordion | If true, Collapse renders as Accordion | boolean | false | |
|
||||
| activeKey | Key of the active panel | string\[] \| string <br/> number\[] \| number | No default value. In `accordion` mode, it's the key of the first panel | |
|
||||
| bordered | Toggles rendering of the border around the collapse block | boolean | true | |
|
||||
| collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.9.0 |
|
||||
| defaultActiveKey | Key of the initial active panel | string\[] \| string <br/> number\[] \| number | - | |
|
||||
| destroyInactivePanel | Destroy Inactive Panel | boolean | false | |
|
||||
| expandIcon | Allow to customize collapse icon | (panelProps) => ReactNode | - | |
|
||||
| expandIconPosition | Set expand icon position | `start` \| `end` | - | 4.21.0 |
|
||||
| ghost | Make the collapse borderless and its background transparent | boolean | false | 4.4.0 |
|
||||
| onChange | Callback function executed when active panel is changed | function | - | |
|
||||
|
||||
### Collapse.Panel
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| collapsible | Specify whether the panel be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.9.0 (icon: 4.24.0) |
|
||||
| extra | The extra element in the corner | ReactNode | - | |
|
||||
| forceRender | Forced render of content on panel, instead of lazy rendering after clicking on header | boolean | false | |
|
||||
| header | Title of the panel | ReactNode | - | |
|
||||
| key | Unique key identifying the panel from among its siblings | string \| number | - | |
|
||||
| showArrow | If false, panel will not show arrow icon. If false, collapsible can't be set as icon | boolean | true | |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ----------- | ------------------------------------------------------------------------------------- | -------------------------------- | ------- | -------------------- |
|
||||
| collapsible | Specify whether the panel be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.9.0 (icon: 4.24.0) |
|
||||
| extra | The extra element in the corner | ReactNode | - | |
|
||||
| forceRender | Forced render of content on panel, instead of lazy rendering after clicking on header | boolean | false | |
|
||||
| header | Title of the panel | ReactNode | - | |
|
||||
| key | Unique key identifying the panel from among its siblings | string \| number | - | |
|
||||
| showArrow | If false, panel will not show arrow icon. If false, collapsible can't be set as icon | boolean | true | |
|
||||
|
||||
@ -4,8 +4,6 @@ group: 数据展示
|
||||
title: Collapse
|
||||
subtitle: 折叠面板
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
|
||||
demo:
|
||||
cols: 2
|
||||
---
|
||||
|
||||
可以折叠/展开的内容区域。
|
||||
@ -31,26 +29,26 @@ demo:
|
||||
|
||||
### Collapse
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| accordion | 手风琴模式 | boolean | false | |
|
||||
| activeKey | 当前激活 tab 面板的 key | string\[] \| string <br/> number\[] \| number | 默认无，accordion 模式下默认第一个元素 | |
|
||||
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
||||
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.9.0 |
|
||||
| defaultActiveKey | 初始化选中面板的 key | string\[] \| string<br/> number\[] \| number | - | |
|
||||
| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | false | |
|
||||
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
||||
| expandIconPosition | 设置图标位置 | `start` \| `end` | - | 4.21.0 |
|
||||
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
|
||||
| onChange | 切换面板的回调 | function | - | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| -------------------- | ---------------------------------------- | --------------------------------------------- | -------------------------------------- | ------ |
|
||||
| accordion | 手风琴模式 | boolean | false | |
|
||||
| activeKey | 当前激活 tab 面板的 key | string\[] \| string <br/> number\[] \| number | 默认无，accordion 模式下默认第一个元素 | |
|
||||
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
||||
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.9.0 |
|
||||
| defaultActiveKey | 初始化选中面板的 key | string\[] \| string<br/> number\[] \| number | - | |
|
||||
| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | false | |
|
||||
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
||||
| expandIconPosition | 设置图标位置 | `start` \| `end` | - | 4.21.0 |
|
||||
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
|
||||
| onChange | 切换面板的回调 | function | - | |
|
||||
|
||||
### Collapse.Panel
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.9.0 (icon: 4.24.0) |
|
||||
| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - | |
|
||||
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
|
||||
| header | 面板头内容 | ReactNode | - | |
|
||||
| key | 对应 activeKey | string \| number | - | |
|
||||
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能置为 icon） | boolean | true | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ----------- | ------------------------------------------------------------------ | -------------------------------- | ------ | -------------------- |
|
||||
| collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.9.0 (icon: 4.24.0) |
|
||||
| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - | |
|
||||
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
|
||||
| header | 面板头内容 | ReactNode | - | |
|
||||
| key | 对应 activeKey | string \| number | - | |
|
||||
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能置为 icon） | boolean | true | |
|
||||
|
||||
@ -13,7 +13,7 @@ type CollapseToken = FullToken<'Collapse'> & {
|
||||
collapseContentPaddingHorizontal: number;
|
||||
};
|
||||
|
||||
export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
|
||||
export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
const {
|
||||
componentCls,
|
||||
collapseContentBg,
|
||||
@ -173,27 +173,21 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
|
||||
};
|
||||
};
|
||||
|
||||
const genArrowStyle: GenerateStyle<CollapseToken> = token => {
|
||||
const genArrowStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
const { componentCls } = token;
|
||||
|
||||
const fixedSelector = `> ${componentCls}-item > ${componentCls}-header ${componentCls}-arrow svg`;
|
||||
|
||||
return {
|
||||
[`${componentCls}-icon-position-end, ${componentCls}-rtl`]: {
|
||||
[`${componentCls}-rtl`]: {
|
||||
[fixedSelector]: {
|
||||
transform: `rotate(180deg)`,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-rtl${componentCls}-icon-position-end`]: {
|
||||
[fixedSelector]: {
|
||||
transform: `rotate(0deg)`,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genBorderlessStyle: GenerateStyle<CollapseToken> = token => {
|
||||
const genBorderlessStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
const {
|
||||
componentCls,
|
||||
collapseHeaderBg,
|
||||
@ -234,7 +228,7 @@ const genBorderlessStyle: GenerateStyle<CollapseToken> = token => {
|
||||
};
|
||||
};
|
||||
|
||||
const genGhostStyle: GenerateStyle<CollapseToken> = token => {
|
||||
const genGhostStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
const { componentCls, paddingSM } = token;
|
||||
|
||||
return {
|
||||
@ -255,7 +249,7 @@ const genGhostStyle: GenerateStyle<CollapseToken> = token => {
|
||||
};
|
||||
};
|
||||
|
||||
export default genComponentStyleHook('Collapse', token => {
|
||||
export default genComponentStyleHook('Collapse', (token) => {
|
||||
const collapseToken = mergeToken<CollapseToken>(token, {
|
||||
collapseContentBg: token.colorBgContainer,
|
||||
collapseHeaderBg: token.colorFillAlter,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user