mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 13:33:30 +09:00
first
This commit is contained in:
@@ -0,0 +1,69 @@
|
||||
---
|
||||
state:
|
||||
input: ''
|
||||
---
|
||||
|
||||
### Line Icons
|
||||
|
||||
Vuero `VSelect` can have icons attached to them. They work pretty well with
|
||||
Line Icons. You can add an icon element inside the select.
|
||||
Please refer to the code example for more details about usage.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
|
||||
const input = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField>
|
||||
<VControl class="has-icons-left" icon="lnil lnil-basketball">
|
||||
<VSelect v-model="input">
|
||||
<VOption value="">
|
||||
Select a Hero
|
||||
</VOption>
|
||||
<VOption value="Superman">
|
||||
Superman
|
||||
</VOption>
|
||||
<VOption value="Batman">
|
||||
Batman
|
||||
</VOption>
|
||||
<VOption value="Spiderman">
|
||||
Spiderman
|
||||
</VOption>
|
||||
<VOption value="Deadpool">
|
||||
Deadpool
|
||||
</VOption>
|
||||
<VOption value="Spawn">
|
||||
Spawn
|
||||
</VOption>
|
||||
<VOption value="Galactus">
|
||||
Galactus
|
||||
</VOption>
|
||||
</VSelect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<VField>
|
||||
<VControl class="has-icons-left" icon="lnil lnil-basketball">
|
||||
<VSelect v-model="frontmatter.state.input">
|
||||
<VOption value="">Select a Hero</VOption>
|
||||
<VOption value="Superman">Superman</VOption>
|
||||
<VOption value="Batman">Batman</VOption>
|
||||
<VOption value="Spiderman">Spiderman</VOption>
|
||||
<VOption value="Deadpool">Deadpool</VOption>
|
||||
<VOption value="Spawn">Spawn</VOption>
|
||||
<VOption value="Galactus">Galactus</VOption>
|
||||
</VSelect>
|
||||
</VControl>
|
||||
</VField>
|
||||
|
||||
<!--/example-->
|
||||
Reference in New Issue
Block a user