mirror of https://github.com/halo-dev/halo-admin
feat(components/tabbar): support direction prop
Signed-off-by: Ryan Wang <i@ryanc.cc>pull/581/head
parent
1e19cc13b5
commit
d08195a3c6
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1 +1,2 @@
|
|||
export type Type = "default" | "pills" | "outline";
|
||||
export type Direction = "row" | "column";
|
||||
|
|
Loading…
Reference in New Issue