<template>
  <section>
    <h5>1.带标签页的复杂表单页外部架构</h5>
    <p>标签页从外到里需要添加三层，包括【外部标签框架】、【内部标签框架】和【分片表单】</p>
    <p>
      外部标签框架
      <a-tag>1.1</a-tag>
    </p>
    <p>构成tabs标签页，在内调用每个标签页的pane组件</p>
    <Highlight :code="codes['/seed/form-page/tab-form/tab.vue']" copy-template language="html" />
    <p>
      内部标签框架
      <a-tag>1.0</a-tag>
    </p>
    <p>标签页pane的内容，在内将分片表单进行组合</p>
    <Highlight :code="codes['/seed/form-page/tab-form/tabPane.vue']" copy-template language="html" />
    <h5>2.单页表单外部结构</h5>
    <p>
      <a-tag>1.0</a-tag>
    </p>
    <p>该表单单页面展示，从外到里需要添加两层，包括【表单外部结构】和【分片表单】</p>
    <Highlight :code="codes['/seed/form-page/only-form/index.vue']" copy-template language="html" />
    <h5>3.分片表单</h5>
    <p>
      <a-tag>1.0</a-tag>
    </p>
    <p>表单核心，再该组件中放入表单控件</p>
    <Highlight :code="codes['/seed/form-page/only-form/part.vue']" copy-template language="html" />
  </section>
</template>
<script>
import Highlight from '../highlight';

export default {
  components: {
    Highlight,
  },
  props: {
    codes: {
      type: Object,
    },
  },
};
</script>
