mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +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) mergedExpandIcon(panelProps)
) : ( ) : (
<RightOutlined <RightOutlined
rotate={panelProps.isActive ? 90 : undefined} rotate={panelProps.isActive ? (direction === 'rtl' ? -90 : 90) : undefined}
aria-label={panelProps.isActive ? 'expanded' : 'collapsed'} 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 =========================== // =========================== Prefix ===========================
const { getPrefixCls } = useContext(ConfigContext); const { getPrefixCls, direction } = useContext(ConfigContext);
const prefixCls = getPrefixCls('layout-sider', customizePrefixCls); const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls); const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
@ -171,9 +171,10 @@ const Sider = React.forwardRef<HTMLDivElement, SiderProps>((props, ref) => {
{trigger || <BarsOutlined />} {trigger || <BarsOutlined />}
</span> </span>
) : null; ) : null;
const reverseIcon = (direction === 'rtl') === !reverseArrow;
const iconObj = { const iconObj = {
expanded: reverseArrow ? <RightOutlined /> : <LeftOutlined />, expanded: reverseIcon ? <RightOutlined /> : <LeftOutlined />,
collapsed: reverseArrow ? <LeftOutlined /> : <RightOutlined />, collapsed: reverseIcon ? <LeftOutlined /> : <RightOutlined />,
}; };
const status = collapsed ? 'collapsed' : 'expanded'; const status = collapsed ? 'collapsed' : 'expanded';
const defaultTrigger = iconObj[status]; const defaultTrigger = iconObj[status];