mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 17:44:35 +08:00
feat(Divider): added orientationMargin APIs for customizing margin-left/right of title (#32084)
This commit is contained in:
Neo Tan
GitHub
parent
44b5a1f168
commit
78699b0fe0
@ -173,5 +173,33 @@ Array [
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left ant-divider-no-default-orientation-margin-left"
|
||||
role="separator"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
style="margin-left:0"
|
||||
>
|
||||
Left Text with 0 orientationMargin
|
||||
</span>
|
||||
</div>,
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-right ant-divider-no-default-orientation-margin-right"
|
||||
role="separator"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
style="margin-right:50px"
|
||||
>
|
||||
Right Text with 50px orientationMargin
|
||||
</span>
|
||||
</div>,
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>,
|
||||
]
|
||||
`;
|
||||
|
||||
@ -37,6 +37,20 @@ ReactDOM.render(
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<Divider orientation="left" orientationMargin="0">
|
||||
Left Text with 0 orientationMargin
|
||||
</Divider>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<Divider orientation="right" orientationMargin={50}>
|
||||
Right Text with 50px orientationMargin
|
||||
</Divider>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
|
||||
@ -16,9 +16,11 @@ A divider line separates different content.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| children | The wrapped title | ReactNode | - | |
|
||||
| className | The className of container | string | - | |
|
||||
| dashed | Whether line is dashed | boolean | false | |
|
||||
| orientation | The position of title inside divider | `left` \| `right` \| `center` | `center` | |
|
||||
| orientationMargin | The margin-left/right between the title and its closest border, while the `orientation` must be `left` or `right` | string \| number | - | |
|
||||
| plain | Divider text show as plain style | boolean | true | 4.2.0 |
|
||||
| style | The style object of container | CSSProperties | - | |
|
||||
| type | The direction type of divider | `horizontal` \| `vertical` | `horizontal` | |
|
||||
|
||||
@ -6,6 +6,7 @@ export interface DividerProps {
|
||||
prefixCls?: string;
|
||||
type?: 'horizontal' | 'vertical';
|
||||
orientation?: 'left' | 'right' | 'center';
|
||||
orientationMargin?: string | number;
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
dashed?: boolean;
|
||||
@ -20,6 +21,7 @@ const Divider: React.FC<DividerProps> = props => (
|
||||
prefixCls: customizePrefixCls,
|
||||
type = 'horizontal',
|
||||
orientation = 'center',
|
||||
orientationMargin,
|
||||
className,
|
||||
children,
|
||||
dashed,
|
||||
@ -29,6 +31,8 @@ const Divider: React.FC<DividerProps> = props => (
|
||||
const prefixCls = getPrefixCls('divider', customizePrefixCls);
|
||||
const orientationPrefix = orientation.length > 0 ? `-${orientation}` : orientation;
|
||||
const hasChildren = !!children;
|
||||
const hasCustomMarginLeft = orientation === 'left' && orientationMargin != null;
|
||||
const hasCustomMarginRight = orientation === 'right' && orientationMargin != null;
|
||||
const classString = classNames(
|
||||
prefixCls,
|
||||
`${prefixCls}-${type}`,
|
||||
@ -38,12 +42,24 @@ const Divider: React.FC<DividerProps> = props => (
|
||||
[`${prefixCls}-dashed`]: !!dashed,
|
||||
[`${prefixCls}-plain`]: !!plain,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
[`${prefixCls}-no-default-orientation-margin-left`]: hasCustomMarginLeft,
|
||||
[`${prefixCls}-no-default-orientation-margin-right`]: hasCustomMarginRight,
|
||||
},
|
||||
className,
|
||||
);
|
||||
|
||||
const innerStyle = {
|
||||
...(hasCustomMarginLeft && { marginLeft: orientationMargin }),
|
||||
...(hasCustomMarginRight && { marginRight: orientationMargin }),
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classString} {...restProps} role="separator">
|
||||
{children && <span className={`${prefixCls}-inner-text`}>{children}</span>}
|
||||
{children && (
|
||||
<span className={`${prefixCls}-inner-text`} style={innerStyle}>
|
||||
{children}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
|
||||
@ -17,9 +17,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5swjECahe/Divider.svg
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| children | 嵌套的标题 | ReactNode | - | |
|
||||
| className | 分割线样式类 | string | - | |
|
||||
| dashed | 是否虚线 | boolean | false | |
|
||||
| orientation | 分割线标题的位置 | `left` \| `right` \| `center` | `center` | |
|
||||
| orientationMargin | 标题和最近 left/right 边框之间的距离，去除了分割线，同时 `orientation` 必须为 `left` 或 `right` | string \| number | - | |
|
||||
| plain | 文字是否显示为普通正文样式 | boolean | false | 4.2.0 |
|
||||
| style | 分割线样式对象 | CSSProperties | - | |
|
||||
| type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` | |
|
||||
|
||||
@ -103,6 +103,30 @@
|
||||
font-weight: normal;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
&-horizontal&-with-text-left&-no-default-orientation-margin-left {
|
||||
&::before {
|
||||
width: 0;
|
||||
}
|
||||
&::after {
|
||||
width: 100%;
|
||||
}
|
||||
.ant-divider-inner-text {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal&-with-text-right&-no-default-orientation-margin-right {
|
||||
&::before {
|
||||
width: 100%;
|
||||
}
|
||||
&::after {
|
||||
width: 0;
|
||||
}
|
||||
.ant-divider-inner-text {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user