Tabs

<template>
<div>
  <a-tabs defaultActiveKey="1" @change="callback">
    <a-tab-pane tab="Tab 1" key="1">Content of Tab Pane 1</a-tab-pane>
    <a-tab-pane tab="Tab 2" key="2" forceRender>Content of Tab Pane 2</a-tab-pane>
    <a-tab-pane tab="Tab 3" key="3">Content of Tab Pane 3</a-tab-pane>
  </a-tabs>
</div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    callback (key) {
      console.log(key)
    },
  },
}
</script>

<template>
  <div class="card-container">
    <a-tabs type="card">
      <a-tab-pane tab="Tab Title 1" key="1">
        <p>Content of Tab Pane 1</p>
        <p>Content of Tab Pane 1</p>
        <p>Content of Tab Pane 1</p>
      </a-tab-pane>
      <a-tab-pane tab="Tab Title 2" key="2">
        <p>Content of Tab Pane 2</p>
        <p>Content of Tab Pane 2</p>
        <p>Content of Tab Pane 2</p>
      </a-tab-pane>
      <a-tab-pane tab="Tab Title 3" key="3">
        <p>Content of Tab Pane 3</p>
        <p>Content of Tab Pane 3</p>
        <p>Content of Tab Pane 3</p>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    callback (key) {
      console.log(key)
    },
  },
}
</script>
<style>
.card-container {
  background: #F5F5F5;
  overflow: hidden;
  padding: 24px;
}
.card-container > .ant-tabs-card > .ant-tabs-content {
  height: 120px;
  margin-top: -16px;
}

.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  background: #fff;
  padding: 16px;
}

.card-container > .ant-tabs-card > .ant-tabs-bar {
  border-color: #fff;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  border-color: transparent;
  background: transparent;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  border-color: #fff;
  background: #fff;
}
</style>

<template>
  <a-tabs @change="callback" type="card">
    <a-tab-pane tab="Tab 1" key="1">Content of Tab Pane 1</a-tab-pane>
    <a-tab-pane tab="Tab 2" key="2">Content of Tab Pane 2</a-tab-pane>
    <a-tab-pane tab="Tab 3" key="3">Content of Tab Pane 3</a-tab-pane>
  </a-tabs>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    callback (key) {
      console.log(key)
    },
  },
}
</script>

<template>
<div>
    <div :style="{ marginBottom: '16px' }">
      <a-button @click="add">ADD</a-button>
    </div>
    <a-tabs
      hideAdd
      v-model="activeKey"
      type="editable-card"
      @edit="onEdit"
    >
    <a-tab-pane v-for="pane in panes" :tab="pane.title" :key="pane.key" :closable="pane.closable">
      {{pane.content}}
    </a-tab-pane>
  </a-tabs>
</div>

</template>
<script>
export default {
  data () {
    const panes = [
      { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
      { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
    ]
    return {
      activeKey: panes[0].key,
      panes,
      newTabIndex: 0,
    }
  },
  methods: {
    callback (key) {
      console.log(key)
    },
    onEdit (targetKey, action) {
      this[action](targetKey)
    },
    add () {
      const panes = this.panes
      const activeKey = `newTab${this.newTabIndex++}`
      panes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey })
      this.panes = panes
      this.activeKey = activeKey
    },
    remove (targetKey) {
      let activeKey = this.activeKey
      let lastIndex
      this.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1
        }
      })
      const panes = this.panes.filter(pane => pane.key !== targetKey)
      if (lastIndex >= 0 && activeKey === targetKey) {
        activeKey = panes[lastIndex].key
      }
      this.panes = panes
      this.activeKey = activeKey
    },
  },
}
</script>

<template>
  <a-tabs defaultActiveKey="1">
    <a-tab-pane tab="Tab 1" key="1">Tab 1</a-tab-pane>
    <a-tab-pane tab="Tab 2" disabled key="2">Tab 2</a-tab-pane>
    <a-tab-pane tab="Tab 3" key="3">Tab 3</a-tab-pane>
  </a-tabs>
</template>

<template>
  <a-tabs
    v-model="activeKey"
    type="editable-card"
    @edit="onEdit"
  >
    <a-tab-pane v-for="pane in panes" :tab="pane.title" :key="pane.key" :closable="pane.closable">
      {{pane.content}}
    </a-tab-pane>
  </a-tabs>
