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

feat(Divider): unify orientation attribute usage (#53645)

Browse Source 
* feat[Divider]: Unified use of orientation attribute

* feat: Restore the size type missed in the merge

* feat: Delete unnecessary demo adjustments

* docs: change text

* feat: deprecated warning

* Update components/divider/index.zh-CN.md

Signed-off-by: thinkasany <480968828@qq.com>

* Update components/divider/index.en-US.md

Signed-off-by: thinkasany <480968828@qq.com>

* feat: use useOrientation and change test,doc

* feat: change demos orientation attribut

* docs: change token and demo (orientationMargin->titlePlacementMargin)

* feat: change demos  titlePlacement="left/right" -> "start/end"

* docs: titlePlacement align

* feat: Resolve merge conflicts

* fix: lint error

* fix: demo lint error

* feat: use mergedStyles.content

* test: update snapshot

* rerun ci

* test: update snapshot

* fix: delete titlePlacementMargin and udpate snapshots

* feat: change demos orientationMargin-> styles.content.margin

* Update components/divider/demo/vertical.md

Co-authored-by: thinkasany <480968828@qq.com>
Signed-off-by: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com>

* feat: Call warning using list

* docs: `vertical` to make the divider vertical.

* docs: Modify punctuation usage

* docs: Add deprecated description

* docs: Clarify the possible values for titlePlacement in the example

* feat： replase  { margin: '0' } ->{ margin: 0 }

---------

Signed-off-by: thinkasany <480968828@qq.com>
Signed-off-by: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com>
Co-authored-by: 刘欢 <lh01217311@antgroup.com>
Co-authored-by: thinkasany <480968828@qq.com>
This commit is contained in:
EmilyyyLiu 2025-06-03 14:09:56 +08:00 committed by GitHub
parent df98f70dac
commit b1467d6ec8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
37 changed files with 220 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.dumi/theme/builtins/ResourceArticles/index.tsx
View File

@ -79,7 +79,7 @@ const ArticleList: React.FC<ArticleListProps> = ({ name, data = [], authors = []
<a href={author?.href} target="_blank" rel="noreferrer"> <a href={author?.href} target="_blank" rel="noreferrer">
<Avatar size="small" src={author?.avatar} /> <Avatar size="small" src={author?.avatar} />
</a> </a>
<Divider type="vertical" /> <Divider vertical />
<a href={article.href} target="_blank" rel="noreferrer"> <a href={article.href} target="_blank" rel="noreferrer">
{article?.title} {article?.title}
</a> </a>

4
components/badge/demo/colorful.tsx
View File

@ -19,13 +19,13 @@ const colors = [
const App: React.FC = () => ( const App: React.FC = () => (
<> <>
<Divider orientation="left">Presets</Divider> <Divider titlePlacement="start">Presets</Divider>
<Space vertical> <Space vertical>
{colors.map((color) => ( {colors.map((color) => (
<Badge key={color} color={color} text={color} /> <Badge key={color} color={color} text={color} />
))} ))}
</Space> </Space>
<Divider orientation="left">Custom</Divider> <Divider titlePlacement="start">Custom</Divider>
<Space vertical> <Space vertical>
<Badge color="#f50" text="#f50" /> <Badge color="#f50" text="#f50" />
<Badge color="rgb(45, 183, 245)" text="rgb(45, 183, 245)" /> <Badge color="rgb(45, 183, 245)" text="rgb(45, 183, 245)" />

2
components/button/demo/debug-icon.tsx
View File

@ -22,7 +22,7 @@ const App: React.FC = () => {
<Radio.Button value="default">Default</Radio.Button> <Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="small">Small</Radio.Button> <Radio.Button value="small">Small</Radio.Button>
</Radio.Group> </Radio.Group>
<Divider orientation="left" plain> <Divider titlePlacement="start" plain>
Preview Preview
</Divider> </Divider>
<ConfigProvider componentSize={size}> <ConfigProvider componentSize={size}>

2
components/button/demo/icon-position.tsx
View File

@ -13,7 +13,7 @@ const App: React.FC = () => {
<Radio.Button value="end">end</Radio.Button> <Radio.Button value="end">end</Radio.Button>
</Radio.Group> </Radio.Group>
</Space> </Space>
<Divider orientation="left" plain> <Divider titlePlacement="start" plain>
Preview Preview
</Divider> </Divider>
<Flex gap="small" vertical> <Flex gap="small" vertical>

2
components/button/demo/size.tsx
View File

@ -14,7 +14,7 @@ const App: React.FC = () => {
<Radio.Button value="default">Default</Radio.Button> <Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="small">Small</Radio.Button> <Radio.Button value="small">Small</Radio.Button>
</Radio.Group> </Radio.Group>
<Divider orientation="left" plain> <Divider titlePlacement="start" plain>
Preview Preview
</Divider> </Divider>
<Flex gap="small" align="flex-start" vertical> <Flex gap="small" align="flex-start" vertical>

6
components/collapse/demo/size.tsx
View File

@ -9,16 +9,16 @@ const text = `
const App: React.FC = () => ( const App: React.FC = () => (
<> <>
<Divider orientation="left">Default Size</Divider> <Divider titlePlacement="start">Default Size</Divider>
<Collapse <Collapse
items={[{ key: '1', label: 'This is default size panel header', children: <p>{text}</p> }]} items={[{ key: '1', label: 'This is default size panel header', children: <p>{text}</p> }]}
/> />
<Divider orientation="left">Small Size</Divider> <Divider titlePlacement="start">Small Size</Divider>
<Collapse <Collapse
size="small" size="small"
items={[{ key: '1', label: 'This is small size panel header', children: <p>{text}</p> }]} items={[{ key: '1', label: 'This is small size panel header', children: <p>{text}</p> }]}
/> />
<Divider orientation="left">Large Size</Divider> <Divider titlePlacement="start">Large Size</Divider>
<Collapse <Collapse
size="large" size="large"
items={[{ key: '1', label: 'This is large size panel header', children: <p>{text}</p> }]} items={[{ key: '1', label: 'This is large size panel header', children: <p>{text}</p> }]}

2
components/color-picker/demo/panel-render.tsx
View File

@ -27,7 +27,7 @@ const HorizontalLayoutDemo = () => {
<Col span={12}> <Col span={12}>
<Presets /> <Presets />
</Col> </Col>
<Divider type="vertical" style={{ height: 'auto' }} /> <Divider vertical style={{ height: 'auto' }} />
<Col flex="auto"> <Col flex="auto">
<Picker /> <Picker />
</Col> </Col>

28
components/config-provider/demo/direction.tsx
View File

@ -163,7 +163,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
<div className="direction-components"> <div className="direction-components">
<Row> <Row>
<Col span={24}> <Col span={24}>
<Divider orientation="left">Cascader example</Divider> <Divider titlePlacement="start">Cascader example</Divider>
<Cascader <Cascader
suffixIcon={<SearchIcon />} suffixIcon={<SearchIcon />}
options={cascaderOptions} options={cascaderOptions}
@ -185,7 +185,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
<br /> <br />
<Row> <Row>
<Col span={12}> <Col span={12}>
<Divider orientation="left">Switch example</Divider> <Divider titlePlacement="start">Switch example</Divider>
&nbsp;&nbsp; &nbsp;&nbsp;
<Switch defaultChecked /> <Switch defaultChecked />
&nbsp;&nbsp; &nbsp;&nbsp;
@ -194,7 +194,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
<Switch size="small" loading /> <Switch size="small" loading />
</Col> </Col>
<Col span={12}> <Col span={12}>
<Divider orientation="left">Radio Group example</Divider> <Divider titlePlacement="start">Radio Group example</Divider>
<Radio.Group defaultValue="c" buttonStyle="solid"> <Radio.Group defaultValue="c" buttonStyle="solid">
<Radio.Button value="a">تهران</Radio.Button> <Radio.Button value="a">تهران</Radio.Button>
<Radio.Button value="b" disabled> <Radio.Button value="b" disabled>
@ -208,7 +208,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
<br /> <br />
<Row> <Row>
<Col span={12}> <Col span={12}>
<Divider orientation="left">Button example</Divider> <Divider titlePlacement="start">Button example</Divider>
<div className="button-demo"> <div className="button-demo">
<Button type="primary" icon={<DownloadOutlined />} /> <Button type="primary" icon={<DownloadOutlined />} />
<Button type="primary" shape="circle" icon={<DownloadOutlined />} /> <Button type="primary" shape="circle" icon={<DownloadOutlined />} />
@ -239,7 +239,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
</div> </div>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Divider orientation="left">Tree example</Divider> <Divider titlePlacement="start">Tree example</Divider>
<Tree <Tree
showLine showLine
checkable checkable
@ -262,7 +262,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
<br /> <br />
<Row> <Row>
<Col span={24}> <Col span={24}>
<Divider orientation="left">Input (Input Group) example</Divider> <Divider titlePlacement="start">Input (Input Group) example</Divider>
<InputGroup size="large"> <InputGroup size="large">
<Row gutter={8}> <Row gutter={8}>
<Col span={5}> <Col span={5}>
@ -297,7 +297,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
<br /> <br />
<Row> <Row>
<Col span={12}> <Col span={12}>
<Divider orientation="left">Select example</Divider> <Divider titlePlacement="start">Select example</Divider>
<Space wrap> <Space wrap>
<Select mode="multiple" defaultValue="مورچه" style={{ width: 120 }}> <Select mode="multiple" defaultValue="مورچه" style={{ width: 120 }}>
<Option value="jack">Jack</Option> <Option value="jack">Jack</Option>
@ -321,7 +321,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
</Space> </Space>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Divider orientation="left">TreeSelect example</Divider> <Divider titlePlacement="start">TreeSelect example</Divider>
<TreeSelect <TreeSelect
showSearch showSearch
style={{ width: '100%' }} style={{ width: '100%' }}
@ -349,7 +349,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
<br /> <br />
<Row> <Row>
<Col span={24}> <Col span={24}>
<Divider orientation="left">Modal example</Divider> <Divider titlePlacement="start">Modal example</Divider>
<Button type="primary" onClick={showModal}> <Button type="primary" onClick={showModal}>
Open Modal Open Modal
</Button> </Button>
@ -363,7 +363,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
<br /> <br />
<Row> <Row>
<Col span={24}> <Col span={24}>
<Divider orientation="left">Steps example</Divider> <Divider titlePlacement="start">Steps example</Divider>
<Steps <Steps
progressDot progressDot
current={currentStep} current={currentStep}
@ -406,7 +406,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
<br /> <br />
<Row> <Row>
<Col span={12}> <Col span={12}>
<Divider orientation="left">Rate example</Divider> <Divider titlePlacement="start">Rate example</Divider>
<Rate defaultValue={2.5} /> <Rate defaultValue={2.5} />
<br /> <br />
<strong>* Note:</strong> Half star not implemented in RTL direction, it will be <strong>* Note:</strong> Half star not implemented in RTL direction, it will be
@ -417,7 +417,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
implement rtl support. implement rtl support.
</Col> </Col>
<Col span={12}> <Col span={12}>
<Divider orientation="left">Badge example</Divider> <Divider titlePlacement="start">Badge example</Divider>
<Badge count={badgeCount}> <Badge count={badgeCount}>
<a href="#" className="head-example" /> <a href="#" className="head-example" />
</Badge> </Badge>
@ -443,14 +443,14 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
<br /> <br />
<Row> <Row>
<Col span={24}> <Col span={24}>
<Divider orientation="left">Pagination example</Divider> <Divider titlePlacement="start">Pagination example</Divider>
<Pagination showSizeChanger defaultCurrent={3} total={500} /> <Pagination showSizeChanger defaultCurrent={3} total={500} />
</Col> </Col>
</Row> </Row>
<br /> <br />
<Row> <Row>
<Col span={24}> <Col span={24}>
<Divider orientation="left">Grid System example</Divider> <Divider titlePlacement="start">Grid System example</Divider>
<div className="grid-demo"> <div className="grid-demo">
<div className="code-box-demo"> <div className="code-box-demo">
<p> <p>

2
components/config-provider/demo/locale.tsx
View File

@ -188,7 +188,7 @@ const Page: React.FC = () => {
/> />
</Space> </Space>
<Upload listType="picture-card" fileList={fileList} /> <Upload listType="picture-card" fileList={fileList} />
<Divider orientation="left">Tour</Divider> <Divider titlePlacement="start">Tour</Divider>
<Button type="primary" onClick={() => setTourOpen(true)}> <Button type="primary" onClick={() => setTourOpen(true)}>
Begin Tour Begin Tour
</Button> </Button>

24
components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -63,7 +63,7 @@ Array [
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. 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>, </p>,
<div <div
class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-start ant-divider-no-default-orientation-margin-start" class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-start"
role="separator" role="separator"
> >
<div <div
@ -71,9 +71,9 @@ Array [
/> />
<span <span
class="ant-divider-inner-text" class="ant-divider-inner-text"
style="margin-inline-start: 0;" style="margin: 0px;"
> >
Left Text with 0 orientationMargin Left Text margin with 0
</span> </span>
<div <div
class="ant-divider-rail ant-divider-rail-end" class="ant-divider-rail ant-divider-rail-end"
@ -83,7 +83,7 @@ Array [
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. 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>, </p>,
<div <div
class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-end ant-divider-no-default-orientation-margin-end" class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-end"
role="separator" role="separator"
> >
<div <div
@ -91,9 +91,9 @@ Array [
/> />
<span <span
class="ant-divider-inner-text" class="ant-divider-inner-text"
style="margin-inline-end: 50px;" style="margin: 0px 50px;"
> >
Right Text with 50px orientationMargin Right Text margin with 50px
</span> </span>
<div <div
class="ant-divider-rail ant-divider-rail-end" class="ant-divider-rail ant-divider-rail-end"
@ -453,7 +453,7 @@ Array [
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. 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>, </p>,
<div <div
class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-start ant-divider-no-default-orientation-margin-start" class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-start"
role="separator" role="separator"
> >
<div <div
@ -461,9 +461,9 @@ Array [
/> />
<span <span
class="ant-divider-inner-text" class="ant-divider-inner-text"
style="margin-inline-start: 0;" style="margin: 0px;"
> >
Left Text with 0 orientationMargin Left Text margin with 0
</span> </span>
<div <div
class="ant-divider-rail ant-divider-rail-end" class="ant-divider-rail ant-divider-rail-end"
@ -473,7 +473,7 @@ Array [
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. 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>, </p>,
<div <div
class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-end ant-divider-no-default-orientation-margin-end" class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-end"
role="separator" role="separator"
> >
<div <div
@ -481,9 +481,9 @@ Array [
/> />
<span <span
class="ant-divider-inner-text" class="ant-divider-inner-text"
style="margin-inline-end: 50px;" style="margin: 0px 50px;"
> >
Right Text with 50px orientationMargin Right Text margin with 50px
</span> </span>
<div <div
class="ant-divider-rail ant-divider-rail-end" class="ant-divider-rail ant-divider-rail-end"

24
components/divider/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -63,7 +63,7 @@ Array [
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. 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>, </p>,
<div <div
class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-start ant-divider-no-default-orientation-margin-start" class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-start"
role="separator" role="separator"
> >
<div <div
@ -71,9 +71,9 @@ Array [
/> />
<span <span
class="ant-divider-inner-text" class="ant-divider-inner-text"
style="margin-inline-start:0" style="margin:0"
> >
Left Text with 0 orientationMargin Left Text margin with 0
</span> </span>
<div <div
class="ant-divider-rail ant-divider-rail-end" class="ant-divider-rail ant-divider-rail-end"
@ -83,7 +83,7 @@ Array [
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. 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>, </p>,
<div <div
class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-end ant-divider-no-default-orientation-margin-end" class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-end"
role="separator" role="separator"
> >
<div <div
@ -91,9 +91,9 @@ Array [
/> />
<span <span
class="ant-divider-inner-text" class="ant-divider-inner-text"
style="margin-inline-end:50px" style="margin:0 50px"
> >
Right Text with 50px orientationMargin Right Text margin with 50px
</span> </span>
<div <div
class="ant-divider-rail ant-divider-rail-end" class="ant-divider-rail ant-divider-rail-end"
@ -439,7 +439,7 @@ Array [
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. 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>, </p>,
<div <div
class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-start ant-divider-no-default-orientation-margin-start" class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-start"
role="separator" role="separator"
> >
<div <div
@ -447,9 +447,9 @@ Array [
/> />
<span <span
class="ant-divider-inner-text" class="ant-divider-inner-text"
style="margin-inline-start:0" style="margin:0"
> >
Left Text with 0 orientationMargin Left Text margin with 0
</span> </span>
<div <div
class="ant-divider-rail ant-divider-rail-end" class="ant-divider-rail ant-divider-rail-end"
@ -459,7 +459,7 @@ Array [
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. 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>, </p>,
<div <div
class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-end ant-divider-no-default-orientation-margin-end" class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-end"
role="separator" role="separator"
> >
<div <div
@ -467,9 +467,9 @@ Array [
/> />
<span <span
class="ant-divider-inner-text" class="ant-divider-inner-text"
style="margin-inline-end:50px" style="margin:0 50px"
> >
Right Text with 50px orientationMargin Right Text margin with 50px
</span> </span>
<div <div
class="ant-divider-rail ant-divider-rail-end" class="ant-divider-rail ant-divider-rail-end"

49
components/divider/__tests__/index.test.tsx
View File

@ -2,8 +2,10 @@ import * as React from 'react';
import { ConfigProvider } from 'antd'; import { ConfigProvider } from 'antd';
import Divider from '..'; import Divider from '..';
import type { Orientation } from '../../_util/hooks/useOrientation';
import mountTest from '../../../tests/shared/mountTest'; import mountTest from '../../../tests/shared/mountTest';
import { render } from '../../../tests/utils'; import { render } from '../../../tests/utils';
import type { TitlePlacement } from '../index';
describe('Divider', () => { describe('Divider', () => {
mountTest(Divider); mountTest(Divider);
@ -19,7 +21,7 @@ describe('Divider', () => {
it('support string orientationMargin', () => { it('support string orientationMargin', () => {
const { container } = render( const { container } = render(
<Divider orientation="right" orientationMargin="10"> <Divider titlePlacement="end" orientationMargin="10">
test test test test test test
</Divider>, </Divider>,
); );
@ -65,4 +67,49 @@ describe('Divider', () => {
rerender(<Divider type="vertical" size="small" />); rerender(<Divider type="vertical" size="small" />);
expect(container.querySelector<HTMLSpanElement>('.ant-divider-sm')).toBeTruthy(); expect(container.querySelector<HTMLSpanElement>('.ant-divider-sm')).toBeTruthy();
}); });
describe('orientation and placement attribute', () => {
jest.spyOn(console, 'error').mockImplementation(() => {});
const testCases: Array<
[
params: [
orientation?: Orientation | TitlePlacement,
vertical?: boolean,
type?: Orientation,
titlePlacement?: TitlePlacement,
orientationMargin?: number,
],
expected: string,
]
> = [
[['right'], '.ant-divider-with-text-end'],
[['vertical', undefined, 'horizontal'], '.ant-divider-vertical'],
[[undefined, undefined, 'vertical'], '.ant-divider-vertical'],
[['center', undefined, undefined, 'left'], '.ant-divider-with-text-start'],
[['horizontal', true, undefined], '.ant-divider-horizontal'],
[[undefined, true, 'horizontal'], '.ant-divider-vertical'],
[['center', undefined, 'horizontal', 'left', 20], '.ant-divider-with-text-start'],
];
it.each(testCases)('with args %j should have %s node', (params, expected) => {
const { container } = render(
<Divider
orientation={params[0] as Orientation}
vertical={params[1]}
type={params[2]}
titlePlacement={params[3]}
{...(params[4] && { orientationMargin: params[4] })}
>
Bamboo
</Divider>,
);
expect(container.querySelector<HTMLSpanElement>(expected)).not.toBeNull();
if (params[4]) {
expect(
container
.querySelector<HTMLSpanElement>('.ant-divider-inner-text')
?.style.getPropertyValue('margin-inline-start'),
).toBe('20px');
}
});
});
}); });

10
components/divider/demo/_semantic.tsx
View File

@ -35,23 +35,23 @@ const Block: React.FC<DividerProps> = (props) => {
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi
ista probare, quae sunt a te dicta? Refert tamen, quo modo. ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p> </p>
<Divider orientation="left" variant="dotted" {...props}> <Divider titlePlacement="left" variant="dotted" {...props}>
Dotted Dotted
</Divider> </Divider>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi
ista probare, quae sunt a te dicta? Refert tamen, quo modo. ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p> </p>
<Divider orientation="right" variant="dashed" {...props}> <Divider titlePlacement="right" variant="dashed" {...props}>
Dashed Dashed
</Divider> </Divider>
<> <>
These These
<Divider type="vertical" {...props} /> <Divider orientation="vertical" {...props} />
are are
<Divider type="vertical" {...props} /> <Divider orientation="vertical" {...props} />
vertical vertical
<Divider type="vertical" {...props} /> <Divider orientation="vertical" {...props} />
Dividers Dividers
</> </>
</div> </div>

12
components/divider/demo/component-token.tsx
View File

@ -28,25 +28,25 @@ const App: React.FC = () => (
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
probare, quae sunt a te dicta? Refert tamen, quo modo. probare, quae sunt a te dicta? Refert tamen, quo modo.
</p> </p>
<Divider orientation="left">Left Text</Divider> <Divider titlePlacement="start">Left Text</Divider>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
probare, quae sunt a te dicta? Refert tamen, quo modo. probare, quae sunt a te dicta? Refert tamen, quo modo.
</p> </p>
<Divider orientation="right">Right Text</Divider> <Divider titlePlacement="end">Right Text</Divider>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
probare, quae sunt a te dicta? Refert tamen, quo modo. probare, quae sunt a te dicta? Refert tamen, quo modo.
</p> </p>
<Divider orientation="left" orientationMargin="0"> <Divider titlePlacement="start" styles={{ content: { margin: 0 } }}>
Left Text with 0 orientationMargin Left Text margin with 0
</Divider> </Divider>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
probare, quae sunt a te dicta? Refert tamen, quo modo. probare, quae sunt a te dicta? Refert tamen, quo modo.
</p> </p>
<Divider orientation="right" orientationMargin={50}> <Divider titlePlacement="end" styles={{ content: { margin: '0 50px' } }}>
Right Text with 50px orientationMargin Right Text margin with 50px
</Divider> </Divider>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista

6
components/divider/demo/customize-style.tsx
View File

@ -8,11 +8,11 @@ const App: React.FC = () => (
<Divider style={{ borderColor: '#7cb305' }} dashed> <Divider style={{ borderColor: '#7cb305' }} dashed>
Text Text
</Divider> </Divider>
<Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} /> <Divider vertical style={{ height: 60, borderColor: '#7cb305' }} />
<Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} dashed /> <Divider vertical style={{ height: 60, borderColor: '#7cb305' }} dashed />
<div style={{ display: 'flex', flexDirection: 'column', height: 50, boxShadow: '0 0 1px red' }}> <div style={{ display: 'flex', flexDirection: 'column', height: 50, boxShadow: '0 0 1px red' }}>
<Divider style={{ background: 'rgba(0,255,0,0.05)' }} orientation="left"> <Divider style={{ background: 'rgba(0,255,0,0.05)' }} titlePlacement="start">
Text Text
</Divider> </Divider>
</div> </div>

4
components/divider/demo/plain.tsx
View File

@ -12,14 +12,14 @@ const App: React.FC = () => (
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
probare, quae sunt a te dicta? Refert tamen, quo modo. probare, quae sunt a te dicta? Refert tamen, quo modo.
</p> </p>
<Divider orientation="left" plain> <Divider titlePlacement="start" plain>
Left Text Left Text
</Divider> </Divider>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
probare, quae sunt a te dicta? Refert tamen, quo modo. probare, quae sunt a te dicta? Refert tamen, quo modo.
</p> </p>
<Divider orientation="right" plain> <Divider titlePlacement="end" plain>
Right Text Right Text
</Divider> </Divider>
<p> <p>

4
components/divider/demo/vertical.md
View File

@ -1,7 +1,7 @@
## zh-CN ## zh-CN
使用 `type="vertical"` 设置为行内的垂直分割线。 使用 `orientation="vertical"` 或者 `vertical` 设置为行内的垂直分割线。
## en-US ## en-US
Use `type="vertical"` to make the divider vertical. Use `orientation="vertical"` or `vertical` to make the divider vertical.

4
components/divider/demo/vertical.tsx
View File

@ -4,9 +4,9 @@ import { Divider } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<> <>
Text Text
<Divider type="vertical" /> <Divider orientation="vertical" />
<a href="#">Link</a> <a href="#">Link</a>
<Divider type="vertical" /> <Divider vertical />
<a href="#">Link</a> <a href="#">Link</a>
</> </>
); );

4
components/divider/demo/with-text.md
View File

@ -1,7 +1,7 @@
## zh-CN ## zh-CN
分割线中带有文字，可以用 `orientation` 指定文字位置。 分割线中带有文字，可以用 `titlePlacement` 指定文字位置。
## en-US ## en-US
Divider with inner title, set `orientation="left/right"` to align it. Divider with inner title, set `titlePlacement="start/end"` to align it.

12
components/divider/demo/with-text.tsx
View File

@ -12,25 +12,25 @@ const App: React.FC = () => (
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
probare, quae sunt a te dicta? Refert tamen, quo modo. probare, quae sunt a te dicta? Refert tamen, quo modo.
</p> </p>
<Divider orientation="left">Left Text</Divider> <Divider titlePlacement="start">Left Text</Divider>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
probare, quae sunt a te dicta? Refert tamen, quo modo. probare, quae sunt a te dicta? Refert tamen, quo modo.
</p> </p>
<Divider orientation="right">Right Text</Divider> <Divider titlePlacement="end">Right Text</Divider>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
probare, quae sunt a te dicta? Refert tamen, quo modo. probare, quae sunt a te dicta? Refert tamen, quo modo.
</p> </p>
<Divider orientation="left" orientationMargin="0"> <Divider titlePlacement="start" styles={{ content: { margin: 0 } }}>
Left Text with 0 orientationMargin Left Text margin with 0
</Divider> </Divider>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
probare, quae sunt a te dicta? Refert tamen, quo modo. probare, quae sunt a te dicta? Refert tamen, quo modo.
</p> </p>
<Divider orientation="right" orientationMargin={50}> <Divider titlePlacement="end" styles={{ content: { margin: '0 50px' } }}>
Right Text with 50px orientationMargin Right Text margin with 50px
</Divider> </Divider>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista

10
components/divider/index.en-US.md
View File

@ -37,13 +37,15 @@ Common props ref：[Common props](/docs/react/common-props)
| children | The wrapped title | ReactNode | - | | | children | The wrapped title | ReactNode | - | |
| className | The className of container | string | - | | | className | The className of container | string | - | |
| dashed | Whether line is dashed | boolean | false | | | dashed | Whether line is dashed | boolean | false | |
| variant | Whether line is dashed, dotted or solid | `dashed` \| `dotted` \| `solid` | solid | 5.20.0 | | orientation | Whether line is horizontal or vertical | `horizontal` \| `vertical` | `horizontal` | - |
| orientation | The position of title inside divider | `start` \| `end` \| `center` | `center` | `start` `end`: 5.24.0 | | ~~orientationMargin~~ | The margin-left/right between the title and its closest border, while the `titlePlacement` should not be `center`, If a numeric value of type `string` is provided without a unit, it is assumed to be in pixels (px) by default. | string \| number | - | |
| orientationMargin | The margin-left/right between the title and its closest border, while the `orientation` should not be `center`, If a numeric value of type `string` is provided without a unit, it is assumed to be in pixels (px) by default. | string \| number | - | |
| plain | Divider text show as plain style | boolean | true | 4.2.0 | | plain | Divider text show as plain style | boolean | true | 4.2.0 |
| style | The style object of container | CSSProperties | - | | | style | The style object of container | CSSProperties | - | |
| size | The size of divider. Only valid for horizontal layout | `small` \| `middle` \| `large` | - | 5.25.0 | | size | The size of divider. Only valid for horizontal layout | `small` \| `middle` \| `large` | - | 5.25.0 |
| type | The direction type of divider | `horizontal` \| `vertical` | `horizontal` | | | titlePlacement | The position of title inside divider | `start` \| `end` \| `center` | `center` | - |
| ~~type~~ | The direction type of divider | `horizontal` \| `vertical` | `horizontal` | - |
| variant | Whether line is dashed, dotted or solid | `dashed` \| `dotted` \| `solid` | solid | 5.20.0 |
| vertical | Orientation, Simultaneously configure with `orientation` and prioritize `orientation` | boolean | false | - |
## Semantic DOM ## Semantic DOM

78
components/divider/index.tsx
View File

@ -2,6 +2,8 @@ import * as React from 'react';
import cls from 'classnames'; import cls from 'classnames';
import useMergeSemantic from '../_util/hooks/useMergeSemantic'; import useMergeSemantic from '../_util/hooks/useMergeSemantic';
import useOrientation from '../_util/hooks/useOrientation';
import type { Orientation } from '../_util/hooks/useOrientation';
import { devUseWarning } from '../_util/warning'; import { devUseWarning } from '../_util/warning';
import { useComponentConfig } from '../config-provider/context'; import { useComponentConfig } from '../config-provider/context';
import useSize from '../config-provider/hooks/useSize'; import useSize from '../config-provider/hooks/useSize';
@ -10,18 +12,21 @@ import useStyle from './style';
type SemanticName = 'root' | 'rail' | 'content'; type SemanticName = 'root' | 'rail' | 'content';
export type TitlePlacement =
| 'left'
| 'right'
| 'center'
| 'start' // 👈 5.24.0+
| 'end'; // 👈 5.24.0+
const titlePlacementList = ['left', 'right', 'center', 'start', 'end'];
export interface DividerProps { export interface DividerProps {
prefixCls?: string; prefixCls?: string;
type?: 'horizontal' | 'vertical'; /** @deprecated please use `orientation`*/
/** type?: Orientation;
* @default center orientation?: Orientation;
*/ vertical?: boolean;
orientation?: titlePlacement?: TitlePlacement;
| 'left' /** @deprecated please use `styles.content.margin` */
| 'right'
| 'center'
| 'start' // 👈 5.24.0+
| 'end'; // 👈 5.24.0+
orientationMargin?: string | number; orientationMargin?: string | number;
className?: string; className?: string;
rootClassName?: string; rootClassName?: string;
@ -40,7 +45,6 @@ export interface DividerProps {
} }
const sizeClassNameMap: Record<string, string> = { small: 'sm', middle: 'md' }; const sizeClassNameMap: Record<string, string> = { small: 'sm', middle: 'md' };
const Divider: React.FC<DividerProps> = (props) => { const Divider: React.FC<DividerProps> = (props) => {
const { const {
getPrefixCls, getPrefixCls,
@ -53,8 +57,10 @@ const Divider: React.FC<DividerProps> = (props) => {
const { const {
prefixCls: customizePrefixCls, prefixCls: customizePrefixCls,
type = 'horizontal', type,
orientation = 'center', orientation,
vertical,
titlePlacement,
orientationMargin, orientationMargin,
className, className,
rootClassName, rootClassName,
@ -68,6 +74,7 @@ const Divider: React.FC<DividerProps> = (props) => {
styles, styles,
...restProps ...restProps
} = props; } = props;
const prefixCls = getPrefixCls('divider', customizePrefixCls); const prefixCls = getPrefixCls('divider', customizePrefixCls);
const railCls = `${prefixCls}-rail`; const railCls = `${prefixCls}-rail`;
const [mergedClassNames, mergedStyles] = useMergeSemantic( const [mergedClassNames, mergedStyles] = useMergeSemantic(
@ -82,29 +89,34 @@ const Divider: React.FC<DividerProps> = (props) => {
const hasChildren = !!children; const hasChildren = !!children;
const mergedOrientation = React.useMemo<'start' | 'end' | 'center'>(() => { const validTitlePlacement = titlePlacementList.includes(orientation || '');
if (orientation === 'left') { const mergedTitlePlacement = React.useMemo<'start' | 'end' | 'center'>(() => {
const placement =
titlePlacement ?? (validTitlePlacement ? (orientation as TitlePlacement) : 'center');
if (placement === 'left') {
return direction === 'rtl' ? 'end' : 'start'; return direction === 'rtl' ? 'end' : 'start';
} }
if (orientation === 'right') { if (placement === 'right') {
return direction === 'rtl' ? 'start' : 'end'; return direction === 'rtl' ? 'start' : 'end';
} }
return orientation; return placement;
}, [direction, orientation]); }, [direction, orientation]);
const hasMarginStart = mergedOrientation === 'start' && orientationMargin != null; const hasMarginStart = mergedTitlePlacement === 'start' && orientationMargin != null;
const hasMarginEnd = mergedOrientation === 'end' && orientationMargin != null; const hasMarginEnd = mergedTitlePlacement === 'end' && orientationMargin != null;
const [mergedOrientation, mergedVertical] = useOrientation(orientation, vertical, type);
const classString = cls( const classString = cls(
prefixCls, prefixCls,
dividerClassName, dividerClassName,
hashId, hashId,
cssVarCls, cssVarCls,
`${prefixCls}-${type}`, `${prefixCls}-${mergedOrientation}`,
{ {
[`${prefixCls}-with-text`]: hasChildren, [`${prefixCls}-with-text`]: hasChildren,
[`${prefixCls}-with-text-${mergedOrientation}`]: hasChildren, [`${prefixCls}-with-text-${mergedTitlePlacement}`]: hasChildren,
[`${prefixCls}-dashed`]: !!dashed, [`${prefixCls}-dashed`]: !!dashed,
[`${prefixCls}-${variant}`]: variant !== 'solid', [`${prefixCls}-${variant}`]: variant !== 'solid',
[`${prefixCls}-plain`]: !!plain, [`${prefixCls}-plain`]: !!plain,
@ -120,7 +132,7 @@ const Divider: React.FC<DividerProps> = (props) => {
mergedClassNames.root, mergedClassNames.root,
); );
const memoizedOrientationMargin = React.useMemo<string | number>(() => { const memoizedPlacementMargin = React.useMemo<string | number>(() => {
if (typeof orientationMargin === 'number') { if (typeof orientationMargin === 'number') {
return orientationMargin; return orientationMargin;
} }
@ -131,20 +143,26 @@ const Divider: React.FC<DividerProps> = (props) => {
}, [orientationMargin]); }, [orientationMargin]);
const innerStyle: React.CSSProperties = { const innerStyle: React.CSSProperties = {
marginInlineStart: hasMarginStart ? memoizedOrientationMargin : undefined, marginInlineStart: hasMarginStart ? memoizedPlacementMargin : undefined,
marginInlineEnd: hasMarginEnd ? memoizedOrientationMargin : undefined, marginInlineEnd: hasMarginEnd ? memoizedPlacementMargin : undefined,
...mergedStyles.content,
}; };
// Warning children not work in vertical mode // =================== Warning =====================
if (process.env.NODE_ENV !== 'production') { if (process.env.NODE_ENV !== 'production') {
const warning = devUseWarning('Divider'); const warning = devUseWarning('Divider');
warning(!children || !mergedVertical, 'usage', '`children` not working in `vertical` mode.');
warning( warning(
!children || type !== 'vertical', !validTitlePlacement,
'usage', 'usage',
'`children` not working in `vertical` mode.', '`orientation` is used for direction, please use `titlePlacement` replace this',
); );
[
['type', 'orientation'],
['orientationMargin', 'styles.content.margin'],
].forEach(([deprecatedName, newName]) => {
warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
});
} }
return ( return (
@ -159,7 +177,7 @@ const Divider: React.FC<DividerProps> = (props) => {
{...restProps} {...restProps}
role="separator" role="separator"
> >
{children && type !== 'vertical' && ( {children && !mergedVertical && (
<> <>
<div <div
className={cls(railCls, `${railCls}-start`, mergedClassNames.rail)} className={cls(railCls, `${railCls}-start`, mergedClassNames.rail)}
@ -167,7 +185,7 @@ const Divider: React.FC<DividerProps> = (props) => {
/> />
<span <span
className={cls(`${prefixCls}-inner-text`, mergedClassNames.content)} className={cls(`${prefixCls}-inner-text`, mergedClassNames.content)}
style={innerStyle} style={{ ...innerStyle, ...mergedStyles.content }}
> >
{children} {children}
</span> </span>

10
components/divider/index.zh-CN.md
View File

@ -38,13 +38,15 @@ group:
| children | 嵌套的标题 | ReactNode | - | | | children | 嵌套的标题 | ReactNode | - | |
| className | 分割线样式类 | string | - | | | className | 分割线样式类 | string | - | |
| dashed | 是否虚线 | boolean | false | | | dashed | 是否虚线 | boolean | false | |
| variant | 分割线是虚线、点线还是实线 | `dashed` \| `dotted` \| `solid` | solid | 5.20.0 | | orientation | 水平或垂直类型 | `horizontal` \| `vertical` | `horizontal` | - |
| orientation | 分割线标题的位置 | `start` \| `end` \| `center` | `center` | `start` `end`: 5.24.0 | | ~~orientationMargin~~ | 标题和最近 left/right 边框之间的距离，去除了分割线，同时 `titlePlacement` 不能为 `center`。如果传入 `string` 类型的数字且不带单位，默认单位是 px | string \| number | - | |
| orientationMargin | 标题和最近 left/right 边框之间的距离，去除了分割线，同时 `orientation` 不能为 `center`。如果传入 `string` 类型的数字且不带单位，默认单位是 px | string \| number | - | |
| plain | 文字是否显示为普通正文样式 | boolean | false | 4.2.0 | | plain | 文字是否显示为普通正文样式 | boolean | false | 4.2.0 |
| style | 分割线样式对象 | CSSProperties | - | | | style | 分割线样式对象 | CSSProperties | - | |
| size | 间距大小，仅对水平布局有效 | `small` \| `middle` \| `large` | - | 5.25.0 | | size | 间距大小，仅对水平布局有效 | `small` \| `middle` \| `large` | - | 5.25.0 |
| type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` | | | titlePlacement | 分割线标题的位置 | `start` \| `end` \| `center` | `center` | - |
| ~~type~~ | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` | - |
| variant | 分割线是虚线、点线还是实线 | `dashed` \| `dotted` \| `solid` | solid | 5.20.0 |
| vertical | 是否垂直，和 orientation 同时配置以 orientation 优先 | boolean | false | - |
## Semantic DOM ## Semantic DOM

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

@ -17,7 +17,7 @@ export interface ComponentToken {
* @desc 文本与边缘距离，取值 0 ～ 1 * @desc 文本与边缘距离，取值 0 ～ 1
* @descEN Distance between text and edge, which should be a number between 0 and 1. * @descEN Distance between text and edge, which should be a number between 0 and 1.
*/ */
orientationMargin: number; orientationMargin?: number;
/** /**
* @desc 纵向分割线的横向外间距 * @desc 纵向分割线的横向外间距
* @descEN Horizontal margin of vertical Divider * @descEN Horizontal margin of vertical Divider

6
components/grid/demo/flex-align.tsx
View File

@ -7,7 +7,7 @@ const DemoBox: React.FC<React.PropsWithChildren<{ value: number }>> = (props) =>
const App: React.FC = () => ( const App: React.FC = () => (
<> <>
<Divider orientation="left">Align Top</Divider> <Divider titlePlacement="start">Align Top</Divider>
<Row justify="center" align="top"> <Row justify="center" align="top">
<Col span={4}> <Col span={4}>
<DemoBox value={100}>col-4</DemoBox> <DemoBox value={100}>col-4</DemoBox>
@ -23,7 +23,7 @@ const App: React.FC = () => (
</Col> </Col>
</Row> </Row>
<Divider orientation="left">Align Middle</Divider> <Divider titlePlacement="start">Align Middle</Divider>
<Row justify="space-around" align="middle"> <Row justify="space-around" align="middle">
<Col span={4}> <Col span={4}>
<DemoBox value={100}>col-4</DemoBox> <DemoBox value={100}>col-4</DemoBox>
@ -39,7 +39,7 @@ const App: React.FC = () => (
</Col> </Col>
</Row> </Row>
<Divider orientation="left">Align Bottom</Divider> <Divider titlePlacement="start">Align Bottom</Divider>
<Row justify="space-between" align="bottom"> <Row justify="space-between" align="bottom">
<Col span={4}> <Col span={4}>
<DemoBox value={100}>col-4</DemoBox> <DemoBox value={100}>col-4</DemoBox>

4
components/grid/demo/flex-order.tsx
View File

@ -3,7 +3,7 @@ import { Col, Divider, Row } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<> <>
<Divider orientation="left">Normal</Divider> <Divider titlePlacement="start">Normal</Divider>
<Row> <Row>
<Col span={6} order={4}> <Col span={6} order={4}>
1 col-order-4 1 col-order-4
@ -18,7 +18,7 @@ const App: React.FC = () => (
4 col-order-1 4 col-order-1
</Col> </Col>
</Row> </Row>
<Divider orientation="left">Responsive</Divider> <Divider titlePlacement="start">Responsive</Divider>
<Row> <Row>
<Col span={6} xs={{ order: 1 }} sm={{ order: 2 }} md={{ order: 3 }} lg={{ order: 4 }}> <Col span={6} xs={{ order: 1 }} sm={{ order: 2 }} md={{ order: 3 }} lg={{ order: 4 }}>
1 col-order-responsive 1 col-order-responsive

6
components/grid/demo/flex-stretch.tsx
View File

@ -3,17 +3,17 @@ import { Col, Divider, Row } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<> <>
<Divider orientation="left">Percentage columns</Divider> <Divider titlePlacement="start">Percentage columns</Divider>
<Row> <Row>
<Col flex={2}>2 / 5</Col> <Col flex={2}>2 / 5</Col>
<Col flex={3}>3 / 5</Col> <Col flex={3}>3 / 5</Col>
</Row> </Row>
<Divider orientation="left">Fill rest</Divider> <Divider titlePlacement="start">Fill rest</Divider>
<Row> <Row>
<Col flex="100px">100px</Col> <Col flex="100px">100px</Col>
<Col flex="auto">Fill Rest</Col> <Col flex="auto">Fill Rest</Col>
</Row> </Row>
<Divider orientation="left">Raw flex style</Divider> <Divider titlePlacement="start">Raw flex style</Divider>
<Row> <Row>
<Col flex="1 1 200px">1 1 200px</Col> <Col flex="1 1 200px">1 1 200px</Col>
<Col flex="0 1 300px">0 1 300px</Col> <Col flex="0 1 300px">0 1 300px</Col>

12
components/grid/demo/flex.tsx
View File

@ -3,7 +3,7 @@ import { Col, Divider, Row } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<> <>
<Divider orientation="left">sub-element align left</Divider> <Divider titlePlacement="start">sub-element align left</Divider>
<Row justify="start"> <Row justify="start">
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
@ -11,7 +11,7 @@ const App: React.FC = () => (
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
</Row> </Row>
<Divider orientation="left">sub-element align center</Divider> <Divider titlePlacement="start">sub-element align center</Divider>
<Row justify="center"> <Row justify="center">
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
@ -19,7 +19,7 @@ const App: React.FC = () => (
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
</Row> </Row>
<Divider orientation="left">sub-element align right</Divider> <Divider titlePlacement="start">sub-element align right</Divider>
<Row justify="end"> <Row justify="end">
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
@ -27,7 +27,7 @@ const App: React.FC = () => (
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
</Row> </Row>
<Divider orientation="left">sub-element monospaced arrangement</Divider> <Divider titlePlacement="start">sub-element monospaced arrangement</Divider>
<Row justify="space-between"> <Row justify="space-between">
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
@ -35,7 +35,7 @@ const App: React.FC = () => (
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
</Row> </Row>
<Divider orientation="left">sub-element align full</Divider> <Divider titlePlacement="start">sub-element align full</Divider>
<Row justify="space-around"> <Row justify="space-around">
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
@ -43,7 +43,7 @@ const App: React.FC = () => (
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
</Row> </Row>
<Divider orientation="left">sub-element align evenly</Divider> <Divider titlePlacement="start">sub-element align evenly</Divider>
<Row justify="space-evenly"> <Row justify="space-evenly">
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>

6
components/grid/demo/gutter.tsx
View File

@ -5,7 +5,7 @@ const style: React.CSSProperties = { background: '#0092ff', padding: '8px 0' };
const App: React.FC = () => ( const App: React.FC = () => (
<> <>
<Divider orientation="left">Horizontal</Divider> <Divider titlePlacement="start">Horizontal</Divider>
<Row gutter={16}> <Row gutter={16}>
<Col className="gutter-row" span={6}> <Col className="gutter-row" span={6}>
<div style={style}>col-6</div> <div style={style}>col-6</div>
@ -20,7 +20,7 @@ const App: React.FC = () => (
<div style={style}>col-6</div> <div style={style}>col-6</div>
</Col> </Col>
</Row> </Row>
<Divider orientation="left">Responsive</Divider> <Divider titlePlacement="start">Responsive</Divider>
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}> <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
<Col className="gutter-row" span={6}> <Col className="gutter-row" span={6}>
<div style={style}>col-6</div> <div style={style}>col-6</div>
@ -35,7 +35,7 @@ const App: React.FC = () => (
<div style={style}>col-6</div> <div style={style}>col-6</div>
</Col> </Col>
</Row> </Row>
<Divider orientation="left">Vertical</Divider> <Divider titlePlacement="start">Vertical</Divider>
<Row gutter={[16, 24]}> <Row gutter={[16, 24]}>
<Col className="gutter-row" span={6}> <Col className="gutter-row" span={6}>
<div style={style}>col-6</div> <div style={style}>col-6</div>

12
components/list/demo/component-token.tsx
View File

@ -43,7 +43,7 @@ const App: React.FC = () => (
}, },
}} }}
> >
<Divider orientation="left">Default Size</Divider> <Divider titlePlacement="start">Default Size</Divider>
<List <List
header={<div>Header</div>} header={<div>Header</div>}
footer={<div>Footer</div>} footer={<div>Footer</div>}
@ -55,7 +55,7 @@ const App: React.FC = () => (
</List.Item> </List.Item>
)} )}
/> />
<Divider orientation="left">Small Size</Divider> <Divider titlePlacement="start">Small Size</Divider>
<List <List
size="small" size="small"
header={<div>Header</div>} header={<div>Header</div>}
@ -64,7 +64,7 @@ const App: React.FC = () => (
dataSource={data} dataSource={data}
renderItem={(item) => <List.Item>{item}</List.Item>} renderItem={(item) => <List.Item>{item}</List.Item>}
/> />
<Divider orientation="left">Large Size</Divider> <Divider titlePlacement="start">Large Size</Divider>
<List <List
size="large" size="large"
header={<div>Header</div>} header={<div>Header</div>}
@ -73,7 +73,7 @@ const App: React.FC = () => (
dataSource={data} dataSource={data}
renderItem={(item) => <List.Item>{item}</List.Item>} renderItem={(item) => <List.Item>{item}</List.Item>}
/> />
<Divider orientation="left">Meta</Divider> <Divider titlePlacement="start">Meta</Divider>
<List <List
itemLayout="horizontal" itemLayout="horizontal"
dataSource={data1} dataSource={data1}
@ -87,7 +87,7 @@ const App: React.FC = () => (
</List.Item> </List.Item>
)} )}
/> />
<Divider orientation="left">Vertical</Divider> <Divider titlePlacement="start">Vertical</Divider>
<List <List
itemLayout="vertical" itemLayout="vertical"
dataSource={data1} dataSource={data1}
@ -101,7 +101,7 @@ const App: React.FC = () => (
</List.Item> </List.Item>
)} )}
/> />
<Divider orientation="left">Empty Text</Divider> <Divider titlePlacement="start">Empty Text</Divider>
<List /> <List />
</ConfigProvider> </ConfigProvider>
); );

6
components/list/demo/simple.tsx
View File

@ -11,7 +11,7 @@ const data = [
const App: React.FC = () => ( const App: React.FC = () => (
<> <>
<Divider orientation="left">Default Size</Divider> <Divider titlePlacement="start">Default Size</Divider>
<List <List
header={<div>Header</div>} header={<div>Header</div>}
footer={<div>Footer</div>} footer={<div>Footer</div>}
@ -23,7 +23,7 @@ const App: React.FC = () => (
</List.Item> </List.Item>
)} )}
/> />
<Divider orientation="left">Small Size</Divider> <Divider titlePlacement="start">Small Size</Divider>
<List <List
size="small" size="small"
header={<div>Header</div>} header={<div>Header</div>}
@ -32,7 +32,7 @@ const App: React.FC = () => (
dataSource={data} dataSource={data}
renderItem={(item) => <List.Item>{item}</List.Item>} renderItem={(item) => <List.Item>{item}</List.Item>}
/> />
<Divider orientation="left">Large Size</Divider> <Divider titlePlacement="start">Large Size</Divider>
<List <List
size="large" size="large"
header={<div>Header</div>} header={<div>Header</div>}

2
components/menu/demo/switch-mode.tsx
View File

@ -78,7 +78,7 @@ const App: React.FC = () => {
return ( return (
<> <>
<Switch onChange={changeMode} /> Change Mode <Switch onChange={changeMode} /> Change Mode
<Divider type="vertical" /> <Divider vertical />
<Switch onChange={changeTheme} /> Change Style <Switch onChange={changeTheme} /> Change Style
<br /> <br />
<br /> <br />

2
components/skeleton/demo/_semantic_element.tsx
View File

@ -50,7 +50,7 @@ const PreviewContent: React.FC<PreviewContentProps> = ({ element, setElement, ..
value={element} value={element}
onChange={(value: string) => setElement(value)} onChange={(value: string) => setElement(value)}
/> />
<Divider orientation="left" plain> <Divider titlePlacement="start" plain>
Preview Preview
</Divider> </Divider>
<Element {...rest} /> <Element {...rest} />

2
components/space/demo/split.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { Divider, Space, Typography } from 'antd'; import { Divider, Space, Typography } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Space split={<Divider type="vertical" />}> <Space split={<Divider vertical />}>
<Typography.Link>Link</Typography.Link> <Typography.Link>Link</Typography.Link>
<Typography.Link>Link</Typography.Link> <Typography.Link>Link</Typography.Link>
<Typography.Link>Link</Typography.Link> <Typography.Link>Link</Typography.Link>

4
components/tag/demo/colorful.tsx
View File

@ -21,7 +21,7 @@ const App: React.FC = () => (
<> <>
{variants.map((variant) => ( {variants.map((variant) => (
<div key={variant}> <div key={variant}>
<Divider orientation="left">Presets ({variant})</Divider> <Divider titlePlacement="start">Presets ({variant})</Divider>
<Flex gap="small" align="center" wrap> <Flex gap="small" align="center" wrap>
{presets.map((color) => ( {presets.map((color) => (
<Tag key={color} color={color} variant={variant}> <Tag key={color} color={color} variant={variant}>
@ -33,7 +33,7 @@ const App: React.FC = () => (
))} ))}
{variants.map((variant) => ( {variants.map((variant) => (
<div key={variant}> <div key={variant}>
<Divider orientation="left">Custom ({variant})</Divider> <Divider titlePlacement="start">Custom ({variant})</Divider>
<Flex gap="small" align="center" wrap> <Flex gap="small" align="center" wrap>
{customs.map((color) => ( {customs.map((color) => (
<Tag key={color} color={color} variant={variant}> <Tag key={color} color={color} variant={variant}>

2
components/tag/demo/status.tsx
View File

@ -21,7 +21,7 @@ const App: React.FC = () => (
<> <>
{variants.map((variant) => ( {variants.map((variant) => (
<div key={variant}> <div key={variant}>
<Divider orientation="left">Status ({variant})</Divider> <Divider titlePlacement="start">Status ({variant})</Divider>
<Flex gap="small" align="center" wrap> <Flex gap="small" align="center" wrap>
{presets.map(({ status, icon }) => ( {presets.map(({ status, icon }) => (
<Tag key={status} color={status} icon={icon} variant={variant}> <Tag key={status} color={status} icon={icon} variant={variant}>

4
components/tooltip/demo/colorful.tsx
View File

@ -21,7 +21,7 @@ const customColors = ['#f50', '#2db7f5', '#87d068', '#108ee9'];
const App: React.FC = () => ( const App: React.FC = () => (
<> <>
<Divider orientation="left">Presets</Divider> <Divider titlePlacement="start">Presets</Divider>
<Space wrap> <Space wrap>
{colors.map((color) => ( {colors.map((color) => (
<Tooltip title="prompt text" color={color} key={color}> <Tooltip title="prompt text" color={color} key={color}>
@ -29,7 +29,7 @@ const App: React.FC = () => (
</Tooltip> </Tooltip>
))} ))}
</Space> </Space>
<Divider orientation="left">Custom</Divider> <Divider titlePlacement="start">Custom</Divider>
<Space wrap> <Space wrap>
{customColors.map((color) => ( {customColors.map((color) => (
<Tooltip title="prompt text" color={color} key={color}> <Tooltip title="prompt text" color={color} key={color}>