<template>
  <div class="demo-tabs-align">
    <div class="demo-box">
      <ui-tabs align="left">
        <ui-tab label="TEST1"></ui-tab>
        <ui-tab label="TEST2"></ui-tab>
        <ui-tab label="TEST3"></ui-tab>
        <ui-tab label="TEST4"></ui-tab>
      </ui-tabs>
    </div>

    <div class="demo-box">
      <ui-tabs align="center">
        <ui-tab label="TEST1"></ui-tab>
        <ui-tab label="TEST2"></ui-tab>
        <ui-tab label="TEST3"></ui-tab>
        <ui-tab label="TEST4"></ui-tab>
      </ui-tabs>
    </div>
    <div class="demo-box">
      <ui-tabs align="right">
        <ui-tab label="TEST1"></ui-tab>
        <ui-tab label="TEST2"></ui-tab>
        <ui-tab label="TEST3"></ui-tab>
        <ui-tab label="TEST4"></ui-tab>
      </ui-tabs>
    </div>
  </div>
</template>

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

export default {
  components: {
    "ui-tabs": Tabs,
    "ui-tab": Tab,
  },
}
</script>
