feat(components/tabbar): support direction prop

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/581/head
Ryan Wang 2022-05-05 17:49:42 +08:00
parent 1e19cc13b5
commit d08195a3c6
4 changed files with 75 additions and 7 deletions

View File

@ -18,8 +18,7 @@ const isActive = computed(() => {
});
</script>
<template>
<div v-if="isActive">
<div v-if="isActive" class="tabs-item-wrapper">
<slot />
</div>
</template>
<style lang="scss"></style>

View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { PropType } from "vue";
import { computed } from "vue";
import type { Type } from "./interface";
import type { Direction, Type } from "./interface";
const props = defineProps({
activeId: {
@ -14,6 +14,10 @@ const props = defineProps({
type: String as PropType<Type>,
default: "default",
},
direction: {
type: String as PropType<Direction>,
default: "row",
},
idKey: {
type: String,
default: "id",
@ -27,7 +31,7 @@ const props = defineProps({
const emit = defineEmits(["update:activeId", "change"]);
const classes = computed(() => {
return [`tabbar-${props.type}`];
return [`tabbar-${props.type}`, `tabbar-direction-${props.direction}`];
});
const handleChange = (id: number | string) => {
@ -60,6 +64,7 @@ const handleChange = (id: number | string) => {
.tabbar-items {
@apply flex;
@apply items-center;
@apply flex-row;
}
.tabbar-item {
@ -155,5 +160,38 @@ const handleChange = (id: number | string) => {
}
}
}
&.tabbar-direction-row {
.tabbar-items {
@apply flex-row;
}
}
&.tabbar-direction-column {
.tabbar-items {
@apply flex-col;
}
&.tabbar-default {
border-bottom-width: 0;
@apply border-b-0;
border-right-width: 2px;
@apply border-r-gray-100;
.tabbar-items {
margin-bottom: 0;
margin-right: -2px;
}
.tabbar-item {
border-bottom-width: 0;
border-right-width: 2px;
&.tabbar-item-active {
border-right-color: #0e1731;
}
}
}
}
}
</style>

View File

@ -2,7 +2,7 @@
import { computed, provide, useSlots } from "vue";
import type { PropType, ComputedRef } from "vue";
import { VTabbar } from "./index";
import type { Type } from "@/components/base/tabs/interface";
import type { Type, Direction } from "@/components/base/tabs/interface";
const props = defineProps({
activeId: {
@ -12,6 +12,10 @@ const props = defineProps({
type: String as PropType<Type>,
default: "default",
},
direction: {
type: String as PropType<Direction>,
default: "row",
},
idKey: {
type: String,
default: "id",
@ -40,18 +44,23 @@ const tabItems = computed(() => {
});
});
const classes = computed(() => {
return [`tabs-direction-${props.direction}`];
});
const handleChange = (id: string | number) => {
emit("update:activeId", id);
emit("change", id);
};
</script>
<template>
<div class="tabs-wrapper">
<div class="tabs-wrapper" :class="classes">
<div class="tabs-bar-wrapper">
<VTabbar
:activeId="activeId"
:items="tabItems"
:type="type"
:direction="direction"
@change="handleChange"
/>
</div>
@ -60,4 +69,25 @@ const handleChange = (id: string | number) => {
</div>
</div>
</template>
<style lang="scss"></style>
<style lang="scss">
.tabs-wrapper {
@apply flex;
.tabs-items-wrapper {
@apply flex;
}
&.tabs-direction-row {
@apply flex-col;
.tabs-items-wrapper {
@apply mt-2;
}
}
&.tabs-direction-column {
.tabs-items-wrapper {
@apply ml-2;
}
}
}
</style>

View File

@ -1 +1,2 @@
export type Type = "default" | "pills" | "outline";
export type Direction = "row" | "column";