前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >smartClient 3--布局

smartClient 3--布局

作者头像
用户1148399
发布2018-01-09 16:00:24
1K0
发布2018-01-09 16:00:24
举报
文章被收录于专栏:web前端

一、组件的布局(如何将组件按照想要的方式进行布局,如左右布局,上下布局等等,这里是大框架下的整体布局)

  1. HLayout  水平
  2. VLayout   垂直
  3. HStack     水平但是width不管
  4. VStack     垂直但是width不管
代码语言:js
复制
isc.HLayout.create({
    ID: "pageLayout",
    width: "100%",    
    height: "100%",    
    membersMargin: 10,        //members之间的margin
    layoutMargin: 10,         //layout周围的margin    
    members: [                                                      
    //members可以是组件的引用,也可以是在线create,组件成员也可以嵌套layout布局       
    isc.Label.create({           
    layoutAlign: "left | right | top | bottom | center",    
    //member(这里指组件)对其方式           
    showResizeBar: true | false,                            
    //member之间是否显示 调整大小栏           
    width: 100,         
    //注意,layout管理器不会根据layout自身大小(即container大小)自动调整members的大小(即不会自适应)
    //如果内容(这里指members)撑开layout,将会自然状态撑开,所以可以根据所需设置overflow(hidden | visible | scroll | auto)           
    height: 100
           }),       
           isc.Button.create()
     ]
});
代码语言:javascript
复制
members中的容器组件(container components)
    a.    SectionStack    是分装用户可扩展、可折叠的组件的容器
    b.    TabSet            是分装tabs组件的容器
    c.    Window           是分装模拟window特性(可拖动,可resize)的组件的容器

二、表单的布局(如何进行表单中label、controls的行列布局)注意:这里表单布局类似HTML中的table,分成行和列,以grid网格的形式呈现

    1、表单布局属性    

代码语言:javascript
复制
     numCols    总列数(label和控件各占一列呈水平布局,所以通常设置总列数是 2*n)
        titleWidth    title 即 label 的宽度
        colWidths    可选,所有列的宽度(数组形式),如果设置,则会覆盖表单布局自动计算的每个col的宽度    

    2、field字段属性

代码语言:javascript
复制
        colSpan                                // int,跨列 
        rowSpan                               //int,跨行
        startRow: true | false              //是否应该开始新行
        endRow: true | false               //是否应该结束行
        showTitle: true | false             //控件是否显示label
        align: "left | right | center"       //控件对齐方式    
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-11-25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档