mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-30 19:57:55 +01:00
docs(input): add more examples
This commit is contained in:
@@ -0,0 +1,33 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
const value = ref('npx nuxi module add ui')
|
||||||
|
const copied = ref(false)
|
||||||
|
|
||||||
|
function copy() {
|
||||||
|
navigator.clipboard.writeText(value.value)
|
||||||
|
copied.value = true
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
copied.value = false
|
||||||
|
}, 2000)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<UInput
|
||||||
|
v-model="value"
|
||||||
|
:ui="{ trailing: 'pr-0.5' }"
|
||||||
|
>
|
||||||
|
<template v-if="value?.length" #trailing>
|
||||||
|
<UTooltip text="Copy to clipboard" :content="{ side: 'right' }">
|
||||||
|
<UButton
|
||||||
|
:color="copied ? 'success' : 'neutral'"
|
||||||
|
variant="link"
|
||||||
|
size="sm"
|
||||||
|
:icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
|
||||||
|
aria-label="Copy to clipboard"
|
||||||
|
@click="copy"
|
||||||
|
/>
|
||||||
|
</UTooltip>
|
||||||
|
</template>
|
||||||
|
</UInput>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
const input = useTemplateRef('input')
|
||||||
|
|
||||||
|
defineShortcuts({
|
||||||
|
'/': () => {
|
||||||
|
input.value?.inputRef?.focus()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<UInput
|
||||||
|
ref="input"
|
||||||
|
icon="i-lucide-search"
|
||||||
|
placeholder="Search..."
|
||||||
|
>
|
||||||
|
<template #trailing>
|
||||||
|
<UKbd value="/" />
|
||||||
|
</template>
|
||||||
|
</UInput>
|
||||||
|
</template>
|
||||||
@@ -214,6 +214,16 @@ name: 'input-clear-button-example'
|
|||||||
---
|
---
|
||||||
::
|
::
|
||||||
|
|
||||||
|
### With copy button
|
||||||
|
|
||||||
|
You can put a [Button](/components/button) inside the `#trailing` slot to copy the value to the clipboard.
|
||||||
|
|
||||||
|
::component-example
|
||||||
|
---
|
||||||
|
name: 'input-copy-button-example'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
### With password toggle
|
### With password toggle
|
||||||
|
|
||||||
You can put a [Button](/components/button) inside the `#trailing` slot to toggle the password visibility.
|
You can put a [Button](/components/button) inside the `#trailing` slot to toggle the password visibility.
|
||||||
@@ -245,6 +255,20 @@ name: 'input-character-limit-example'
|
|||||||
---
|
---
|
||||||
::
|
::
|
||||||
|
|
||||||
|
### With keyboard shortcut
|
||||||
|
|
||||||
|
You can use the [Kbd](/components/kbd) component inside the `#trailing` slot to add a keyboard shortcut to the Input.
|
||||||
|
|
||||||
|
::component-example
|
||||||
|
---
|
||||||
|
name: 'input-kbd-example'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
::note{to="/composables/define-shortcuts"}
|
||||||
|
This example uses the `defineShortcuts` composable to focus the Input when the :kbd{value="/"} key is pressed.
|
||||||
|
::
|
||||||
|
|
||||||
### With floating label
|
### With floating label
|
||||||
|
|
||||||
You can use the `#default` slot to add a floating label to the Input.
|
You can use the `#default` slot to add a floating label to the Input.
|
||||||
|
|||||||
Reference in New Issue
Block a user