Angular Prime NG Skeleton造型

Angular Prime NG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，这个框架用于制作响应式网站，非常容易。

本文将展示如何在Angular Prime NG中使用Skeleton Component Styling。骨架组件可以作为要显示的材料的替身。

Angular PrimeNG Skeleton造型：

• p-skeleton。它是一个风格化的容器元素
• p-skeleton-circle: 它是一个确定的进度条的造型容器元素。
• p-skeleton-animation-none：它是一个不确定的进度条的造型容器元素。

方法：让我们创建一个Angular项目并安装PrimeNG UI模块。然后我们将创建一个UI，展示Angular PrimeNG骨架造型。

创建React项目：

第1步：要创建一个angular应用程序，你需要通过npm命令安装angular命令行接口。

npm install -g angular-cli

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

ng new project_name

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

cd project_name

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

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

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

Project Structure

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

ng serve --open

例子1：我们正在创建一个显示骨架造型的用户界面。

• app.component.html

<div style="margin:100px">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h3>Angular PrimeNG Skeleton Styling</h3>
    <p-skeleton width="20rem" height="4rem"></p-skeleton>
</div>

• app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SkeletonModule } from 'primeng/skeleton';
import { AppComponent } from './app.component';
  
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        SkeletonModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

• styles.css

.p-skeleton {   
    margin-top:15%;
    border:5px dotted green;
    rotate: 120deg;   
}

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

例子2：我们正在创建一个显示骨架造型的用户界面。

• app.component.html

<div style="margin:100px">
    <h2 style="color: green;">
        GeeksforGeeks
    </h2>
  
    <h3>Angular PrimeNG Skeleton Styling</h3>
      
    <p-skeleton animation="none" width="20rem" 
        height="4rem"></p-skeleton>
      
    <p-skeleton width="8rem" height="8rem" 
        shape="circle"></p-skeleton>
</div>

• app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SkeletonModule } from 'primeng/skeleton';
import { AppComponent } from './app.component';
  
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        SkeletonModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

• styles.css

.p-skeleton-none {   
    margin-top:15%;
    margin-left:2%;
    border:5px dotted yellow;
    rotate: 90deg;   
}
.p-skeleton-circle {
    border:5px dotted green;
}

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