mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 19:19:57 +08:00
docs: update grid demo (#26022)
This commit is contained in:
xrkffgg
GitHub
parent
c345580ea2
commit
c72be7bdda
@ -76,7 +76,6 @@ Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
@ -111,7 +110,6 @@ Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
@ -146,7 +144,6 @@ Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
@ -181,7 +178,6 @@ Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
@ -216,7 +212,6 @@ Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
@ -256,7 +251,6 @@ Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
@ -307,7 +301,6 @@ Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
@ -358,7 +351,6 @@ Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
@ -414,7 +406,6 @@ Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
@ -449,7 +440,6 @@ Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
@ -489,7 +479,6 @@ Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
@ -516,7 +505,6 @@ Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
@ -543,7 +531,6 @@ Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
@ -575,7 +562,6 @@ Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
@ -631,7 +617,6 @@ Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
@ -687,7 +672,6 @@ Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
@ -827,9 +811,7 @@ Array [
|
||||
|
||||
exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
|
||||
Array [
|
||||
<span
|
||||
style="margin-right:6px"
|
||||
>
|
||||
<span>
|
||||
Horizontal Gutter (px):
|
||||
</span>,
|
||||
<div
|
||||
@ -925,9 +907,7 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<span
|
||||
style="margin-right:6px"
|
||||
>
|
||||
<span>
|
||||
Vertical Gutter (px):
|
||||
</span>,
|
||||
<div
|
||||
@ -1023,9 +1003,7 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<span
|
||||
style="margin-right:6px"
|
||||
>
|
||||
<span>
|
||||
Column Count:
|
||||
</span>,
|
||||
<div
|
||||
|
||||
@ -20,9 +20,7 @@ const DemoBox = props => <p className={`height-${props.value}`}>{props.children}
|
||||
|
||||
ReactDOM.render(
|
||||
<>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
Align Top
|
||||
</Divider>
|
||||
<Divider orientation="left">Align Top</Divider>
|
||||
<Row justify="center" align="top">
|
||||
<Col span={4}>
|
||||
<DemoBox value={100}>col-4</DemoBox>
|
||||
@ -38,9 +36,7 @@ ReactDOM.render(
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
Align Middle
|
||||
</Divider>
|
||||
<Divider orientation="left">Align Middle</Divider>
|
||||
<Row justify="space-around" align="middle">
|
||||
<Col span={4}>
|
||||
<DemoBox value={100}>col-4</DemoBox>
|
||||
@ -56,9 +52,7 @@ ReactDOM.render(
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
Align Bottom
|
||||
</Divider>
|
||||
<Divider orientation="left">Align Bottom</Divider>
|
||||
<Row justify="space-between" align="bottom">
|
||||
<Col span={4}>
|
||||
<DemoBox value={100}>col-4</DemoBox>
|
||||
|
||||
@ -18,9 +18,7 @@ import { Row, Col, Divider } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
Normal
|
||||
</Divider>
|
||||
<Divider orientation="left">Normal</Divider>
|
||||
<Row>
|
||||
<Col span={6} order={4}>
|
||||
1 col-order-4
|
||||
@ -35,9 +33,7 @@ ReactDOM.render(
|
||||
4 col-order-1
|
||||
</Col>
|
||||
</Row>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
Responsive
|
||||
</Divider>
|
||||
<Divider orientation="left">Responsive</Divider>
|
||||
<Row>
|
||||
<Col span={6} xs={{ order: 1 }} sm={{ order: 2 }} md={{ order: 3 }} lg={{ order: 4 }}>
|
||||
1 col-order-responsive
|
||||
|
||||
@ -18,23 +18,17 @@ import { Row, Col, Divider } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
Percentage columns
|
||||
</Divider>
|
||||
<Divider orientation="left">Percentage columns</Divider>
|
||||
<Row>
|
||||
<Col flex={2}>2 / 5</Col>
|
||||
<Col flex={3}>3 / 5</Col>
|
||||
</Row>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
Fill rest
|
||||
</Divider>
|
||||
<Divider orientation="left">Fill rest</Divider>
|
||||
<Row>
|
||||
<Col flex="100px">100px</Col>
|
||||
<Col flex="auto">Fill Rest</Col>
|
||||
</Row>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
Raw flex style
|
||||
</Divider>
|
||||
<Divider orientation="left">Raw flex style</Divider>
|
||||
<Row>
|
||||
<Col flex="1 1 200px">1 1 200px</Col>
|
||||
<Col flex="0 1 300px">0 1 300px</Col>
|
||||
|
||||
@ -20,9 +20,7 @@ import { Row, Col, Divider } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
sub-element align left
|
||||
</Divider>
|
||||
<Divider orientation="left">sub-element align left</Divider>
|
||||
<Row justify="start">
|
||||
<Col span={4}>col-4</Col>
|
||||
<Col span={4}>col-4</Col>
|
||||
@ -30,9 +28,7 @@ ReactDOM.render(
|
||||
<Col span={4}>col-4</Col>
|
||||
</Row>
|
||||
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
sub-element align center
|
||||
</Divider>
|
||||
<Divider orientation="left">sub-element align center</Divider>
|
||||
<Row justify="center">
|
||||
<Col span={4}>col-4</Col>
|
||||
<Col span={4}>col-4</Col>
|
||||
@ -40,9 +36,7 @@ ReactDOM.render(
|
||||
<Col span={4}>col-4</Col>
|
||||
</Row>
|
||||
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
sub-element align right
|
||||
</Divider>
|
||||
<Divider orientation="left">sub-element align right</Divider>
|
||||
<Row justify="end">
|
||||
<Col span={4}>col-4</Col>
|
||||
<Col span={4}>col-4</Col>
|
||||
@ -50,9 +44,7 @@ ReactDOM.render(
|
||||
<Col span={4}>col-4</Col>
|
||||
</Row>
|
||||
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
sub-element monospaced arrangement
|
||||
</Divider>
|
||||
<Divider orientation="left">sub-element monospaced arrangement</Divider>
|
||||
<Row justify="space-between">
|
||||
<Col span={4}>col-4</Col>
|
||||
<Col span={4}>col-4</Col>
|
||||
@ -60,9 +52,7 @@ ReactDOM.render(
|
||||
<Col span={4}>col-4</Col>
|
||||
</Row>
|
||||
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
sub-element align full
|
||||
</Divider>
|
||||
<Divider orientation="left">sub-element align full</Divider>
|
||||
<Row justify="space-around">
|
||||
<Col span={4}>col-4</Col>
|
||||
<Col span={4}>col-4</Col>
|
||||
|
||||
@ -7,7 +7,7 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
栅格常常需要和间隔进行配合，你可以使用 `Row` 的 `gutter` 属性，我们推荐使用 `(16+8n)px` 作为栅格间隔。(n 是自然数)
|
||||
栅格常常需要和间隔进行配合，你可以使用 `Row` 的 `gutter` 属性，我们推荐使用 `(16+8n)px` 作为栅格间隔(n 是自然数)。
|
||||
|
||||
如果要支持响应式，可以写成 `{ xs: 8, sm: 16, md: 24, lg: 32 }`。
|
||||
|
||||
@ -17,7 +17,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
You can use the `gutter` property of `Row` as grid spacing, we recommend set it to `(16 + 8n) px`. (`n` stands for natural number.)
|
||||
You can use the `gutter` property of `Row` as grid spacing, we recommend set it to `(16 + 8n) px` (`n` stands for natural number).
|
||||
|
||||
You can set it to a object like `{ xs: 8, sm: 16, md: 24, lg: 32 }` for responsive design.
|
||||
|
||||
@ -32,9 +32,7 @@ const style = { background: '#0092ff', padding: '8px 0' };
|
||||
|
||||
ReactDOM.render(
|
||||
<>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
Horizontal
|
||||
</Divider>
|
||||
<Divider orientation="left">Horizontal</Divider>
|
||||
<Row gutter={16}>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div style={style}>col-6</div>
|
||||
@ -49,9 +47,7 @@ ReactDOM.render(
|
||||
<div style={style}>col-6</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
Responsive
|
||||
</Divider>
|
||||
<Divider orientation="left">Responsive</Divider>
|
||||
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div style={style}>col-6</div>
|
||||
@ -66,9 +62,7 @@ ReactDOM.render(
|
||||
<div style={style}>col-6</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
|
||||
Vertical
|
||||
</Divider>
|
||||
<Divider orientation="left">Vertical</Divider>
|
||||
<Row gutter={[16, 24]}>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div style={style}>col-6</div>
|
||||
|
||||
@ -64,7 +64,7 @@ class App extends React.Component {
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<span style={{ marginRight: 6 }}>Horizontal Gutter (px): </span>
|
||||
<span>Horizontal Gutter (px): </span>
|
||||
<div style={{ width: '50%' }}>
|
||||
<Slider
|
||||
min={0}
|
||||
@ -76,7 +76,7 @@ class App extends React.Component {
|
||||
tipFormatter={value => gutters[value]}
|
||||
/>
|
||||
</div>
|
||||
<span style={{ marginRight: 6 }}>Vertical Gutter (px): </span>
|
||||
<span>Vertical Gutter (px): </span>
|
||||
<div style={{ width: '50%' }}>
|
||||
<Slider
|
||||
min={0}
|
||||
@ -88,7 +88,7 @@ class App extends React.Component {
|
||||
tipFormatter={value => vgutters[value]}
|
||||
/>
|
||||
</div>
|
||||
<span style={{ marginRight: 6 }}>Column Count:</span>
|
||||
<span>Column Count:</span>
|
||||
<div style={{ width: '50%', marginBottom: 48 }}>
|
||||
<Slider
|
||||
min={0}
|
||||
|
||||
@ -89,7 +89,7 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
|
||||
| 成员 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` | `top` | |
|
||||
| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]`。 | number \| object \| array | 0 | |
|
||||
| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| object \| array | 0 | |
|
||||
| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` | |
|
||||
|
||||
### Col
|
||||
|
||||
Loading…
Reference in New Issue
Block a user