示例资源来自官网:https://www.antdv.com/components/button-cn
在 Ant Design Vue 中我们提供了五种按钮。
主按钮:用于主行动点,一个操作区域只能有一个主按钮。
默认按钮:用于没有主次之分的一组行动点。
虚线按钮:常用于添加操作。
文本按钮:用于最次级的行动点。
链接按钮:一般用于链接,即导航至某位置。
以及四种状态属性与上面配合使用。
危险:删除/移动/修改权限等危险操作,一般需要二次确认。
幽灵:用于背景色比较复杂的地方,常用在首页/产品页等展示场景。
禁用:行动点不可用的时候,一般需要文案解释。
加载中:用于异步操作等待反馈的时候,也可以避免多次提交。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <link rel="stylesheet" type="text/css" href="css/antd.min.css" /> <body> <div id="app"> <h1>基础按钮</h1> <a-button type="primary">Primary Button</a-button> <a-button>Default Button</a-button> <a-button type="dashed">Dashed Button</a-button> <a-button type="text">Text Button</a-button> <a-button type="link">Link Button</a-button> <hr/> <h1>禁用-警告-图标按钮</h1> <a-button type="primary" disabled>Primary(disabled)</a-button> <a-button type="primary" danger>Primary</a-button> <a-button type="primary"> <a-icon type="wifi"></a-icon> </a-button> <a-button type="primary" shape="circle"> <a-icon type="wifi"></a-icon> </a-button> <hr/> <h1>按钮组</h1> <a-radio-group> <a-radio-button value="large">Large</a-radio-button> <a-radio-button value="default">Default</a-radio-button> <a-radio-button value="small">Small</a-radio-button> </a-radio-group> <hr/> <h1>宽度按钮</h1> <a-button type="primary" block>Primary</a-button> <a-button block>Default</a-button> <a-button type="dashed" block>Dashed</a-button> <a-button danger block>Danger</a-button> <a-button type="link" block>Link</a-button> </div> <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/antd.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: "#app" }) </script> </body> </html>
通过设置 Button 的属性来产生不同的按钮样式,推荐顺序为:type -> shape -> size -> loading -> disabled。
按钮的属性说明如下:
事件 #
支持原生 button 的其他所有属性。
FAQ #
如何移除 2 个汉字之间的空格 #
根据 Ant Design 设计规范要求,我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格,如果你不需要这个特性,可以设置 ConfigProvider的 autoInsertSpaceInButton 为 false。