Module | CabinX

示例

<module> 是能内嵌在其他容器内部的容器，主要用于信息分块，相对 <left> <main> 等布局容器 <module> 在被嵌套时会在不同情况下有不同样式展示。

常规用法

<module> 在非 <module> 容器中时，框架会自动生成一个寸距。module支持标题title、副标题subtitle、提示tips、一个语义化标签status、多个无语义标签tag等配置。

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="标题"
            subtitle="副标题"
            tips="提示信息"
            tag="{{tag}}"
            status="{{label:'语义tag',status:'success'}}">
        <actions>
           <button text="按钮1"></button>
           <button text="按钮2"></button>
           <button text="按钮3"></button>
        </actions>   
        <form layout="horizontal" clearButton="{{false}}" confirmButton="{{false}}">
            <item name="input1" node="input" col="3" label="Label1" placeholder="placeholder"></item>
            <item name="input2" node="input" col="3" label="Label2" placeholder="placeholder"></item>
            <item name="input3" node="input" col="3" label="Label3" placeholder="placeholder"></item>
            <item name="input4" node="input" col="3" label="Label4" placeholder="placeholder"></item>
            <item name="input5" node="input" col="3" label="Label5" placeholder="placeholder"></item>
            <item name="input6" node="input" col="3" label="Label6" placeholder="placeholder"></item>
        </form>     
    </module>
</page>

export default XPage({
   data: {
        tag:[
            {label:'无语义tag',status:'red'},
            {label:'无语义tag',status:'blue'},
            {label:'无语义tag',status:'orange'},
            {label:'无语义tag',status:'yellow'},
            {label:'无语义tag',status:'green'},
        ]
   },
   show() {},   
});

提示信息notice

module支持固定展示提示信息。可在XPage中调用this.getComponent('myModule').notice(...)实现，其中myModule为DML中module的x属性值。具体notice配置参考下表Methods。

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module x="myModule" title="Module Title">
        <actions>
            <button bindclick="showNotice('info')" text="默认notice"></button>
            <button bindclick="showNotice('warning')" text="警告notice"></button>
            <button bindclick="showNotice('error')" text="错误notice"></button>
            <button bindclick="showNotice('success')" text="成功notice"></button>
            <button bindclick="hideNotice()" text="关闭notice"></button>
        </actions>
        <form layout="horizontal" clearButton="{{false}}" confirmButton="{{false}}">
            <item name="input1" node="input" col="3" label="Label1" placeholder="placeholder"></item>
            <item name="input2" node="input" col="3" label="Label2" placeholder="placeholder"></item>
            <item name="input3" node="input" col="3" label="Label3" placeholder="placeholder"></item>
            <item name="input4" node="input" col="3" label="Label4" placeholder="placeholder"></item>
            <item name="input5" node="input" col="3" label="Label5" placeholder="placeholder"></item>
            <item name="input6" node="input" col="3" label="Label6" placeholder="placeholder"></item>
        </form>  
    </module>   
</page>

export default XPage({
    data: {
        noticeConfig: {
            text: '提示文案',
            status: 'error',
            closable: true,
            buttonOptions: [
                {
                    text: '按钮',
                    click: () => {
                        console.info('module的notice的按钮点击了');
                    },
                },
            ],
        }
    },
    show() {
       this.getComponent('myModule').notice(this.data.noticeConfig);
    },
    showNotice(type) {
        const myModule = this.getComponent('myModule');
        const noticeConfig = Object.assign(this.data.noticeConfig, {status: type});

        myModule.notice(noticeConfig);
    },    
    hideNotice() {
        this.getComponent('myModule').hideNotice();
    },
    
});

展开收起

