test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 20:19:44 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

style: add divider rtl support (#23734)

Browse Source 
* style: add divider rtl support

* add base
This commit is contained in:
xrkffgg 2020-04-29 10:17:37 +08:00 committed by GitHub
parent 53a76f0bf7
commit e41340ac4d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 40 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/divider/index.tsx
View File

@ -14,7 +14,7 @@ export interface DividerProps {
const Divider: React.FC<DividerProps> = props => ( const Divider: React.FC<DividerProps> = props => (
<ConfigConsumer> <ConfigConsumer>
{({ getPrefixCls }: ConfigConsumerProps) => { {({ getPrefixCls, direction }: ConfigConsumerProps) => {
const { const {
prefixCls: customizePrefixCls, prefixCls: customizePrefixCls,
type = 'horizontal', type = 'horizontal',
@ -29,6 +29,7 @@ const Divider: React.FC<DividerProps> = props => (
const classString = classNames(className, prefixCls, `${prefixCls}-${type}`, { const classString = classNames(className, prefixCls, `${prefixCls}-${type}`, {
[`${prefixCls}-with-text${orientationPrefix}`]: children, [`${prefixCls}-with-text${orientationPrefix}`]: children,
[`${prefixCls}-dashed`]: !!dashed, [`${prefixCls}-dashed`]: !!dashed,
[`${prefixCls}-rtl`]: direction === 'rtl',
}); });
return ( return (
<div className={classString} {...restProps} role="separator"> <div className={classString} {...restProps} role="separator">

2
components/divider/style/index.less
View File

@ -107,3 +107,5 @@
border-width: 0 0 0 1px; border-width: 0 0 0 1px;
} }
} }
@import './rtl';

36
components/divider/style/rtl.less Normal file
View File

@ -0,0 +1,36 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@divider-prefix-cls: ~'@{ant-prefix}-divider';
.@{divider-prefix-cls} {
&-rtl {
direction: rtl;
}
&-horizontal&-with-text-left {
&::before {
.@{divider-prefix-cls}-rtl& {
width: 95%;
}
}
&::after {
.@{divider-prefix-cls}-rtl& {
width: 5%;
}
}
}
&-horizontal&-with-text-right {
&::before {
.@{divider-prefix-cls}-rtl& {
width: 5%;
}
}
&::after {
.@{divider-prefix-cls}-rtl& {
width: 95%;
}
}
}
}