mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-26 18:00:43 +01:00
docs(textarea): update
This commit is contained in:
@@ -15,7 +15,7 @@ Use the `v-model` directive to control the value of the Input.
|
|||||||
external:
|
external:
|
||||||
- modelValue
|
- modelValue
|
||||||
props:
|
props:
|
||||||
modelValue: 'benjamincanac'
|
modelValue: ''
|
||||||
---
|
---
|
||||||
::
|
::
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,127 @@ links:
|
|||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
## Examples
|
Use the `v-model` directive to control the value of the Textarea.
|
||||||
|
|
||||||
|
::component-code
|
||||||
|
---
|
||||||
|
external:
|
||||||
|
- modelValue
|
||||||
|
props:
|
||||||
|
modelValue: ''
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
### Placeholder
|
||||||
|
|
||||||
|
Use the `placeholder` prop to set a placeholder text.
|
||||||
|
|
||||||
|
::component-code
|
||||||
|
---
|
||||||
|
props:
|
||||||
|
placeholder: 'Type something...'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
### Color
|
||||||
|
|
||||||
|
Use the `color` prop to change the ring color when the Textarea is focused.
|
||||||
|
|
||||||
|
::component-code
|
||||||
|
---
|
||||||
|
ignore:
|
||||||
|
- placeholder
|
||||||
|
props:
|
||||||
|
color: gray
|
||||||
|
highlight: true
|
||||||
|
placeholder: 'Type something...'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
::note
|
||||||
|
The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
|
||||||
|
::
|
||||||
|
|
||||||
|
### Variant
|
||||||
|
|
||||||
|
Use the `variant` prop to change the variant of the Textarea.
|
||||||
|
|
||||||
|
::component-code
|
||||||
|
---
|
||||||
|
ignore:
|
||||||
|
- placeholder
|
||||||
|
props:
|
||||||
|
color: gray
|
||||||
|
variant: subtle
|
||||||
|
placeholder: 'Type something...'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
### Size
|
||||||
|
|
||||||
|
Use the `size` prop to change the size of the Textarea.
|
||||||
|
|
||||||
|
::component-code
|
||||||
|
---
|
||||||
|
ignore:
|
||||||
|
- placeholder
|
||||||
|
props:
|
||||||
|
size: xl
|
||||||
|
placeholder: 'Type something...'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
### Disabled
|
||||||
|
|
||||||
|
Use the `disabled` prop to disable the Textarea.
|
||||||
|
|
||||||
|
::component-code
|
||||||
|
---
|
||||||
|
ignore:
|
||||||
|
- placeholder
|
||||||
|
props:
|
||||||
|
disabled: true
|
||||||
|
placeholder: 'Type something...'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
### Rows
|
||||||
|
|
||||||
|
Use the `rows` prop to set the number of rows. Defaults to `3`.
|
||||||
|
|
||||||
|
::component-code
|
||||||
|
---
|
||||||
|
props:
|
||||||
|
rows: 12
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
### Autoresize
|
||||||
|
|
||||||
|
Use the `autoresize` prop to enable autoresizing the height of the Textarea.
|
||||||
|
|
||||||
|
::component-code
|
||||||
|
---
|
||||||
|
external:
|
||||||
|
- modelValue
|
||||||
|
props:
|
||||||
|
modelValue: 'This is a long text that will autoresize the height of the Textarea.'
|
||||||
|
autoresize: true
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
Use the `maxrows` prop to set the maximum number of rows when autoresizing. If set to `0`, the Textarea will grow indefinitely.
|
||||||
|
|
||||||
|
::component-code
|
||||||
|
---
|
||||||
|
external:
|
||||||
|
- modelValue
|
||||||
|
props:
|
||||||
|
modelValue: 'This is a long text that will autoresize the height of the Textarea with a maximum of 4 rows.'
|
||||||
|
maxrows: 4
|
||||||
|
autoresize: true
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
|
||||||
|
|||||||
@@ -133,6 +133,7 @@ export default defineNuxtConfig({
|
|||||||
'ULink',
|
'ULink',
|
||||||
'UProgress',
|
'UProgress',
|
||||||
'UTabs',
|
'UTabs',
|
||||||
|
'UTextarea',
|
||||||
'UTooltip'
|
'UTooltip'
|
||||||
].includes(c.pascalName))
|
].includes(c.pascalName))
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user