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

docs(input): add examples

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-18 15:19:10 +02:00
parent d407c42be7
commit 9359603a0a
9 changed files with 292 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/app/components/content/examples/input/InputFloatingLabelExample.vue Normal file
View File

@@ -0,0 +1,11 @@
<script setup lang="ts">
const value = ref('')
</script>
<template>
<UInput v-model="value" placeholder="" :ui="{ base: 'peer' }">
<label class="pointer-events-none absolute left-0 -top-2.5 text-[var(--ui-text-highlighted)] text-xs font-medium px-1.5 transition-all peer-focus:-top-2.5 peer-focus:text-[var(--ui-text-highlighted)] peer-focus:text-xs peer-focus:font-medium peer-placeholder-shown:text-sm peer-placeholder-shown:text-[var(--ui-text-dimmed)] peer-placeholder-shown:top-1.5 peer-placeholder-shown:font-normal">
<span class="inline-flex bg-[var(--ui-bg)] px-1">Email address</span>
</label>
</UInput>
</template>