<template>
  <div class="demo-tabs-position">
    <ui-select
      v-model="position"
      :options="options"></ui-select>

    <ui-tabs
      :tab-position="position"
      style="height: 300px">
      <ui-tab label="TEST1">
        1
      </ui-tab>
      <ui-tab label="TEST2">
        2
      </ui-tab>
      <ui-tab label="TEST3">
        3
      </ui-tab>
      <ui-tab label="TEST4">
        4
      </ui-tab>
      <ui-tab label="TEST4">
        5
      </ui-tab>
      <ui-tab label="TEST4">
        6
      </ui-tab>
      <ui-tab label="TEST4">
        7
      </ui-tab>
      <ui-tab label="TEST4">
        8
      </ui-tab>
      <ui-tab label="TEST4">
        9
      </ui-tab>
      <ui-tab label="TEST4">
        10
      </ui-tab>
      <ui-tab label="TEST4">
        11
      </ui-tab>
      <ui-tab label="TEST4">
        12
      </ui-tab>
      <ui-tab label="TEST4">
        13
      </ui-tab>
    </ui-tabs>
  </div>
</template>

<script>
import { Select, Tabs, Tab } from "amumu-ui"

export default {
  components: {
    "ui-tabs": Tabs,
    "ui-tab": Tab,
    "ui-select": Select,
  },
  data() {
    return {
      position: "top",
      options: [
        {
          label: "top",
          value: "top",
        },
        {
          label: "right",
          value: "right",
        },
        {
          label: "bottom",
          value: "bottom",
        },
        {
          label: "left",
          value: "left",
        },
      ],
    }
  },
}
</script>
