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.
450 lines
38 KiB
450 lines
38 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[2695],{978148:function(p,r,n){n.r(r);var m=n(502143),_=n(968521),g=n(720719),h=n(28840),b=n(759907),c=n(828089),v=n(825673),B=n(902068),Z=n(574399),y=n(863942),f=n(316073),x=n(24628),w=n(719260),k=n(956140),a=n(127179),l=n(905388),D=n(40428),S=n(606965),P=n(268696),O=n(587302),o=n(424128),T=n(249706),E=n(795127),L=n(116846),A=n(212039),M=n(73024),R=n(553913),i=n(606641),d=n(667294),t=n(370917);function s(){var u=(0,i.eL)(),e=u.texts;return(0,t.tZ)(i.dY,null,(0,t.tZ)(d.Fragment,null,(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("p",null,e[0].value),(0,t.tZ)("h2",{id:"when-to-use"},(0,t.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#when-to-use",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"When To Use"),(0,t.tZ)("p",null,e[1].value),(0,t.tZ)("p",null,e[2].value),(0,t.tZ)("ul",null,(0,t.tZ)("li",null,e[3].value),(0,t.tZ)("li",null,e[4].value),(0,t.tZ)("li",null,e[5].value),(0,t.tZ)("li",null,e[6].value),(0,t.tZ)("li",null,e[7].value)),(0,t.tZ)("p",null,e[8].value),(0,t.tZ)("ul",null,(0,t.tZ)("li",null,(0,t.tZ)("code",null,e[9].value),e[10].value),(0,t.tZ)("li",null,(0,t.tZ)("code",null,e[11].value),e[12].value),(0,t.tZ)("li",null,(0,t.tZ)("code",null,e[13].value),e[14].value),(0,t.tZ)("li",null,(0,t.tZ)("code",null,e[15].value),e[16].value)),(0,t.tZ)("h2",{id:"examples"},(0,t.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#examples",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Examples")),(0,t.tZ)(l.Z,{items:[{demo:{id:"components-button-demo-basic"},previewerProps:{title:"Type",filename:"components/button/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 { Button, Space } from 'antd';
|
|
const App = () => (
|
|
<Space wrap>
|
|
<Button type="primary">Primary Button</Button>
|
|
<Button>Default Button</Button>
|
|
<Button type="dashed">Dashed Button</Button>
|
|
<Button type="text">Text Button</Button>
|
|
<Button type="link">Link Button</Button>
|
|
</Space>
|
|
);
|
|
export default App;
|
|
`,description:"<p>There are <code>primary</code> button, <code>default</code> button, <code>dashed</code> button, <code>text</code> button and <code>link</code> button in antd.</p>"}},{demo:{id:"components-button-demo-icon"},previewerProps:{title:"Icon",filename:"components/button/demo/icon.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 { SearchOutlined } from '@ant-design/icons';
|
|
import { Button, Tooltip, Space } from 'antd';
|
|
const App = () => (
|
|
<Space direction="vertical">
|
|
<Space wrap>
|
|
<Tooltip title="search">
|
|
<Button type="primary" shape="circle" icon={<SearchOutlined />} />
|
|
</Tooltip>
|
|
<Button type="primary" shape="circle">
|
|
A
|
|
</Button>
|
|
<Button type="primary" icon={<SearchOutlined />}>
|
|
Search
|
|
</Button>
|
|
<Tooltip title="search">
|
|
<Button shape="circle" icon={<SearchOutlined />} />
|
|
</Tooltip>
|
|
<Button icon={<SearchOutlined />}>Search</Button>
|
|
</Space>
|
|
<Space wrap>
|
|
<Tooltip title="search">
|
|
<Button shape="circle" icon={<SearchOutlined />} />
|
|
</Tooltip>
|
|
<Button icon={<SearchOutlined />}>Search</Button>
|
|
<Tooltip title="search">
|
|
<Button type="dashed" shape="circle" icon={<SearchOutlined />} />
|
|
</Tooltip>
|
|
<Button type="dashed" icon={<SearchOutlined />}>
|
|
Search
|
|
</Button>
|
|
<Button icon={<SearchOutlined />} href="https://www.google.com" />
|
|
</Space>
|
|
</Space>
|
|
);
|
|
export default App;
|
|
`,description:`<p><code>Button</code> components can contain an <code>Icon</code>. This is done by setting the <code>icon</code> property or placing an <code>Icon</code> component within the <code>Button</code>.</p>
|
|
<p>If you want specific control over the positioning and placement of the <code>Icon</code>, then that should be done by placing the <code>Icon</code> component within the <code>Button</code> rather than using the <code>icon</code> property.</p>`}},{demo:{id:"components-button-demo-debug-icon"},previewerProps:{debug:!0,title:"Debug Icon",filename:"components/button/demo/debug-icon.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 { SearchOutlined } from '@ant-design/icons';
|
|
import { Button, ConfigProvider, Divider, Radio, Space, Tooltip } from 'antd';
|
|
import React, { useState } from 'react';
|
|
const App = () => {
|
|
const [size, setSize] = useState('large');
|
|
return (
|
|
<>
|
|
<Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>
|
|
<Radio.Button value="large">Large</Radio.Button>
|
|
<Radio.Button value="default">Default</Radio.Button>
|
|
<Radio.Button value="small">Small</Radio.Button>
|
|
</Radio.Group>
|
|
<Divider orientation="left" plain>
|
|
Preview
|
|
</Divider>
|
|
<ConfigProvider componentSize={size}>
|
|
<Space direction="vertical">
|
|
<Space wrap>
|
|
<Tooltip title="search">
|
|
<Button type="primary" shape="circle" icon={<SearchOutlined />} />
|
|
</Tooltip>
|
|
<Button type="primary" shape="circle">
|
|
A
|
|
</Button>
|
|
<Button type="primary" icon={<SearchOutlined />}>
|
|
Search
|
|
</Button>
|
|
<Tooltip title="search">
|
|
<Button shape="circle" icon={<SearchOutlined />} />
|
|
</Tooltip>
|
|
<Button icon={<SearchOutlined />}>Search</Button>
|
|
</Space>
|
|
<Space wrap>
|
|
<Tooltip title="search">
|
|
<Button shape="circle" icon={<SearchOutlined />} />
|
|
</Tooltip>
|
|
<Button icon={<SearchOutlined />}>Search</Button>
|
|
<Tooltip title="search">
|
|
<Button type="dashed" shape="circle" icon={<SearchOutlined />} />
|
|
</Tooltip>
|
|
<Button type="dashed" icon={<SearchOutlined />}>
|
|
Search
|
|
</Button>
|
|
<Button icon={<SearchOutlined />} href="https://www.google.com" />
|
|
<Button>
|
|
<SearchOutlined />
|
|
Search
|
|
</Button>
|
|
</Space>
|
|
</Space>
|
|
</ConfigProvider>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Debug usage</p>"}},{demo:{id:"components-button-demo-debug-block"},previewerProps:{debug:!0,title:"Debug Block",filename:"components/button/demo/debug-block.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 { Form, Button } from 'antd';
|
|
import { DownloadOutlined } from '@ant-design/icons';
|
|
const App = () => (
|
|
<Form.Item>
|
|
<Button
|
|
size="large"
|
|
shape="round"
|
|
block
|
|
style={{
|
|
marginBottom: 12,
|
|
}}
|
|
>
|
|
Submit
|
|
</Button>
|
|
<Button size="large" shape="round" icon={<DownloadOutlined />} />
|
|
</Form.Item>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Debug usage</p>"}},{demo:{id:"components-button-demo-size"},previewerProps:{title:"Size",filename:"components/button/demo/size.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 { DownloadOutlined } from '@ant-design/icons';
|
|
import { Button, Radio, Space, Divider } from 'antd';
|
|
const App = () => {
|
|
const [size, setSize] = useState('large'); // default is 'middle'
|
|
|
|
return (
|
|
<>
|
|
<Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>
|
|
<Radio.Button value="large">Large</Radio.Button>
|
|
<Radio.Button value="default">Default</Radio.Button>
|
|
<Radio.Button value="small">Small</Radio.Button>
|
|
</Radio.Group>
|
|
<Divider orientation="left" plain>
|
|
Preview
|
|
</Divider>
|
|
<Space direction="vertical">
|
|
<Space wrap>
|
|
<Button type="primary" size={size}>
|
|
Primary
|
|
</Button>
|
|
<Button size={size}>Default</Button>
|
|
<Button type="dashed" size={size}>
|
|
Dashed
|
|
</Button>
|
|
</Space>
|
|
<Button type="link" size={size}>
|
|
Link
|
|
</Button>
|
|
<Space wrap>
|
|
<Button type="primary" icon={<DownloadOutlined />} size={size} />
|
|
<Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
|
|
<Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
|
|
<Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
|
|
Download
|
|
</Button>
|
|
<Button type="primary" icon={<DownloadOutlined />} size={size}>
|
|
Download
|
|
</Button>
|
|
</Space>
|
|
</Space>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:`<p>Ant Design supports a default button size as well as a large and small size.</p>
|
|
<p>If a large or small button is desired, set the <code>size</code> property to either <code>large</code> or <code>small</code> respectively. Omit the <code>size</code> property for a button with the default size.</p>`}},{demo:{id:"components-button-demo-disabled"},previewerProps:{title:"Disabled",filename:"components/button/demo/disabled.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 { Button, Space } from 'antd';
|
|
const App = () => (
|
|
<Space direction="vertical">
|
|
<Space>
|
|
<Button type="primary">Primary</Button>
|
|
<Button type="primary" disabled>
|
|
Primary(disabled)
|
|
</Button>
|
|
</Space>
|
|
<Space>
|
|
<Button>Default</Button>
|
|
<Button disabled>Default(disabled)</Button>
|
|
</Space>
|
|
<Space>
|
|
<Button type="dashed">Dashed</Button>
|
|
<Button type="dashed" disabled>
|
|
Dashed(disabled)
|
|
</Button>
|
|
</Space>
|
|
<Space>
|
|
<Button type="text">Text</Button>
|
|
<Button type="text" disabled>
|
|
Text(disabled)
|
|
</Button>
|
|
</Space>
|
|
<Space>
|
|
<Button type="link">Link</Button>
|
|
<Button type="link" disabled>
|
|
Link(disabled)
|
|
</Button>
|
|
</Space>
|
|
<Space>
|
|
<Button type="primary" href="https://ant.design/index-cn">
|
|
Href Primary
|
|
</Button>
|
|
<Button type="primary" href="https://ant.design/index-cn" disabled>
|
|
Href Primary(disabled)
|
|
</Button>
|
|
</Space>
|
|
<Space>
|
|
<Button danger>Danger Default</Button>
|
|
<Button danger disabled>
|
|
Danger Default(disabled)
|
|
</Button>
|
|
</Space>
|
|
<Space>
|
|
<Button danger type="text">
|
|
Danger Text
|
|
</Button>
|
|
<Button danger type="text" disabled>
|
|
Danger Text(disabled)
|
|
</Button>
|
|
</Space>
|
|
<Space>
|
|
<Button type="link" danger>
|
|
Danger Link
|
|
</Button>
|
|
<Button type="link" danger disabled>
|
|
Danger Link(disabled)
|
|
</Button>
|
|
</Space>
|
|
<Space className="site-button-ghost-wrapper">
|
|
<Button ghost>Ghost</Button>
|
|
<Button ghost disabled>
|
|
Ghost(disabled)
|
|
</Button>
|
|
</Space>
|
|
</Space>
|
|
);
|
|
export default App;
|
|
`,description:"<p>To mark a button as disabled, add the <code>disabled</code> property to the <code>Button</code>.</p>"}},{demo:{id:"components-button-demo-loading"},previewerProps:{title:"Loading",filename:"components/button/demo/loading.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 { PoweroffOutlined } from '@ant-design/icons';
|
|
import { Button, Space } from 'antd';
|
|
const App = () => {
|
|
const [loadings, setLoadings] = useState([]);
|
|
const enterLoading = (index) => {
|
|
setLoadings((prevLoadings) => {
|
|
const newLoadings = [...prevLoadings];
|
|
newLoadings[index] = true;
|
|
return newLoadings;
|
|
});
|
|
setTimeout(() => {
|
|
setLoadings((prevLoadings) => {
|
|
const newLoadings = [...prevLoadings];
|
|
newLoadings[index] = false;
|
|
return newLoadings;
|
|
});
|
|
}, 6000);
|
|
};
|
|
return (
|
|
<Space direction="vertical">
|
|
<Space wrap>
|
|
<Button type="primary" loading>
|
|
Loading
|
|
</Button>
|
|
<Button type="primary" size="small" loading>
|
|
Loading
|
|
</Button>
|
|
<Button type="primary" icon={<PoweroffOutlined />} loading />
|
|
</Space>
|
|
|
|
<Space wrap>
|
|
<Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}>
|
|
Click me!
|
|
</Button>
|
|
<Button
|
|
type="primary"
|
|
icon={<PoweroffOutlined />}
|
|
loading={loadings[1]}
|
|
onClick={() => enterLoading(1)}
|
|
>
|
|
Click me!
|
|
</Button>
|
|
<Button
|
|
type="primary"
|
|
icon={<PoweroffOutlined />}
|
|
loading={loadings[2]}
|
|
onClick={() => enterLoading(2)}
|
|
/>
|
|
</Space>
|
|
</Space>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>A loading indicator can be added to a button by setting the <code>loading</code> property on the <code>Button</code>.</p>"}},{demo:{id:"components-button-demo-multiple"},previewerProps:{title:"Multiple Buttons",filename:"components/button/demo/multiple.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 { Button, Dropdown, Space } from 'antd';
|
|
const onMenuClick = (e) => {
|
|
console.log('click', e);
|
|
};
|
|
const items = [
|
|
{
|
|
key: '1',
|
|
label: '1st item',
|
|
},
|
|
{
|
|
key: '2',
|
|
label: '2nd item',
|
|
},
|
|
{
|
|
key: '3',
|
|
label: '3rd item',
|
|
},
|
|
];
|
|
const App = () => (
|
|
<Space direction="vertical">
|
|
<Button type="primary">primary</Button>
|
|
<Button>secondary</Button>
|
|
<Dropdown.Button
|
|
menu={{
|
|
items,
|
|
onClick: onMenuClick,
|
|
}}
|
|
>
|
|
Actions
|
|
</Dropdown.Button>
|
|
</Space>
|
|
);
|
|
export default App;
|
|
`,description:'<p>If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into <a href="/components/dropdown/#components-dropdown-demo-dropdown-button">Dropdown.Button</a>.</p>'}},{demo:{id:"components-button-demo-ghost"},previewerProps:{title:"Ghost Button",filename:"components/button/demo/ghost.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 { Button, Space } from 'antd';
|
|
const App = () => (
|
|
<Space className="site-button-ghost-wrapper" wrap>
|
|
<Button type="primary" ghost>
|
|
Primary
|
|
</Button>
|
|
<Button ghost>Default</Button>
|
|
<Button type="dashed" ghost>
|
|
Dashed
|
|
</Button>
|
|
<Button type="primary" danger ghost>
|
|
Danger
|
|
</Button>
|
|
</Space>
|
|
);
|
|
export default App;
|
|
`,description:"<p><code>ghost</code> property will make button's background transparent, it is commonly used in colored background.</p>"}},{demo:{id:"components-button-demo-danger"},previewerProps:{title:"Danger Buttons",filename:"components/button/demo/danger.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 { Button, Space } from 'antd';
|
|
const App = () => (
|
|
<Space wrap>
|
|
<Button type="primary" danger>
|
|
Primary
|
|
</Button>
|
|
<Button danger>Default</Button>
|
|
<Button type="dashed" danger>
|
|
Dashed
|
|
</Button>
|
|
<Button type="text" danger>
|
|
Text
|
|
</Button>
|
|
<Button type="link" danger>
|
|
Link
|
|
</Button>
|
|
</Space>
|
|
);
|
|
export default App;
|
|
`,description:"<p><code>danger</code> is a property of button after antd 4.0.</p>"}},{demo:{id:"components-button-demo-block"},previewerProps:{title:"Block Button",filename:"components/button/demo/block.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 { Button, Space } from 'antd';
|
|
const App = () => (
|
|
<Space
|
|
direction="vertical"
|
|
style={{
|
|
width: '100%',
|
|
}}
|
|
>
|
|
<Button type="primary" block>
|
|
Primary
|
|
</Button>
|
|
<Button block>Default</Button>
|
|
<Button type="dashed" block>
|
|
Dashed
|
|
</Button>
|
|
<Button disabled block>
|
|
disabled
|
|
</Button>
|
|
<Button type="text" block>
|
|
text
|
|
</Button>
|
|
<Button type="link" block>
|
|
Link
|
|
</Button>
|
|
</Space>
|
|
);
|
|
export default App;
|
|
`,description:"<p><code>block</code> property will make the button fit to its parent width.</p>"}},{demo:{id:"components-button-demo-legacy-group"},previewerProps:{debug:!0,title:"Deprecated Button Group",filename:"components/button/demo/legacy-group.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 { DownloadOutlined } from '@ant-design/icons';
|
|
import { Button, Tooltip } from 'antd';
|
|
import React from 'react';
|
|
const CustomGroup = (props) => (
|
|
<Button.Group {...props}>
|
|
<Button type="primary">Button 1</Button>
|
|
<Button type="primary">Button 2</Button>
|
|
<Tooltip title="Tooltip">
|
|
<Button type="primary" icon={<DownloadOutlined />} disabled />
|
|
</Tooltip>
|
|
<Tooltip title="Tooltip">
|
|
<Button type="primary" icon={<DownloadOutlined />} />
|
|
</Tooltip>
|
|
</Button.Group>
|
|
);
|
|
const App = () => (
|
|
<>
|
|
<CustomGroup size="small" />
|
|
<br />
|
|
<CustomGroup />
|
|
<br />
|
|
<CustomGroup size="large" />
|
|
</>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Debug usage</p>"}},{demo:{id:"components-button-demo-chinese-chars-loading"},previewerProps:{debug:!0,title:"Loading style bug",filename:"components/button/demo/chinese-chars-loading.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:`// @ts-nocheck
|
|
import { PoweroffOutlined } from '@ant-design/icons';
|
|
import { Button, Space } from 'antd';
|
|
import React from 'react';
|
|
const Text1 = () => '\u90E8\u7F72';
|
|
const Text2 = () => <span>\u90E8\u7F72</span>;
|
|
const Text3 = () => 'Submit';
|
|
const App = () => (
|
|
<Space wrap>
|
|
<Button loading>\u90E8\u7F72</Button>
|
|
<Button loading>
|
|
<Text1 />
|
|
</Button>
|
|
<Button loading>
|
|
<Text2 />
|
|
</Button>
|
|
<Button loading>
|
|
<Text3 />
|
|
</Button>
|
|
<Button loading icon={<PoweroffOutlined />}>
|
|
<Text1 />
|
|
</Button>
|
|
<Button loading>\u6309\u94AE</Button>
|
|
</Space>
|
|
);
|
|
export default App;
|
|
`,description:'<p><a href="https://github.com/ant-design/ant-design/issues/36165">https://github.com/ant-design/ant-design/issues/36165</a></p>'}}]}),(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("h2",{id:"api"},(0,t.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"API"),(0,t.tZ)("p",null,e[17].value,(0,t.tZ)("code",null,e[18].value),e[19].value,(0,t.tZ)("code",null,e[20].value),e[21].value,(0,t.tZ)("code",null,e[22].value),e[23].value,(0,t.tZ)("code",null,e[24].value),e[25].value,(0,t.tZ)("code",null,e[26].value),e[27].value),(0,t.tZ)(c.Z,{className:"component-api-table"},(0,t.tZ)("thead",null,(0,t.tZ)("tr",null,(0,t.tZ)("th",null,e[28].value),(0,t.tZ)("th",null,e[29].value),(0,t.tZ)("th",null,e[30].value),(0,t.tZ)("th",null,e[31].value),(0,t.tZ)("th",null,e[32].value))),(0,t.tZ)("tbody",null,(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[33].value),(0,t.tZ)("td",null,e[34].value),(0,t.tZ)("td",null,e[35].value),(0,t.tZ)("td",null,e[36].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[37].value),(0,t.tZ)("td",null,e[38].value),(0,t.tZ)("td",null,e[39].value),(0,t.tZ)("td",null,e[40].value),(0,t.tZ)("td",null,e[41].value)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[42].value),(0,t.tZ)("td",null,e[43].value),(0,t.tZ)("td",null,e[44].value),(0,t.tZ)("td",null,e[45].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[46].value),(0,t.tZ)("td",null,e[47].value),(0,t.tZ)("td",null,e[48].value),(0,t.tZ)("td",null,e[49].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[50].value),(0,t.tZ)("td",null,e[51].value),(0,t.tZ)("td",null,e[52].value),(0,t.tZ)("td",null,e[53].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[54].value),(0,t.tZ)("td",null,e[55].value),(0,t.tZ)("td",null,e[56].value),(0,t.tZ)("td",null,e[57].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[58].value),(0,t.tZ)("td",null,e[59].value,(0,t.tZ)("code",null,e[60].value),e[61].value,(0,t.tZ)("code",null,e[62].value),e[63].value,(0,t.tZ)(o.Z,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type",sourceType:"a"},e[64].value)),(0,t.tZ)("td",null,e[65].value),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[66].value)),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[67].value),(0,t.tZ)("td",null,e[68].value),(0,t.tZ)("td",null,e[69].value),(0,t.tZ)("td",null,e[70].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[71].value),(0,t.tZ)("td",null,e[72].value),(0,t.tZ)("td",null,e[73].value),(0,t.tZ)("td",null,e[74].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[75].value),(0,t.tZ)("td",null,e[76].value),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[77].value),e[78].value,(0,t.tZ)("code",null,e[79].value),e[80].value,(0,t.tZ)("code",null,e[81].value)),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[82].value)),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[83].value),(0,t.tZ)("td",null,e[84].value),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[85].value),e[86].value,(0,t.tZ)("code",null,e[87].value),e[88].value,(0,t.tZ)("code",null,e[89].value)),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[90].value)),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[91].value),(0,t.tZ)("td",null,e[92].value),(0,t.tZ)("td",null,e[93].value),(0,t.tZ)("td",null,e[94].value),(0,t.tZ)("td",null,e[95].value)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[96].value),(0,t.tZ)("td",null,e[97].value),(0,t.tZ)("td",null,e[98].value),(0,t.tZ)("td",null,e[99].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[100].value),(0,t.tZ)("td",null,e[101].value),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[102].value),e[103].value,(0,t.tZ)("code",null,e[104].value),e[105].value,(0,t.tZ)("code",null,e[106].value),e[107].value,(0,t.tZ)("code",null,e[108].value),e[109].value,(0,t.tZ)("code",null,e[110].value)),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[111].value)),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[112].value),(0,t.tZ)("td",null,e[113].value,(0,t.tZ)("code",null,e[114].value),e[115].value),(0,t.tZ)("td",null,e[116].value),(0,t.tZ)("td",null,e[117].value),(0,t.tZ)("td",null)))),(0,t.tZ)("p",null,e[118].value),(0,t.tZ)("h3",{id:"styles-and-classnames-attribute"},(0,t.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#styles-and-classnames-attribute",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),(0,t.tZ)("code",null,e[119].value)," and ",(0,t.tZ)("code",null,e[120].value)," attribute"),(0,t.tZ)(c.Z,{className:"component-api-table"},(0,t.tZ)("thead",null,(0,t.tZ)("tr",null,(0,t.tZ)("th",null,e[121].value),(0,t.tZ)("th",null,e[122].value),(0,t.tZ)("th",null,e[123].value))),(0,t.tZ)("tbody",null,(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[124].value),(0,t.tZ)("td",null,e[125].value,(0,t.tZ)("code",null,e[126].value),e[127].value),(0,t.tZ)("td",null,e[128].value)))),(0,t.tZ)("h2",{id:"design-token"},(0,t.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#design-token",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Design Token")),(0,t.tZ)(a.Z,{component:"Button"}),(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("h2",{id:"faq"},(0,t.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#faq",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"FAQ"),(0,t.tZ)("h3",{id:"how-to-remove-space-between-2-chinese-characters"},(0,t.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#how-to-remove-space-between-2-chinese-characters",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"How to remove space between 2 chinese characters?"),(0,t.tZ)("p",null,e[129].value,(0,t.tZ)(o.Z,{to:"/components/config-provider/#api",sourceType:"Link"},e[130].value),e[131].value,(0,t.tZ)("code",null,e[132].value),e[133].value,(0,t.tZ)("code",null,e[134].value),e[135].value),(0,t.tZ)("img",{src:"https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png",style:{boxShadow:"none",margin:"0",width:"100px"},alt:"Button with two Chinese characters"}),(0,t.tZ)("style",{dangerouslySetInnerHTML:{__html:`
|
|
.site-button-ghost-wrapper {
|
|
padding: 16px;
|
|
background: rgb(190, 200, 200);
|
|
}
|
|
`}}))))}r.default=s}}]);
|
|
|