# UmsTabContainer

<template>
  <div>
    <div class="btns">
      <div class="btn" @click="test('one')"><text>one</text></div>
      <div class="btn" @click="test('two')"><text>two</text></div>
      <div class="btn" @click="test('three')"><text>three</text></div>
    </div>
    <ums-tabcontainer v-model="active">
      <ums-tabcontainer-item id="one">
        <image class="page" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=569334953,1638673400&fm=27&gp=0.jpg"></image>
      </ums-tabcontainer-item>
      <ums-tabcontainer-item id="two">
        <image class="page" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4080833725,2827278465&fm=27&gp=0.jpg"></image>
      </ums-tabcontainer-item>
      <ums-tabcontainer-item id="three">
        <image class="page" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3901058853,1971973771&fm=27&gp=0.jpg"></image>
      </ums-tabcontainer-item>
    </ums-tabcontainer>
  </div>
</template>

<style lang="stylus" scoped>
  .btns
    flex-direction row;
    align-items: center;
    border-width: 1px;
  .btn
    width: 100px;
    height: 50px;
    justify-content center;
    align-items center;
    padding: 10;
    border-width: 1px;
    margin-right: 10px;
  .test
    width: 200px
    height: 100px
    border-width: 1px
  .text
    width: 150px
    text-align center
    padding-bottom 20px;
    padding-top: 20px
    padding-left: 20px;
    padding-right: 20px;
  .page
    width: 750px;
    height: 900px;
    justify-content: center;
    align-items: center;
</style>

<script>
  import {UmsNavbar, UmsTabitem, UmsTabcontainer, UmsTabcontainerItem} from "ums-comp"
  export default {
    data () {
      return {
        active: "one",
        options: [{value: "one"},{value: "two"},{value: "three"}],
        styles:{
          borderBottomColor: "#0f89f5",
          borderBottomWidth: "5px"
        }
      }
    },
    components: {
      UmsTabcontainer,
      UmsTabcontainerItem,
      UmsNavbar,
      UmsTabitem
    },
    methods: {
      test(val){
        this.active = val
      }
    }
  }
</script>