Switch
Switch between two opposing states
<template>
<section>
<div class="field">
<b-switch>Default</b-switch>
</div>
<div class="field">
<b-switch v-model="isSwitched">
{{ isSwitched }}
</b-switch>
</div>
<div class="field">
<b-switch v-model="isSwitchedCustom"
true-value="Yes"
false-value="No">
{{ isSwitchedCustom }}
</b-switch>
</div>
<div class="field">
<b-switch disabled>Disabled</b-switch>
</div>
</section>
</template>
<script>
export default {
data() {
return {
isSwitched: false,
isSwitchedCustom: 'Yes'
}
}
}
</script>
# Types
<template>
<section>
<div class="field">
<b-switch :value="true">
Default
</b-switch>
</div>
<div class="field">
<b-switch :value="true"
type="is-info">
Info
</b-switch>
</div>
<div class="field">
<b-switch :value="true"
type="is-success">
Success
</b-switch>
</div>
<div class="field">
<b-switch :value="true"
type="is-danger">
Danger
</b-switch>
</div>
<div class="field">
<b-switch :value="true"
type="is-warning">
Warning
</b-switch>
</div>
</section>
</template>
# Sizes
<template>
<section>
<div class="field">
<b-switch size="is-small">Small</b-switch>
</div>
<div class="field">
<b-switch>Default</b-switch>
</div>
<div class="field">
<b-switch size="is-medium">Medium</b-switch>
</div>
<div class="field">
<b-switch size="is-large">Large</b-switch>
</div>
</section>
</template>
# Styles
<template>
<section>
<b-field grouped>
<b-switch v-model="isRounded">Rounded</b-switch>
<b-switch v-model="isOutlined">Outlined</b-switch>
</b-field>
<b-field grouped>
<b-field label="Type">
<b-select v-model="type" placeholder="Type">
<option value="null">Default</option>
<option value="is-primary">Primary</option>
<option value="is-success">Success</option>
<option value="is-warning">Warning</option>
<option value="is-danger">Danger</option>
</b-select>
</b-field>
<b-field label="Size">
<b-select v-model="size">
<option value="">Default</option>
<option value="is-small">is-small</option>
<option value="is-medium">is-medium</option>
<option value="is-large">is-large</option>
</b-select>
</b-field>
</b-field>
<b-switch
:rounded="isRounded"
:outlined="isOutlined"
:size="size"
:type="type">Sample</b-switch>
</section>
</template>
<script>
export default {
data() {
return {
size: '',
type: null,
isRounded: false,
isOutlined: false,
}
}
}
</script>
# API
Name | Description | Type | Values | Default |
---|---|---|---|---|
type | Type (color) of the switch, optional | String | is-white , is-black , is-light ,
is-dark , is-primary , is-info , is-success ,
is-warning , is-danger ,
and any other colors you've set in the $colors list on Sass | — |
v-model | Binding value | Any | — | false |
native-value | Same as native value | Any | — | — |
true-value | Overrides the returned value when it's checked | Any | — | true |
false-value | Overrides the returned value when it's not checked | Any | — | false |
disabled | Same as native disabled | Boolean | — | false |
name | Same as native name | String | — | — |
size | Size of the control, optional | String | is-small , is-medium , is-large | — |
rounded | Rounded style | Boolean | — | false |
outlined | Outlined style | Boolean | — | false |
# Variables
You can use these variables to customize this component.
Name | Default |
---|---|
$switch-width-number | 2.75 |
$switch-width | $switch-width-number * 1em |
$switch-padding | 0.2em |
$switch-active-background-color | $primary |
This page is open source. Noticed a typo or something's unclear?