Skip to content
Last update: August 27, 2024

Switch

Switch is a component that allows users to toggle between two states, such as on and off. It is a simple and effective way to enable or disable a feature or setting.

Storybook

Explore the vc-switch component in the VC Shell Storybook.

Dynamic Views examples are also available in the VC Shell Storybook for a better understanding of the component usage.

Usage

Include the vc-switch component in your Vue application, providing theming and enhanced functionality to your switch inputs.

vc-switch

Create a basic switch as follows:

<template>
    <vc-switch :modelValue="switchProperty" label="Switch label"></vc-switch>
</template>

To start using all the available switch properties, specify the vc-switch component when creating the schema. For example:

{
    id: "switchId",
    component: "vc-switch",
    label: "Switch label",
    property: "switchProperty",
}

Switch API

API empowers you to create dynamic and interactive switch components to customize its appearance and behavior.

Basic Vue

You can easily incorporate the vc-switch component into your Vue applications using simple templates.

Props

To customize the appearance and behavior of switch, use the following props:

Property Type Description
modelValue boolean The value of the component.
disabled boolean Disabled state for the component.
required boolean Indicates if the component is required.
label string The label of the component.
tooltip string The tooltip text to display when hovering over the component.

Emits

To interact with the vc-switch component, use the emitted events. The update:modelValue event is triggered when the value of the component changes:

Name Parameters ReturnType Description
update:modelValue value: boolean void Emitted when the value of the component changes.

Dynamic Views

To dynamically integrate the vc-switch component into your views, use the schema interface:

interface SwitchSchema {
    id: string;
    component: "vc-switch";
    trueValue?: boolean;
    falseValue?: boolean;
    label?: string;
    tooltip?: string;
    property: string;
    update?: {
        method: string
    };
    disabled?: {
        method: string;
    };
    visibility?: {
        method: string;
    };
    horizontalSeparator?: boolean;
}

To incorporate the switch into your dynamic applications, define the following properties:

Property Type Description
id string The unique Id for vc-switch component.
component string vc-switch
trueValue boolean Set value for checked state.
falseValue boolean Set value for unchecked state.
label string Switch label that is displayed above the switch. Also available interpolation {} syntax based on current element context. You can specify the localization key for the label. Under the hood, vue-i18n is used.
tooltip string Switch tooltip that is displayed when hovering over the switch label tooltip icon. You can specify the localization key for the tooltip. Under the hood, vue-i18n is used.
property string Property name that is used for binding switch value to blade data.
Supports deep nested properties like property[1].myProperty.
Additionally, you have the flexibility to bind computed property that returns a value. Computed property should be defined in the blade scope.
update {method: string} Update method that is called when switch value is changed. It gets changed value, schema property name and field internal context as arguments. Method should be defined in the blade scope.
disabled {method: string} Disabled state for component, could be used to disable switch based on some conditions. Method or variable should be defined in the blade scope and should return a boolean value.
visibility {method: string} Visibility state for component, could be used to hide switch based on some conditions. Method or variable should be defined in the blade scope and should return a boolean value.
horizontalSeparator boolean Adds a horizontal separator line after the component.