Module支持内容区域的展开收起，收起状态下仅展示标题栏部分。

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="初始展开" foldable>
        <actions>
           <button text="按钮1"></button>
           <button text="按钮2"></button>
           <button text="按钮3"></button>
        </actions>   
        <form layout="horizontal" clearButton="{{false}}" confirmButton="{{false}}">
            <item name="input1" node="input" col="3" label="Label1" placeholder="placeholder"></item>
            <item name="input2" node="input" col="3" label="Label2" placeholder="placeholder"></item>
            <item name="input3" node="input" col="3" label="Label3" placeholder="placeholder"></item>
            <item name="input4" node="input" col="3" label="Label4" placeholder="placeholder"></item>
            <item name="input5" node="input" col="3" label="Label5" placeholder="placeholder"></item>
            <item name="input6" node="input" col="3" label="Label6" placeholder="placeholder"></item>
        </form>     
    </module>
    <module title="初始收起" foldable="{{foldConfig}}" bind-folded="foldHandler">
        <actions>
           <button text="按钮1"></button>
           <button text="按钮2"></button>
           <button text="按钮3"></button>
        </actions>   
        <form layout="horizontal" clearButton="{{false}}" confirmButton="{{false}}">
            <item name="input1" node="input" col="3" label="Label1" placeholder="placeholder"></item>
            <item name="input2" node="input" col="3" label="Label2" placeholder="placeholder"></item>
            <item name="input3" node="input" col="3" label="Label3" placeholder="placeholder"></item>
            <item name="input4" node="input" col="3" label="Label4" placeholder="placeholder"></item>
            <item name="input5" node="input" col="3" label="Label5" placeholder="placeholder"></item>
            <item name="input6" node="input" col="3" label="Label6" placeholder="placeholder"></item>
        </form>     
    </module>
</page>

export default XPage({
   data: {
        foldConfig:{
            show:true,
            folded:true
        }
   },
   show() {}, 
   foldHandler(status){
     console.info('module当前状态为：',status);
   },  
});

Module 嵌套

Module 相互嵌套时，第一二级会有样式区分，超过二级的样式同二级。理论上 Module 可以无限嵌套，但是 2 级以后样式不作区分，因此并不具备良好的识别性，一般不推荐嵌套超过三级。

PCPhonePad

HTMLJAVASCRIPTCSS

  <page>
    <module title="嵌套module" tag="level 1">
      <module title="inner-module1" tag="level 2" subtitle="当module内嵌时，框架会自动处理相关样式。" height="180px">
      </module>
      <module title="inner-module2" tag="level 2" height="240px">
        <module title="inner-inner-module1" tag="level 3" subtitle="虽然技术上module可以无限嵌套，但是UI上我们进行了严格定义，二级嵌套后的module样式表现都一致" height="70px">
        </module>
        <module title="inner-inner-module1" tag="level 3" subtitle="虽然技术上module可以无限嵌套，但是UI上我们进行了严格定义，二级嵌套后的module样式表现都一致" height="70px">
        </module>
      </module>
    </module>
  </page>

export default XPage({
  data: {}
});

Module Group

Module 相互嵌套时，仅第一级支持 is-group 功能。开启 is-group 后，第一级 Module 的底色会去掉。

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="嵌套module level 1" is-group>
        <module title="inner-module1" tag="level 2" subtitle="当module内嵌时，框架会自动处理相关样式。" height="180px">
        </module>
        <module title="inner-module2" tag="level 2" height="240px">
            <module title="inner-inner-module1" tag="level 3"
                    subtitle="虽然技术上module可以无限嵌套，但是UI上我们进行了严格定义，二级嵌套后的module样式表现都一致" height="70px">
            </module>
            <module title="inner-inner-module1" tag="level 3"
                    subtitle="虽然技术上module可以无限嵌套，但是UI上我们进行了严格定义，二级嵌套后的module样式表现都一致" height="70px">
            </module>
        </module>
    </module>
</page>

export default XPage({
   data: {        
   },
   show() {},   
});

高度

module高度默认是根据内容撑高(auto)，支持百分比 30%、像素 30px、自动 auto 三种写法。

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="标题" height="{{height}}">
        <actions>
           <button text="默认自动auto" bind-click="()=>clickHandler('auto')"></button>
           <button text="像素300px" bind-click="()=>clickHandler('300px')"></button>
           <button text="百分比70%" bind-click="()=>clickHandler('70%')"></button>
        </actions>   
        <form layout="horizontal" clearButton="{{false}}" confirmButton="{{false}}">
            <item name="input1" node="input" col="3" label="Label1" placeholder="placeholder"></item>
            <item name="input2" node="input" col="3" label="Label2" placeholder="placeholder"></item>
            <item name="input3" node="input" col="3" label="Label3" placeholder="placeholder"></item>
            <item name="input4" node="input" col="3" label="Label4" placeholder="placeholder"></item>
            <item name="input5" node="input" col="3" label="Label5" placeholder="placeholder"></item>
            <item name="input6" node="input" col="3" label="Label6" placeholder="placeholder"></item>
        </form>     
    </module>
</page>

export default XPage({
   data: {
       height:undefined
   },
   show() {}, 
   clickHandler(value){
        this.setData({height:value});   
   },
});

宽度

