Button 按钮

常用的操作按钮,Cola-UI按钮在原有Dom按钮之上做了事件和属性的扩展。

此段代码将符合后续所有控件的定义模式。cola-ui 提供了更加简单的定义方式,HTML5新特性中支持了用户自定节点,cola-ui充分利用此特性让控件定义变的更加便捷。

默认Basic主要的次要的
<c-button>默认</c-button>
<c-button class="basic">Basic</c-button>
<c-button class="primary">主要的</c-button>
<c-button class="secondary">次要的</c-button>
显示代码

事件绑定

按钮控件常用事件有initDom,refreshDom,click,dbclick等,更多事件请查阅API文档

click me!
<c-button click="hello">click me!</c-button>
<script type="text/javascript">
    cola(function(model) {
        model.action({
            hello: function(self, arg) {
                alert("Hello Cola!")
            }
        });
    });
</script>
显示代码

禁用按钮

在页面交互过程中,经常出现部分按钮禁止用户操作的状态。

已被禁用
<c-button disabled="true">已被禁用</c-button>
显示代码

图标

按钮的图标默认支持Semantic-UI Icon 库中所有图标。

保存
<c-button icon="save" caption="保存"></c-button>
显示代码

图标按钮

与普通按钮不同在于class:icon 可以获得正方形的图标按钮.按钮的图标默认支持Semantic-UI Icon 库中所有图标。

<c-button class="icon" icon="save"></c-button>
显示代码

按钮状态

按钮除了disabled 提供loading,active