引言：在前端的开发中经常需要进行表单的提交和输入，其中就有选择按钮，而 ember-radio-button 是一个方便易用的开源库。接下来，我们将为大家介绍该库的使用方法。
安装
在使用 ember-radio-button 之前，需要先安装该库。可以通过以下命令在项目中安装：
npm install ember-radio-button --save
使用
ember-radio-button 的使用比较简单，只需要按照以下步骤即可。
加载库
首先，在项目的 index.html 文件中加载库：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- -----------------------------
--------- ----- -----------
------- --------------------------------
------- -------------------------------
------------- --------
-------
------
-------------------- ---------------------- -- ---------
-------------- ----------- -------------
-------------- ---------- ------------
----------------------
-------
-------创建一个组
要创建一个组，只需要在 HTML 中插入以下代码：
{{#ember-radio-group selected=selectedValue as |group|}}
...
{{/ember-radio-group}}其中， selectedValue 代表当前选中的值，可以通过 this.set('selectedValue', 'yes') 进行修改。
添加选项
在组中添加选项非常简单，只需要在组内添加以下代码：
{{#ember-radio-group selected=selectedValue as |group|}}
{{group.option label="Yes" value="yes"}}
{{group.option label="No" value="no"}}
{{/ember-radio-group}}其中， label 表示选项的显示名称，value 表示选项的值。
样式
如果您需要修改选项的样式，只需要按照以下方式覆盖默认样式即可：
.ember-radio-button {
// 样式
}
.ember-radio-button.is-checked {
// 样式
}示例代码
官方提供了一个包含全套代码的示例，您可以按照以下方式下载并运行该示例：
git clone https://github.com/yapplabs/ember-radio-button.git cd ember-radio-button npm install && bower install ember server
结语
使用 ember-radio-button 可以方便地创建出美观易用的选择按钮。我们希望这篇文章对大家有所帮助，在使用中遇到任何问题，欢迎在评论中留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f7680447116197505561a6f