跳到主要内容
组件简介

简介​

CabinX的页面是由一个个内部提供的组件组合构成，区别于原生的HTML，CabinX的DML文件中仅能使用内部提供的组件标签，原生的HTML标签如：div,span,input等等是不被允许的，非CabinX提供的标签在使用时会被编译提示非法，无法构建通过。

被禁用的标签​

html，body，base，head，link，meta，style，title，address，article，aside，footer，header，h1，h2，h3，h4，h5，h6， hgroup，nav，section，div，dd，dl，dt，figcaption，figure，picture，hr，img，li，ol，p，pre，ul，a，b，abbr，bdi，bdo， br，cite，code，data，dfn，em，i，kbd，mark，q，rp，rt，rtc，ruby，s，samp，small，span，strong，sub，sup，time，u，var， wbr，area，audio，map，track，video，embed，object，param，source，canvas，script，noscript，del，ins，caption，col，colgroup， thead，tbody，td，th，tr，datalist，fieldset，label，legend，meter，optgroup，option，output，details，dialog，menu，menuitem，summary， content，element，shadow，blockquote，iframe，tfoot

错误提示​

页面​

页面

命令行​

命令行

内置组件​

CabinX支持的组件请查看组件总览。

使用方式​

  • <组件名称/>，推荐方式。如：<table></table>
  • <x-组件名称/>，如：<x-table></x-table>

具体支持哪些组件请在文档组件菜单目录中查看。

当内部提供的组件无法满足业务需求时，可自定义组件，具体实现参考文档自定义组件。

通用能力​

CabinX内置组件除了组件本身提供的功能，还有一些通用的能力。

x属性​

组件都支持属性x的设置，在XPage中调用this.getComponent('x属性值')可以返回该组件实例的Proxy代理，通过该代理进而可以调用该组件提供的API方法。

如下Demo，table设置属性x="myTable"，通过this.getComponent('myTable').getData()调用table对外提供的API：getData获取表格的渲染数据。

PCPhonePad

<page>
  <actions>
    <button text="获取表格数据" bind-click="getTable"></button>
  </actions>
  <table x="myTable" data="{{tableData}}">
    <cell label="日期">
      {{cellData.rowData.date}}
    </cell>
    <cell label="姓名">
      {{cellData.rowData.name}}
    </cell>
    <cell label="地址">
      {{cellData.rowData.address}}
    </cell>
  </table>
</page>


export default XPage({
data: {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
},
getTable() {
const myTable = this.getComponent('myTable');
const data = myTable.getData();
console.log('表格实例代理', myTable);
console.log('调用表格的对外API：getData()得到表格的渲染数据', data);
},
});


通用API​

  • loading()，显示局部loading。

  • hideLoading()，隐藏局部loading。

调用方法同x属性中案例表格的API调用方式：this.getComponent('myTable').loading()，如下Demo。

PCPhonePad

<page>
  <actions>
    <button text="展示局部loading" bind-click="showLoading"></button>
    <button text="隐藏局部loading" bind-click="hideLoading"></button>
  </actions>
  <table x="myTable" data="{{tableData}}">
    <cell label="日期">
      {{cellData.rowData.date}}
    </cell>
    <cell label="姓名">
      {{cellData.rowData.name}}
    </cell>
    <cell label="地址">
      {{cellData.rowData.address}}
    </cell>
  </table>
</page>



export default XPage({
data: {
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
},
showLoading() {
this.getComponent('myTable').loading();
},
hideLoading() {
this.getComponent('myTable').hideLoading();
},
});


authCode权限编码​

CabinX所有组件均支持配置属性authCode，类型为String。和全局配置中的权限配置配合使用。当设置了权限编码的组件，框架可以根据全局的权限配置对其进行统一处理。

<button text="按钮" authCode="xxxxxxx"></button>