A touch swipe tab for vue 3.
yarn add vue3-tabs
npm i --save vue3-tabsimport { createApp } from 'vue';
import App from './App.vue'
import Tabs from 'vue3-tabs';
const app = createApp(App);
app.use(Tabs);
app.mount('#app')import { Tabs, Tab, TabPanels, TabPanel } from 'vue3-tabs';
export default {
components: {
Tabs,
Tab,
TabPanels,
TabPanel
},
};<template>
<h3>Basic Example</h3>
<tabs
v-model="selectedTab"
>
<tab
class="tab"
v-for="(tab, i) in tabs"
:key="`t${i}`"
:val="tab"
:label="tab"
:indicator="true"
/>
</tabs>
<tab-panels
v-model="selectedTab"
:animate="true"
>
<tab-panel
v-for="(tab, i) in tabs"
:key="`tp${i}`"
:val="tab"
>
{{ tab }}
</tab-panel>
</tab-panels>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
const tabs = ['A', 'B', 'C'];
export default defineComponent({
name: 'Example',
setup() {
const state = reactive({
selectedTab: tabs[1]
});
return {
tabs,
...toRefs(state)
};
}
});
</script>
<style scoped>
.tab {
padding: 10px 20px;
}
</style>| Name | Type | Required | Default | Notes |
|---|---|---|---|---|
| :model-value | v-model | string | number | null | yes | null | value emit |
| Name | Description |
|---|---|
| @update:modelValue | event emit when tab change |
| Name | Tag | Description |
|---|---|---|
| v-slot:default | <tab /> | <tab /> as children |
| Name | Type | Required | Default | Notes |
|---|---|---|---|---|
| :val | string | number | yes | null | value to indicate active |
| :label | string | no | null | label |
| :indicator | boolean | no | false | show default active indicator |
| Name | Type | Required | Default | Notes |
|---|---|---|---|---|
| :model-value | v-model | string | number | null | yes | null | value emit |
| :animate | boolean | no | false | smooth change effect not working with ios |
| :swipeable | boolean | no | false | swipe to change tab |
| :threshold | number | no | 50 | minimum pixel to swipe to change tab only work when swipeable = true |
| Name | Description |
|---|---|
| @update:modelValue | event emit when tab change |
| @on-animation-end | event emit switch animation end |
| Name | Tag | Description |
|---|---|---|
| v-slot:default | <tab-panel /> | <tab-panel /> as children |
| Name | Type | Required | Default | Notes |
|---|---|---|---|---|
| :val | string | number | yes | null | value to indicate active |
yarn
yarn serve
yarn build