Disabled values
Enforcing validation is essential to a great UX. It supports the following:
Having invalids set up correctly not just enhances the UX, but improves performance.
Demo
<script setup>
const myData = [
{ text: 'Atlanta', value: 'atl' },
{ text: 'Berlin', value: 'ber' },
{ text: 'Boston', value: 'bos' },
{ text: 'Chicago', value: 'chi', disabled: true },
{ text: 'London', value: 'lon', disabled: true },
{ text: 'Los Angeles', value: 'la' },
{ text: 'New York', value: 'ny' },
{ text: 'Paris', value: 'par' },
{ text: 'San Francisco', value: 'sf' }
]
</script>
<template>
<MbscSelect :data="myData" : touchUi="SFC JSSFC TS
<script setup>
import { MbscSelect, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myData = [
{
text: 'Atlanta',
value: 'atl'
},
{
text: 'Berlin',
value: 'ber'
},
{
text: 'Boston',
value: 'bos'
},
{
text: 'Chicago',
value: 'chi',
disabled: true
},
{
text: 'London',
value: 'lon',
disabled: true
},
{
text: 'Los Angeles',
value: 'la'
},
{
text: 'New York',
value: 'ny'
},
{
text: 'Paris',
value: 'par'
},
{
text: 'San Francisco',
value: 'sf'
}
]
</script>
<template>
<MbscSelect :data="myData" display="inline" />
</template>
<script setup lang="ts">
import { MbscSelect, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myData = [
{
text: 'Atlanta',
value: 'atl'
},
{
text: 'Berlin',
value: 'ber'
},
{
text: 'Boston',
value: 'bos'
},
{
text: 'Chicago',
value: 'chi',
disabled: true
},
{
text: 'London',
value: 'lon',
disabled: true
},
{
text: 'Los Angeles',
value: 'la'
},
{
text: 'New York',
value: 'ny'
},
{
text: 'Paris',
value: 'par'
},
{
text: 'San Francisco',
value: 'sf'
}
]
</script>
<template>
<MbscSelect :data="myData" display="inline" />
</template>