</template>
<script>
export default {
  data () {
    const panes = [
      { title: 'Tab 1', content: 'Content of Tab 1', key: '1', closable: false },
      { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
    ]
    return {
      activeKey: panes[0].key,
      panes,
      newTabIndex: 0,
    }
  },
  methods: {
    callback (key) {
      console.log(key)
    },
    onEdit (targetKey, action) {
      this[action](targetKey)
    },
    add () {
      const panes = this.panes
      const activeKey = `newTab${this.newTabIndex++}`
      panes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey })
      this.panes = panes
      this.activeKey = activeKey
    },
    remove (targetKey) {
      let activeKey = this.activeKey
      let lastIndex
      this.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1
        }
      })
      const panes = this.panes.filter(pane => pane.key !== targetKey)
      if (lastIndex >= 0 && activeKey === targetKey) {
        activeKey = panes[lastIndex].key
      }
      this.panes = panes
      this.activeKey = activeKey
    },
  },
}
</script>

<template>
  <a-tabs>
    <a-tab-pane tab="Tab 1" key="1">Content of tab 1</a-tab-pane>
    <a-tab-pane tab="Tab 2" key="2">Content of tab 2</a-tab-pane>
    <a-tab-pane tab="Tab 3" key="3">Content of tab 3</a-tab-pane>
    <a-button slot="tabBarExtraContent">Extra Action</a-button>
  </a-tabs>
</template>

<template>
  <a-tabs defaultActiveKey="2">
    <a-tab-pane key="1">
      <span slot="tab">
        <a-icon type="apple" />
        Tab 1
      </span>
      Tab 1
    </a-tab-pane>
    <a-tab-pane key="2">
      <span slot="tab">
        <a-icon type="android" />
        Tab 2
      </span>
      Tab 2
    </a-tab-pane>
  </a-tabs>
</template>

<template>
  <div style="width: 500px">
    <a-radio-group v-model="tabPosition" style="margin:8px">
      <a-radio-button value="top">top</a-radio-button>
      <a-radio-button value="bottom">bottom</a-radio-button>
      <a-radio-button value="left">left</a-radio-button>
      <a-radio-button value="right">right</a-radio-button>
    </a-radio-group>
    <a-tabs defaultActiveKey="1" :tabPosition="tabPosition">
      <a-tab-pane tab="Tab 1" key="1">Content of Tab 1</a-tab-pane>
      <a-tab-pane tab="Tab 2" key="2">Content of Tab 2</a-tab-pane>
      <a-tab-pane tab="Tab 3" key="3">Content of Tab 3</a-tab-pane>
    </a-tabs>
  </div>

</template>
<script>
export default {
  data () {
    return {
      tabPosition: 'top',
    }
  },
  methods: {
    callback (val) {
      console.log(val)
    },
  },
}
</script>

<template>
<div>
  <a-radio-group v-model="size" style="margin-bottom: 16px">
    <a-radio-button value="small">Small</a-radio-button>
    <a-radio-button value="default">Default</a-radio-button>
    <a-radio-button value="large">Large</a-radio-button>
  </a-radio-group>
  <a-tabs defaultActiveKey="2" :size="size">
    <a-tab-pane tab="Tab 1" key="1">Content of tab 1</a-tab-pane>
    <a-tab-pane tab="Tab 2" key="2">Content of tab 2</a-tab-pane>
    <a-tab-pane tab="Tab 3" key="3">Content of tab 3</a-tab-pane>
  </a-tabs>
</div>
</template>
<script>
export default {
  data () {
    return {
      size: 'small',
    }
  },
}
</script>

<template>
  <div style="width: 500px">
    <a-radio-group v-model="mode" :style="{ marginBottom: '8px' }">
      <a-radio-button value="top">Horizontal</a-radio-button>
      <a-radio-button value="left">Vertical</a-radio-button>
    </a-radio-group>
    <a-tabs defaultActiveKey="1" :tabPosition="mode" :style="{ height: '200px'}" @prevClick="callback" @nextClick="callback">
      <a-tab-pane tab="Tab 1" key="1">Content of tab 1</a-tab-pane>
      <a-tab-pane tab="Tab 2" key="2">Content of tab 2</a-tab-pane>
      <a-tab-pane tab="Tab 3" key="3">Content of tab 3</a-tab-pane>
      <a-tab-pane tab="Tab 4" key="4">Content of tab 4</a-tab-pane>
      <a-tab-pane tab="Tab 5" key="5">Content of tab 5</a-tab-pane>
      <a-tab-pane tab="Tab 6" key="6">Content of tab 6</a-tab-pane>
      <a-tab-pane tab="Tab 7" key="7">Content of tab 7</a-tab-pane>
      <a-tab-pane tab="Tab 8" key="8">Content of tab 8</a-tab-pane>
      <a-tab-pane tab="Tab 9" key="9">Content of tab 9</a-tab-pane>
      <a-tab-pane tab="Tab 10" key="10">Content of tab 10</a-tab-pane>
      <a-tab-pane tab="Tab 11" key="11">Content of tab 11</a-tab-pane>
    </a-tabs>
  </div>

</template>
<script>
export default {
  data () {
    return {
      mode: 'top',
    }
  },
  methods: {
    callback (val) {
      console.log(val)
    },
  },
}
</script>