Theming capabilities
Forms can be themed and customized. There are four levels of customization:
- Base themes: Choose between
iOS,MaterialandWindows. - 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 Sass and CSS: If you need further customization, the sky is the limit with Sass and CSS overrides.
You can also see how the other demos look by changing the theme in the floating action bar on the right side (not this example, the themes are hardcoded here).
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
theme: 'ios ',
themeVariant: 'light '
SFC JSSFC TS
<script setup>
import {
MbscButton,
MbscCheckbox,
MbscDropdown,
MbscInput,
MbscPage,
MbscRadio,
MbscRadioGroup,
MbscSegmented,
MbscSegmentedGroup,
MbscStepper,
MbscSwitch,
MbscTextarea,
setOptions
} from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscPage>
<div class="mbsc-form-group">
<MbscInput label="Input field" placeholder="Input with label" />
<MbscTextarea label="Textarea" placeholder="Textarea with label" />
<MbscDropdown label="Select">
<option value="Opel">Opel</option>
<option value="Renault">Renault</option>
<option value="Citroen">Citroen</option>
<option value="Lotus">Lotus</option>
</MbscDropdown>
<MbscSwitch label="Switch" :defaultChecked="true" />
<MbscCheckbox v-model="checkbox1" label="Checkbox" :defaultChecked="true" />
<MbscRadioGroup name="rad">
<MbscRadio v-model="radio1" value="1" label="Radio 1" :defaultChecked="true" />
<MbscRadio v-model="radio2" value="2" label="Radio 2" />
</MbscRadioGroup>
<MbscStepper label="Stepper" />
<div class="mbsc-button-group-block">
<MbscButton>Button</MbscButton>
</div>
<MbscSegmentedGroup name="segmented-group">
<MbscSegmented>Segmented 1</MbscSegmented>
<MbscSegmented>Segmented 2</MbscSegmented>
</MbscSegmentedGroup>
</div>
</MbscPage>
</template>
<script setup lang="ts">
import {
MbscButton,
MbscCheckbox,
MbscDropdown,
MbscInput,
MbscPage,
MbscRadio,
MbscRadioGroup,
MbscSegmented,
MbscSegmentedGroup,
MbscStepper,
MbscSwitch,
MbscTextarea,
setOptions
} from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscPage>
<div class="mbsc-form-group">
<MbscInput label="Input field" placeholder="Input with label" />
<MbscTextarea label="Textarea" placeholder="Textarea with label" />
<MbscDropdown label="Select">
<option value="Opel">Opel</option>
<option value="Renault">Renault</option>
<option value="Citroen">Citroen</option>
<option value="Lotus">Lotus</option>
</MbscDropdown>
<MbscSwitch label="Switch" :defaultChecked="true" />
<MbscCheckbox v-model="checkbox1" label="Checkbox" :defaultChecked="true" />
<MbscRadioGroup name="rad">
<MbscRadio v-model="radio1" value="1" label="Radio 1" :defaultChecked="true" />
<MbscRadio v-model="radio2" value="2" label="Radio 2" />
</MbscRadioGroup>
<MbscStepper label="Stepper" />
<div class="mbsc-button-group-block">
<MbscButton>Button</MbscButton>
</div>
<MbscSegmentedGroup name="segmented-group">
<MbscSegmented>Segmented 1</MbscSegmented>
<MbscSegmented>Segmented 2</MbscSegmented>
</MbscSegmentedGroup>
</div>
</MbscPage>
</template>