极客教程Angular PrimeNG表格评级样式组件
Angular PrimeNG是一个开源的库，由原生的Angular UI组件组成，用来做伟大的造型，这个框架用来做响应式网站，非常容易。在这篇文章中，我们将Angular PrimeNG表单评级造型组件。
表格评分组件是一个基于星星图标的选择输入。它通常可以在亚马逊、Flipkart、阿里巴巴等电子商务网站的产品页面看到。表单评级组件的结构风格类列举如下。
Angular PrimeNG表格评级造型类：
- p-rating。该类应用于评级组件的容器元素。
- p-rating-star。该类适用于评级图标元素。
- p-rating-star-on。该类适用于处于开启状态的星形元素。
- p-rating-cancel。该类应用于评级组件的取消图标。
Angular PrimeNG形式评级属性：
- stars。这个属性指定了评级组件中的星星总数。
- cancel。此属性指定是否显示一个取消图标来删除评级。
- disabled:当存在时，此属性禁用评级组件。
- readOnly:当存在时，这个属性使处理只读，即它不能被改变。
- iconOnClass。这是该图标的风格类别。默认值是 “pi pi-star-fill”。
- iconOffClass。它是关闭图标的风格类别。默认值是 “pi pi-star”。
- iconCancelClass。它是取消图标的风格类别。默认值是 “pi pi-ban”。
- iconOnStyle。它是图标的内联风格。默认值为空。
- iconOffStyle。它是关闭图标的内联风格。默认值为空。
- iconCancelStyle。它是取消图标的内联风格。默认值为空。
语法:
// In app.component.html
<p-rating
[(ngModel)]="rateValue1">
</p-rating>
// In app.component.css
:host ::ng-deep .Styling-Class {
// Custom CSS
}
创建Angular应用程序并安装模块：
第1步：使用以下命令创建一个Angular应用程序。
ng new appname
第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第3步：最后，在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：在完成上述步骤后，项目结构将看起来像这样。
Project Structure
例子1：在这个例子中，我们使用上面列出的结构样式类，将星星图标的颜色改为绿色。
app.component.html
<h2 style="color: green">GeeksforGeeks</h2>
<h3>
Angular PrimeNG Form
Rating Styling Component
</h3>
<h4>Rating with Custom Icon Color</h4>
<p-rating [stars]="6"
iconCancelClass="pi pi-times"
[(ngModel)]="rateValue1">
</p-rating>
app.component.css
:host ::ng-deep
.p-rating-icon:not(.p-rating-cancel),
:host ::ng-deep
.p-rating-icon:not(.p-rating-cancel):hover {
color: green !important;
}
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
rateValue1: number = 0;
}
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 { RatingModule } from 'primeng/rating';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
RatingModule,
FormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
例子2：在这个例子中，我们改变了评级图标的大小，并将取消图标的颜色改为蓝色。
app.component.html
<h2 style="color: green">GeeksforGeeks</h2>
<h3>
Angular PrimeNG Form
Rating Styling Component
</h3>
<h4>Default Rating Component</h4>
<p-rating
[stars]="5"
iconCancelClass="pi pi-times"
[(ngModel)]="rateValue1">
</p-rating>
<h4>Rating with Custom Icon Size
and Blue Colored Cancel Icon</h4>
<p-rating
[stars]="5"
class="custom-rate"
iconCancelClass="pi pi-times"
[(ngModel)]="rateValue2">
</p-rating>
app.component.css
:host ::ng-deep .custom-rate .p-rating-icon {
margin-top: 30px;
font-size: 50px;
}
:host ::ng-deep .custom-rate .p-rating-icon.p-rating-cancel,
:host ::ng-deep .custom-rate .p-rating-icon.p-rating-cancel:hover{
color: blue !important;
}
app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ['./app.component.css'],
})
export class AppComponent {
rateValue1: number = 0;
rateValue2: number = 0;
}
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 { RatingModule } from 'primeng/rating';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
RatingModule,
FormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
