mirror of
https://github.com/directus/directus.git
synced 2026-01-30 11:18:03 -05:00
62eb1484b6
* Rotate JPG image on upload #4206 * fixes #3949 width/height generated for gif and tif * API hooks for event added for auth.login #4079 * updated doc for api hooks for new auth.login event * Style tweaks * Update docs * Tweak docs some more * Spelling error * Allow non-required flags and pass to hook * SDK - Persistent login refresh fixes #4113 * Fixed #4145 SDK, Token Expired error * Spell check * Docs Spell check * Docs Spell check * Docs Spell check Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
70 lines
4.4 KiB
Markdown
70 lines
4.4 KiB
Markdown
# Input
|
|
|
|
Displays the usual input. Can be used to model strings and numbers.
|
|
|
|
```html
|
|
<v-input v-model="value" />
|
|
```
|
|
|
|
## Attributes & Events
|
|
|
|
The HTML `<input>` element supports a huge amount of attributes and events. In order to support all of these, all props
|
|
that aren't specially handled (see list below) will be passed on to the `<input>` element directly. This allows you to
|
|
change anything you want on the input.
|
|
|
|
## Prefixes / Suffixes
|
|
|
|
You can add any custom (text) prefix/suffix to the value in the input using the `prefix` and `suffix` slots.
|
|
|
|
## Reference
|
|
|
|
#### Props
|
|
|
|
| Prop | Description | Default | Type |
|
|
| ---------------- | -------------------------------------------------------------- | -------- | ------------------ |
|
|
| `value` | Used with `v-model` to mirror the entered value | `null` | `[String, Number]` |
|
|
| `autofocus` | Autofocusses the input on render | `false` | `Boolean` |
|
|
| `disabled` | Set the disabled state for the input | `false` | `Boolean` |
|
|
| `full-width` | Render the input with 100% width | `true` | `Boolean` |
|
|
| `prefix` | Prefix the users value with a value | `null` | `String` |
|
|
| `suffix` | Show a value at the end of the input | `null` | `String` |
|
|
| `slug` | Force the value to be URL safe | `false` | `Boolean` |
|
|
| `slug-separator` | What character to use as separator in slugs | `'-'` | `String` |
|
|
| `active` | Force the focus state | `false` | `Boolean` |
|
|
| `trim` | Trim the start and end whitespace | `false` | `Boolean` |
|
|
| `nullable` | When active, sets an empty entry to null | `true` | `Boolean` |
|
|
| `type` | Can be `text` or `number` | `'text'` | `String` |
|
|
| `max` | The maximum number that can be entered | `null` | `Number` |
|
|
| `min` | The minimum number that can be entered | `null` | `Number` |
|
|
| `step` | In which unit steps should be counted up or down | `1` | `Number` |
|
|
| `db-safe` | Make the value save to be used with the DB | `false` | `Boolean` |
|
|
| `hide-arrows` | Hide the arrows that are used to increase or decrease a number | `false` | `Boolean` |
|
|
|
|
Note: all other attached attributes are bound to the input HTMLElement in the component. This allows you to attach any
|
|
of the standard HTML attributes like `min`, `length`, or `pattern`.
|
|
|
|
#### Slots
|
|
|
|
| Slot | Description | Data |
|
|
| --------------- | ------------------------------------------------- | ------------------------------------------------- |
|
|
| `prepend-outer` | Before the input | `{ disabled: boolean, value: string or number; }` |
|
|
| `prepend` | In the input, before the value, before the prefix | `{ disabled: boolean, value: string or number; }` |
|
|
| `append` | In the input, after the value, after the suffix | `{ disabled: boolean, value: string or number; }` |
|
|
| `append-outer` | After the input | `{ disabled: boolean, value: string or number; }` |
|
|
| `input` | | |
|
|
|
|
#### CSS Variables
|
|
|
|
| Variable | Default |
|
|
| ----------------------------- | --------------------------- |
|
|
| `--v-input-font-family` | `var(--family-sans-serif)` |
|
|
| `--v-input-placeholder-color` | `var(--foreground-subdued)` |
|
|
|
|
#### Events
|
|
|
|
| Event | Description | Value |
|
|
| --------- | --------------------------------- | ------------------ |
|
|
| `click` | Fires when the input gets clicked | |
|
|
| `keydown` | When a key has been pressed | |
|
|
| `input` | Updated the modeled value | `String or Number` |
|