svcm/oa
1
0
Fork 0
mirror of https://git.hmsn.ink/kospo/svcm/oa.git synced 2026-03-20 08:03:34 +09:00
Code Issues Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
bangae1
2025-05-24 01:49:48 +09:00
commit 62abbcf4eb
2376 changed files with 325522 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
documentation/elements/forms/inputs/input-dataset-documentation.md Normal file
View File

@@ -0,0 +1,180 @@
---
state:
color: '#8b5cf6'
cake: ''
date: ''
---
### Autocomplete using native datalist
You can use native [`datalist`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist)
let your browser handle the autocomplete for you. Just add a `list` attribute
to your input and add the `datalist` element with the `id` that matches the `list` attribute.
This is a great way to provide a list of options to your users.
<!--code-->
```vue
<script setup lang="ts">
const color = ref('#8b5cf6')
const cake = ref('')
const date = ref('')
</script>
<template>
<div class="is-flex is-flex-wrap-wrap" :style="{ gap: '1rem' }">
<VField>
<VControl :style="{ width: '70px' }">
<VInput
v-model="color"
list="colors-list"
type="color"
placeholder="Pick a color"
/>
<datalist id="colors-list">
<option value="#84cc16" />
<option value="#22c55e" />
<option value="#0ea5e9" />
<option value="#6366f1" />
<option value="#8b5cf6" />
<option value="#d946ef" />
<option value="#f43f5e" />
<option value="#facc15" />
<option value="#fb923c" />
<option value="#9ca3af" />
</datalist>
</VControl>
</VField>
<VField>
<VControl class="is-flex-grow-1">
<VInput
v-model="cake"
list="cake-list"
type="text"
placeholder="Choose a recipe"
/>
<datalist id="cake-list">
<option value="Chocolate cake" />
<option value="Vanilla cake" />
<option value="Red velvet cake" />
<option value="Carrot cake" />
<option value="Lemon cake" />
<option value="Strawberry cake" />
<option value="Coconut cake" />
<option value="Black forest cake" />
<option value="Pineapple upside-down cake" />
<option value="Marble cake" />
<option value="Funfetti cake" />
<option value="Coffee cake" />
<option value="Tiramisu cake" />
<option value="Banana cake" />
<option value="Raspberry cake" />
<option value="Oreo cake" />
<option value="German chocolate cake" />
<option value="Pumpkin cake" />
<option value="Blueberry cake" />
<option value="Almond cake" />
</datalist>
</VControl>
</VField>
<VField>
<VControl class="is-flex-grow-1">
<VInput
v-model="date"
list="times-list"
type="time"
placeholder="Pick an hour"
/>
<datalist id="times-list">
<option value="12:00" />
<option value="13:00" />
<option value="14:00" />
</datalist>
</VControl>
</VField>
</div>
</template>
```
<!--/code-->
<!--example-->
<div
class="is-flex is-flex-wrap-wrap"
:style="{ gap: '1rem' }"
>
<VField>
<VControl :style="{ width: '70px' }">
<VInput
v-model="frontmatter.state.color"
list="colors-list"
type="color"
placeholder="Pick a color"
/>
<datalist id="colors-list">
<option value="#84cc16"></option>
<option value="#22c55e"></option>
<option value="#0ea5e9"></option>
<option value="#6366f1"></option>
<option value="#8b5cf6"></option>
<option value="#d946ef"></option>
<option value="#f43f5e"></option>
<option value="#facc15"></option>
<option value="#fb923c"></option>
<option value="#9ca3af"></option>
</datalist>
</VControl>
</VField>
<VField>
<VControl class="is-flex-grow-1">
<VInput
v-model="frontmatter.state.cake"
list="cake-list"
type="text"
placeholder="Choose a recipe"
/>
<datalist id="cake-list">
<option value="Chocolate cake"></option>
<option value="Vanilla cake"></option>
<option value="Red velvet cake"></option>
<option value="Carrot cake"></option>
<option value="Lemon cake"></option>
<option value="Strawberry cake"></option>
<option value="Coconut cake"></option>
<option value="Black forest cake"></option>
<option value="Pineapple upside-down cake"></option>
<option value="Marble cake"></option>
<option value="Funfetti cake"></option>
<option value="Coffee cake"></option>
<option value="Tiramisu cake"></option>
<option value="Banana cake"></option>
<option value="Raspberry cake"></option>
<option value="Oreo cake"></option>
<option value="German chocolate cake"></option>
<option value="Pumpkin cake"></option>
<option value="Blueberry cake"></option>
<option value="Almond cake"></option>
</datalist>
</VControl>
</VField>
<VField>
<VControl class="is-flex-grow-1">
<VInput
v-model="frontmatter.state.date"
list="times-list"
type="time"
placeholder="Pick an hour"
/>
<datalist id="times-list">
<option value="12:00"></option>
<option value="13:00"></option>
<option value="14:00"></option>
</datalist>
</VControl>
</VField>
</div>
<!--/example-->