锚点 Anchors

Anchors

锚点布局：用法和 Tabs 一致，Tab 的切换是 锚点定位 的形式 锚点就是指在本网页内设置的一个位置，点击链接可以跳转到指定位置 对应HTML代码: <a href="# 锚 ">点这跳到id=锚的点</a><!-- 不一定局限在本页，href里还可能写调页的地址 -->

Anchors.Anchor API

IAnchorProps

参数	类型	说明	默认值
title	string	锚点标题	-
model	string	model用于锚点icon	-
show	boolean	是否显示	-

应用场景

使用锚点Anchors布局可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后通过Anchor标签创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。

与tab和LinkTabs的区别

• 与tab的主要区别在于，切换tab才去主动渲染当前tab下的布局，属于局部渲染，而Anchors在切换锚点的时候数据和页面已经加载和渲染完毕
• 与LinkTabs的区别在于，切换LinkTab是跳转路由，刷新整个布局，属于全局渲染；所以要根据三者提供的功能去使用相应的布局

示例图

示例代码

<View title="Anchors 布局" version="2">
  <Anchors>  <!-- Anchors布局容器  -->
    <Anchor title="部门详情">  <!-- Anchors下对应的锚点1  -->
      <Detail key="department" model="trantor_doc_Department">
        <Fields>
          <Field name="name"/>
          <Field name="company"/>
          <Field name="isLarge"/>
          <Field name="staff" />
        </Fields>
      </Detail>
    </Anchor>
    <Anchor title="部门人员列表">  <!-- Anchors下对应的锚点2  -->
      <Table model="trantor_doc_Person" lookupFrom="department.staff">
        <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>
    </Anchor>
  </Anchors>
</View>

用法

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