{"id":22771605,"url":"https://github.com/shabdkumar/materialui-switch","last_synced_at":"2026-03-19T23:37:32.489Z","repository":{"id":113171380,"uuid":"511411873","full_name":"ShabdKumar/MaterialUI-Switch","owner":"ShabdKumar","description":"Article on Switch component (Material Design) developed for OpenHarmony.","archived":false,"fork":false,"pushed_at":"2022-07-14T11:40:27.000Z","size":238,"stargazers_count":0,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-05T13:51:34.673Z","etag":null,"topics":["article","openharmony"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ShabdKumar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-07T06:36:24.000Z","updated_at":"2022-07-08T08:49:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"ab0c04a4-8f72-425f-ac96-e4568bd6589c","html_url":"https://github.com/ShabdKumar/MaterialUI-Switch","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShabdKumar%2FMaterialUI-Switch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShabdKumar%2FMaterialUI-Switch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShabdKumar%2FMaterialUI-Switch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShabdKumar%2FMaterialUI-Switch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ShabdKumar","download_url":"https://codeload.github.com/ShabdKumar/MaterialUI-Switch/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246314149,"owners_count":20757463,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["article","openharmony"],"created_at":"2024-12-11T16:14:28.269Z","updated_at":"2026-01-11T02:52:15.403Z","avatar_url":"https://github.com/ShabdKumar.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"## 1. Introduction\n\nA **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.\n\nA 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.\n\nBelow is an example of a switch:\n\n\u003cimg src=\"screenshots/switch_Example.PNG\" width=\"200\" height=\"100\"\u003e\n\nDevelopers can develop their custom switch containing text, icon, animation etc.\n\n## 2. Benefits\n\n* Provides better user experience while dealing with independently controlled items.\n\n## 3. Typical UseCases:\n\nMaterialSwitches 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:\n\n\u003cimg src=\"screenshots/switch_usecase1.PNG\" width=\"231\" height=\"258\"\u003e \u003cimg src=\"screenshots/switch_usecase2.PNG\" width=\"231\" height=\"258\"\u003es\n\n## 4. List of Features:\n\nThere are few features of Radio buttons listed below:\n\n|Features|Description|\n|:-:|:-:|\n|On-State|Can be enabled or disabled|\n|Off-State/Enabled|By default functionality is enabled and can't be changed|\n|Off-State/Disabled|By default functionality is disabled and can't be changed|\n|Customized|Can contain some icons or some texts as developers choice|\n|||\n\nPlease refer below Image: \n\n\u003cimg src=\"screenshots/switch_featuresList.PNG\" width=\"313\" height=\"343\"\u003e\n\n## 5. Usage Instructions:\n\n### 1. Add dependencies:\n\nAdd following to the dependencies in package.json file in entry folder of your project:\n\n```json\n{\n    \"dependencies\": {\n    \"@ohos/material-switch\": \"file:../materialswitch\"\n  }\n}\n```\n\n### 2. Import files:\n\n```ts\nimport { Switch, SwitchModel }  from \"@ohos/material-switch\"\n```\n\n### 3. Initialize switch model data\n\n```ts\nprivate model: SwitchModel.Model = new SwitchModel.Model();\n```\n\n### 4. Code for creating default switch\n\n```ts\nthis.model.reset()\n\nSwitch({\n    model: this.model,\n    onSelect: (id, isOn) =\u003e {\n            prompt.showToast({\n              message: id.toString()\n    })\n})\n```\n\n\u003cimg src=\"screenshots/switch_defaultSwitches.png\" width=\"517\" height=\"250\"\u003e\n\n### 5. Code for creating custom switch with icon\n\n```ts\n    this.model.reset()\n    this.model.setSwitchId(1)\n    this.model.setWithIcon(true)\n    this.model.setIsOn(true)\n    this.model.setIcon($r('app.media.tick'))\n\nSwitch({\n    model: this.model,\n    onSelect: (id, isOn) =\u003e {\n            prompt.showToast({\n              message: id.toString()\n    })\n})\n```\n\n\u003cimg src=\"screenshots/switch_customizedSwitches.png\" width=\"492\" height=\"272\"\u003e\n\n## 6. Library Features:\n\n### Feature-1: \n\n***Description:*** A default toggle switch is provided by the library.\n\n***Code Snippet:***\n\n```ts\nupdateModelForFirst() {\n    this.switchModel1.reset()\n    this.switchModel1.setSwitchId(1)\n}\n\nSwitch({\n    model: this.switchModel1,\n    onSelect: (id, isOn) =\u003e {\n        prompt.showToast({\n            message: id.toString()\n        })\n    }\n})\n```\n***Explanation:***\n\nIn 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.\n\n\n***Below are list of properties available:***\n\n|Properties|Description|\n|:-:|:-:|\n|`setSwitchId(number)`|Providing id to switches|\n|`reset()`|Will initialize the value of all attributes with default value|\n|||\n\n***Screenshot:***\n\n\u003cimg src=\"screenshots/switch_feature1.gif\" width=\"246\" height=\"460\"\u003e\n\n\u003cbr\u003e\n\n### Feature-2: \n\n***Description:*** User can create a customized toggle switch based on the parameters passed.\n\n***Code Snippet:***\n\n```ts\nupdateModelForFourth() {\n    this.switchModel4.reset()\n    this.switchModel4.setSwitchId(4)\n    this.switchModel4.setIsOn(true)\n    this.switchModel4.setWithIcon(true)\n}\n\nSwitch({\n    model: this.switchModel4,\n    onSelect: (id, isOn) =\u003e {\n        prompt.showToast({\n            message: id.toString()\n        })\n    }\n})\n```\n\n***Explanation:***\n\nIn 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***.\n\n***Below are list of properties available:***\n\n|Properties|Description|\n|:-:|:-:|\n|`setSwitchId(number)`|Providing id to switches|\n|`reset()`|Will initialize the value of all attributes with default value|\n|`setIsOn(boolean)`|By default making switch enabled or disabled|\n|`setWithIcon(boolean)`|It will add or remove the icon added in Switch|\n|||\n\n***Screenshot:***\n\n\u003cimg src=\"screenshots/switch_feature2.gif\" width=\"246\" height=\"460\"\u003e\n\n## 7. Conclusion:\nThis 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.\n\n## 8. Code Contribution:\nIf you find any problems during usage, you can submit an [Issue](https://github.com/Applib-OpenHarmony/MaterialSwitch/issues) to us. Of course, we also welcome you to send us [PR](https://github.com/Applib-OpenHarmony/MaterialSwitch/pulls).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshabdkumar%2Fmaterialui-switch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshabdkumar%2Fmaterialui-switch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshabdkumar%2Fmaterialui-switch/lists"}