Angular PrimeNG 选择按钮组件

Angular PrimeNG 是一个基于 Angular 框架的 UI 组件库，选择按钮组件是其中的一种常见组件，用于在多个选项中进行单一选择或多选。

特点

• 支持单选或多选；
• 支持水平或垂直方向布局；
• 支持自定义样式；
• 可通过绑定 ngModel 实现数据双向绑定；
• 可通过绑定 disabled 实现选项禁用；
• 支持键盘导航和鼠标操作。

安装使用

安装

要使用 Angular PrimeNG，首先要使用 npm 安装它。在终端窗口中使用以下命令：

npm install primeng --save

导入模块

将 ButtonModule 导入到你的 NgModule 中：

import { NgModule } from '@angular/core';
import { ButtonModule } from 'primeng/button';

@NgModule({
  imports: [
    ButtonModule
  ],
  // 把组件加入到 declarations 和 exports 中
})
export class MyModule { }

使用模板

在模板中使用 p-radioButton 或 p-checkbox 指令创建单选按钮或多选框。

<!-- 单选按钮 -->
<p-radioButton name="gender" value="male" label="Male" [(ngModel)]="gender"></p-radioButton>
<p-radioButton name="gender" value="female" label="Female" [(ngModel)]="gender"></p-radioButton>

<!-- 多选框 -->
<p-checkbox name="hobbies" value="reading" label="Reading" [(ngModel)]="hobbies"></p-checkbox>
<p-checkbox name="hobbies" value="music" label="Music" [(ngModel)]="hobbies"></p-checkbox>
<p-checkbox name="hobbies" value="movies" label="Movies" [(ngModel)]="hobbies"></p-checkbox>

参考

官方文档：Angular PrimeNG - RadioButton