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.
590 lines
39 KiB
590 lines
39 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[5841],{739052:function(p,r,o){o.r(r);var m=o(502143),_=o(968521),v=o(720719),g=o(28840),C=o(759907),l=o(828089),f=o(825673),Z=o(902068),x=o(574399),h=o(863942),b=o(316073),w=o(24628),y=o(719260),D=o(956140),s=o(127179),i=o(905388),R=o(40428),k=o(606965),E=o(268696),P=o(587302),t=o(424128),O=o(249706),B=o(795127),A=o(116846),M=o(212039),T=o(73024),j=o(553913),c=o(606641),a=o(667294),e=o(370917);function d(){var u=(0,c.eL)(),n=u.texts;return(0,e.tZ)(c.dY,null,(0,e.tZ)(a.Fragment,null,(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("p",null,n[0].value),(0,e.tZ)("h2",{id:"design-concept"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#design-concept",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Design concept"),(0,e.tZ)("div",{className:"grid-demo"},n[1].value,(0,e.tZ)("img",{src:"https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg",alt:"grid design"})),(0,e.tZ)("p",null,n[2].value),(0,e.tZ)("p",null,n[3].value),(0,e.tZ)("h2",{id:"outline"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#outline",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Outline"),(0,e.tZ)("p",null,n[4].value,(0,e.tZ)("code",null,n[5].value),n[6].value,(0,e.tZ)("code",null,n[7].value),n[8].value),(0,e.tZ)("p",null,n[9].value),(0,e.tZ)("ul",null,(0,e.tZ)("li",null,n[10].value,(0,e.tZ)("code",null,n[11].value),n[12].value,(0,e.tZ)("code",null,n[13].value),n[14].value),(0,e.tZ)("li",null,n[15].value,(0,e.tZ)("code",null,n[16].value),n[17].value,(0,e.tZ)("code",null,n[18].value),n[19].value,(0,e.tZ)("code",null,n[20].value),n[21].value),(0,e.tZ)("li",null,n[22].value,(0,e.tZ)("code",null,n[23].value),n[24].value),(0,e.tZ)("li",null,n[25].value,(0,e.tZ)("code",null,n[26].value),n[27].value,(0,e.tZ)("code",null,n[28].value),n[29].value,(0,e.tZ)("code",null,n[30].value),n[31].value)),(0,e.tZ)("p",null,n[32].value,(0,e.tZ)("code",null,n[33].value),n[34].value),(0,e.tZ)("p",null,n[35].value),(0,e.tZ)("h2",{id:"examples"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#examples",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Examples")),(0,e.tZ)(i.Z,{items:[{demo:{id:"components-grid-demo-basic"},previewerProps:{title:"Basic Grid",filename:"components/grid/demo/basic.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Col, Row } from 'antd';
|
|
const App = () => (
|
|
<>
|
|
<Row>
|
|
<Col span={24}>col</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col span={12}>col-12</Col>
|
|
<Col span={12}>col-12</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col span={8}>col-8</Col>
|
|
<Col span={8}>col-8</Col>
|
|
<Col span={8}>col-8</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col span={6}>col-6</Col>
|
|
<Col span={6}>col-6</Col>
|
|
<Col span={6}>col-6</Col>
|
|
<Col span={6}>col-6</Col>
|
|
</Row>
|
|
</>
|
|
);
|
|
export default App;
|
|
`,description:`<p>From the stack to the horizontal arrangement.</p>
|
|
<p>You can create a basic grid system by using a single set of <code>Row</code> and <code>Col</code> grid assembly, all of the columns (Col) must be placed in <code>Row</code>.</p>`}},{demo:{id:"components-grid-demo-gutter"},previewerProps:{title:"Grid Gutter",filename:"components/grid/demo/gutter.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Col, Divider, Row } from 'antd';
|
|
const style = {
|
|
background: '#0092ff',
|
|
padding: '8px 0',
|
|
};
|
|
const App = () => (
|
|
<>
|
|
<Divider orientation="left">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 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>
|
|
</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 orientation="left">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;
|
|
`,description:`<p>You can use the <code>gutter</code> property of <code>Row</code> as grid spacing, we recommend set it to <code>(16 + 8n) px</code> (<code>n</code> stands for natural number).</p>
|
|
<p>You can set it to a object like <code>{ xs: 8, sm: 16, md: 24, lg: 32 }</code> for responsive design.</p>
|
|
<p>You can use an array to set vertical spacing, <code>[horizontal, vertical]</code> <code>[16, { xs: 8, sm: 16, md: 24, lg: 32 }]</code>.</p>
|
|
<blockquote>
|
|
<p>vertical gutter was supported after <code>3.24.0</code>.</p>
|
|
</blockquote>`,style:`.gutter-box {
|
|
padding: 8px 0;
|
|
background: #00a0e9;
|
|
}`}},{demo:{id:"components-grid-demo-offset"},previewerProps:{title:"Column offset",filename:"components/grid/demo/offset.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Col, Row } from 'antd';
|
|
const App = () => (
|
|
<>
|
|
<Row>
|
|
<Col span={8}>col-8</Col>
|
|
<Col span={8} offset={8}>
|
|
col-8
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col span={6} offset={6}>
|
|
col-6 col-offset-6
|
|
</Col>
|
|
<Col span={6} offset={6}>
|
|
col-6 col-offset-6
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col span={12} offset={6}>
|
|
col-12 col-offset-6
|
|
</Col>
|
|
</Row>
|
|
</>
|
|
);
|
|
export default App;
|
|
`,description:"<p><code>offset</code> can set the column to the right side. For example, using <code>offset = {4}</code> can set the element shifted to the right four columns width.</p>"}},{demo:{id:"components-grid-demo-sort"},previewerProps:{title:"Grid sort",filename:"components/grid/demo/sort.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Col, Row } from 'antd';
|
|
const App = () => (
|
|
<Row>
|
|
<Col span={18} push={6}>
|
|
col-18 col-push-6
|
|
</Col>
|
|
<Col span={6} pull={18}>
|
|
col-6 col-pull-18
|
|
</Col>
|
|
</Row>
|
|
);
|
|
export default App;
|
|
`,description:"<p>By using <code>push</code> and <code>pull</code> class you can easily change column order.</p>"}},{demo:{id:"components-grid-demo-flex"},previewerProps:{title:"Typesetting",filename:"components/grid/demo/flex.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Col, Divider, Row } from 'antd';
|
|
const App = () => (
|
|
<>
|
|
<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;
|
|
`,description:"<p>Child elements depending on the value of the <code>start</code>, <code>center</code>, <code>end</code>, <code>space-between</code>, <code>space-around</code> and <code>space-evenly</code>, which are defined in its parent node typesetting mode.</p>",style:`#components-grid-demo-flex [class~='ant-row'] {
|
|
background: rgba(128, 128, 128, 0.08);
|
|
}`}},{demo:{id:"components-grid-demo-flex-align"},previewerProps:{title:"Alignment",filename:"components/grid/demo/flex-align.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Col, Divider, Row } from 'antd';
|
|
const DemoBox = (props) => <p className={\`height-\${props.value}\`}>{props.children}</p>;
|
|
const App = () => (
|
|
<>
|
|
<Divider orientation="left">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 orientation="left">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 orientation="left">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;
|
|
`,description:"<p>Child elements vertically aligned.</p>",style:`#components-grid-demo-flex-align [class~='ant-row'] {
|
|
background: rgba(128, 128, 128, 0.08);
|
|
}`}},{demo:{id:"components-grid-demo-flex-order"},previewerProps:{title:"Order",filename:"components/grid/demo/flex-order.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Col, Divider, Row } from 'antd';
|
|
const App = () => (
|
|
<>
|
|
<Divider orientation="left">Normal</Divider>
|
|
<Row>
|
|
<Col span={6} order={4}>
|
|
1 col-order-4
|
|
</Col>
|
|
<Col span={6} order={3}>
|
|
2 col-order-3
|
|
</Col>
|
|
<Col span={6} order={2}>
|
|
3 col-order-2
|
|
</Col>
|
|
<Col span={6} order={1}>
|
|
4 col-order-1
|
|
</Col>
|
|
</Row>
|
|
<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
|
|
</Col>
|
|
<Col
|
|
span={6}
|
|
xs={{
|
|
order: 2,
|
|
}}
|
|
sm={{
|
|
order: 1,
|
|
}}
|
|
md={{
|
|
order: 4,
|
|
}}
|
|
lg={{
|
|
order: 3,
|
|
}}
|
|
>
|
|
2 col-order-responsive
|
|
</Col>
|
|
<Col
|
|
span={6}
|
|
xs={{
|
|
order: 3,
|
|
}}
|
|
sm={{
|
|
order: 4,
|
|
}}
|
|
md={{
|
|
order: 2,
|
|
}}
|
|
lg={{
|
|
order: 1,
|
|
}}
|
|
>
|
|
3 col-order-responsive
|
|
</Col>
|
|
<Col
|
|
span={6}
|
|
xs={{
|
|
order: 4,
|
|
}}
|
|
sm={{
|
|
order: 3,
|
|
}}
|
|
md={{
|
|
order: 1,
|
|
}}
|
|
lg={{
|
|
order: 2,
|
|
}}
|
|
>
|
|
4 col-order-responsive
|
|
</Col>
|
|
</Row>
|
|
</>
|
|
);
|
|
export default App;
|
|
`,description:"<p>To change the element sort by <code>order</code>.</p>",style:`#components-grid-demo-flex-order [class~='ant-row'] {
|
|
background: rgba(128, 128, 128, 0.08);
|
|
}`}},{demo:{id:"components-grid-demo-flex-stretch"},previewerProps:{title:"Flex Stretch",filename:"components/grid/demo/flex-stretch.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Col, Divider, Row } from 'antd';
|
|
const App = () => (
|
|
<>
|
|
<Divider orientation="left">Percentage columns</Divider>
|
|
<Row>
|
|
<Col flex={2}>2 / 5</Col>
|
|
<Col flex={3}>3 / 5</Col>
|
|
</Row>
|
|
<Divider orientation="left">Fill rest</Divider>
|
|
<Row>
|
|
<Col flex="100px">100px</Col>
|
|
<Col flex="auto">Fill Rest</Col>
|
|
</Row>
|
|
<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>
|
|
</Row>
|
|
|
|
<Row wrap={false}>
|
|
<Col flex="none">
|
|
<div
|
|
style={{
|
|
padding: '0 16px',
|
|
}}
|
|
>
|
|
none
|
|
</div>
|
|
</Col>
|
|
<Col flex="auto">auto with no-wrap</Col>
|
|
</Row>
|
|
</>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Col provides <code>flex</code> prop to support fill rest.</p>"}},{demo:{id:"components-grid-demo-responsive"},previewerProps:{title:"Responsive",filename:"components/grid/demo/responsive.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Col, Row } from 'antd';
|
|
const App = () => (
|
|
<Row>
|
|
<Col xs={2} sm={4} md={6} lg={8} xl={10}>
|
|
Col
|
|
</Col>
|
|
<Col xs={20} sm={16} md={12} lg={8} xl={4}>
|
|
Col
|
|
</Col>
|
|
<Col xs={2} sm={4} md={6} lg={8} xl={10}>
|
|
Col
|
|
</Col>
|
|
</Row>
|
|
);
|
|
export default App;
|
|
`,description:'<p>Referring to the Bootstrap <a href="http://getbootstrap.com/css/#grid-media-queries">responsive design</a>, here preset six dimensions: <code>xs</code> <code>sm</code> <code>md</code> <code>lg</code> <code>xl</code> <code>xxl</code>.</p>'}},{demo:{id:"components-grid-demo-responsive-more"},previewerProps:{title:"More responsive",filename:"components/grid/demo/responsive-more.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Col, Row } from 'antd';
|
|
const App = () => (
|
|
<Row>
|
|
<Col
|
|
xs={{
|
|
span: 5,
|
|
offset: 1,
|
|
}}
|
|
lg={{
|
|
span: 6,
|
|
offset: 2,
|
|
}}
|
|
>
|
|
Col
|
|
</Col>
|
|
<Col
|
|
xs={{
|
|
span: 11,
|
|
offset: 1,
|
|
}}
|
|
lg={{
|
|
span: 6,
|
|
offset: 2,
|
|
}}
|
|
>
|
|
Col
|
|
</Col>
|
|
<Col
|
|
xs={{
|
|
span: 5,
|
|
offset: 1,
|
|
}}
|
|
lg={{
|
|
span: 6,
|
|
offset: 2,
|
|
}}
|
|
>
|
|
Col
|
|
</Col>
|
|
</Row>
|
|
);
|
|
export default App;
|
|
`,description:"<p><code>span</code> <code>pull</code> <code>push</code> <code>offset</code> <code>order</code> property can be embedded into <code>xs</code> <code>sm</code> <code>md</code> <code>lg</code> <code>xl</code> <code>xxl</code> properties to use, where <code>xs={6}</code> is equivalent to <code>xs={{span: 6}}</code>.</p>"}},{demo:{id:"components-grid-demo-playground"},previewerProps:{title:"Playground",filename:"components/grid/demo/playground.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import { Col, Row, Slider } from 'antd';
|
|
const gutters = {};
|
|
const vgutters = {};
|
|
const colCounts = {};
|
|
[8, 16, 24, 32, 40, 48].forEach((value, i) => {
|
|
gutters[i] = value;
|
|
});
|
|
[8, 16, 24, 32, 40, 48].forEach((value, i) => {
|
|
vgutters[i] = value;
|
|
});
|
|
[2, 3, 4, 6, 8, 12].forEach((value, i) => {
|
|
colCounts[i] = value;
|
|
});
|
|
const App = () => {
|
|
const [gutterKey, setGutterKey] = useState(1);
|
|
const [vgutterKey, setVgutterKey] = useState(1);
|
|
const [colCountKey, setColCountKey] = useState(2);
|
|
const cols = [];
|
|
const colCount = colCounts[colCountKey];
|
|
let colCode = '';
|
|
for (let i = 0; i < colCount; i++) {
|
|
cols.push(
|
|
<Col key={i.toString()} span={24 / colCount}>
|
|
<div>Column</div>
|
|
</Col>,
|
|
);
|
|
colCode += \` <Col span={\${24 / colCount}} />\\n\`;
|
|
}
|
|
return (
|
|
<>
|
|
<span>Horizontal Gutter (px): </span>
|
|
<div
|
|
style={{
|
|
width: '50%',
|
|
}}
|
|
>
|
|
<Slider
|
|
min={0}
|
|
max={Object.keys(gutters).length - 1}
|
|
value={gutterKey}
|
|
onChange={setGutterKey}
|
|
marks={gutters}
|
|
step={null}
|
|
tooltip={{
|
|
formatter: (value) => gutters[value],
|
|
}}
|
|
/>
|
|
</div>
|
|
<span>Vertical Gutter (px): </span>
|
|
<div
|
|
style={{
|
|
width: '50%',
|
|
}}
|
|
>
|
|
<Slider
|
|
min={0}
|
|
max={Object.keys(vgutters).length - 1}
|
|
value={vgutterKey}
|
|
onChange={setVgutterKey}
|
|
marks={vgutters}
|
|
step={null}
|
|
tooltip={{
|
|
formatter: (value) => vgutters[value],
|
|
}}
|
|
/>
|
|
</div>
|
|
<span>Column Count:</span>
|
|
<div
|
|
style={{
|
|
width: '50%',
|
|
marginBottom: 48,
|
|
}}
|
|
>
|
|
<Slider
|
|
min={0}
|
|
max={Object.keys(colCounts).length - 1}
|
|
value={colCountKey}
|
|
onChange={setColCountKey}
|
|
marks={colCounts}
|
|
step={null}
|
|
tooltip={{
|
|
formatter: (value) => colCounts[value],
|
|
}}
|
|
/>
|
|
</div>
|
|
<Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>
|
|
{cols}
|
|
{cols}
|
|
</Row>
|
|
Another Row:
|
|
<Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>{cols}</Row>
|
|
<pre className="demo-code">{\`<Row gutter={[\${gutters[gutterKey]}, \${vgutters[vgutterKey]}]}>\\n\${colCode}\\n\${colCode}</Row>\`}</pre>
|
|
<pre className="demo-code">{\`<Row gutter={[\${gutters[gutterKey]}, \${vgutters[vgutterKey]}]}>\\n\${colCode}</Row>\`}</pre>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>A simple playground for column count and gutter.</p>",style:`#components-grid-demo-playground [class~='ant-col'] {
|
|
background: transparent;
|
|
border: 0;
|
|
}
|
|
#components-grid-demo-playground [class~='ant-col'] > div {
|
|
height: 120px;
|
|
font-size: 14px;
|
|
line-height: 120px;
|
|
background: #0092ff;
|
|
border-radius: 4px;
|
|
}
|
|
#components-grid-demo-playground pre {
|
|
padding: 8px 16px;
|
|
font-size: 13px;
|
|
background: #f9f9f9;
|
|
border-radius: 6px;
|
|
}
|
|
#components-grid-demo-playground pre.demo-code {
|
|
direction: ltr;
|
|
}
|
|
#components-grid-demo-playground .ant-col {
|
|
padding: 0;
|
|
}`}},{demo:{id:"components-grid-demo-usebreakpoint"},previewerProps:{title:"useBreakpoint Hook",filename:"components/grid/demo/useBreakpoint.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Grid, Tag } from 'antd';
|
|
const { useBreakpoint } = Grid;
|
|
const App = () => {
|
|
const screens = useBreakpoint();
|
|
return (
|
|
<>
|
|
Current break point:{' '}
|
|
{Object.entries(screens)
|
|
.filter((screen) => !!screen[1])
|
|
.map((screen) => (
|
|
<Tag color="blue" key={screen[0]}>
|
|
{screen[0]}
|
|
</Tag>
|
|
))}
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Use <code>useBreakpoint</code> Hook provide personalized layout.</p>"}}]}),(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("h2",{id:"api"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"API"),(0,e.tZ)("p",null,n[36].value),(0,e.tZ)("ul",null,(0,e.tZ)("li",null,(0,e.tZ)(t.Z,{href:"http://roylee0704.github.io/react-flexbox-grid/",sourceType:"a"},n[37].value)),(0,e.tZ)("li",null,(0,e.tZ)(t.Z,{href:"https://github.com/whoisandy/react-blocks/",sourceType:"a"},n[38].value))),(0,e.tZ)("h3",{id:"row"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#row",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Row"),(0,e.tZ)(l.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[39].value),(0,e.tZ)("th",null,n[40].value),(0,e.tZ)("th",null,n[41].value),(0,e.tZ)("th",null,n[42].value),(0,e.tZ)("th",null,n[43].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[44].value),(0,e.tZ)("td",null,n[45].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[46].value),n[47].value,(0,e.tZ)("code",null,n[48].value),n[49].value,(0,e.tZ)("code",null,n[50].value),n[51].value,(0,e.tZ)("code",null,n[52].value),n[53].value,(0,e.tZ)("code",null,n[54].value)),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[55].value)),(0,e.tZ)("td",null,n[56].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[57].value),(0,e.tZ)("td",null,n[58].value,(0,e.tZ)("code",null,n[59].value)),(0,e.tZ)("td",null,n[60].value),(0,e.tZ)("td",null,n[61].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[62].value),(0,e.tZ)("td",null,n[63].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[64].value),n[65].value,(0,e.tZ)("code",null,n[66].value),n[67].value,(0,e.tZ)("code",null,n[68].value),n[69].value,(0,e.tZ)("code",null,n[70].value),n[71].value,(0,e.tZ)("code",null,n[72].value),n[73].value,(0,e.tZ)("code",null,n[74].value),n[75].value,(0,e.tZ)("code",null,n[76].value)),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[77].value)),(0,e.tZ)("td",null,n[78].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[79].value),(0,e.tZ)("td",null,n[80].value),(0,e.tZ)("td",null,n[81].value),(0,e.tZ)("td",null,n[82].value),(0,e.tZ)("td",null,n[83].value)))),(0,e.tZ)("h3",{id:"col"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#col",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Col"),(0,e.tZ)(l.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[84].value),(0,e.tZ)("th",null,n[85].value),(0,e.tZ)("th",null,n[86].value),(0,e.tZ)("th",null,n[87].value),(0,e.tZ)("th",null,n[88].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[89].value),(0,e.tZ)("td",null,n[90].value),(0,e.tZ)("td",null,n[91].value),(0,e.tZ)("td",null,n[92].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[93].value),(0,e.tZ)("td",null,n[94].value),(0,e.tZ)("td",null,n[95].value),(0,e.tZ)("td",null,n[96].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[97].value),(0,e.tZ)("td",null,n[98].value),(0,e.tZ)("td",null,n[99].value),(0,e.tZ)("td",null,n[100].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[101].value),(0,e.tZ)("td",null,n[102].value),(0,e.tZ)("td",null,n[103].value),(0,e.tZ)("td",null,n[104].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[105].value),(0,e.tZ)("td",null,n[106].value),(0,e.tZ)("td",null,n[107].value),(0,e.tZ)("td",null,n[108].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[109].value),(0,e.tZ)("td",null,n[110].value,(0,e.tZ)("code",null,n[111].value)),(0,e.tZ)("td",null,n[112].value),(0,e.tZ)("td",null,n[113].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[114].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[115].value),n[116].value,(0,e.tZ)("code",null,n[117].value),n[118].value),(0,e.tZ)("td",null,n[119].value),(0,e.tZ)("td",null,n[120].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[121].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[122].value),n[123].value,(0,e.tZ)("code",null,n[124].value),n[125].value),(0,e.tZ)("td",null,n[126].value),(0,e.tZ)("td",null,n[127].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[128].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[129].value),n[130].value,(0,e.tZ)("code",null,n[131].value),n[132].value),(0,e.tZ)("td",null,n[133].value),(0,e.tZ)("td",null,n[134].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[135].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[136].value),n[137].value,(0,e.tZ)("code",null,n[138].value),n[139].value),(0,e.tZ)("td",null,n[140].value),(0,e.tZ)("td",null,n[141].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[142].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[143].value),n[144].value,(0,e.tZ)("code",null,n[145].value),n[146].value),(0,e.tZ)("td",null,n[147].value),(0,e.tZ)("td",null,n[148].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[149].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[150].value),n[151].value,(0,e.tZ)("code",null,n[152].value),n[153].value),(0,e.tZ)("td",null,n[154].value),(0,e.tZ)("td",null,n[155].value),(0,e.tZ)("td",null)))),(0,e.tZ)("p",null,n[156].value,(0,e.tZ)("code",null,n[157].value),n[158].value,(0,e.tZ)(t.Z,{to:"/docs/react/customize-theme",sourceType:"Link"},n[159].value),n[160].value,(0,e.tZ)(t.Z,{href:"https://codesandbox.io/s/antd-reproduction-template-forked-dlq3r9?file=/index.js",sourceType:"a"},n[161].value),n[162].value),(0,e.tZ)("p",null,n[163].value,(0,e.tZ)(t.Z,{href:"https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints",sourceType:"a"},n[164].value),n[165].value,(0,e.tZ)("code",null,n[166].value),n[167].value),(0,e.tZ)("h2",{id:"design-token"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#design-token",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Design Token")),(0,e.tZ)(s.Z,{component:"Grid"})))}r.default=d}}]);
|
|
|