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