The look and feel of the select can be deeply customized. There are four levels of customization:
- Base themes: Choose between iOS, Material and Windows.
- Light or dark: Every theme has a
lightanddarkvariant. Setting thethemeVariantto'auto'will switch based on system settings. - Custom themes: Use the theme builder to customize the colors and make it match your brand.
- Custom CSS: If you need further customization, the sky is the limit with CSS overrides.
You can also see how every example looks by changing the theme from the header.
Demo
Pick a base theme
Then choose between light or dark theme variant
Turn dark theme on
Or build a custom theme based on any base theme
Use the theme builder or Sass to customize themes
<template>
<MbscSelect
theme="ios "
themeVariant="light "
/>
</template>
SFC JSSFC TS
<script setup>
import { MbscSelect, setOptions } from '@mobiscroll/vue'
setOptions({
locale:
})
const myData = [
{
value: 1,
text: 'Books'
},
{
value: 2,
text: 'Movies, Music & Games'
},
{
value: 3,
text: 'Electronics & Computers'
},
{
value: 4,
text: 'Home, Garden & Tools'
},
{
value: 5,
text: 'Health & Beauty'
},
{
value: 6,
text: 'Toys, Kids & Baby'
},
{
value: 7,
text: 'Clothing & Jewelry'
},
{
value: 8,
text: 'Sports & Outdoors'
},
{
value: 9,
text: 'Automotive & Industrial'
}
]
</script>
<template>
<!-- theme: can be 'ios', 'material', 'windows' or 'auto' - in case of 'auto', the theme will automatically be set based on the platform -->
<!-- themeVariant: can be 'light', 'dark' or 'auto' - in case of 'auto' it is set based in the active system theme -->
<MbscSelect :data="myData" display="inline" theme="material" themeVariant="dark" />
</template>
<script setup lang="ts">
import { MbscSelect, setOptions } from '@mobiscroll/vue'
setOptions({
locale:
})
const myData = [
{
value: 1,
text: 'Books'
},
{
value: 2,
text: 'Movies, Music & Games'
},
{
value: 3,
text: 'Electronics & Computers'
},
{
value: 4,
text: 'Home, Garden & Tools'
},
{
value: 5,
text: 'Health & Beauty'
},
{
value: 6,
text: 'Toys, Kids & Baby'
},
{
value: 7,
text: 'Clothing & Jewelry'
},
{
value: 8,
text: 'Sports & Outdoors'
},
{
value: 9,
text: 'Automotive & Industrial'
}
]
</script>
<template>
<!-- theme: can be 'ios', 'material', 'windows' or 'auto' - in case of 'auto', the theme will automatically be set based on the platform -->
<!-- themeVariant: can be 'light', 'dark' or 'auto' - in case of 'auto' it is set based in the active system theme -->
<MbscSelect :data="myData" display="inline" theme="material" themeVariant="dark" />
</template>