## 按钮组件 #### 按钮组件，在rbkUI中，一种风格对应的按钮组件是固定的。根据常用需要，给出以下几种风格按钮。 * * * * * btn常用方法 ~~~ rbkDom.block(); rbkDom.setIcon(iconCls,right); ~~~ 说明：.block()是否为块级元素；.setIcon(iconCls,right)设置按钮图标，iconCls为图标class，right(boolean)为是否靠右。 添加disabled="disabled"属性，按钮变灰，去除点击效果。 * * * * * 1、常用风格按钮  ~~~ <button class="rbk-btn">按钮</button> <button class="rbk-btn" rbk-role="red">按钮红</button> <button class="rbk-btn" rbk-role="orange" disabled="disabled">按钮橘</button> <button class="rbk-btn" rbk-role="yellow">按钮黄</button> <button class="rbk-btn" rbk-role="outgray">灰色边框</button> <button class="rbk-btn" rbk-role="outnormal">默认色边框</button> <button class="rbk-btn" rbk-role="outred">红色边框</button> ~~~ 2、行级元素mini按钮  ~~~ <button class="rbk-btn" rbk-role="mini">按钮</button> <button class="rbk-btn" rbk-role="minired">按钮</button> <button class="rbk-btn" rbk-role="miniorange">按钮</button> <button class="rbk-btn" rbk-role="miniyellow">按钮</button> <button class="rbk-btn" rbk-role="minioutgray">按钮</button> <button class="rbk-btn" rbk-role="minioutnormal">按钮</button> <button class="rbk-btn" rbk-role="minioutred">按钮</button> ~~~ 3、给按钮增加图标  html ~~~ <button id="downbtn" class="rbk-btn" rbk-role="mini">按钮</button> ~~~ js ~~~ var btn = content.down('#downbtn'); btn.setIcon('rbk-icon-arrowdown',true); ~~~ 说明：常用图标有 下箭头：rbk-icon-arrowdown、上箭头：rbk-icon-arrowup、地图：rbk-icon-map、email：rbk-icon-email。setIcon方法第二个参数表示图标位置，默认为false（左侧）。