Angular PrimeNG Form 单选按钮造型组件

Angular PrimeNG是一个用于Angular应用程序的UI组件库。它为各种任务提供了许多预建的主题和UI组件，如输入、菜单、图表、按钮等。在这篇文章中，我们将看到Angular PrimeNG Form RadioButton造型组件。

Form RadioButton组件是建立在HTML单选输入元素之上的主题化的。单选按钮有7个结构风格类，列在下面。

Angular PrimeNG Form RadioButton Styling Classes：

p-radiobutton。它是单选按钮的容器元素。
p-radiobutton-box : 它是图标的容器元素。
p-radiobutton-icon。它是单选按钮的图标元素。
p-checkbox-label。它是单选按钮的标签元素。
p-label-active。它是单选按钮处于选中状态时的标签元素。
p-label-focus: 它是单选按钮在焦点状态下的标签元素。
p-label-disabled。它是单选按钮处于禁用状态时的标签元素。

Angular PrimeNG Form RadioButton样式属性：

name: 它是无线电组的名称。
value。它是单选按钮的值。默认值为空。
label。这是该单选按钮的标签。
disabled。这是一个布尔属性，当存在时，禁用单选按钮。

语法:

// In app.component.html
<p-radioButton 
   name="..." 
   value="..."
   label="..." 
   [(ngModel)]="...">
</p-radioButton>

// In app.component.css
:host ::ng-deep .RadioButton-Styling-Class{
    // CSS
}

创建Angular应用程序并安装模块：

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步：最后，在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：在完成上述步骤后，项目结构将看起来像这样。

Angular PrimeNG Form RadioButton造型组件

Project Structure

例子1：在这个例子中，我们把放射性按钮的颜色从蓝色和白色改为红色和绿色。

app.component.html

<h2 style="color: green;">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    RadioButton Styling Component
</h3>
  
<h2>Choose a Topic</h2>
<p-radioButton name="grp1" 
               value="rad1" 
               label="HTML"
               [(ngModel)]="radioGrpVal">
</p-radioButton>
<br>
<p-radioButton name="grp1"
               value="rad2" 
               label="CSS" 
               [(ngModel)]="radioGrpVal">
</p-radioButton>
<br>
<p-radioButton name="grp1"
               value="rad3" 
               label="JAVA" 
               [(ngModel)]="radioGrpVal">
</p-radioButton>
<br>
<p-radioButton name="grp1" 
               value="rad4" 
               label="C++" 
               [(ngModel)]="radioGrpVal">
</p-radioButton>

app.component.css

:host ::ng-deep .p-radiobutton {
    margin-top: 10px;
}
  
:host ::ng-deep .p-radiobutton 
    .p-radiobutton-box.p-highlight, 
:host ::ng-deep .p-radiobutton 
    .p-radiobutton-box.p-highlight:hover {
      
    background-color: green;
    border-color: green;
    box-shadow: none;
}
  
:host ::ng-deep .p-radiobutton 
    .p-radiobutton-box:not(.p-disabled)
    :not(.p-highlight):hover {
    border-color: green;
}
  
:host ::ng-deep .p-radiobutton-icon {
    background-color: red !important;
}

app.component.ts

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
  
export class AppComponent {
    radioGrpVal?: string;
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { RadioButtonModule } 
    from 'primeng/radiobutton';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        RadioButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Form RadioButton造型组件

例子2：在这个例子中，我们使用上面列出的单选按钮造型类来改变单选标签在焦点、激活和禁用状态下的造型。

app.component.html

<h2 style="color: green;">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    RadioButton Styling Component
</h3>
  
<h2>Choose a Topic</h2>
<p-radioButton #option1
               name="grp1" 
               value="rad1"
               label="HTML" 
               [(ngModel)]="radioGrpVal">    
</p-radioButton>
<br>
<p-radioButton #option2
               name="grp1" 
               value="rad2" 
               label="CSS" 
               [(ngModel)]="radioGrpVal">    
</p-radioButton>
<br>
<p-radioButton [disabled]="true"
               name="grp1" 
               value="rad3" 
               label="JAVASCRIPT" 
               [(ngModel)]="radioGrpVal">    
</p-radioButton>
<br>
<div class="mt-5">
    <button pButton 
            label="Focus Option-1" 
            (click)="focusOption1()" 
            class="mr-4">        
    </button>
    <button pButton 
            label="Focus Option-2" 
            (click)="focusOption2()">        
    </button>
</div>

app.component.css

:host ::ng-deep p-radiobutton {
    margin-top: 10px;
}
  
:host ::ng-deep .p-radiobutton-label-focus {
    color: blue;
    font-weight: bold;
}
  
:host ::ng-deep .p-radiobutton-label-active {
    font-weight: bold;
    color: green;
}
  
:host ::ng-deep .p-radiobutton-label.p-disabled {
    color: red;
    font-weight: bold;
}

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { RadioButton } from 'primeng/radiobutton';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
  
export class AppComponent {
    @ViewChild("option1") option1!: RadioButton;
    @ViewChild("option2") option2!: RadioButton;
    radioGrpVal?: string;
  
    focusOption1()
    {
        this.option1.focus();
    }
  
    focusOption2() 
    {
        this.option2.focus();
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { RadioButtonModule } 
    from 'primeng/radiobutton';
import { ButtonModule } from 'primeng/button';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        RadioButtonModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Form RadioButton造型组件