Files
ui/playground/pages/input.vue
2024-03-20 14:04:26 +01:00

42 lines
1.5 KiB
Vue

<script setup lang="ts">
import input from '#build/ui/input'
</script>
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 -ml-[258px]">
<UInput placeholder="Search..." autofocus />
<UInput placeholder="Search..." color="gray" />
<UInput placeholder="Search..." color="primary" />
<UInput placeholder="Search..." disabled />
<UInput placeholder="Search..." type="number" />
<UInput icon="i-heroicons-folder" placeholder="Search..." type="file" />
<UInput icon="i-heroicons-calendar" placeholder="Search..." type="date" />
<UInput icon="i-heroicons-lock-closed" placeholder="Search..." type="password" value="password" />
<UInput loading placeholder="Search..." />
<UInput loading leading-icon="i-heroicons-magnifying-glass" placeholder="Search..." />
<UInput loading trailing placeholder="Search..." />
<UInput loading trailing-icon="i-heroicons-magnifying-glass" placeholder="Search..." />
</div>
<div class="flex items-center gap-4">
<UInput
v-for="size in Object.keys(input.variants.size)"
:key="size"
icon="i-heroicons-magnifying-glass"
placeholder="Search..."
:size="(size as any)"
/>
</div>
<div class="flex items-center gap-4">
<UInput
v-for="size in Object.keys(input.variants.size)"
:key="size"
icon="i-heroicons-magnifying-glass"
trailing
placeholder="Search..."
:size="(size as any)"
/>
</div>
</div>
</template>