GroupBox控件

此控件可定义展开和收缩,并在此基础上支持了关闭。

普通GroupBox控件

GroupBox控件
<div c-widget="GroupBox; caption:GroupBox控件; width:400"><img c-widget="Image; src:/images/wireframe/media-paragraph.png; class:fluid">
</div>
<script type="text/javascript">
    cola(function(model) {});
</script>

消除外线框

GroupBox控件可以通过basic class获得消除外线框

GroupBox控件
<div c-widget="GroupBox; caption:GroupBox控件;class:basic; width:400"><img c-widget="Image; src:/images/wireframe/media-paragraph.png; class:fluid">
</div>

定义操作按钮

GroupBox控件
<div c-widget="GroupBox; caption:GroupBox控件; width:400">
    <template name="tools"><i c-onclick="settingIconClick()" class="icon setting blue"></i>
    </template><img c-widget="Image; src:/images/wireframe/media-paragraph.png; class:fluid">
</div>
<script type="text/javascript">
    cola(function(model) {
        model.action({
            settingIconClick: function() {
                alert("hello")
            }
        })
    });
</script>

支持关闭

GroupBox控件
<div c-widget="GroupBox; caption:GroupBox控件; closable:true; width:400"><img c-widget="Image; src:/images/wireframe/media-paragraph.png; class:fluid">
</div>
<script type="text/javascript">
    cola(function(model) {

    });
</script>