You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.5 KiB
56 lines
1.5 KiB
import React from 'react';
|
|
import { Col, Divider, Row } from 'antd';
|
|
|
|
const App: React.FC = () => (
|
|
<>
|
|
<Divider orientation="left">sub-element align left</Divider>
|
|
<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>
|
|
</Row>
|
|
|
|
<Divider orientation="left">sub-element align center</Divider>
|
|
<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>
|
|
</Row>
|
|
|
|
<Divider orientation="left">sub-element align right</Divider>
|
|
<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>
|
|
</Row>
|
|
|
|
<Divider orientation="left">sub-element monospaced arrangement</Divider>
|
|
<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>
|
|
</Row>
|
|
|
|
<Divider orientation="left">sub-element align full</Divider>
|
|
<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>
|
|
</Row>
|
|
|
|
<Divider orientation="left">sub-element align evenly</Divider>
|
|
<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>
|
|
</Row>
|
|
</>
|
|
);
|
|
|
|
export default App;
|
|
|