Inkline
Toggle
Toggles are boolean form components used for easily enabling or disabling features.
Basic Usage
Basic Toggle
<i-toggle v-model="toggled"></i-toggle>
export default {
data () {
return {
toggled: false
};
}
}
Checked:
falseSizes
You're able to use the size property to control the size of your inputs, using one of the available sizes: sm, md, and lg. The default size is set to md.
Toggle Sizes
<i-toggle size="sm" v-model="toggled"></i-toggle>
<i-toggle size="md" v-model="toggled"></i-toggle>
<i-toggle size="lg" v-model="toggled"></i-toggle>
export default {
data () {
return {
toggled: false
};
}
}
Applying the size size property to an i-form-group will also set the chosen size to all of its i-toggle inputs.
Readonly State
You can set the toggle input to be readonly by using the readonly property.
Readonly Toggle
<i-toggle v-model="toggledFalse" readonly></i-toggle>
<i-toggle v-model="toggledTrue" readonly></i-toggle>
export default {
data () {
return {
toggledFalse: false,
toggledTrue: true
};
}
}
Disabled State
You can set the toggle input to be disabled by using the disabled property.
Disabled Toggle
<i-toggle v-model="toggledFalse" readonly></i-toggle>
<i-toggle v-model="toggledTrue" readonly></i-toggle>
export default {
data () {
return {
toggledFalse: false,
toggledTrue: true
};
}
}
Component API
Here you can find a list of the various customization options you can use for the toggle component as props, as well as available slots and events.
Toggle API
Property disabled
Type
BooleanAccepted
true, falseDefault
falseDescription Sets the state of the toggle input form component as disabled.
Property readonly
Type
BooleanAccepted
true, falseDefault
falseDescription Sets the state of the toggle input form component as readonly.
Property schema
Type
ObjectDescription Provides a schema binding to the toggle input form component. See the Form Validation documentation.
Property size
Type
StringAccepted
sm, md, lgDefault
mdDescription Sets the size of the toggle input form component.
Property value
Type
BooleanDescription Sets the value of the toggle input form component. Can be also provided using a
v-model directive when the toggle input isn't grouped.Property variant
Type
StringAccepted
light, darkDefault
lightDescription Sets the color variant of the toggle component.
Event click
Type
(event: Event) => {}Description Emitted when toggle input form component is clicked.
Event focus
Type
(event: Event) => {}Description Emitted when toggle input form component is focused.
Event blur
Type
(event: Event) => {}Description Emitted when toggle input form component is blurred.
Event input
Type
(value: Boolean | String) => {}Description Emitted when toggle input form component value changes.
Sass Variables
Here you can find a list of the Sass variables you can use for the toggle component. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.
Radio
Property $toggle-width-base
Default
40pxProperty $toggle-width
Default
size-map($toggle-width-base, $sizes, $size-multipliers)Property $toggle-height-base
Default
20pxProperty $toggle-height
Default
size-map($toggle-height-base, $sizes, $size-multipliers)Property $toggle-border-radius-base
Default
$toggle-height-baseProperty $toggle-border-radius
Default
size-map($toggle-border-radius-base, $sizes, $size-multipliers)Property $toggle-transition-duration
Default
$transition-durationProperty $toggle-indicator-size-base
Default
16pxProperty $toggle-indicator-size
Default
size-map($toggle-indicator-size-base, $sizes, $size-multipliers)Property $toggle-indicator-border-radius-base
Default
$toggle-indicator-size-baseProperty $toggle-indicator-border-radius
Default
size-map($toggle-indicator-border-radius-base, $sizes, $size-multipliers)Property $toggle-background-light
Default
$color-gray-40Property $toggle-indicator-background-light
Default
$color-whiteProperty $toggle-background-active-light
Default
$color-primaryProperty $toggle-indicator-background-active-light
Default
$color-whiteProperty $toggle-background-disabled-light
Default
$color-gray-40Property $toggle-indicator-background-disabled-light
Default
$color-gray-20Property $toggle-background-active-disabled-light
Default
mix($toggle-background-active-light, $toggle-background-disabled-light, 25%)Property $toggle-indicator-background-active-disabled-light
Default
$color-gray-20Property $toggle-background-dark
Default
$color-darkProperty $toggle-indicator-background-dark
Default
$color-whiteProperty $toggle-background-active-dark
Default
$color-primaryProperty $toggle-indicator-background-active-dark
Default
$color-whiteProperty $toggle-background-disabled-dark
Default
$color-gray-60Property $toggle-indicator-background-disabled-dark
Default
$color-gray-20Property $toggle-background-active-disabled-dark
Default
mix($toggle-background-active-dark, $toggle-background-disabled-dark, 25%)Property $toggle-indicator-background-active-disabled-dark
Default
$color-gray-20Property $toggle-color-for-light-variant
Default
$color-for-light-variantProperty $toggle-color-for-dark-variant
Default
$color-for-dark-variantProperty $toggle-variant-{variant}
Default
toggle-variant($color-{variant})Property $toggle-variants
Default
(
light: $toggle-variant-light,
dark: $toggle-variant-dark
)
Function toggle-variant
Default
@function toggle-variant($variant) {
$toggle-variant-color: variant-color-by-luminance($variant, $toggle-color-for-light-variant, $toggle-color-for-dark-variant);
$toggle-variant-border-color: variant-color-by-luminance($variant, $border-color-light, $border-color-dark);
$toggle-variant-background: $variant;
$toggle-variant-background-active: $color-primary !default;
$toggle-variant-background-disabled: variant-color-by-luminance($variant, $color-gray-40, $color-gray-60) !default;
$toggle-variant-background-active-disabled: mix($toggle-variant-background-active, $toggle-variant-background-disabled, 25%) !default;
$toggle-variant-indicator-background: $color-white !default;
$toggle-variant-indicator-background-active: $toggle-variant-indicator-background !default;
$toggle-variant-indicator-background-disabled: $color-gray-20 !default;
$toggle-variant-indicator-background-active-disabled: $toggle-variant-indicator-background-disabled !default;
$variant-map: (
color: $toggle-variant-color,
background: $toggle-variant-background,
border-color: $toggle-variant-border-color,
background-active: $toggle-variant-background-active,
background-disabled: $toggle-variant-background-disabled,
background-active-disabled: $toggle-variant-background-active-disabled,
indicator-background: $toggle-variant-indicator-background,
indicator-background-active: $toggle-variant-indicator-background-active,
indicator-background-disabled: $toggle-variant-indicator-background-disabled,
indicator-background-active-disabled: $toggle-variant-indicator-background-active-disabled,
);
@return $variant-map;
}