简介
@npm-polymer/paper-radio-group 是一款基于 Polymer 的组件，用于创建单选框组。通过使用该组件，您可以轻松地创建一个单选框组，以便用户可以从提供的选项中选择一个。
该组件提供了丰富的自定义选项，包括但不限于：选择样式、主题颜色、默认选中等。
安装
@npm-polymer/paper-radio-group 可以通过 npm 安装和使用。
使用以下命令安装组件：
npm install @npm-polymer/paper-radio-group
使用
使用 @npm-polymer/paper-radio-group 非常简单。只需在您的 Polymer 应用程序中导入该组件并在使用它的地方添加一个元素即可开始使用。
这是一个简单的示例：
-- -------------------- ---- -------
----------- --------------------
----------
------------------ ------------------------
------------------- --------------------- ----------------------
------------------- --------------------- ----------------------
------------------- --------------------- ----------------------
--------------------
-----------
--------
---------
--- -----------------
----------- -
--------- -
----- -------
------ ---------
-
-
---
---------
-------------在上面的示例中，我们创建了一个名为 my-radio-group 的自定义元素，并将 @npm-polymer/paper-radio-group 元素作为其子元素。在 @npm-polymer/paper-radio-group 的内部，我们添加了三个单选框选项：Option 1、Option 2 和 Option 3。
为了使 @npm-polymer/paper-radio-group 更具可定制性，我们还在 my-radio-group 中添加了一个名为 selected 的属性。这个属性表示用户选择的选项的名称，我们在这里将其默认设置为选项 1。
属性
@npm-polymer/paper-radio-group 元素提供了多个属性，用于自定义单选框组的行为和样式。以下是最常用的属性：
- selected：当前选定的选项的名称。如果未设置，默认选项为第一个选项。
- attr-for-selected：应该用于选择的属性名称。如果未设置，默认值为 "name"。
- allow-empty-selection：是否允许不选中任何选项。可选值为 "true" 或 "false"。默认为 "false"。
- no-ink：禁用胶墨效果。可选值为 "true" 或 "false"。默认为 "false"。
方法
@npm-polymer/paper-radio-group 元素还提供了几个方法，可用于与单选框组交互。以下是其中最常用的方法：
- getSelected：返回当前被选中的选项的元素对象。
- select：将指定的选项选择为当前选中的选项。接受要选择的选项的元素作为参数。
事件
当用户在单选框组中选择不同的选项时，@npm-polymer/paper-radio-group 元素会触发 change 事件。此事件包括用户选择的选项的元素对象以及该对象的名称信息。
以下是一个简单的示例：
-- -------------------- ---- -------
----------- --------------------
----------
------------------ ----------------------- -----------------------------------
------------------- --------------------- ----------------------
------------------- --------------------- ----------------------
------------------- --------------------- ----------------------
--------------------
-----------
--------
---------
--- -----------------
----------- -
--------- -
----- -------
------ ---------
-
--
----------------------- --------------- -
--------------------- -------- ------------------ ----- ------ -----------------------
-
---
---------
-------------在上面的示例中，我们创建了一个名为 my-radio-group 的自定义元素，并添加了一个名为 handleSelectionChanged 的处理程序。当用户选择不同的选项时，@npm-polymer/paper-radio-group 元素会触发 change 事件，并将选项信息作为参数传递给该处理程序。
结论
@npm-polymer/paper-radio-group 是一款功能强大且易于使用的单选框组组件。它提供了丰富的自定义选项，使您可以快速轻松地创建具有专业外观和流畅交互的单选框组。如果您需要在 Polymer 应用程序中使用单选框组，那么 @npm-polymer/paper-radio-group 是不容错过的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff381e8991b448ddb92