docs: improve forms cards

This commit is contained in:
Benjamin Canac
2023-05-14 15:04:56 +02:00
parent 37f1a1b5ad
commit c47f5e6a68
4 changed files with 16 additions and 16 deletions

View File

@@ -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>

View File

@@ -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
--- ---
:: ::

View File

@@ -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
--- ---
:: ::

View File

@@ -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
--- ---
:: ::