текст перекладу
Зміст
· Додати стандартну тему (OOTB)
· Налаштувати стандартну тему (OOTB)
· Налаштування компонента: MegaMenu
У цій статті ми розглянемо, як налаштувати CSS для компонента PrimeNG в Angular додатку. Якщо ви новачок у PrimeNG, я рекомендую ознайомитися з їх посібником з установки. Для тих, хто використовує NX з Angular, можете звернутися до моєї попередньої статті про конфігурацію PrimeNG та Tailwind в NX Angular додатку.
Давайте розглянемо, як додати та налаштувати компонент MegaMenu для нашого додатку. Детальніше про компонент MegaMenu можна дізнатися в документації PrimeNG MegaMenu.
Додати стандартну тему (OOTB)
Aura, Material, Lara і Nora — це доступні вбудовані варіанти тем.
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { appRoutes } from './app.routes';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(appRoutes),
provideAnimationsAsync(),
providePrimeNG({ theme: { preset: Aura } })
],
};
Давайте додамо компонент Button та Rating з PrimeNG до нашого додатку та подивимося, як вони виглядають. Це дасть нам краще розуміння загальної теми та стилізації в дії.
Налаштувати стандартну тему (OOTB)
Утиліта definePreset використовується для налаштування існуючого пресету під час налаштування PrimeNG. Перший параметр — це пресет для налаштування, а другий — це дизайн токени для переоприділення.
Я скопіював наступне з тут.
//mypreset.ts
import { definePreset } from '@primeng/themes';
import Aura from '@primeng/themes/aura';
const MyPreset = definePreset(Aura, {
semantic: {
primary: {
50: '{zinc.50}',
100: '{zinc.100}',
200: '{zinc.200}',
300: '{zinc.300}',
400: '{zinc.400}',
500: '{zinc.500}',
600: '{zinc.600}',
700: '{zinc.700}',
800: '{zinc.800}',
900: '{zinc.900}',
950: '{zinc.950}'
},
colorScheme: {
light: {
primary: {
color: '{zinc.950}',
inverseColor: '#ffffff',
hoverColor: '{zinc.900}',
activeColor: '{zinc.800}'
},
highlight: {
background: '{zinc.950}',
focusBackground: '{zinc.700}',
color: '#ffffff',
focusColor: '#ffffff'
}
},
dark: {
primary: {
color: '{zinc.50}',
inverseColor: '{zinc.950}',
hoverColor: '{zinc.100}',
activeColor: '{zinc.200}'
},
highlight: {
background: 'rgba(250, 250, 250, .16)',
focusBackground: 'rgba(250, 250, 250, .24)',
color: 'rgba(255,255,255,.87)',
focusColor: 'rgba(255,255,255,.87)'
}
}
}
}
});
export MyPreset;
Замінимо колір zinc на більш яскравий. Я обираю фіолетовий. Замінимо всі випадки zinc на фіолетовий.
текст перекладу
Ви можете знайти повний список доступних кольорів тут.
const customPreset = definePreset(Aura, {
semantic: {
primary: {
50: '{purple.50}',
100: '{purple.100}',
200: '{purple.200}',
300: '{purple.300}',
400: '{purple.400}',
500: '{purple.500}',
600: '{purple.600}',
700: '{purple.700}',
800: '{purple.800}',
900: '{purple.900}',
950: '{purple.950}',
},
colorScheme: {
light: {
primary: {
color: '{purple.800}',
inverseColor: '#ffffff',
hoverColor: '{purple.900}',
activeColor: '{purple.800}',
},
highlight: {
background: '{purple.950}',
focusBackground: '{purple.700}',
color: '#ffffff',
focusColor: '#ffffff',
},
},
dark: {
primary: {
color: '{purple.50}',
inverseColor: '{purple.950}',
hoverColor: '{purple.100}',
activeColor: '{purple.200}',
},
highlight: {
background: 'rgba(250, 250, 250, .16)',
focusBackground: 'rgba(250, 250, 250, .24)',
color: 'rgba(255,255,255,.87)',
focusColor: 'rgba(255,255,255,.87)',
},
},
},
},
});
Використовуйте налаштований пресет замість стандартного out-of-the-box (OOTB) у вашому app.config.ts.
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { appRoutes } from './app.routes';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import customPreset from './custom.preset';
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(appRoutes),
provideAnimationsAsync(),
providePrimeNG({ theme: { preset: customPreset }})
],
};
Після того, як зміни в темі будуть застосовані, давайте перевіримо, як вони виглядають. Зміни, які ми внесли, застосовуються до всіх компонентів.
Налаштування компонента: MegaMenu Component
Почнемо з інтеграції компонента MegaMenu до нашого додатку.
текст перекладу
Нижче наведена HTML-структура, яку ми використовували для MegaMenu:
{{ item.label }}
{{ item.label }}
{{ item.subtext }}
{{ item.subtext }}
Ось відповідний код TypeScript для визначення елементів MegaMenu:
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MegaMenuItem } from 'primeng/api';
import { MegaMenu } from 'primeng/megamenu';
import { ButtonModule } from 'primeng/button';
@Component({
selector: 'app-root',
imports: [MegaMenu, ButtonModule, CommonModule],
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
items: MegaMenuItem[] | undefined;
ngOnInit() {
this.items = [
{
label: 'Home',
icon: 'pi pi-home',
root: true,
},
{
label: 'Projects',
icon: 'pi pi-folder',
root: true,
},
{
label: 'Templates',
icon: 'pi pi-database',
root: true,
},
];
}
}
Ця конфігурація створює вертикальне меню MegaMenu з трьома головними елементами: Home, Projects та Templates. Кожен елемент має іконку та мітку.
Як ми можемо змінити колір іконки та мітки, а також фон, коли вони знаходяться в стані фокусу?
Колір та фон оновлені за допомогою ::ng-deep
Щоб переопреділяти стилі компонентів PrimeNG, використання стандартного CSS у вашому компоненті не працюватиме, оскільки компоненти PrimeNG інкапсульовані в своїх стилях. У вас є два варіанти для застосування ваших кастомних стилів:
1. Ви можете використовувати селектор ::ng-deep, щоб націлитися на стилі всередині компонентів PrimeNG і переопреділяти їх.
2. Або додати CSS в глобальні стилі.
Наступний CSS допоможе нам досягти результату, використовуючи ::ng-deep.
:host ::ng-deep {
.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover{
background-color: #f5f5f5;
color: purple;
}
.p-megamenu-item-content{
color: purple;
}
}
Але чи є кращий спосіб досягти цього?
Ми можемо використовувати дизайн-токени конкретного компонента. Однак, переопреділяти токени компонентів не є рекомендованим підходом, якщо ви створюєте власний стиль, тоді краще створити власний пресет.
текст перекладу
Ця конфігурація є глобальною і застосовується до всіх компонентів MegaMenu. Якщо вам потрібно налаштувати конкретний компонент на сторінці локально, перегляньте розділ Scoped CSS.
import { definePreset } from '@primeng/themes';
import Aura from '@primeng/themes/aura';
const customPreset = definePreset(Aura, {
components: {
megamenu: {
colorScheme: {
light: {
item: {
color: '{purple.700}',
focus: {
background: '{purple.50}',
color: '{purple.700}',
},
},
},
dark: {
item: {
color: '{purple.700}',
},
},
},
},
},
semantic: {
primary: {
50: '{purple.50}',
100: '{purple.100}',
....
},
colorScheme: {
...
},
dark: {
....
},
},
});
export default customPreset;
Ви можете отримати токени кожного компонента з документації компонента. Дизайн-токени MegaMenu.
Перекладено з: PrimeNG Theme Customization — v19 in Angular.