kopia lustrzana https://dev.funkwhale.audio/funkwhale/funkwhale
86 wiersze
2.2 KiB
Markdown
86 wiersze
2.2 KiB
Markdown
<script setup>
|
|
import Input from "~/components/ui/Input.vue"
|
|
import Button from "~/components/ui/Button.vue"
|
|
import Layout from "~/components/ui/Layout.vue"
|
|
import Spacer from "~/components/ui/layout/Spacer.vue"
|
|
</script>
|
|
|
|
# Input
|
|
|
|
Inputs are areas in which users can enter information. In Funkwhale, these mostly take the form of search fields.
|
|
|
|
| Prop | Data type | Required? | Description |
|
|
| --------------- | --------- | --------- | --------------------------------------------------------------------------- |
|
|
| `placeholder` | String | No | The placeholder text that appears when the input is empty. |
|
|
| `icon` | String | No | The [Bootstrap icon](https://icons.getbootstrap.com/) to show on the input. |
|
|
| `v-model:value` | String | Yes | The text entered in the input. |
|
|
|
|
## Input model
|
|
|
|
You can link a user's input to form data by referencing the data in a `v-model` directive.
|
|
|
|
```vue-html{2}
|
|
<Input v-model="value" placeholder="Search" />
|
|
```
|
|
|
|
<Input placeholder="Search" />
|
|
|
|
## Input icons
|
|
|
|
Add a [Bootstrap icon](https://icons.getbootstrap.com/) to an input to make its purpose more visually clear.
|
|
|
|
```vue-html{3}
|
|
<Input v-model="value" icon="bi-search" placeholder="Search" />
|
|
```
|
|
|
|
<Input icon="bi-search" placeholder="Search" />
|
|
|
|
## Input-right slot
|
|
|
|
You can add a template on the right-hand side of the input to guide the user's input.
|
|
|
|
```vue-html{2-4}
|
|
<Input v-model="value" placeholder="Search">
|
|
<template #input-right>
|
|
suffix
|
|
</template>
|
|
</Input>
|
|
```
|
|
|
|
<Input placeholder="Search">
|
|
<template #input-right>
|
|
suffix
|
|
</template>
|
|
</Input>
|
|
|
|
## Presets
|
|
|
|
### Search
|
|
|
|
<Input search />
|
|
|
|
### Password
|
|
|
|
<Layout flex no-gap style="align-items:flex-end">
|
|
<Spacer v
|
|
:size="80"
|
|
style="outline:1px solid red; align-self: baseline;"
|
|
/>
|
|
<Input>
|
|
<template #label>
|
|
User name
|
|
</template>
|
|
</Input>
|
|
</Layout>
|
|
<Layout flex no-gap style="align-items:flex-end">
|
|
<Spacer v
|
|
:size="80"
|
|
style="outline:1px solid red; align-self: baseline;"
|
|
/>
|
|
<Input password>
|
|
<template #label>
|
|
Password
|
|
</template>
|
|
</Input>
|
|
</Layout>
|