基本dom结构

基本使用示例

基本dom结构解析

区域拓展

区域样式拓展

样式拓展示例与解析

嵌套使用

嵌套使用示例与解析

portlet区域主要通过UI体系内定义好的标签和样式控制页面布局,支持通过标签拓展不同的样式,允许嵌套使用,但不能破坏固有的dom结构
基本dom结构
基本使用示例
模块区域
复合按钮
  • 按钮选项1
  • 按钮选项2
我是模块内容区域
基本dom结构解析
区域拓展
区域样式拓展

● portlet区域的拓展主要体现在样式上,多用于多级区域嵌套。

● portlet通过在class名称拓展不同的样式,必须加在基础类名“wj_portlet”后边。

标签 作用 示例
wj_portlet_bordered 区域边框 点击查看
wj_nobordered 区域无边框,一般配合wj_portlet_bordered使用 点击查看
wj_portlet_fieldset 表单式区域 点击查看
样式拓展示例与解析

● 区域边框应用示例与解析。

模块区域(边框)
模块区域(边框)

● 区域无边框应用示例与解析。

区域无边框
区域无边框

● 表单式区域应用示例与解析,不支持折叠哦。

表单式区域
嵌套使用
嵌套使用示例与解析

● 为了突出区域的层级,我们建议嵌套使用不同样式的区域。

● 在portlet区域的实际应用中,一般我们会结合网格布局弹性布局制作页面。

模块区域(嵌套)
模块区域(边框)
模块区域(无边框)
我是无边框区域
模块区域(边框)
模块区域(表单式)
模块区域(表单式)

【重要的事情说三遍】:在区域嵌套使用中,dom结构绝不能被破坏,必须成套使用