选项卡 Tabs

Tabs

选项卡布局：用法和 Anchors 一致，Tab 的切换是 滑动分页 的形式

选项卡布局，默认加载第一个选项卡中的内容，选中选项卡会重新渲染当前选项卡下的内容

Tabs API

ITabsProps

参数	类型	说明	默认值
key	string	布局容器key	-
show	boolean	是否显示	-
beforeTabChange	() => Promise<string | void | true>	tab跳转前执行	-
afterTabChange	(activeKey?: string) => void	tab跳转后执行	-

Tabs.Tab API

ITabProps

参数	类型	说明	默认值
show	boolean	是否显示	-
title	string	tab标题	-
disabled	boolean	禁用状态	-

示例图

示例代码

<View version="2" title="Tabs 布局">
  <Tabs>  <!-- Tabs的选项卡布局容器  -->
    <Tab title="部门详情">  <!-- Tabs的选项卡1  -->
      <Detail key="department" model="trantor_doc_Department">  <!-- 对应Tabs的选项卡1的内容  -->
        <Fields>
          <Field name="name"/>
          <Field name="company"/>
          <Field name="isLarge"/>
          <Field name="staff" />
        </Fields>
      </Detail>
    </Tab>
    <Tab title="部门人员列表">  <!-- Tabs的选项卡2  -->
      <Table model="trantor_doc_Person" lookupFrom="department.staff">  <!-- 对应Tabs的选项卡2的内容 -->
        <Fields>
          <Field name="name"/>
          <Field name="avatar"/>
          <Field name="age"/>
          <Field name="password"/>
          <Field name="credentials"/>
          <Field label="部门名称" name="department.name"/>
          <Field name="birthday"/>
        </Fields>
      </Table>
    </Tab>
  </Tabs>
</View>

简单用法

注意：当前例子为0.17.x 版本