Angular PrimeNG Inplace 样式

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

Inplace组件是用来为用户提供一个容易做的编辑和显示。当Inplace组件的输出被点击时，内容就会显示出来。Inplace组件的结构类列举如下。

Angular PrimeNG Inplace Styling Classes：

p-place。它是Inplace组件的容器元素。
p-place-display。它是Inplace显示屏的容器元素。
p-place-content。它是Inplace内容的容器元素。

Angular PrimeNG Inplace Styling属性：没有PrimeNG Inplace Styling的属性。

语法:
// File: app.component.html

<p-inplace>
    <ng-template pTemplate="display">
        ...
    </ng-template>
    <ng-template pTemplate="content">
        ...
    </ng-template>
</p-inplace>

// File: app.component.css
:host ::ng-deep .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 Inplace Styling

Project Struture

例子1：在这个例子中，我们使用Inplace组件的 “p-place “造型类，给它一些填充，并将背景颜色设置为绿色。

app.component.html:

<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Angular PrimeNG Inplace Styling</h3>
  
<p-inplace>
    <ng-template pTemplate="display">
        Click to see the Tags
    </ng-template>
    <ng-template pTemplate="content">
        <p-chip label="Data Structures"></p-chip>
        <p-chip label="Algorithms"></p-chip>
        <p-chip label="Compiler Design"></p-chip>
    </ng-template>
</p-inplace>

app.component.css:

:host ::ng-deep .p-inplace {
    padding: 20px;
    background-color: green;
}

app.component.ts:

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

app.module.ts:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { TableModule } from "primeng/table";
import { InplaceModule } from "primeng/inplace";
import { ChipModule } from "primeng/chip";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InplaceModule,
        FormsModule,
        TableModule,
        ChipModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }

输出:

Angular PrimeNG Inplace Styling

例子2：在这个例子中，我们使用 “p-place-display “和 “p-place-content “造型类来设计inplace组件。

app.component.html:

<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Angular PrimeNG Inplace Styling</h3>
  
<p-inplace>
    <ng-template pTemplate="display">
        Reveal the Buttons
    </ng-template>
    <ng-template pTemplate="content">
        <button 
            pButton 
            label="Normal Button"
            class="mr-4">
        </button>
        <button 
            pButton 
            label="Danger Button" 
            class="p-button-danger">
        </button>
    </ng-template>
</p-inplace>

app.component.css:

:host ::ng-deep .p-inplace {
    margin-top: 40px;
}
  
:host ::ng-deep .p-inplace-display {
    padding: 20px;
    border: 5px solid red;
}
  
:host ::ng-deep .p-inplace-content {
    padding: 20px;
    border: 5px solid green;
    border-radius: 10px;
}

app.component.ts:

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

app.module.ts:

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