@react.material/switch 是一个用户界面设计的开源项目。它包含了一个 React 组件 Switch，可用于为开发者快速创建界面上的开关按钮。
本文将旨在让开发者了解如何使用 @react.material/switch 包，并提供与之相关的深度学习和指导。
安装
首先，我们需要在项目中安装 @react.material/switch：
--- ------- ---------------------- ------
完成后，你可以在你的项目 import 该模块：
------ ------ ---- -------------------------
使用
基本用法
以下是如何在你的 React 组件中使用 Switch：
------ ----- ---- --------
------ ------ ---- -------------------------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
-------- ------
--
-
------------ - -- -- -
------------------------- -- --
-------- -------------------
----
--
-------- -
------ -
--
------- ---------------------------- ---------------------------- --
---
--
-
-获得和设置值
Switch 组件提供了一个 checked 属性，可以用于获得或设置当前开关的值。通过设置该属性可以让开关在初次渲染时处于打开或关闭状态。对于打开状态可以设置为 true，而关闭状态可以设置为 false。
------- ---------------------------- ---------------------------- --
在上面的代码中，checked 属性被设置为组件中初始化 checked 状态。当用户通过单击该开关时，该状态将进行更改。这里 onChange 事件用于处理更新状态。
自定义标签
您还可以在开关上显示自定义标签。例如，你可以显示 “开” 或 “关” 这样的文字：
------- ---------------------------- ---------------------------- ----------- ------------ --
自定义颜色
如果您需要改变开关上的颜色，可使用 color 属性设置。
------- --------------- ---------------------------- ---------------------------- --
属性
以下是用于自定义 Switch 组件的属性:
| Name | Type | Options | Default | Description |
|---|---|---|---|---|
checked |
boolean | 设置为 true 时将开启组件 |
||
color |
string | null |
更改前景色 | |
disabled |
boolean | false |
禁用开关 | |
id |
string | 设置标识符 | ||
onChange |
func | 当开关更改时时调用的函数 | ||
onLabel |
string, node | 'on' |
On 的标签 | |
offLabel |
string, node | 'off' |
Off 的标签 |
结论
在本文中，我们学习了如何使用 @react.material/switch。我们了解了它的基本使用方法、如何通过事件处理更改状态，并了解了其自定义标签和颜色功能。我们希望这篇文章能够帮助你快速启动使用 Switch 组件，并更好地为你的用户界面添加新功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056e9e81e8991b448e7631