arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Tabs): handle color and variant props

Browse Source 
Resolves #116
This commit is contained in:
Benjamin Canac
2024-06-05 14:55:17 +02:00
parent 57b32ca9b6
commit 82ffc1ed57
5 changed files with 263 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
playground/pages/tabs.vue
View File

@@ -1,4 +1,14 @@
<script setup lang="ts">
import theme from '#build/ui/tabs'
const colors = Object.keys(theme.variants.color)
const variants = Object.keys(theme.variants.variant)
const orientations = Object.keys(theme.variants.orientation)
const color = ref(theme.defaultVariants.color)
const variant = ref(theme.defaultVariants.variant)
const orientation = ref('horizontal' as const)
const items = [{
label: 'Tab1',
avatar: {
@@ -18,15 +28,21 @@ const items = [{
</script>
<template>
<div class="flex gap-4">
<UTabs :items="[{ label: 'Monthly' }, { label: 'Yearly' }]" :content="false" />
<div class="flex flex-col items-center gap-12">
<div class="flex items-center gap-2">
<USelect v-model="color" :items="colors" placeholder="Color" />
<USelect v-model="variant" :items="variants" placeholder="Variant" />
<USelect v-model="orientation" :items="orientations" placeholder="Orientation" />
</div>
<UTabs :items="items" class="w-96">
<template #custom="{ item }">
<span class="text-gray-500 dark:text-gray-400">Custom: {{ item.content }}</span>
</template>
</UTabs>
<div class="flex gap-4">
<UTabs :color="color" :variant="variant" :orientation="orientation" :items="[{ label: 'Monthly' }, { label: 'Yearly' }]" :content="false" />
<UTabs :items="items" orientation="vertical" />
<UTabs :color="color" :variant="variant" :orientation="orientation" :items="items" class="w-96">
<template #custom="{ item }">
<span class="text-gray-500 dark:text-gray-400">Custom: {{ item.content }}</span>
</template>
</UTabs>
</div>
</div>
</template>