<template>
  <Tabs class="dynamic-form-tabs" :value="curRightTabName">
    <TabPane name="组件设置" label="组件设置">
      <dynamic-form @modProps="modProps" @resizedChildEvent="resizedChildEvent"></dynamic-form>
    </TabPane>
    <!-- <TabPane label="事件">事件</TabPane> -->
    <TabPane name="页面设置" label="页面设置">
       <dynamic-page-form @modProps="modProps" @resizedChildEvent="resizedChildEvent"></dynamic-page-form> 
    </TabPane>
    <TabPane name="组件管理" label="组件管理">
       <dynamic-component-sort /> 
    </TabPane>
  </Tabs>
</template>
<script lang="ts" src="./index.ts"></script>
<style lang="less" scoped>
  .tabs-position() {
    /deep/ .ivu-tabs-nav-scroll {
      display: flex;
      justify-content: center;
    } 
  }
  
  .dynamic-form-tabs {
    height: 100%;
    min-width: 320px;
    .tabs-position();
    background: #F5F6FA;
    /deep/ .ivu-tabs-bar {
      background: #fff;
      margin-bottom: 0;
    }
    /deep/ .ivu-tabs-content {
      height: calc(100% - 48px);
      .ivu-tabs-tabpane {
        height: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
      }
    }
  }
</style>