Angular PrimeNG Avatar模板化

Angular PrimeNG Avatar模板化

Angular PrimeNG是一个开源框架,拥有丰富的原生Angular UI组件,用来做很好的造型,这个框架用来做响应式网站,非常方便。头像是用来表示不同形状和背景颜色的字母、图标和图像的。

这篇文章将展示Angular PrimeNG中的头像模板。通过使用头像模板来改变正常的行为,我们可以定义自定义内容。

方法:让我们创建一个Angular项目并安装PrimeNG UI模块。然后我们将创建一个UI,展示Angular PrimeNG Avatar Templating。

创建React项目:

第1步:要创建一个angular应用程序,你需要通过npm命令在命令行界面安装angular。

npm install -g angular-cli
JavaScript

第2步:现在我们将创建一个angular项目。

ng new project_name
JavaScript

第3步:在创建你的react项目后,进入文件夹执行不同的操作。

cd project_name
JavaScript

第4步:创建Angular应用程序后,使用以下命令安装所需的模块。

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

项目结构:在运行上述步骤中提到的命令后,如果你在编辑器中打开项目,你可以看到如下所示的类似项目结构。用户所做的新组件或代码修改,我们将在源文件夹中完成。

Angular PrimeNG Avatar模板化

运行应用程序的步骤:从项目的根目录使用以下命令运行应用程序。

ng serve --open
JavaScript

例子1:我们正在创建一个显示Angular PrimeNG头像模板的用户界面。在这里,我们在头像内插入一个成功标签。

  • app.component.html
<div style="margin:100px; text-align: center;">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <h3>
        Angular PrimeNG Avatar Templating
    </h3>
    <p-avatar size="xlarge" shape="circle">
        <p-tag value="GFG" 
               severity="success" 
               icon="pi pi-user" 
               [style]="{'margin':'20px'}">
        </p-tag>
    </p-avatar>
</div>
HTML
  • app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AvatarModule } from 'primeng/avatar';
import { TagModule } from 'primeng/tag';
import { AppComponent } from './app.component';
  
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AvatarModule,
        TagModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
JavaScript

输出:现在打开你的浏览器,进入http://localhost:3000/,你会看到以下输出。

Angular PrimeNG Avatar模板化

例子2:我们正在创建一个显示Angular PrimeNG头像模板的用户界面。在这里,我们要在头像里面插入一个进度旋转器和骨架组件。

  • app.component.html
<div style="margin:100px; text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
      
    <h3>
        Angular PrimeNG Avatar Templating
    </h3>
      
    <p-avatar size="xlarge" shape="circle"
        [style]="{'background-color':'green',
        width:'100px',height:'100px',margin:'30px'}">
        <p-skeleton width="5rem" 
            height="5rem" shape="circle">
        </p-skeleton>
    </p-avatar>
    <p-avatar size="xlarge" [style]=
        "{'background-color':'green',
        width:'100px',height:'100px'}">
        <p-progressSpinner strokeWidth="2" 
            fill="#03fc24">
        </p-progressSpinner>
    </p-avatar>
</div>
HTML
  • app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AvatarModule } from 'primeng/avatar';
import { SkeletonModule } from 'primeng/skeleton';
import { AppComponent } from './app.component';
import { ProgressSpinnerModule } from 'primeng/progressspinner';
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AvatarModule,
        ProgressSpinnerModule,
        SkeletonModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
JavaScript

输出:现在打开你的浏览器,进入http://localhost:3000/,你会看到以下输出。

Angular PrimeNG Avatar模板化

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册