mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 17:44:35 +08:00
b1467d6ec8
* 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>
61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { Col, Divider, Row } from 'antd';
|
|
|
|
const DemoBox: React.FC<React.PropsWithChildren<{ value: number }>> = (props) => (
|
|
<p className={`height-${props.value}`}>{props.children}</p>
|
|
);
|
|
|
|
const App: React.FC = () => (
|
|
<>
|
|
<Divider titlePlacement="start">Align Top</Divider>
|
|
<Row justify="center" align="top">
|
|
<Col span={4}>
|
|
<DemoBox value={100}>col-4</DemoBox>
|
|
</Col>
|
|
<Col span={4}>
|
|
<DemoBox value={50}>col-4</DemoBox>
|
|
</Col>
|
|
<Col span={4}>
|
|
<DemoBox value={120}>col-4</DemoBox>
|
|
</Col>
|
|
<Col span={4}>
|
|
<DemoBox value={80}>col-4</DemoBox>
|
|
</Col>
|
|
</Row>
|
|
|
|
<Divider titlePlacement="start">Align Middle</Divider>
|
|
<Row justify="space-around" align="middle">
|
|
<Col span={4}>
|
|
<DemoBox value={100}>col-4</DemoBox>
|
|
</Col>
|
|
<Col span={4}>
|
|
<DemoBox value={50}>col-4</DemoBox>
|
|
</Col>
|
|
<Col span={4}>
|
|
<DemoBox value={120}>col-4</DemoBox>
|
|
</Col>
|
|
<Col span={4}>
|
|
<DemoBox value={80}>col-4</DemoBox>
|
|
</Col>
|
|
</Row>
|
|
|
|
<Divider titlePlacement="start">Align Bottom</Divider>
|
|
<Row justify="space-between" align="bottom">
|
|
<Col span={4}>
|
|
<DemoBox value={100}>col-4</DemoBox>
|
|
</Col>
|
|
<Col span={4}>
|
|
<DemoBox value={50}>col-4</DemoBox>
|
|
</Col>
|
|
<Col span={4}>
|
|
<DemoBox value={120}>col-4</DemoBox>
|
|
</Col>
|
|
<Col span={4}>
|
|
<DemoBox value={80}>col-4</DemoBox>
|
|
</Col>
|
|
</Row>
|
|
</>
|
|
);
|
|
|
|
export default App;
|