A Switch is a component which provides only 2 options either enabled or disabled. This is best used in the scenario where users need to enable or disable any function. Users can enable and disable the switch by just clicking on it.
A Switch is like a circular space on a small line or inside a cylindrical container. Generally circular space at the right side means enabled and left side means disabled. While enabled it has some color and while disabled it is colorless.
Below is an example of a switch:
Developers can develop their custom switch containing text, icon, animation etc.
- Provides better user experience while dealing with independently controlled items.
MaterialSwitches can be implemented in most of the commonly used applications where users need to either enable or disable any functionality. Below are some of the examples:
There are few features of Radio buttons listed below:
Features | Description |
---|---|
On-State | Can be enabled or disabled |
Off-State/Enabled | By default functionality is enabled and can't be changed |
Off-State/Disabled | By default functionality is disabled and can't be changed |
Customized | Can contain some icons or some texts as developers choice |
Please refer below Image:
Add following to the dependencies in package.json file in entry folder of your project:
{
"dependencies": {
"@ohos/material-switch": "file:../materialswitch"
}
}
import { Switch, SwitchModel } from "@ohos/material-switch"
private model: SwitchModel.Model = new SwitchModel.Model();
this.model.reset()
Switch({
model: this.model,
onSelect: (id, isOn) => {
prompt.showToast({
message: id.toString()
})
})
this.model.reset()
this.model.setSwitchId(1)
this.model.setWithIcon(true)
this.model.setIsOn(true)
this.model.setIcon($r('app.media.tick'))
Switch({
model: this.model,
onSelect: (id, isOn) => {
prompt.showToast({
message: id.toString()
})
})
Description: A default toggle switch is provided by the library.
Code Snippet:
updateModelForFirst() {
this.switchModel1.reset()
this.switchModel1.setSwitchId(1)
}
Switch({
model: this.switchModel1,
onSelect: (id, isOn) => {
prompt.showToast({
message: id.toString()
})
}
})
Explanation:
In above code one switch was created whose all attributes values were resetted to default one and then switch id assigned with value 1. While clicking the button one toast will appear showing the id of the switch.
Below are list of properties available:
Properties | Description |
---|---|
setSwitchId(number) |
Providing id to switches |
reset() |
Will initialize the value of all attributes with default value |
Screenshot:
Description: User can create a customized toggle switch based on the parameters passed.
Code Snippet:
updateModelForFourth() {
this.switchModel4.reset()
this.switchModel4.setSwitchId(4)
this.switchModel4.setIsOn(true)
this.switchModel4.setWithIcon(true)
}
Switch({
model: this.switchModel4,
onSelect: (id, isOn) => {
prompt.showToast({
message: id.toString()
})
}
})
Explanation:
In above code one customized switch was created whose all attributes values were resetted to default one and then switch id assigned with value 4 and by default switch was made enabled and having tick icon in circular space.Tick icon is default icon getting selected while calling reset() function. Developers can use any other icons as well. While clicking button one toast will appear showing the id of the switch i.e. 4.
Below are list of properties available:
Properties | Description |
---|---|
setSwitchId(number) |
Providing id to switches |
reset() |
Will initialize the value of all attributes with default value |
setIsOn(boolean) |
By default making switch enabled or disabled |
setWithIcon(boolean) |
It will add or remove the icon added in Switch |
Screenshot:
This library is for using toggle switches that can be customized based on colors, an icon passed by the user and also be set to disabled or On/Off state.
If you find any problems during usage, you can submit an Issue to us. Of course, we also welcome you to send us PR.