在 Material Design 设计风格中，RadioGroup 是一种常用的单选按钮组件。它可以让用户在一组选项中选择其中一个。本文将介绍如何在 Material Design 风格下实现 RadioGroup。
基本原理
在 Material Design 中，RadioGroup 的基本样式如下：
-- -------------------- ---- -------
---- ------------------------
---- ------------------
------ --------------------------------- ------------ ----------- --------------
---- ------------------------------
---- --------------------------------------
---- --------------------------------------
------
---- --------------------------------
------
------ ------------------ ---------
---- ------------------
------ --------------------------------- ------------ ----------- --------------
---- ------------------------------
---- --------------------------------------
---- --------------------------------------
------
---- --------------------------------
------
------ ------------------ ---------
------可以看到，RadioGroup 是由一系列 mdc-radio 组件和 label 组件组成的。其中，mdc-radio 组件是由一个 input 组件、一个背景组件和一个涟漪效果组件组成的。
要实现 RadioGroup 的选择逻辑，我们需要在组件的 JavaScript 中监听 input 组件的 change 事件，并根据事件触发的 input 组件的 id 判断选中了哪个选项。然后再通过 label 组件的 classList.toggle() 方法来修改选中状态和样式。
实现步骤
下面是具体的实现步骤：
1. 引入样式和 JavaScript
我们可以从 Material Components for the Web 库中下载所需的样式和 JavaScript 文件，也可以直接从官网上使用 CDN 引入。
<!-- 引入样式 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-components-web/4.0.0-alpha.3/material-components-web.min.css"> <!-- 引入 JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/material-components-web/4.0.0-alpha.3/material-components-web.min.js"></script>
2. 准备 HTML 结构
在 HTML 中，我们需要将一组 RadioGroup 放在一个 mdc-radio-group 容器中，并为每个选项创建一个 mdc-radio 组件和一个 label 组件。
-- -------------------- ---- -------
---- ------------------------
---- ------------------
------ --------------------------------- ------------ ----------- --------------
---- ------------------------------
---- --------------------------------------
---- --------------------------------------
------
---- --------------------------------
------
------ ------------------ ---------
---- ------------------
------ --------------------------------- ------------ ----------- --------------
---- ------------------------------
---- --------------------------------------
---- --------------------------------------
------
---- --------------------------------
------
------ ------------------ ---------
------3. 初始化组件
在 JavaScript 中，我们需要在页面加载完成后对组件进行初始化。这里我们使用 MDCRadioGroup 组件来初始化 mdc-radio-group，使用 MDCRadio 组件来初始化 mdc-radio。
document.addEventListener('DOMContentLoaded', function() {
const radioGroupEl = document.querySelector('.mdc-radio-group');
const radioGroup = new MDCRadioGroup(radioGroupEl);
const radioEls = radioGroupEl.querySelectorAll('.mdc-radio');
radioEls.forEach(el => new MDCRadio(el));
});4. 监听选中事件
我们需要监听选中事件，通过修改 label 的 classList 来改变选中状态和样式。
-- -------------------- ---- -------
--------------------------------------------- ---------- -
----- ------------ - -------------------------------------------
----- ---------- - --- ----------------------------
----- -------- - --------------------------------------------
------------------- -- -
----- ----- - --- -------------
---------------------- -- -- -
------------------- -- ------------------------------------------------------------------
----- --------- - ----------------------------------------------------------------------------
---------------------------------------------------------------------
---
---
---5. 修改样式
根据实际需求，可以通过修改 CSS 来改变 RadioGroup 的样式。
-- -------------------- ---- ------- -- ---- -- ---------------- ----------------------------------- - ---------------------- - ------------- -------- - ---------------- ----------------------------------- - ---------------------- ------------------------ - ----------------- -------- - -- ------ -- ---------------- ------------------- ---------------------- ------------------------ - ------------- -------- - ---------------- ------------------- ---------------------- ------------------------ - ----------------- -------- -
示例代码
下面是一个完整的示例代码，演示了如何在 Material Design 风格下实现 RadioGroup。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ------ ----- ---------- -----------
---- ---- ---
----- ---------------- --------------------------------------------------------------------------------------------------------------------
-------
-- ---- --
---------------- ----------------------------------- - ---------------------- -
------------- --------
-
---------------- ----------------------------------- - ---------------------- ------------------------ -
----------------- --------
-
-- ------ --
---------------- ------------------- ---------------------- ------------------------ -
------------- --------
-
---------------- ------------------- ---------------------- ------------------------ -
----------------- --------
-
--------
-------
------
---- ------------------------
---- ------------------
------ --------------------------------- ------------ ----------- --------------
---- ------------------------------
---- --------------------------------------
---- --------------------------------------
------
---- --------------------------------
------
------ ------------------ ---------
---- ------------------
------ --------------------------------- ------------ ----------- --------------
---- ------------------------------
---- --------------------------------------
---- --------------------------------------
------
---- --------------------------------
------
------ ------------------ ---------
---- ------------------
------ --------------------------------- ------------ ----------- ------------- ---------
---- ------------------------------
---- --------------------------------------
---- --------------------------------------
------
---- --------------------------------
------
------ ------------------ -------------
------
---- -- ---------- ---
------- ---------------------------------------------------------------------------------------------------------------------------
--------
--------------------------------------------- ---------- -
----- ------------ - -------------------------------------------
----- ---------- - --- ----------------------------
----- -------- - --------------------------------------------
------------------- -- -
----- ----- - --- -------------
---------------------- -- -- -
------------------- -- ------------------------------------------------------------------
----- --------- - ----------------------------------------------------------------------------
---------------------------------------------------------------------
---
---
---
---------
-------
-------总结
RadioGroup 是一个常用的单选按钮组件，在 Material Design 风格下的实现方法并不复杂。通过对每个选项的样式和选中事件的监听，可以对组件进行完整的设计和开发。期望本文的内容能对前端开发者有所启发和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496b68448841e98943f2327