module 宽度默认是100%，支持百分比 30%、像素 30px、栅格 3四种写法。

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <module title="设置宽度" width="{{width}}">
        <actions>
           <button text="默认100%" bind-click="()=>clickHandler()"></button>
           <button text="像素600px" bind-click="()=>clickHandler('600px')"></button>
           <button text="百分比70%" bind-click="()=>clickHandler('70%')"></button>
        </actions>   
        <form clearButton="{{false}}" confirmButton="{{false}}">
            <item name="input1" node="input" label="Label1" placeholder="placeholder"></item>
            <item name="input2" node="input" label="Label2" placeholder="placeholder"></item>
            <item name="input3" node="input" label="Label3" placeholder="placeholder"></item>
            <item name="input4" node="input" label="Label4" placeholder="placeholder"></item>
            <item name="input5" node="input" label="Label5" placeholder="placeholder"></item>
            <item name="input6" node="input" label="Label6" placeholder="placeholder"></item>
        </form>     
    </module> 
</page>

export default XPage({
   data: {
        width:undefined
   },
   show() {}, 
   clickHandler(value){
        this.setData({width:value||undefined});   
   },
});

栅格

Module width 可以直接写小于等于12的数字，形成栅格布局。栅格布局以12列为基准。当 Module 使用栅格布局时，兄弟节点 Width 不能再使用百分比或绝对值进行布局。

PCPhonePad

HTMLJAVASCRIPTCSS

  <page>
    <module title="Module Title" width="3" height="100px">
    </module>
    <module title="Module Title" width="3" height="100px">
    </module>
    <module title="Module Title" width="3" height="100px">
    </module>
    <module title="Module Title" width="3" height="100px">
    </module>
    <module title="Module Title" width="6" height="200px">     
    </module>
    <module title="Module Title" width="4" height="100px">
    </module>
    <module title="Module Title" width="2" height="100px">
    </module>
    <module title="Module Title" width="12" height="100px">
    </module>
  </page>

export default XPage({
   data: {},
   show() {},
});

Group 结合栅格

栅格module结合 isGroup 可以实现如下效果。

PCPhonePad

HTMLJAVASCRIPTCSS

  <page>
       <module title="嵌套 Module">
            <module title="Module Title" width="3" height="100px">
            </module>
            <module title="Module Title" width="3" height="100px">
            </module>
            <module title="Module Title" width="3" height="100px">
            </module>
            <module title="Module Title" width="3" height="100px">
            </module>
        </module>
        <module title="嵌套 Module">
            <module title="Module Title" width="3" height="100px">
            </module>
            <module title="Module Title" width="3" height="100px">
            </module>
            <module title="Module Title" width="3" height="100px">
            </module>
            <module title="Module Title" width="3" height="100px">
            </module>
        </module>
  </page>

export default XPage({
   data: {},
   show() {},
});

摘要模式

当直接父级page组件设置了mode为digest时，需要指定一个module为摘要的模块。

PCPhonePad

HTMLJAVASCRIPTCSS

<x-page
    title="摘要模式"
    mode="digest"
>
    <x-actions>       
        <x-button text='TR button'></x-button>
        <x-button text='TR button'></x-button>
        <x-button text='TR button'></x-button>
        <x-button text='TR button'></x-button>
    </x-actions>   
        
    <!--摘要模块-->
    <x-module title="Module Title" digest subtitle="摘要">
        <x-form layout="horizontal" confirm-button="{{false}}" clear-button="{{false}}">
            <x-item label="Label" :colspan="{span:6}" value="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" value="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" value="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" value="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" value="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" value="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" value="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" value="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" value="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" value="placeholder"></x-item>
        </x-form>
    </x-module>
    <!--摘要模块 end-->
    
    <x-module title="Module Title" avatar="{{src:'https://testimage-1256468630.cos.ap-beijing.myqcloud.com/ware/0f1ee4381b584119828261b79e42b024/screenshot-20220507-092953.png'}}">
        <x-form layout="horizontal" confirm-button="{{false}}" clear-button="{{false}}">
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:3}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:3}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" node="radio" layout="vertical" default-value='{{1}}' :data="[{label: 'Label', value: 1},{label: 'Label', value: 2},{label: 'Label', value: 3}]"></x-item>
        </x-form>
    </x-module>
    <x-module title="Module Title">
        <x-form layout="horizontal" confirm-button="{{false}}" clear-button="{{false}}">
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:3}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:3}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" node="radio" layout="vertical" default-value='{{1}}' :data="[{label: 'Label', value: 1},{label: 'Label', value: 2},{label: 'Label', value: 3}]"></x-item>
        </x-form>
    </x-module>
    <x-module title="Module Title">
        <x-form layout="horizontal" confirm-button="{{false}}" clear-button="{{false}}">
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:3}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:3}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" node="radio" layout="vertical" default-value='{{1}}' :data="[{label: 'Label', value: 1},{label: 'Label', value: 2},{label: 'Label', value: 3}]"></x-item>
        </x-form>
    </x-module>
    <x-module title="Module Title">
        <x-form layout="horizontal" confirm-button="{{false}}" clear-button="{{false}}">
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:3}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:3}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" node="radio" layout="vertical" default-value='{{1}}' :data="[{label: 'Label', value: 1},{label: 'Label', value: 2},{label: 'Label', value: 3}]"></x-item>
        </x-form>
    </x-module>
    <x-module title="Module Title">
        <x-form layout="horizontal" confirm-button="{{false}}" clear-button="{{false}}">
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:2}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:3}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:3}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" :colspan="{span:6}" node="input" placeholder="placeholder"></x-item>
            <x-item label="Label" node="radio" layout="vertical" default-value='{{1}}' :data="[{label: 'Label', value: 1},{label: 'Label', value: 2},{label: 'Label', value: 3}]"></x-item>
        </x-form>
    </x-module>
    
    <!--内容 end-->
