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

feat(Switch): add label and description props (#60)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Romain Hamel
2024-04-15 11:56:30 +02:00
committed by GitHub
parent 1535313596
commit 2fe91f3847
6 changed files with 112 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
playground/pages/input.vue
View File

@@ -6,7 +6,7 @@ const sizes = Object.keys(theme.variants.size)
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 ml-[-120px]">
<div class="flex flex-col gap-4 ml-[-169px]">
<UInput placeholder="Search..." autofocus />
<UInput placeholder="Search..." color="gray" />
<UInput placeholder="Search..." color="primary" />
@@ -20,7 +20,7 @@ const sizes = Object.keys(theme.variants.size)
<UInput loading trailing placeholder="Search..." />
<UInput loading trailing-icon="i-heroicons-magnifying-glass" placeholder="Search..." />
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-4 ml-[-76px]">
<UInput
v-for="size in sizes"
:key="size"

35
playground/pages/switch.vue
View File

@@ -2,40 +2,49 @@
import theme from '#build/ui/switch'
const sizes = Object.keys(theme.variants.size)
const checked = ref(false)
</script>
<template>
<div class="flex flex-col gap-2">
<div>
<USwitch v-model:checked="checked" />
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 ml-[-348px]">
<USwitch label="Normal" />
<USwitch label="Checked" :checked="true" />
<USwitch label="Default checked" default-checked />
<USwitch label="Required" required />
<USwitch label="Disabled" disabled />
</div>
<div>
<USwitch v-model:checked="checked" disabled />
<div class="flex items-center gap-4 ml-[-150px]">
<USwitch v-for="size in sizes" :key="size" :size="(size as any)" label="Switch me" />
</div>
<div class="flex items-center gap-2 ml-[-64px]">
<USwitch v-for="size in sizes" :key="size" v-model:checked="checked" :size="(size as any)" />
</div>
<div class="flex items-center gap-2 ml-[-64px]">
<div class="flex items-center gap-4 ml-[-150px]">
<USwitch
v-for="size in sizes"
:key="size"
v-model:checked="checked"
:size="(size as any)"
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-2 ml-[-64px]">
<div class="flex items-center gap-4 ml-[-150px]">
<USwitch
v-for="size in sizes"
:key="size"
v-model:checked="checked"
:size="(size as any)"
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 as any)"
label="Switch me"
description="This is a description"
/>
</div>
</div>
</template>

11
playground/pages/textarea.vue
View File

@@ -6,14 +6,12 @@ const sizes = Object.keys(theme.variants.size)
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex gap-4">
<UTextarea />
</div>
<div class="flex gap-4">
<UTextarea placeholder="Search..." autofocus />
<div class="flex flex-col gap-4">
<UTextarea placeholder="Search..." />
<UTextarea placeholder="Search..." color="gray" />
<UTextarea placeholder="Search..." color="primary" />
<UTextarea placeholder="Search..." disabled />
<UTextarea placeholder="You can't see me" variant="none" />
</div>
<div class="flex items-center gap-4">
<UTextarea
@@ -29,8 +27,5 @@ const sizes = Object.keys(theme.variants.size)
<UTextarea autoresize />
<UTextarea autoresize :maxrows="5" :rows="1" />
</div>
<div class="flex gap-4">
<UTextarea variant="none" placeholder="You can't see me" />
</div>
</div>
</template>