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

playground: move pages under /components to match docs

Browse Source
This commit is contained in:
Benjamin Canac
2024-07-09 17:08:16 +02:00
parent eeec9676cd
commit 9d0db51ccc
41 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
playground/app/pages/components/switch.vue Normal file
View File

@@ -0,0 +1,64 @@
<script setup lang="ts">
import theme from '#build/ui/switch'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
const checked = ref(true)
</script>
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 ml-[-114px]">
<USwitch v-model="checked" label="Primary" />
<USwitch color="gray" label="Gray" :default-value="true" />
<USwitch color="error" label="Error" :default-value="true" />
<USwitch label="Default value" :default-value="true" />
<USwitch label="Required" required />
<USwitch label="Disabled" disabled />
</div>
<div class="flex items-center gap-4 ml-[-82px]">
<USwitch v-for="size in sizes" :key="size" :size="size" label="Switch me" />
</div>
<div class="flex items-center gap-4 ml-[-82px]">
<USwitch
v-for="size in sizes"
:key="size"
:size="size"
label="Switch me"
unchecked-icon="i-heroicons-x-mark-20-solid"
checked-icon="i-heroicons-check-20-solid"
/>
</div>
<div class="flex items-center gap-4 ml-[-82px]">
<USwitch
v-for="size in sizes"
:key="size"
:size="size"
label="Switch me"
unchecked-icon="i-heroicons-x-mark-20-solid"
checked-icon="i-heroicons-check-20-solid"
loading
/>
</div>
<div class="flex items-center gap-4">
<USwitch
v-for="size in sizes"
:key="size"
:size="size"
label="Switch me"
description="This is a description"
/>
</div>
<div class="flex items-center gap-4">
<USwitch
v-for="size in sizes"
:key="size"
:size="size"
label="Switch me"
description="This is a description"
unchecked-icon="i-heroicons-x-mark-20-solid"
checked-icon="i-heroicons-check-20-solid"
/>
</div>
</div>
</template>