Switch
The Switch component is a two value control. It is like a physical toggle switch, it has an on and an off state that is represented as a boolean value.
Usage
Use the label
option to provide a label to the switch.
The switch can be positioned before or after the label using the position
option.
<script setup>
import { MbscSwitch } from '@mobiscroll/vue';
</script>
<template>
<MbscSwitch label="Switch" />
<MbscSwitch label="Switch at the start" position="start" />
<MbscSwitch label="Switch at the end" position="end" />
</template>
Value binding
Use the v-model directive to create a two-way binding.
<script setup>
import { ref } from 'vue';
import { MbscSwitch } from '@mobiscroll/vue';
const checked = ref(false);
</script>
<template>
<MbscSwitch v-model="checked" label="Switch" />
On: {{ checked }}
</template>
Options
Explore the following API options that help you easily configure the Switch component.
color
"light" | "dark" | "primary" | "secondary" | "success" | "danger" | "warning" | "info"
Specifies the predefined color of the switch.
Default value: undefined
cssClass
string
Specifies a custom CSS class for the component.
Default value: undefined
description
string
Specifies the description text of the switch.
Default value: undefined
disabled
boolean
Specifies the disabled state of the switch.
Default value: false
label
string
Specifies the label of the switch.
Default value: undefined
position
"start" | "end"
Sets the position of the switch depending on the rtl option.
When in left-to-right mode, 'start'
will render the switch to the left, and 'end'
will render it to the right.
In right-to-left mode, 'start'
will render the switch to the right, and 'end'
will render it to the left.
Default value: 'end'
theme
string
Specifies the visual appearance of the component.
If it is 'auto'
or undefined
, the theme will automatically be chosen based on the platform.
If custom themes are also present, they will take precedence over the built in themes, e.g. if there's an iOS based custom theme,
it will be chosen on the iOS platform instead of the default iOS theme.
Supplied themes:
'ios'
- iOS theme'material'
- Material theme'windows'
- Windows theme
It's possible to modify theme colors or create custom themes.
Make sure that the theme you set is included in the downloaded package.
Default value: undefined
themeVariant
"light" | "dark" | "auto"
Controls which variant of the theme will be used (light or dark).
Possible values:
'light'
- Use the light variant of the theme.'dark'
- Use the dark variant of the theme.'auto'
orundefined
- Detect the preferred system theme on devices where this is supported.
To use the option with custom themes, make sure to create two custom themes, where the dark version has the same name as the light one,
suffixed with '-dark'
, e.g.: 'my-theme'
and 'my-theme-dark'
.
Default value: undefined
Events
The Switch component ships with different event hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.
@destroy
(args: any, inst: any) => void
Triggered when the component is destroyed.
Parameters:
args - The event argument object.
inst - The component instance.
@init
(args: any, inst: any) => void
Triggered when the component is initialized.
Parameters:
args - The event argument object.
inst - The component instance.
Localization
The Switch component is fully localized. This covers date and time format, button copy, rtl and more.
locale
Sets the language of the component. The locale object contains all the translations for a given language. The built in language modules are listed below. If a language is not listed, it can be provided as a custom language module.
Supported values:
- Arabic:
localeAr
,'ar'
- Bulgarian:
localeBg
,'bg'
- Catalan:
localeCa
,'ca'
- Czech:
localeCs
,'cs'
- Chinese:
localeZh
,'zh'
- Croatian:
localeHr
,'hr'
- Danish:
localeDa
,'da'
- Dutch:
localeNl
,'nl'
- English:
localeEn
orundefined
,'en'
- English (UK):
localeEnGB
,'en-GB'
- Farsi:
localeFa
,'fa'
- German:
localeDe
,'de'
- Greek:
localeEl
,'el'
- Spanish:
localeEs
,'es'
- Finnish:
localeFi
,'fi'
- French:
localeFr
,'fr'
- Hebrew:
localeHe
,'he'
- Hindi:
localeHi
,'hi'
- Hungarian:
localeHu
,'hu'
- Italian:
localeIt
,'it'
- Japanese:
localeJa
,'ja'
- Korean:
localeKo
,'ko'
- Lithuanian:
localeLt
,'lt'
- Norwegian:
localeNo
,'no'
- Polish:
localePl
,'pl'
- Portuguese (Brazilian):
localePtBR
,'pt-BR'
- Portuguese (European):
localePtPT
,'pt-PT'
- Romanian:
localeRo
,'ro'
- Russian:
localeRu
,'ru'
- Russian (UA):
localeRuUA
,'ru-UA'
- Slovak:
localeSk
,'sk'
- Serbian:
localeSr
,'sr'
- Swedish:
localeSv
,'sv'
- Thai:
localeTh
,'th'
- Turkish:
localeTr
,'tr'
- Ukrainian:
localeUa
,'ua'
Default value: undefined
rtl
boolean
Enables right-to-left display.
Default value: false
Types
MbscLocale
Interface
Properties:
allDayText
: stringamText
: stringcalendarSystem
: MbscCalendarSystemcancelText
: stringclearText
: stringcloseText
: stringdateFormat
: stringdateFormatFull
: stringdateFormatLong
: stringdateText
: stringdateWheelFormat
: stringdayNames
: Array<string>dayNamesMin
: Array<string>dayNamesShort
: Array<string>daySuffix
: stringdayText
: stringeventText
: stringeventsText
: stringfilterEmptyText
: stringfilterPlaceholderText
: stringfirstDay
: numberfromText
: stringhourText
: stringminuteText
: stringmonthNames
: Array<string>monthNamesShort
: Array<string>monthSuffix
: stringmonthText
: stringmoreEventsPluralText
: stringmoreEventsText
: stringnextMonthText
: stringnextYearText
: stringnoEventsText
: stringnowText
: stringpmText
: stringprevMonthText
: stringprevYearText
: stringrangeEndHelp
: stringrangeEndLabel
: stringrangeStartHelp
: stringrangeStartLabel
: stringrtl
: booleansecondText
: stringselectedPluralText
: stringselectedText
: stringsetText
: stringtimeFormat
: stringtimeText
: stringtimeWheels
: stringtoText
: stringtodayText
: stringweekText
: stringyearSuffix
: stringyearText
: string