# UmsNavbar

<template>
  <div>
    <ums-navbar v-model="active">
      <ums-tabitem v-for="item in options" :id="item.value">
        <text class="text" :style="[{color: item.value == active ? '#0f89f5' : '#000'},item.value == active ? styles : {}]">{{item.value}}</text>
      </ums-tabitem>
    </ums-navbar>
    <ums-tabcontainer v-model="active">
      <ums-tabcontainer-item id="one">
        <image class="img" 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="img" 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="img" 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>
  .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;
  .img
    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
    }
  }
</script>