mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-28 10:50:40 +01:00
docs: improve forms cards
This commit is contained in:
@@ -1,12 +1,12 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
const open = ref(false)
|
const isOpen = ref(false)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<UButton label="Open" @click="open = true" />
|
<UButton label="Open" @click="isOpen = true" />
|
||||||
|
|
||||||
<USlideover v-model="open">
|
<USlideover v-model="isOpen">
|
||||||
<div class="p-4 h-full">
|
<div class="p-4 h-full">
|
||||||
<Placeholder class="w-full h-full" />
|
<Placeholder class="w-full h-full" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -26,6 +26,8 @@ props:
|
|||||||
|
|
||||||
### Placeholder
|
### Placeholder
|
||||||
|
|
||||||
|
Use the `placeholder` prop to set a placeholder text.
|
||||||
|
|
||||||
::component-card
|
::component-card
|
||||||
---
|
---
|
||||||
baseProps:
|
baseProps:
|
||||||
@@ -59,15 +61,14 @@ Use the `leading` and `trailing` props to set the icon position or the `leadingI
|
|||||||
---
|
---
|
||||||
baseProps:
|
baseProps:
|
||||||
name: 'input'
|
name: 'input'
|
||||||
|
placeholder: 'Search...'
|
||||||
props:
|
props:
|
||||||
icon: 'i-heroicons-magnifying-glass-20-solid'
|
icon: 'i-heroicons-magnifying-glass-20-solid'
|
||||||
appearance: 'white'
|
appearance: 'white'
|
||||||
size: 'sm'
|
size: 'sm'
|
||||||
trailing: false
|
trailing: false
|
||||||
placeholder: 'Search...'
|
|
||||||
excludedProps:
|
excludedProps:
|
||||||
- icon
|
- icon
|
||||||
- placeholder
|
|
||||||
---
|
---
|
||||||
::
|
::
|
||||||
|
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ baseProps:
|
|||||||
|
|
||||||
### Size
|
### Size
|
||||||
|
|
||||||
Use the `size` prop to change the size of the Input.
|
Use the `size` prop to change the size of the Textarea.
|
||||||
|
|
||||||
::component-card
|
::component-card
|
||||||
---
|
---
|
||||||
@@ -26,6 +26,8 @@ props:
|
|||||||
|
|
||||||
### Placeholder
|
### Placeholder
|
||||||
|
|
||||||
|
Use the `placeholder` prop to set a placeholder text.
|
||||||
|
|
||||||
::component-card
|
::component-card
|
||||||
---
|
---
|
||||||
baseProps:
|
baseProps:
|
||||||
@@ -37,7 +39,7 @@ props:
|
|||||||
|
|
||||||
### Appearance
|
### Appearance
|
||||||
|
|
||||||
Use the `appearance` prop to change the style of the Input.
|
Use the `appearance` prop to change the style of the Textarea.
|
||||||
|
|
||||||
::component-card
|
::component-card
|
||||||
---
|
---
|
||||||
@@ -51,18 +53,16 @@ props:
|
|||||||
|
|
||||||
### Disabled
|
### Disabled
|
||||||
|
|
||||||
Use the `disabled` prop to disable the Input.
|
Use the `disabled` prop to disable the Textarea.
|
||||||
|
|
||||||
::component-card
|
::component-card
|
||||||
---
|
---
|
||||||
baseProps:
|
baseProps:
|
||||||
name: 'input'
|
name: 'input'
|
||||||
props:
|
|
||||||
placeholder: 'Search...'
|
placeholder: 'Search...'
|
||||||
|
props:
|
||||||
appearance: 'white'
|
appearance: 'white'
|
||||||
disabled: true
|
disabled: true
|
||||||
excludedProps:
|
|
||||||
- placeholder
|
|
||||||
---
|
---
|
||||||
::
|
::
|
||||||
|
|
||||||
|
|||||||
@@ -38,6 +38,8 @@ props:
|
|||||||
|
|
||||||
### Placeholder
|
### Placeholder
|
||||||
|
|
||||||
|
Use the `placeholder` prop to set a placeholder text.
|
||||||
|
|
||||||
::component-card
|
::component-card
|
||||||
---
|
---
|
||||||
baseProps:
|
baseProps:
|
||||||
@@ -83,14 +85,13 @@ baseProps:
|
|||||||
- 'United States'
|
- 'United States'
|
||||||
- 'Canada'
|
- 'Canada'
|
||||||
- 'Mexico'
|
- 'Mexico'
|
||||||
|
placeholder: 'Search...'
|
||||||
props:
|
props:
|
||||||
icon: 'i-heroicons-magnifying-glass-20-solid'
|
icon: 'i-heroicons-magnifying-glass-20-solid'
|
||||||
appearance: 'white'
|
appearance: 'white'
|
||||||
size: 'sm'
|
size: 'sm'
|
||||||
placeholder: 'Search...'
|
|
||||||
excludedProps:
|
excludedProps:
|
||||||
- icon
|
- icon
|
||||||
- placeholder
|
|
||||||
---
|
---
|
||||||
::
|
::
|
||||||
|
|
||||||
@@ -106,12 +107,10 @@ baseProps:
|
|||||||
- 'United States'
|
- 'United States'
|
||||||
- 'Canada'
|
- 'Canada'
|
||||||
- 'Mexico'
|
- 'Mexico'
|
||||||
props:
|
|
||||||
placeholder: 'Search...'
|
placeholder: 'Search...'
|
||||||
|
props:
|
||||||
appearance: 'white'
|
appearance: 'white'
|
||||||
disabled: true
|
disabled: true
|
||||||
excludedProps:
|
|
||||||
- placeholder
|
|
||||||
---
|
---
|
||||||
::
|
::
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user