</x-page>

export default XPage({
    data: {},    
    show() {},
});

Attributes

属性	说明	类型	可选值	默认值	端	版本
title	页面标题	String	--	--	PC/Mobile	--
subtitle	页面副标题	String	--	--	PC/Mobile	--
tag	无语义标签，可通过配置数组展示多个，其中label为展示文案,status为标签颜色，取值参考基础组件Tag类型为normal时的可选项	string/Array[{lable:String,status:String}}]	--	--	PC/Mobile	--
status	有语义的标签，只能展示一个。可通过对象配置，其中label为展示文案，status为标签语义，取值参考基础组件Tag类型为status时的可选项	string/Object<{lable:String,status:String}>	--	--	PC/Mobile	--
tips	提示	string	--	--	PC/Mobile	--
width	宽度，支持百分比 `30%`、像素 `30px`、栅格 `3`、自动 `auto` 四种写法	string	--	'100%'	PC	--
height	高度，支持百分比 `30%`、像素 `30px`、自动 `auto` 三种写法	string	--	'auto'	PC/Mobile	--
foldable	是否可折叠。值为对象时，可配置为{show:true,folded:true}，show指是否开启折叠功能，folded指初始是否为折叠状态	Boolean/Object<{show:true,folded:true}>	--	false	PC/Mobile	--
avatar	头像	Object<{ src: String }>	--	--	PC	--
isGroup	嵌套时第一级设置为组，无底色	Boolean	--	false	PC	--
digest	摘要模块，当直接父级`page`组件设置了`mode`为`digest`时有效	Boolean	--	false	PC	--

Events

名称	说明	回调参数	端	版本
folded	折叠展开时触发	(status:String<状态值为unfold或fold>)	PC/Mobile	--

Methods

通过getComponent函数获取x属性定义的module后调用其对应Methods。

this.getComponent('myModule').notice({text: '我是提示信息', closable: true, status}

名称	说明	入参	返回	端	版本
notice	显示容器提示信息，支持最多两个操作按钮，入参参考下表	--	--	PC/Mobile	--
hideNotice	关闭提示	--	--	PC/Mobile	--
scrollIntoView	滚动至可是区域	可参考mdn[https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView]中scrollIntoView的入参	--	PC	--

Methods - notice

notice函数支持的入参如下

属性	说明	类型	可选值	默认值	端	版本
text	通知信息	string	--	--	PC/Mobile	--
status	状态	string	info/success/worning/error	info	PC/Mobile	--
buttonOptions	操作按钮，最多支持两个按钮	Array[{text:string<按钮文案>,click:Function<点击回调>}]	--	--	PC/Mobile	--
closable	是否可关闭	Boolean	--	false	PC/Mobile	--

示例​

常规用法​

提示信息notice​

展开收起​

Module 嵌套​

Module Group​

高度​

宽度​

栅格​

Group 结合栅格​

摘要模式​

Attributes​

Events​

Methods​

Methods - notice​

示例

常规用法

提示信息notice

展开收起

Module 嵌套

Module Group

高度

宽度

栅格

Group 结合栅格

摘要模式

Attributes

Events

Methods

Methods - notice