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>
69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { Col, Divider, Row } from 'antd';
|
|
|
|
const style: React.CSSProperties = { background: '#0092ff', padding: '8px 0' };
|
|
|
|
const App: React.FC = () => (
|
|
<>
|
|
<Divider titlePlacement="start">Horizontal</Divider>
|
|
<Row gutter={16}>
|
|
<Col className="gutter-row" span={6}>
|
|
<div style={style}>col-6</div>
|
|
</Col>
|
|
<Col className="gutter-row" span={6}>
|
|
<div style={style}>col-6</div>
|
|
</Col>
|
|
<Col className="gutter-row" span={6}>
|
|
<div style={style}>col-6</div>
|
|
</Col>
|
|
<Col className="gutter-row" span={6}>
|
|
<div style={style}>col-6</div>
|
|
</Col>
|
|
</Row>
|
|
<Divider titlePlacement="start">Responsive</Divider>
|
|
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
|
|
<Col className="gutter-row" span={6}>
|
|
<div style={style}>col-6</div>
|
|
</Col>
|
|
<Col className="gutter-row" span={6}>
|
|
<div style={style}>col-6</div>
|
|
</Col>
|
|
<Col className="gutter-row" span={6}>
|
|
<div style={style}>col-6</div>
|
|
</Col>
|
|
<Col className="gutter-row" span={6}>
|
|
<div style={style}>col-6</div>
|
|
</Col>
|
|
</Row>
|
|
<Divider titlePlacement="start">Vertical</Divider>
|
|
<Row gutter={[16, 24]}>
|
|
<Col className="gutter-row" span={6}>
|
|
<div style={style}>col-6</div>
|
|
</Col>
|
|
<Col className="gutter-row" span={6}>
|
|
<div style={style}>col-6</div>
|
|
</Col>
|
|
<Col className="gutter-row" span={6}>
|
|
<div style={style}>col-6</div>
|
|
</Col>
|
|
<Col className="gutter-row" span={6}>
|
|
<div style={style}>col-6</div>
|
|
</Col>
|
|
<Col className="gutter-row" span={6}>
|
|
<div style={style}>col-6</div>
|
|
</Col>
|
|
<Col className="gutter-row" span={6}>
|
|
<div style={style}>col-6</div>
|
|
</Col>
|
|
<Col className="gutter-row" span={6}>
|
|
<div style={style}>col-6</div>
|
|
</Col>
|
|
<Col className="gutter-row" span={6}>
|
|
<div style={style}>col-6</div>
|
|
</Col>
|
|
</Row>
|
|
</>
|
|
);
|
|
|
|
export default App;
|