The Switch component allows users to switch between ON (the value is true) and OFF (the value is false) states.
This tutorial shows how to add Switch to a page and configure its core features. The following sample shows the customization result:
Each section in this tutorial describes a single configuration step. You can also find the full source code in the following GitHub repository: getting-started-with-switch.
Create a Switch jQueryAdd DevExtreme to your jQuery application and use the following code to create a Switch component:
$(function() {
$("#switch").dxSwitch({ });
});
<html>
<head>
<!-- ... -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/25.1.4/css/dx.light.css">
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/25.1.4/js/dx.all.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="switch"></div>
</body>
</html> Angular
Add DevExtreme to your Angular application and use the following code to create a Switch component:
<dx-switch></dx-switch>
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
}
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { DxSwitchModule } from "devextreme-angular";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxSwitchModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { } Vue
Add DevExtreme to your Vue application and use the following code to create a Switch component:
<template>
<DxSwitch>
</DxSwitch>
</template>
<script>
import "devextreme/dist/css/dx.light.css";
import { DxSwitch } from "devextreme-vue/switch";
export default {
components: {
DxSwitch
}
}
</script> React
Add DevExtreme to your React application and use the following code to create a Switch component:
import React from "react";
import "devextreme/dist/css/dx.light.css";
import { Switch } from "devextreme-react/switch";
function App() {
return (
<Switch>
</Switch>
);
}
export default App; Specify the Initial State
If you need to specify the initial state, assign a Boolean value to the value property. You can also change the Switch component labels. Use the switchedOnText and the switchedOffText properties.
jQuery$(function() {
$("#switch").dxSwitch({
value: false,
});
}); Angular
<dx-switch
[value]="false"
>
</dx-switch> Vue
<template>
<DxSwitch
:value="false"
/>
</template>
<script>
// ...
</script> React
// ...
function App() {
// ...
return (
<Switch
value={false}
/>
);
}
export default App; Configure Size
The component allows you to change its width.
You can also use rtlEnabled property to enable the Right-to-Left layout.
jQuery$(function() {
$("#switch").dxSwitch({
// ...
width: 80,
rtlEnabled: true,
});
}); Angular
<dx-switch ...
[width]="80"
[rtlEnabled]="true"
>
</dx-switch> Vue
<template>
<DxSwitch ...
:width="80"
:rtlEnabled="true"
/>
</template>
<script>
// ...
</script> React
// ...
function App() {
// ...
return (
<Switch ...
width={80}
rtlEnabled={true}
/>
);
}
export default App; Define a Hint
The following code specifies the hint that appears when users hover the mouse pointer over the Switch.
jQuery$(function() {
$("#switch").dxSwitch({
// ...
hint: "Click to switch on",
onValueChanged(e) {
const messageText= e.value ? "Click to switch off" : "Click to switch on";
e.component.option("hint", messageText);
// ...
}
});
}); Angular
<dx-switch ...
[hint]="hintMessage"
(onValueChanged)="onValueChanged($event)"
>
</dx-switch>
import { Component } from "@angular/core";
// ...
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
hintMessage: string = "Click to switch on";
onValueChanged(e: {value: boolean}) {
this.hintMessage = e.value ? "Click to switch off" : "Click to switch on";
// ...
}
} Vue
<template>
<DxSwitch ...
:hint="hintMessage"
@value-changed="onValueChanged"
/>
</template>
<script>
import { DxSwitch } from "devextreme-vue/switch";
// ...
export default {
components: {
DxSwitch
},
data() {
return {
hintMessage: "Click to switch on",
};
},
methods: {
onValueChanged(e) {
this.hintMessage = e.value ? "Click to switch off" : "Click to switch on";
// ...
}
}
}
</script> React
import React, { useState, useCallback } from "react";
import "devextreme/dist/css/dx.light.css";
import { Switch } from "devextreme-react/switch";
function App() {
const [hintMessage, setHintMessage] = useState("Click to switch on");
const onValueChanged = useCallback((e) => {
const messageText = e.value ? "Click to switch off" : "Click to switch on";
setHintMessage(messageText);
// ...
}, []);
return (
<Switch ...
hint={hintMessage}
onValueChanged={onValueChanged}
/>
);
}
export default App; Handle Value Change
Users can change a component value (state) with a mouse click, SPACE key, or tap. Implement the onValueChanged callback to handle value changes.
The following code displays a notification every time users change the Switch state:
jQuery$(function() {
$("#switch").dxSwitch({
// ...
onValueChanged(e) {
// ...
const stateLabel = e.value ? "ON" : "OFF";
DevExpress.ui.notify(`The component is switched ${stateLabel}`);
}
});
}); Angular
<dx-switch ...
(onValueChanged)="onValueChanged($event)"
>
</dx-switch>
import { Component } from "@angular/core";
import notify from "devextreme/ui/notify";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
// ...
onValueChanged(e: {value: boolean}) {
// ...
const stateLabel = e.value ? "ON" : "OFF";
notify(`The component is switched ${stateLabel}`);
}
} Vue
<template>
<DxSwitch ...
@value-changed="onValueChanged"
/>
</template>
<script>
// ...
import { DxSwitch } from "devextreme-vue/switch";
import notify from "devextreme/ui/notify";
export default {
components: {
DxSwitch
},
// ...
methods: {
onValueChanged(e) {
// ...
const stateLabel = e.value ? "ON" : "OFF";
notify(`The component is switched ${stateLabel}`);
}
}
}
</script> React
import React, { useState, useCallback } from "react";
import "devextreme/dist/css/dx.light.css";
import { Switch } from "devextreme-react/switch";
import notify from "devextreme/ui/notify";
function App() {
// ...
const onValueChanged = useCallback((e) => {
// ...
const stateLabel = e.value ? "ON" : "OFF";
notify(`The component is switched ${stateLabel}`);
}, []);
return (
<Switch ...
onValueChanged={onValueChanged}
/>
);
}
export default App; Feel free to share topic-related thoughts here.RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4