Стилизация изображений Angular PrimeNG
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 = [ ]; 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 = [ ]; 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