分离式下拉按钮

概述和示例

在分组按钮的样式和标签基础上我们可以很容易的创建分离式下拉按钮。分离式下拉按钮左边部分有标准的按钮功能,右边部分有一个下拉菜单。

Action
Action
Another
else
Action
Action
Another
else
Danger
Action
Another
else
Warning
Action
Another
else
Success
Action
Another
else
Info
Action
Another
else
Inverse
Action
Another
else

尺寸

可以设置额外的按钮样式.ks-button-mini, .ks-button-small, 或者 。ks-button-large 来定义按钮的大小

Large action
Action
Another
else
Small action
Action
Another
else
Mini action
Action
Another
else

标签示例

我们利用第二个按钮动作扩展了下拉按钮,点击右边图标时触发。

<div class="ks-split-button">
  <div class="ks-button ks-button-mini">Mini action</div>
  <div class="ks-menu-button ks-button-mini">
        <div class="ks-menu-button-caption"></div>
        <div class="ks-popupmenu">
          <div class="ks-menuitem">Action</div>
          <div class="ks-menuitem">Another action</div>
          <div class="ks-menuitem">Something else here</div>
        </div>
  </div>
</div>

下拉菜单位置

概述和示例

可以通过 menu 配置控制下拉菜单的位置

实例

通过 menu 配置控制下拉菜单的位置

                new SplitButton({
            render:"#para2",
            button:{
                xclass:'button',
                content:'action'
            },
            alignWithEl:false,
            menuButton:{
                xclass:'menu-button',
                matchElWidth:false,
                menu:{
                    children:[
                        {
                            content:'some action'
                        },
                        {
                            content:'more action'
                        }
                    ]
                }
            }
        }).render();