arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-23 16:30:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(ComponentExample): automatically read code (#789)

Browse Source
This commit is contained in:
KeJun
2023-10-09 16:44:47 +08:00
committed by GitHub
parent cf93d968af
commit fe348b48c6
35 changed files with 387 additions and 2925 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
docs/content/3.forms/9.form-group.md
View File

@@ -112,23 +112,7 @@ Use the `error` prop to display an error message below the form element.
When used together with the `help` prop, the `error` prop will take precedence.
::component-example
#default
:form-group-error-example
#code
```vue
<template>
<UFormGroup v-slot="{ error }" label="Email" :error="!email && 'You must enter an email'" help="This is a nice email!">
<UInput v-model="email" type="email" placeholder="Enter email" :trailing-icon="error && 'i-heroicons-exclamation-triangle-20-solid'" />
</UFormGroup>
</template>
<script setup lang="ts">
const email = ref('')
</script>
```
::
:component-example{component="form-group-error-example"}
::callout{icon="i-heroicons-light-bulb"}
The `error` prop will automatically set the `color` prop of the form element to `red`.
@@ -274,30 +258,7 @@ props:
Use the `#error` slot to set the custom content for error.
::component-example
#default
:form-group-error-slot-example{class="w-60"}
#code
```vue
<template>
<UFormGroup label="Email" :error="!email && 'You must enter an email'" help="This is a nice email!">
<template #default="{ error }">
<UInput v-model="email" type="email" placeholder="Enter email" :trailing-icon="error ? 'i-heroicons-exclamation-triangle-20-solid' : undefined" />
</template>
<template #error="{ error }">
<UAlert v-if="error" icon="i-heroicons-exclamation-triangle-20-solid" :title="error" color="red" />
<UAlert v-else icon="i-heroicons-check-circle-20-solid" title="Your email is valid" color="green" />
</template>
</UFormGroup>
</template>
<script setup lang="ts">
const email = ref('')
</script>
```
::
:component-example{component="form-group-error-slot-example" :componentProps='{"class": "w-60"}'}
## Props