npm 包 @material/radio 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要使用各种 UI 组件来增强页面的交互性和美观性。@material/radio 是一个基于 Google Material Design 的开源 radio 组件库，提供多款不同风格的 radio 组件。

本文将详细介绍如何使用 @material/radio。

安装

首先，我们需要安装 @material/radio。在命令行终端中输入以下命令：

npm install @material/radio

使用

安装完成后，在需要使用 radio 组件的文件中引入它：

import { MDCRadio } from '@material/radio';

const radio = new MDCRadio(document.querySelector('.mdc-radio'));

注意，这里需要在 HTML 中为 radio 组件指定一个类名 mdc-radio。

API

MDCRadio 类提供了一些常用的属性和方法，下面是它们的详细介绍。

属性

checked: boolean，表示当前选中状态。可读可写。
disabled: boolean，表示是否禁用。可读可写。
value: string，表示选项的值。可读可写。

方法

destroy(): 销毁当前组件实例。

事件

change: 在选中状态发生变化时触发。

radio.listen('change', () => {
  console.log(`选中状态：${radio.checked}`);
});

示例

下面是一个基本的 radio 组件使用示例。

HTML 代码：

<div class="mdc-radio">
  <input class="mdc-radio__native-control" type="radio" id="radio1" name="radios" checked />
  <div class="mdc-radio__background">
    <div class="mdc-radio__outer-circle"></div>
    <div class="mdc-radio__inner-circle"></div>
  </div>
  <div class="mdc-radio__ripple"></div>
</div>

JavaScript 代码：

import { MDCRadio } from '@material/radio';

const radio = new MDCRadio(document.querySelector('.mdc-radio'));

// 监听 change 事件
radio.listen('change', () => {
  console.log(`选中状态：${radio.checked}`);
});

运行后，在浏览器 console 中可以看到选中状态的变化。

结语

本文介绍了如何使用 @material/radio，包括安装、使用、API 和示例。使用这个组件库可以极大地提高项目开发效率，并且能够让页面 UI 更加美观和易用。希望本文对你学习前端开发有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/200708