mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 01:13:58 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

fix(layout/collapse): icon direction in rtl mode (#52374)

Browse Source 
* fix: collapse icon position in rtl mode

* fix: layout sider icon position in rtl mode

* chore: remove rtl demo
This commit is contained in:
Jony J 2025-01-13 12:32:12 +08:00 committed by GitHub
parent 666d0195d2
commit a771c256c2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/collapse/Collapse.tsx
View File

@ -106,7 +106,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
mergedExpandIcon(panelProps)
) : (
<RightOutlined
rotate={panelProps.isActive ? 90 : undefined}
rotate={panelProps.isActive ? (direction === 'rtl' ? -90 : 90) : undefined}
aria-label={panelProps.isActive ? 'expanded' : 'collapsed'}
/>
);

7
components/layout/Sider.tsx
View File

@ -99,7 +99,7 @@ const Sider = React.forwardRef<HTMLDivElement, SiderProps>((props, ref) => {
};
// =========================== Prefix ===========================
const { getPrefixCls } = useContext(ConfigContext);
const { getPrefixCls, direction } = useContext(ConfigContext);
const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
@ -171,9 +171,10 @@ const Sider = React.forwardRef<HTMLDivElement, SiderProps>((props, ref) => {
{trigger || <BarsOutlined />}
</span>
) : null;
const reverseIcon = (direction === 'rtl') === !reverseArrow;
const iconObj = {
expanded: reverseArrow ? <RightOutlined /> : <LeftOutlined />,
collapsed: reverseArrow ? <LeftOutlined /> : <RightOutlined />,
expanded: reverseIcon ? <RightOutlined /> : <LeftOutlined />,
collapsed: reverseIcon ? <LeftOutlined /> : <RightOutlined />,
};
const status = collapsed ? 'collapsed' : 'expanded';
const defaultTrigger = iconObj[status];