Стилизация изображений Angular PrimeNG

Опубликовано: 23 Февраля, 2023

Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. Он предоставляет множество шаблонов, компонентов, дизайн тем, обширную библиотеку иконок и многое другое. В этой статье мы увидим Angular PrimeNG Image Styling .

Компонент Image используется для добавления изображений на страницу angular, а также для добавления к ней некоторых стилей. Image Styling позволяет нам изменять стили по умолчанию и настраивать их соответствующим образом.

Угловой стиль изображения PrimeNG:

p-image: это элемент-контейнер.
p-image-preview-container: это элемент-контейнер с включенным предварительным просмотром.
p-image-preview-indicator : это маскирующий слой над изображением при наведении курсора.
p-image-preview-icon : это значок индикатора предварительного просмотра.
p-image-mask: это контейнер наложения предварительного просмотра.
p-image-toolbar : это контейнер опций преобразования.
p-image-action : это элемент внутри панели инструментов.
p-image-preview : это элемент изображения внутри оверлея предварительного просмотра.

Синтаксис:

<p-image src="Source" 
         alt="img">
</p-image>

Создание приложения Angular и установка модуля:

Создайте приложение Angular, используя следующую команду.

ng new geeks_angular

После создания папки вашего проекта, например, geeks_angular, перейдите к ней с помощью следующей команды.

cd geeks_angular

Установите PrimeNG в указанный вами каталог.

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

Структура проекта : Структура проекта будет выглядеть следующим образом:

Пример 1. В следующем примере мы изменили цвет значка предварительного просмотра.

app.component.html

HTML

<h1 style="color: green; 
           text-align:center;">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG Image Styling</h3>
<p-image [src]="images[1]" 
         alt="Image" 
         width="500px" 
         [preview]="true">
</p-image>

app.component.ts

Javascript

import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
    providers: [MessageService],
})
export class AppComponent {
    images = [
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png",
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png",
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png",
    ];
    constructor(private messageService: MessageService) { }
    ngOnInit() { }
}

app.module.ts

Javascript

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

app.component.css

CSS

:host ::ng-deep .p-image-preview-icon {
    color: black;
    background-color: greenyellow;
    scale: 3;
}

Выход:

Пример 2. В следующем примере мы добавили тень блока к контейнеру изображения.

app.component.ts

HTML

<h1 style="color: green; 
           text-align:center;">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG Image Styling</h3>
<p-image [src]="images[1]"
         alt="Image" 
         width="500px" 
         [preview]="true">
</p-image>

app.component.css

CSS

:host ::ng-deep .p-image-preview-container {
  box-shadow: 5px 5px 20px;
}

app.component.ts

Javascript

import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
    providers: [MessageService],
})
export class AppComponent {
    images = [
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png",
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png",
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png",
    ];
    constructor(private messageService: MessageService) { }
    ngOnInit() { }
}

app.module.ts

Javascript

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

Выход:

Ссылка: https://primefaces.org/primeng/image

Technical Scripter Picked AngularJS

Стилизация изображений Angular PrimeNG

HTML

Javascript

Javascript

CSS

HTML

CSS

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