home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-13 14:56:27 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
e514bde0677133a8fa65eeb8060761a74fbceced
ant-design/components/button-cn/index.html
T
乐仪 e514bde067 Updates
2017-03-11 12:51:12 +08:00

332 lines
115 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An enterprise-class UI design language and React-based implementation">
<meta name="description" content="A set of high-quality React components">
<meta name="description" content="One of best React UI library for enterprise background">
<title>Ant Design - A UI Design Language</title>
<script>
(function() {
function isLocalStorageNameSupported() {
var testKey = 'test';
var storage = window.localStorage;
try {
storage.setItem(testKey, '1');
storage.removeItem(testKey);
return true;
} catch (error) {
return false;
}
}
// 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
var pathname = location.pathname;
function isZhCN(pathname) {
return /-cn\/?$/.test(pathname);
}
function getLocalizedPathname(path, zhCN) {
var pathname = path.startsWith('/') ? path : '/' + path;
if (!zhCN) { // to enUS
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
} else if (pathname === '/') {
return '/index-cn';
} else if (pathname.endsWith('/')) {
return pathname.replace(/\/$/, '-cn/');
}
return pathname + '-cn';
}
// 兼容旧的 URL， `?locale=...`
var queryString = location.search;
if (queryString) {
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
if (isZhCNConfig && !isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
}
}
// 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
var lang = (window.localStorage && localStorage.getItem('locale')) || (navigator.language.toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
// safari is 'zh-cn', while other browser is 'zh-CN';
if ((lang === 'zh-CN') !== isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
}
}
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
})()
</script>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
<link rel="stylesheet" type="text/css" href="/index.css"/>
<style id="nprogress-style">
#nprogress { display: none }
</style>
<!--[if lte IE 10]>
<script
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
<![endif]-->
<script>
if (!window.Intl) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
}
if (!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
}
// Enable Google Analytics
if (!location.port) {
/* eslint-disable */
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-72788897-1', 'auto');
ga('send', 'pageview');
/* eslint-enable */
}
</script>
</head>
<body>
<div id="react-content">
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="797814562"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-5 ant-col-lg-4" data-reactid="4"><a id="logo" href="/index-cn" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-19 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">搜索组件...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"><!-- react-text: 19 --><!-- /react-text --><!-- react-text: 20 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="21"><b data-reactid="22"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="23"><span data-reactid="24">EN</span></button><div class="ant-select-sm version ant-select ant-select-enabled" data-reactid="25"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="26"><div class="ant-select-selection__rendered" data-reactid="27"><div class="ant-select-selection-selected-value" title="2.8.1" style="display:block;opacity:1;" data-reactid="28">2.8.1</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="29"><b data-reactid="30"></b></span></div></div><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="31"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="32"><a href="/index-cn" data-reactid="33"><span data-reactid="34">首页</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="35"><a href="/docs/spec/introduce-cn" data-reactid="36"><span data-reactid="37">规范</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="38"><a href="/docs/react/introduce-cn" data-reactid="39"><span data-reactid="40">组件</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/pattern/navigation-cn" data-reactid="42"><span data-reactid="43">模式</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download-cn" data-reactid="45"><span data-reactid="46">资源</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="47"><div class="ant-row" data-reactid="48"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="49"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="50"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="51"><a href="/docs/react/introduce-cn" data-reactid="52">Ant Design of React</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="53"><a href="/docs/react/getting-started-cn" data-reactid="54">快速上手</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="55"><a href="/docs/react/practical-projects-cn" data-reactid="56">项目实战</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="57"><a href="/docs/react/use-with-create-react-app-cn" data-reactid="58">在 create-react-app 中使用</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="59"><a href="/docs/react/customize-theme-cn" data-reactid="60">定制主题</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="61"><a href="/changelog-cn" data-reactid="62">更新日志</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="63"><a href="/docs/react/recommendation-cn" data-reactid="64">社区精选组件</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="65"><a href="https://github.com/websemantics/awesome-ant-design" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="66"><!-- react-text: 67 -->Awesome Ant Design<!-- /react-text --><!-- react-text: 68 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="69"></i></a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="70"><a href="//github.com/ant-design/intl-example" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="71"><!-- react-text: 72 -->i18n 方案<!-- /react-text --><!-- react-text: 73 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="74"></i></a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="75"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true" data-reactid="76"><h4 data-reactid="77">Components</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Components$Menu" data-reactid="78"><li class=" ant-menu-item-group" data-reactid="79"><div class="ant-menu-item-group-title" data-reactid="80">General</div><ul class="ant-menu-item-group-list" data-reactid="81"><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="82"><a href="/components/button-cn/" data-reactid="83"><span data-reactid="84">Button</span><span class="chinese" data-reactid="85">按钮</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="86"><a href="/components/icon-cn/" data-reactid="87"><span data-reactid="88">Icon</span><span class="chinese" data-reactid="89">图标</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="90"><div class="ant-menu-item-group-title" data-reactid="91">Layout</div><ul class="ant-menu-item-group-list" data-reactid="92"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="93"><a href="/components/grid-cn/" data-reactid="94"><span data-reactid="95">Grid</span><span class="chinese" data-reactid="96">栅格</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="97"><a href="/components/layout-cn/" data-reactid="98"><span data-reactid="99">Layout</span><span class="chinese" data-reactid="100">布局</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="101"><div class="ant-menu-item-group-title" data-reactid="102">Navigation</div><ul class="ant-menu-item-group-list" data-reactid="103"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="104"><a href="/components/affix-cn/" data-reactid="105"><span data-reactid="106">Affix</span><span class="chinese" data-reactid="107">固钉</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="108"><a href="/components/breadcrumb-cn/" data-reactid="109"><span data-reactid="110">Breadcrumb</span><span class="chinese" data-reactid="111">面包屑</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="112"><a href="/components/back-top-cn/" data-reactid="113"><span data-reactid="114">BackTop</span><span class="chinese" data-reactid="115">回到顶部</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="116"><a href="/components/dropdown-cn/" data-reactid="117"><span data-reactid="118">Dropdown</span><span class="chinese" data-reactid="119">下拉菜单</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="120"><a href="/components/menu-cn/" data-reactid="121"><span data-reactid="122">Menu</span><span class="chinese" data-reactid="123">导航菜单</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="124"><a href="/components/pagination-cn/" data-reactid="125"><span data-reactid="126">Pagination</span><span class="chinese" data-reactid="127">分页</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="128"><a href="/components/steps-cn/" data-reactid="129"><span data-reactid="130">Steps</span><span class="chinese" data-reactid="131">步骤条</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="132"><a href="/components/tabs-cn/" data-reactid="133"><span data-reactid="134">Tabs</span><span class="chinese" data-reactid="135">标签页</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="136"><div class="ant-menu-item-group-title" data-reactid="137">Data Entry</div><ul class="ant-menu-item-group-list" data-reactid="138"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="139"><a href="/components/auto-complete-cn/" data-reactid="140"><span data-reactid="141">AutoComplete</span><span class="chinese" data-reactid="142">自动完成</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="143"><a href="/components/cascader-cn/" data-reactid="144"><span data-reactid="145">Cascader</span><span class="chinese" data-reactid="146">级联选择</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="147"><a href="/components/checkbox-cn/" data-reactid="148"><span data-reactid="149">Checkbox</span><span class="chinese" data-reactid="150">多选框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="151"><a href="/components/date-picker-cn/" data-reactid="152"><span data-reactid="153">DatePicker</span><span class="chinese" data-reactid="154">日期选择框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="155"><a href="/components/form-cn/" data-reactid="156"><span data-reactid="157">Form</span><span class="chinese" data-reactid="158">表单</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="159"><a href="/components/input-cn/" data-reactid="160"><span data-reactid="161">Input</span><span class="chinese" data-reactid="162">输入框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="163"><a href="/components/input-number-cn/" data-reactid="164"><span data-reactid="165">InputNumber</span><span class="chinese" data-reactid="166">数字输入框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="167"><a href="/components/mention-cn/" data-reactid="168"><span data-reactid="169">Mention</span><span class="chinese" data-reactid="170">提及</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="171"><a href="/components/rate-cn/" data-reactid="172"><span data-reactid="173">Rate</span><span class="chinese" data-reactid="174">评分</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="175"><a href="/components/radio-cn/" data-reactid="176"><span data-reactid="177">Radio</span><span class="chinese" data-reactid="178">单选框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="179"><a href="/components/select-cn/" data-reactid="180"><span data-reactid="181">Select</span><span class="chinese" data-reactid="182">选择器</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="183"><a href="/components/slider-cn/" data-reactid="184"><span data-reactid="185">Slider</span><span class="chinese" data-reactid="186">滑动输入条</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="187"><a href="/components/switch-cn/" data-reactid="188"><span data-reactid="189">Switch</span><span class="chinese" data-reactid="190">开关</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="191"><a href="/components/tree-select-cn/" data-reactid="192"><span data-reactid="193">TreeSelect</span><span class="chinese" data-reactid="194">树选择</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="195"><a href="/components/time-picker-cn/" data-reactid="196"><span data-reactid="197">TimePicker</span><span class="chinese" data-reactid="198">时间选择框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="199"><a href="/components/transfer-cn/" data-reactid="200"><span data-reactid="201">Transfer</span><span class="chinese" data-reactid="202">穿梭框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="203"><a href="/components/upload-cn/" data-reactid="204"><span data-reactid="205">Upload</span><span class="chinese" data-reactid="206">上传</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="207"><div class="ant-menu-item-group-title" data-reactid="208">Data Display</div><ul class="ant-menu-item-group-list" data-reactid="209"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="210"><a href="/components/badge-cn/" data-reactid="211"><span data-reactid="212">Badge</span><span class="chinese" data-reactid="213">徽标数</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="214"><a href="/components/calendar-cn/" data-reactid="215"><span data-reactid="216">Calendar</span><span class="chinese" data-reactid="217">日历</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="218"><a href="/components/card-cn/" data-reactid="219"><span data-reactid="220">Card</span><span class="chinese" data-reactid="221">卡片</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="222"><a href="/components/carousel-cn/" data-reactid="223"><span data-reactid="224">Carousel</span><span class="chinese" data-reactid="225">走马灯</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="226"><a href="/components/collapse-cn/" data-reactid="227"><span data-reactid="228">Collapse</span><span class="chinese" data-reactid="229">折叠面板</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="230"><a href="/components/popover-cn/" data-reactid="231"><span data-reactid="232">Popover</span><span class="chinese" data-reactid="233">气泡卡片</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="234"><a href="/components/tooltip-cn/" data-reactid="235"><span data-reactid="236">Tooltip</span><span class="chinese" data-reactid="237">文字提示</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="238"><a href="/components/table-cn/" data-reactid="239"><span data-reactid="240">Table</span><span class="chinese" data-reactid="241">表格</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="242"><a href="/components/tag-cn/" data-reactid="243"><span data-reactid="244">Tag</span><span class="chinese" data-reactid="245">标签</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="246"><a href="/components/timeline-cn/" data-reactid="247"><span data-reactid="248">Timeline</span><span class="chinese" data-reactid="249">时间轴</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="250"><a href="/components/tree-cn/" data-reactid="251"><span data-reactid="252">Tree</span><span class="chinese" data-reactid="253">树形控件</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="254"><div class="ant-menu-item-group-title" data-reactid="255">Feedback</div><ul class="ant-menu-item-group-list" data-reactid="256"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="257"><a href="/components/alert-cn/" data-reactid="258"><span data-reactid="259">Alert</span><span class="chinese" data-reactid="260">警告提示</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="261"><a href="/components/modal-cn/" data-reactid="262"><span data-reactid="263">Modal</span><span class="chinese" data-reactid="264">对话框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="265"><a href="/components/message-cn/" data-reactid="266"><span data-reactid="267">Message</span><span class="chinese" data-reactid="268">全局提示</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="269"><a href="/components/notification-cn/" data-reactid="270"><span data-reactid="271">Notification</span><span class="chinese" data-reactid="272">通知提醒框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="273"><a href="/components/progress-cn/" data-reactid="274"><span data-reactid="275">Progress</span><span class="chinese" data-reactid="276">进度条</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="277"><a href="/components/popconfirm-cn/" data-reactid="278"><span data-reactid="279">Popconfirm</span><span class="chinese" data-reactid="280">气泡确认框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="281"><a href="/components/spin-cn/" data-reactid="282"><span data-reactid="283">Spin</span><span class="chinese" data-reactid="284">加载中</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="285"><div class="ant-menu-item-group-title" data-reactid="286">Other</div><ul class="ant-menu-item-group-list" data-reactid="287"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="288"><a href="/components/anchor-cn/" data-reactid="289"><span data-reactid="290">Anchor</span><span class="chinese" data-reactid="291">锚点</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="292"><a href="/components/locale-provider-cn/" data-reactid="293"><span data-reactid="294">LocaleProvider</span><span class="chinese" data-reactid="295">国际化</span></a></li></ul></li></ul></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="296"><article data-reactid="297"><div class="toc-affix" data-reactid="298"><div class="" data-reactid="299"><ul class="toc demos-anchor" data-reactid="300"><li title="按钮类型" data-reactid="301"><a href="#components-button-demo-basic" data-reactid="302">按钮类型</a></li><li title="图标按钮" data-reactid="303"><a href="#components-button-demo-icon" data-reactid="304">图标按钮</a></li><li title="按钮尺寸" data-reactid="305"><a href="#components-button-demo-size" data-reactid="306">按钮尺寸</a></li><li title="不可用状态" data-reactid="307"><a href="#components-button-demo-disabled" data-reactid="308">不可用状态</a></li><li title="加载中状态" data-reactid="309"><a href="#components-button-demo-loading" data-reactid="310">加载中状态</a></li><li title="多个按钮组合" data-reactid="311"><a href="#components-button-demo-multiple" data-reactid="312">多个按钮组合</a></li><li title="按钮组合" data-reactid="313"><a href="#components-button-demo-button-group" data-reactid="314">按钮组合</a></li><li title="幽灵按钮" data-reactid="315"><a href="#components-button-demo-ghost" data-reactid="316">幽灵按钮</a></li></ul></div></div><section class="markdown" data-reactid="317"><h1 data-reactid="318"><!-- react-text: 319 -->Button<!-- /react-text --><span class="subtitle" data-reactid="320">按钮</span><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/button/index.zh-CN.md" data-reactid="321"><i class="anticon anticon-edit" data-reactid="322"></i></a></h1><section class="markdown" data-reactid="323"><p data-reactid="324"><!-- react-text: 325 -->按钮用于开始一个即时操作。<!-- /react-text --></p><h2 id="何时使用" data-reactid="326"><span data-reactid="327"><!-- react-text: 328 -->何时使用<!-- /react-text --></span><a href="#何时使用" class="anchor" data-reactid="329">#</a></h2><p data-reactid="330"><!-- react-text: 331 -->标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。<!-- /react-text --></p></section><h2 data-reactid="332"><span data-reactid="333">代码演示</span><i class="anticon anticon-appstore code-box-expand-trigger" title="展开全部代码" data-reactid="334"></i></h2></section><div class="ant-row" style="margin-left:-8px;margin-right:-8px;" data-reactid="335"><div style="padding-left:8px;padding-right:8px;" class="ant-col-12 code-boxes-col-2-1" data-reactid="336"><section class="code-box" id="components-button-demo-basic" data-reactid="337"><section class="code-box-demo" data-reactid="338"><div data-reactid="339"><button type="button" class="ant-btn ant-btn-primary" data-reactid="340"><span data-reactid="341">Primary</span></button><button type="button" class="ant-btn" data-reactid="342"><span data-reactid="343">Default</span></button><button type="button" class="ant-btn ant-btn-dashed" data-reactid="344"><span data-reactid="345">Dashed</span></button><button type="button" class="ant-btn ant-btn-danger" data-reactid="346"><span data-reactid="347">Danger</span></button></div></section><section class="code-box-meta markdown" data-reactid="348"><div class="code-box-title" data-reactid="349"><a href="#components-button-demo-basic" data-reactid="350">按钮类型</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/button/demo/basic.md" data-reactid="351"><i class="anticon anticon-edit" data-reactid="352"></i></a></div><div data-reactid="353"><p data-reactid="354"><!-- react-text: 355 -->按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮。主按钮在同一个操作区域最多出现一次。<!-- /react-text --></p><blockquote data-reactid="356"><p data-reactid="357"><code data-reactid="358"><!-- react-text: 359 -->danger<!-- /react-text --></code><!-- react-text: 360 --> 在 <!-- /react-text --><code data-reactid="361"><!-- react-text: 362 -->antd@2.7<!-- /react-text --></code><!-- react-text: 363 --> 后支持。<!-- /react-text --></p></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="364"></i></section><section class="highlight-wrapper" data-reactid="365"><div class="highlight" data-reactid="366"><i class="anticon anticon-copy code-box-code-copy" data-reactid="367"></i><pre class="language-jsx" data-reactid="368"><code data-reactid="369"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dashed<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Dashed<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-button-demo-size" data-reactid="370"><section class="code-box-demo" data-reactid="371"><div data-reactid="372"><div class="ant-radio-group" data-reactid="373"><label class="ant-radio-button-wrapper" data-reactid="374"><span class="ant-radio-button" data-reactid="375"><input type="radio" class="ant-radio-button-input" data-reactid="376"/><span class="ant-radio-button-inner" data-reactid="377"></span></span><span data-reactid="378">Large</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" data-reactid="379"><span class="ant-radio-button ant-radio-button-checked" data-reactid="380"><input type="radio" class="ant-radio-button-input" checked="" data-reactid="381"/><span class="ant-radio-button-inner" data-reactid="382"></span></span><span data-reactid="383">Default</span></label><label class="ant-radio-button-wrapper" data-reactid="384"><span class="ant-radio-button" data-reactid="385"><input type="radio" class="ant-radio-button-input" data-reactid="386"/><span class="ant-radio-button-inner" data-reactid="387"></span></span><span data-reactid="388">Small</span></label></div><br data-reactid="389"/><br data-reactid="390"/><button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-icon-only" data-reactid="391"><i class="anticon anticon-download" data-reactid="392"></i></button><button type="button" class="ant-btn ant-btn-primary" data-reactid="393"><i class="anticon anticon-download" data-reactid="394"></i><span data-reactid="395">Download</span></button><button type="button" class="ant-btn ant-btn-primary" data-reactid="396"><span data-reactid="397">Normal</span></button><br data-reactid="398"/><div class="ant-btn-group" data-reactid="399"><button type="button" class="ant-btn ant-btn-primary" data-reactid="400"><i class="anticon anticon-left" data-reactid="401"></i><span data-reactid="402">Backward</span></button><button type="button" class="ant-btn ant-btn-primary" data-reactid="403"><span data-reactid="404">Forward</span><i class="anticon anticon-right" data-reactid="405"></i></button></div></div></section><section class="code-box-meta markdown" data-reactid="406"><div class="code-box-title" data-reactid="407"><a href="#components-button-demo-size" data-reactid="408">按钮尺寸</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/button/demo/size.md" data-reactid="409"><i class="anticon anticon-edit" data-reactid="410"></i></a></div><div data-reactid="411"><p data-reactid="412"><!-- react-text: 413 -->按钮有大、中、小三种尺寸。<!-- /react-text --></p><p data-reactid="414"><!-- react-text: 415 -->通过设置 <!-- /react-text --><code data-reactid="416"><!-- react-text: 417 -->size<!-- /react-text --></code><!-- react-text: 418 --> 为 <!-- /react-text --><code data-reactid="419"><!-- react-text: 420 -->large<!-- /react-text --></code><!-- react-text: 421 --> <!-- /react-text --><code data-reactid="422"><!-- react-text: 423 -->small<!-- /react-text --></code><!-- react-text: 424 --> 分别把按钮设为大、小尺寸。若不设置 <!-- /react-text --><code data-reactid="425"><!-- react-text: 426 -->size<!-- /react-text --></code><!-- react-text: 427 -->，则尺寸为中。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="428"></i></section><section class="highlight-wrapper" data-reactid="429"><div class="highlight" data-reactid="430"><i class="anticon anticon-copy code-box-code-copy" data-reactid="431"></i><pre class="language-jsx" data-reactid="432"><code data-reactid="433"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Radio<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">ButtonSize</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
size<span class="token punctuation">:</span> <span class="token string">'default'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
handleSizeChange <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> size<span class="token punctuation">:</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> size <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>size<span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio.Group</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>size<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleSizeChange<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio.Button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio.Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio.Button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio.Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio.Button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio.Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio.Group</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>download<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>size<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>download<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>size<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Download<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>size<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Normal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button.Group</span> <span class="token attr-name">size</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>size<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>Backward
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
Forward<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button.Group</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ButtonSize</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-button-demo-loading" data-reactid="434"><section class="code-box-demo" data-reactid="435"><div data-reactid="436"><button type="button" class="ant-btn ant-btn-primary ant-btn-loading" data-reactid="437"><i class="anticon anticon-spin anticon-loading" data-reactid="438"></i><span data-reactid="439">Loading</span></button><button type="button" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading" data-reactid="440"><i class="anticon anticon-spin anticon-loading" data-reactid="441"></i><span data-reactid="442">Loading</span></button><br data-reactid="443"/><button type="button" class="ant-btn ant-btn-primary" data-reactid="444"><span data-reactid="445">Click me!</span></button><button type="button" class="ant-btn ant-btn-primary" data-reactid="446"><i class="anticon anticon-poweroff" data-reactid="447"></i><span data-reactid="448">Click me!</span></button><button type="button" class="ant-btn ant-btn-primary" data-reactid="449"><span data-reactid="450">Won&#x27;t show loading</span></button><br data-reactid="451"/><button type="button" class="ant-btn ant-btn-circle ant-btn-loading" data-reactid="452"><i class="anticon anticon-spin anticon-loading" data-reactid="453"></i></button><button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-loading" data-reactid="454"><i class="anticon anticon-spin anticon-loading" data-reactid="455"></i></button></div></section><section class="code-box-meta markdown" data-reactid="456"><div class="code-box-title" data-reactid="457"><a href="#components-button-demo-loading" data-reactid="458">加载中状态</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/button/demo/loading.md" data-reactid="459"><i class="anticon anticon-edit" data-reactid="460"></i></a></div><div data-reactid="461"><p data-reactid="462"><!-- react-text: 463 -->添加 <!-- /react-text --><code data-reactid="464"><!-- react-text: 465 -->loading<!-- /react-text --></code><!-- react-text: 466 --> 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="467"></i></section><section class="highlight-wrapper" data-reactid="468"><div class="highlight" data-reactid="469"><i class="anticon anticon-copy code-box-code-copy" data-reactid="470"></i><pre class="language-jsx" data-reactid="471"><code data-reactid="472"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
iconLoading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
delayLoading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
enterLoading <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> loading<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
enterIconLoading <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> iconLoading<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
delayLoading <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
delayLoading<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
delayLoading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">150</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">></span></span>
Loading
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">></span></span>
Loading
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>loading<span class="token punctuation">}</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>enterLoading<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
Click me<span class="token operator">!</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>poweroff<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>iconLoading<span class="token punctuation">}</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>enterIconLoading<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
Click me<span class="token operator">!</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>delayLoading<span class="token punctuation">}</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>delayLoading<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
Won<span class="token entity" title="&apos;">&amp;apos;</span>t show loading
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>App</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-button-demo-button-group" data-reactid="473"><section class="code-box-demo" data-reactid="474"><div data-reactid="475"><h4 data-reactid="476">Basic</h4><div class="ant-btn-group" data-reactid="477"><button type="button" class="ant-btn" data-reactid="478"><span data-reactid="479">Cancel</span></button><button type="button" class="ant-btn ant-btn-primary" data-reactid="480"><span data-reactid="481">OK</span></button></div><div class="ant-btn-group" data-reactid="482"><button disabled="" type="button" class="ant-btn" data-reactid="483"><span data-reactid="484">L</span></button><button disabled="" type="button" class="ant-btn" data-reactid="485"><span data-reactid="486">M</span></button><button disabled="" type="button" class="ant-btn" data-reactid="487"><span data-reactid="488">R</span></button></div><div class="ant-btn-group" data-reactid="489"><button type="button" class="ant-btn ant-btn-primary" data-reactid="490"><span data-reactid="491">L</span></button><button type="button" class="ant-btn" data-reactid="492"><span data-reactid="493">M</span></button><button type="button" class="ant-btn" data-reactid="494"><span data-reactid="495">M</span></button><button type="button" class="ant-btn ant-btn-dashed" data-reactid="496"><span data-reactid="497">R</span></button></div><h4 data-reactid="498">With Icon</h4><div class="ant-btn-group" data-reactid="499"><button type="button" class="ant-btn ant-btn-primary" data-reactid="500"><i class="anticon anticon-left" data-reactid="501"></i><span data-reactid="502">Go back</span></button><button type="button" class="ant-btn ant-btn-primary" data-reactid="503"><span data-reactid="504">Go forward</span><i class="anticon anticon-right" data-reactid="505"></i></button></div><div class="ant-btn-group" data-reactid="506"><button type="button" class="ant-btn ant-btn-primary ant-btn-icon-only" data-reactid="507"><i class="anticon anticon-cloud" data-reactid="508"></i></button><button type="button" class="ant-btn ant-btn-primary ant-btn-icon-only" data-reactid="509"><i class="anticon anticon-cloud-download" data-reactid="510"></i></button></div></div><style data-reactid="511">
#components-button-demo-button-group h4 {
margin: 16px 0;
font-size: 14px;
line-height: 1;
font-weight: normal;
}
#components-button-demo-button-group h4:first-child {
margin-top: 0;
}
#components-button-demo-button-group .ant-btn-group {
margin-right: 8px;
}
</style></section><section class="code-box-meta markdown" data-reactid="512"><div class="code-box-title" data-reactid="513"><a href="#components-button-demo-button-group" data-reactid="514">按钮组合</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/button/demo/button-group.md" data-reactid="515"><i class="anticon anticon-edit" data-reactid="516"></i></a></div><div data-reactid="517"><p data-reactid="518"><!-- react-text: 519 -->可以将多个 <!-- /react-text --><code data-reactid="520"><!-- react-text: 521 -->Button<!-- /react-text --></code><!-- react-text: 522 --> 放入 <!-- /react-text --><code data-reactid="523"><!-- react-text: 524 -->Button.Group<!-- /react-text --></code><!-- react-text: 525 --> 的容器中。<!-- /react-text --></p><p data-reactid="526"><!-- react-text: 527 -->通过设置 <!-- /react-text --><code data-reactid="528"><!-- react-text: 529 -->size<!-- /react-text --></code><!-- react-text: 530 --> 为 <!-- /react-text --><code data-reactid="531"><!-- react-text: 532 -->large<!-- /react-text --></code><!-- react-text: 533 --> <!-- /react-text --><code data-reactid="534"><!-- react-text: 535 -->small<!-- /react-text --></code><!-- react-text: 536 --> 分别把按钮组合设为大、小尺寸。若不设置 <!-- /react-text --><code data-reactid="537"><!-- react-text: 538 -->size<!-- /react-text --></code><!-- react-text: 539 -->，则尺寸为中。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="540"></i></section><section class="highlight-wrapper" data-reactid="541"><div class="highlight" data-reactid="542"><i class="anticon anticon-copy code-box-code-copy" data-reactid="543"></i><pre class="language-jsx" data-reactid="544"><code data-reactid="545"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> ButtonGroup <span class="token operator">=</span> Button<span class="token punctuation">.</span>Group<span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">></span></span>Basic<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Cancel<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>OK<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>L<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>M<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>R<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>L<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>M<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>M<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dashed<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>R<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">></span></span>With Icon<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>Go back
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
Go forward<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>cloud<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>cloud-download<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
mountNode
<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section></div><div style="padding-left:8px;padding-right:8px;" class="ant-col-12 code-boxes-col-2-1" data-reactid="546"><section class="code-box" id="components-button-demo-icon" data-reactid="547"><section class="code-box-demo" data-reactid="548"><div data-reactid="549"><button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-icon-only" data-reactid="550"><i class="anticon anticon-search" data-reactid="551"></i></button><button type="button" class="ant-btn ant-btn-primary" data-reactid="552"><i class="anticon anticon-search" data-reactid="553"></i><span data-reactid="554">Search</span></button><button type="button" class="ant-btn ant-btn-circle ant-btn-icon-only" data-reactid="555"><i class="anticon anticon-search" data-reactid="556"></i></button><button type="button" class="ant-btn" data-reactid="557"><i class="anticon anticon-search" data-reactid="558"></i><span data-reactid="559">Search</span></button><br data-reactid="560"/><button type="button" class="ant-btn ant-btn-circle ant-btn-icon-only" data-reactid="561"><i class="anticon anticon-search" data-reactid="562"></i></button><button type="button" class="ant-btn" data-reactid="563"><i class="anticon anticon-search" data-reactid="564"></i><span data-reactid="565">Search</span></button><button type="button" class="ant-btn ant-btn-dashed ant-btn-circle ant-btn-icon-only" data-reactid="566"><i class="anticon anticon-search" data-reactid="567"></i></button><button type="button" class="ant-btn ant-btn-dashed" data-reactid="568"><i class="anticon anticon-search" data-reactid="569"></i><span data-reactid="570">Search</span></button></div></section><section class="code-box-meta markdown" data-reactid="571"><div class="code-box-title" data-reactid="572"><a href="#components-button-demo-icon" data-reactid="573">图标按钮</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/button/demo/icon.md" data-reactid="574"><i class="anticon anticon-edit" data-reactid="575"></i></a></div><div data-reactid="576"><p data-reactid="577"><!-- react-text: 578 -->当需要在 <!-- /react-text --><code data-reactid="579"><!-- react-text: 580 -->Button<!-- /react-text --></code><!-- react-text: 581 --> 内嵌入 <!-- /react-text --><code data-reactid="582"><!-- react-text: 583 -->Icon<!-- /react-text --></code><!-- react-text: 584 --> 时，可以设置 <!-- /react-text --><code data-reactid="585"><!-- react-text: 586 -->icon<!-- /react-text --></code><!-- react-text: 587 --> 属性，或者直接在 <!-- /react-text --><code data-reactid="588"><!-- react-text: 589 -->Button<!-- /react-text --></code><!-- react-text: 590 --> 内使用 <!-- /react-text --><code data-reactid="591"><!-- react-text: 592 -->Icon<!-- /react-text --></code><!-- react-text: 593 --> 组件。<!-- /react-text --></p><p data-reactid="594"><!-- react-text: 595 -->如果想控制 <!-- /react-text --><code data-reactid="596"><!-- react-text: 597 -->Icon<!-- /react-text --></code><!-- react-text: 598 --> 具体的位置，只能直接使用 <!-- /react-text --><code data-reactid="599"><!-- react-text: 600 -->Icon<!-- /react-text --></code><!-- react-text: 601 --> 组件，而非 <!-- /react-text --><code data-reactid="602"><!-- react-text: 603 -->icon<!-- /react-text --></code><!-- react-text: 604 --> 属性。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="605"></i></section><section class="highlight-wrapper" data-reactid="606"><div class="highlight" data-reactid="607"><i class="anticon anticon-copy code-box-code-copy" data-reactid="608"></i><pre class="language-jsx" data-reactid="609"><code data-reactid="610"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dashed<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dashed<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
mountNode
<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-button-demo-disabled" data-reactid="611"><section class="code-box-demo" data-reactid="612"><div data-reactid="613"><button type="button" class="ant-btn ant-btn-primary" data-reactid="614"><span data-reactid="615">Primary</span></button><button disabled="" type="button" class="ant-btn ant-btn-primary" data-reactid="616"><span data-reactid="617">Primary(disabled)</span></button><br data-reactid="618"/><button type="button" class="ant-btn" data-reactid="619"><span data-reactid="620">Default</span></button><button disabled="" type="button" class="ant-btn" data-reactid="621"><span data-reactid="622">Default(disabled)</span></button><br data-reactid="623"/><button type="button" class="ant-btn" data-reactid="624"><span data-reactid="625">Ghost</span></button><button disabled="" type="button" class="ant-btn" data-reactid="626"><span data-reactid="627">Ghost(disabled)</span></button><br data-reactid="628"/><button type="button" class="ant-btn ant-btn-dashed" data-reactid="629"><span data-reactid="630">Dashed</span></button><button disabled="" type="button" class="ant-btn ant-btn-dashed" data-reactid="631"><span data-reactid="632">Dashed(disabled)</span></button></div></section><section class="code-box-meta markdown" data-reactid="633"><div class="code-box-title" data-reactid="634"><a href="#components-button-demo-disabled" data-reactid="635">不可用状态</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/button/demo/disabled.md" data-reactid="636"><i class="anticon anticon-edit" data-reactid="637"></i></a></div><div data-reactid="638"><p data-reactid="639"><!-- react-text: 640 -->添加 <!-- /react-text --><code data-reactid="641"><!-- react-text: 642 -->disabled<!-- /react-text --></code><!-- react-text: 643 --> 属性即可让按钮处于不可用状态，同时按钮样式也会改变。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="644"></i></section><section class="highlight-wrapper" data-reactid="645"><div class="highlight" data-reactid="646"><i class="anticon anticon-copy code-box-code-copy" data-reactid="647"></i><pre class="language-jsx" data-reactid="648"><code data-reactid="649"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token function">Primary</span><span class="token punctuation">(</span>disabled<span class="token punctuation">)</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token function">Default</span><span class="token punctuation">(</span>disabled<span class="token punctuation">)</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>Ghost<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token function">Ghost</span><span class="token punctuation">(</span>disabled<span class="token punctuation">)</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dashed<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Dashed<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dashed<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token function">Dashed</span><span class="token punctuation">(</span>disabled<span class="token punctuation">)</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
mountNode
<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-button-demo-multiple" data-reactid="650"><section class="code-box-demo" data-reactid="651"><div data-reactid="652"><button type="button" class="ant-btn ant-btn-primary" data-reactid="653"><span data-reactid="654">primary</span></button><button type="button" class="ant-btn" data-reactid="655"><span data-reactid="656">secondary</span></button><button type="button" class="ant-btn ant-dropdown-trigger" data-reactid="657"><span data-reactid="658">more </span><i class="anticon anticon-down" data-reactid="659"></i></button></div></section><section class="code-box-meta markdown" data-reactid="660"><div class="code-box-title" data-reactid="661"><a href="#components-button-demo-multiple" data-reactid="662">多个按钮组合</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/button/demo/multiple.md" data-reactid="663"><i class="anticon anticon-edit" data-reactid="664"></i></a></div><div data-reactid="665"><p data-reactid="666"><!-- react-text: 667 -->按钮组合使用时，推荐使用1个主操作 + n 个次操作，3个以上操作时把更多操作放到 <!-- /react-text --><code data-reactid="668"><!-- react-text: 669 -->Dropdown.Button<!-- /react-text --></code><!-- react-text: 670 --> 中组合使用。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="671"></i></section><section class="highlight-wrapper" data-reactid="672"><div class="highlight" data-reactid="673"><i class="anticon anticon-copy code-box-code-copy" data-reactid="674"></i><pre class="language-jsx" data-reactid="675"><code data-reactid="676"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Menu<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">handleMenuClick</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> e<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> menu <span class="token operator">=</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Menu</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>handleMenuClick<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1st item<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Menu.Item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2nd item<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Menu.Item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>3rd item<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Menu.Item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Menu</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>secondary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">overlay</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>menu<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span><span class="token punctuation">></span></span>
more <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>down<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
mountNode
<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-button-demo-ghost" data-reactid="677"><section class="code-box-demo" data-reactid="678"><div style="background:rgb(190, 200, 200);padding:26px 16px 16px;" data-reactid="679"><button type="button" class="ant-btn ant-btn-primary ant-btn-background-ghost" data-reactid="680"><span data-reactid="681">Primary Ghost</span></button><button type="button" class="ant-btn ant-btn-background-ghost" data-reactid="682"><span data-reactid="683">Default Ghost</span></button><button type="button" class="ant-btn ant-btn-dashed ant-btn-background-ghost" data-reactid="684"><span data-reactid="685">Dashed Ghost</span></button></div></section><section class="code-box-meta markdown" data-reactid="686"><div class="code-box-title" data-reactid="687"><a href="#components-button-demo-ghost" data-reactid="688">幽灵按钮</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/button/demo/ghost.md" data-reactid="689"><i class="anticon anticon-edit" data-reactid="690"></i></a></div><div data-reactid="691"><p data-reactid="692"><!-- react-text: 693 -->幽灵按钮将其他按钮的内容反色，背景变为透明，常用在有色背景上。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="694"></i></section><section class="highlight-wrapper" data-reactid="695"><div class="highlight" data-reactid="696"><i class="anticon anticon-copy code-box-code-copy" data-reactid="697"></i><pre class="language-jsx" data-reactid="698"><code data-reactid="699"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> background<span class="token punctuation">:</span> <span class="token string">'rgb(190, 200, 200)'</span><span class="token punctuation">,</span> padding<span class="token punctuation">:</span> <span class="token string">'26px 16px 16px'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">ghost</span><span class="token punctuation">></span></span>Primary Ghost<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">ghost</span><span class="token punctuation">></span></span>Default Ghost<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dashed<span class="token punctuation">"</span></span> <span class="token attr-name">ghost</span><span class="token punctuation">></span></span>Dashed Ghost<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section></div></div><section class="markdown api-container" data-reactid="700"><h2 id="API" data-reactid="701"><span data-reactid="702"><!-- react-text: 703 -->API<!-- /react-text --></span><a href="#API" class="anchor" data-reactid="704">#</a></h2><p data-reactid="705"><!-- react-text: 706 -->通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：<!-- /react-text --><code data-reactid="707"><!-- react-text: 708 -->type<!-- /react-text --></code><!-- react-text: 709 --> -&gt; <!-- /react-text --><code data-reactid="710"><!-- react-text: 711 -->shape<!-- /react-text --></code><!-- react-text: 712 --> -&gt; <!-- /react-text --><code data-reactid="713"><!-- react-text: 714 -->size<!-- /react-text --></code><!-- react-text: 715 --> -&gt; <!-- /react-text --><code data-reactid="716"><!-- react-text: 717 -->loading<!-- /react-text --></code><!-- react-text: 718 --> -&gt; <!-- /react-text --><code data-reactid="719"><!-- react-text: 720 -->disabled<!-- /react-text --></code></p><p data-reactid="721"><!-- react-text: 722 -->按钮的属性说明如下：<!-- /react-text --></p><table data-reactid="723"><thead data-reactid="724"><tr data-reactid="725"><th data-reactid="726"><!-- react-text: 727 -->属性<!-- /react-text --></th><th data-reactid="728"><!-- react-text: 729 -->说明<!-- /react-text --></th><th data-reactid="730"><!-- react-text: 731 -->类型<!-- /react-text --></th><th data-reactid="732"><!-- react-text: 733 -->默认值<!-- /react-text --></th></tr></thead><tbody data-reactid="734"><tr data-reactid="735"><td data-reactid="736"><!-- react-text: 737 -->type<!-- /react-text --></td><td data-reactid="738"><!-- react-text: 739 -->设置按钮类型，可选值为 <!-- /react-text --><code data-reactid="740"><!-- react-text: 741 -->primary<!-- /react-text --></code><!-- react-text: 742 --> <!-- /react-text --><code data-reactid="743"><!-- react-text: 744 -->dashed<!-- /react-text --></code><!-- react-text: 745 --> <!-- /react-text --><code data-reactid="746"><!-- react-text: 747 -->danger<!-- /react-text --></code><!-- react-text: 748 -->(版本 2.7 中增加) 或者不设<!-- /react-text --></td><td data-reactid="749"><!-- react-text: 750 -->string<!-- /react-text --></td><td data-reactid="751"><!-- react-text: 752 -->-<!-- /react-text --></td></tr><tr data-reactid="753"><td data-reactid="754"><!-- react-text: 755 -->htmlType<!-- /react-text --></td><td data-reactid="756"><!-- react-text: 757 -->设置 <!-- /react-text --><code data-reactid="758"><!-- react-text: 759 -->button<!-- /react-text --></code><!-- react-text: 760 --> 原生的 <!-- /react-text --><code data-reactid="761"><!-- react-text: 762 -->type<!-- /react-text --></code><!-- react-text: 763 --> 值，可选值请参考 <!-- /react-text --><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type" data-reactid="764"><!-- react-text: 765 -->HTML 标准<!-- /react-text --></a></td><td data-reactid="766"><!-- react-text: 767 -->string<!-- /react-text --></td><td data-reactid="768"><code data-reactid="769"><!-- react-text: 770 -->button<!-- /react-text --></code></td></tr><tr data-reactid="771"><td data-reactid="772"><!-- react-text: 773 -->icon<!-- /react-text --></td><td data-reactid="774"><!-- react-text: 775 -->设置按钮的图标类型<!-- /react-text --></td><td data-reactid="776"><!-- react-text: 777 -->string<!-- /react-text --></td><td data-reactid="778"><!-- react-text: 779 -->-<!-- /react-text --></td></tr><tr data-reactid="780"><td data-reactid="781"><!-- react-text: 782 -->shape<!-- /react-text --></td><td data-reactid="783"><!-- react-text: 784 -->设置按钮形状，可选值为 <!-- /react-text --><code data-reactid="785"><!-- react-text: 786 -->circle<!-- /react-text --></code><!-- react-text: 787 --> 或者不设<!-- /react-text --></td><td data-reactid="788"><!-- react-text: 789 -->string<!-- /react-text --></td><td data-reactid="790"><!-- react-text: 791 -->-<!-- /react-text --></td></tr><tr data-reactid="792"><td data-reactid="793"><!-- react-text: 794 -->size<!-- /react-text --></td><td data-reactid="795"><!-- react-text: 796 -->设置按钮大小，可选值为 <!-- /react-text --><code data-reactid="797"><!-- react-text: 798 -->small<!-- /react-text --></code><!-- react-text: 799 --> <!-- /react-text --><code data-reactid="800"><!-- react-text: 801 -->large<!-- /react-text --></code><!-- react-text: 802 --> 或者不设<!-- /react-text --></td><td data-reactid="803"><!-- react-text: 804 -->string<!-- /react-text --></td><td data-reactid="805"><code data-reactid="806"><!-- react-text: 807 -->default<!-- /react-text --></code></td></tr><tr data-reactid="808"><td data-reactid="809"><!-- react-text: 810 -->loading<!-- /react-text --></td><td data-reactid="811"><!-- react-text: 812 -->设置按钮载入状态<!-- /react-text --></td><td data-reactid="813"><!-- react-text: 814 -->boolean<!-- /react-text --></td><td data-reactid="815"><code data-reactid="816"><!-- react-text: 817 -->false<!-- /react-text --></code></td></tr><tr data-reactid="818"><td data-reactid="819"><!-- react-text: 820 -->onClick<!-- /react-text --></td><td data-reactid="821"><code data-reactid="822"><!-- react-text: 823 -->click<!-- /react-text --></code><!-- react-text: 824 --> 事件的 handler<!-- /react-text --></td><td data-reactid="825"><!-- react-text: 826 -->function<!-- /react-text --></td><td data-reactid="827"><!-- react-text: 828 -->-<!-- /react-text --></td></tr><tr data-reactid="829"><td data-reactid="830"><!-- react-text: 831 -->ghost<!-- /react-text --></td><td data-reactid="832"><!-- react-text: 833 -->幽灵属性，使按钮背景透明，版本 2.7 中增加<!-- /react-text --></td><td data-reactid="834"><!-- react-text: 835 -->boolean<!-- /react-text --></td><td data-reactid="836"><!-- react-text: 837 -->false<!-- /react-text --></td></tr></tbody></table><p data-reactid="838"><code data-reactid="839"><!-- react-text: 840 -->&lt;Button&gt;Hello world!&lt;/Button&gt;<!-- /react-text --></code><!-- react-text: 841 --> 最终会被渲染为 <!-- /react-text --><code data-reactid="842"><!-- react-text: 843 -->&lt;button&gt;Hello world!&lt;/button&gt;<!-- /react-text --></code><!-- react-text: 844 -->，并且除了上表中的属性，其它属性都会直接传到 <!-- /react-text --><code data-reactid="845"><!-- react-text: 846 -->&lt;button&gt;&lt;/button&gt;<!-- /react-text --></code><!-- react-text: 847 -->。<!-- /react-text --></p><style data-reactid="848">
[id^="components-button-demo-"] .ant-btn {
margin-right: 8px;
margin-bottom: 12px;
}
[id^="components-button-demo-"] .ant-btn-group > .ant-btn {
margin-right: 0;
}
</style></section></article></div></div><div class="ant-row" data-reactid="849"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-md-offset-6 ant-col-lg-20 ant-col-lg-offset-4" data-reactid="850"><section class="prev-next-nav" data-reactid="851"><a href="//github.com/ant-design/intl-example" target="_blank" rel="noopener noreferrer" class="prev-page" data-reactid="852"><!-- react-text: 853 -->i18n 方案<!-- /react-text --><!-- react-text: 854 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="855"></i></a><a class="next-page" href="/components/icon-cn/" data-reactid="856"><span data-reactid="857">Icon</span><span class="chinese" data-reactid="858">图标</span></a></section></div></div></div><footer id="footer" data-reactid="859"><ul data-reactid="860"><li data-reactid="861"><h2 data-reactid="862"><i class="anticon anticon-github" data-reactid="863"></i><!-- react-text: 864 --> GitHub<!-- /react-text --></h2><div data-reactid="865"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="866"><span data-reactid="867">仓库</span></a></div><div data-reactid="868"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="869"><span data-reactid="870">定制主题</span></a></div><div data-reactid="871"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="872"><span data-reactid="873">Awesome Ant Design</span></a></div></li><li data-reactid="874"><h2 data-reactid="875"><i class="anticon anticon-link" data-reactid="876"></i><!-- react-text: 877 --> <!-- /react-text --><span data-reactid="878">相关站点</span></h2><div data-reactid="879"><a href="http://mobile.ant.design" data-reactid="880">Ant Design Mobile</a><span data-reactid="881"> - </span><span data-reactid="882">移动版</span></div><div data-reactid="883"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="884">dva</a><!-- react-text: 885 --> - <!-- /react-text --><span data-reactid="886">应用框架</span></div><div data-reactid="887"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="888">dva-cli</a><!-- react-text: 889 --> -<!-- /react-text --><span data-reactid="890">开发工具</span></div><div data-reactid="891"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="892">Egg</a><span data-reactid="893"> - </span><span data-reactid="894">企业级 Node 开发框架</span></div><div data-reactid="895"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="896">AntV</a><span data-reactid="897"> - </span><span data-reactid="898">数据可视化</span></div><div data-reactid="899"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="900">Ant Motion</a><span data-reactid="901"> - </span><span data-reactid="902">设计动效</span></div><div data-reactid="903"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="904">AntD Library</a><span data-reactid="905"> - </span><span data-reactid="906">Axure 部件库</span></div><div data-reactid="907"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="908">Ant UX</a><span data-reactid="909"> - </span><span data-reactid="910">页面逻辑素材</span></div></li><li data-reactid="911"><h2 data-reactid="912"><i class="anticon anticon-customer-service" data-reactid="913"></i><!-- react-text: 914 --> <!-- /react-text --><span data-reactid="915">社区</span></h2><div data-reactid="916"><a href="/changelog" data-reactid="917"><span data-reactid="918">更新记录</span></a></div><div data-reactid="919"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="920"><span data-reactid="921">常见问题</span></a></div><div data-reactid="922"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="923"><span data-reactid="924">在线讨论</span></a></div><div data-reactid="925"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="926"><span data-reactid="927">报告 Bug</span></a></div><div data-reactid="928"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="929"><span data-reactid="930">StackOverflow</span></a></div><div data-reactid="931"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="932"><span data-reactid="933">SegmentFault</span></a></div></li><li data-reactid="934"><h2 data-reactid="935"><!-- react-text: 936 -->Copyright © <!-- /react-text --><!-- react-text: 937 -->2017<!-- /react-text --></h2><div data-reactid="938"><span data-reactid="939">蚂蚁金服体验技术部出品</span></div><div data-reactid="940"><!-- react-text: 941 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="942">BiSheng</a></div></li></ul></footer></div>
</div>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink