Basculement de thème sans effort dans les applications autonomes angulaires avec PrimeNG-js tutoriel-php.cn

Basculement de thème sans effort dans les applications autonomes angulaires avec PrimeNG

王林

Libérer： 2024-07-17 11:26:48

original

829 Les gens l'ont consulté

Theme toggle PrimeNG

Alors que je me plongeais dans PrimeNG et PrimeFlex pour ma récente application autonome Angular 17 avec SSR, un aspect s'est vraiment démarqué : les thèmes intégrés. Contrairement à Material UI, PrimeNG propose une délicieuse sélection de thèmes prédéfinis que vous pouvez facilement configurer dans votre application.

Mais la vraie cerise sur le gâteau ? Configurer un sélecteur de thème pour permettre aux utilisateurs de personnaliser leur expérience est un jeu d'enfant avec seulement quelques lignes de code. Allons-y !

Amorcer votre application pour les thèmes :

Installation : commencez par installer PrimeNG à l'aide de npm ou de fil.

npm install primeng --save

Incluez les styles dans angulaire.json :

Assurez-vous que votre fichier angulaire.json inclut les styles nécessaires. Vous trouverez ci-dessous la structure de mes dossiers et son inclusion dans angulaire.json.

Folder Structure

Dans chaque feuille de style, j'ai importé des thèmes PrimeNG intégrés à partir de ressources.

 //angular.json 
 "styles": [
              "src/styles.css",
              {
                "input": "src/app/styles/lara-dark-teal.scss",
                "bundleName": "lara-dark-teal",
                "inject": false
              },
              {
                "input": "src/app/styles/lara-light-teal.scss",
                "bundleName": "lara-light-teal",
                "inject": false
              }
            ],

Copier après la connexion

Cette configuration garantit que les feuilles de style sont regroupées dans votre dossier de distribution final pendant la construction.

Définition du thème par défaut (index.html) :

Inclure une feuille de style : dans votre fichier index.html, intégrez la feuille de style du thème par défaut que vous avez choisi et attribuez-lui un identifiant pour l'accès au service :

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Theme Switcher</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link id="app-theme" rel="stylesheet" type="text/css" href="lara-light-teal.css">

  <link rel="stylesheet" href="https://unpkg.com/primeflex@latest/primeflex.css">
</head>

<body class="">
  <app-root></app-root>
</body>
</html>

Copier après la connexion

Changement de thème dynamique avec un service :

Créer un service thématique : construisez un service pour gérer les changements de thème. Injectez-le dans votre composant racine pour une accessibilité à l'échelle de l'application :

//themes.service.ts
import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable({
    providedIn: 'root',
})
export class ThemeService {

    constructor(@Inject(DOCUMENT) private document: Document) {}

    switchTheme(theme: string) {

        let themeLink = this.document.getElementById('app-theme') as HTMLLinkElement;

        if (themeLink) {
            themeLink.href = theme + '.css';
        }
    }
}

Copier après la connexion

Utilisation du service dans Component :

Injecter Service et Document : Au sein de votre composant, injectez le ThemeService et l'objet Document :

  constructor(private themeService: ThemeService) {

  }
  checked: boolean = false;

  changeTheme() {
    let theme = (this.checked) ? "lara-dark-teal" : "lara-light-teal"
    this.themeService.switchTheme(theme);

  }

}

Copier après la connexion

Modèle avec p-toggle : utilisez le composant p-toggle de PrimeNG pour afficher le bouton bascule. Liez son état à une variable booléenne (cochée) et déclenchez la méthode changeTheme() au clic. Utilisez des pi-icônes (icônes PrimeNG) pour un attrait visuel.

<p-toolbar styleClass="bg-primary shadow-2  opacity-80">

    <div class="flex-grow">
        My Theme Switcher
    </div>
    <p-toggleButton styleClass="bg-primary shadow-2 text-white" [(ngModel)]="checked" onIcon="pi pi-sun"
        offIcon="pi pi-moon" (click)="changeTheme()" />

</p-toolbar>

Copier après la connexion

Séparation des préoccupations : Le service se concentre sur la gestion des thèmes, en gardant votre composant propre et ciblé.

Lisibilité améliorée : Le code est bien structuré et facile à comprendre pour les développeurs de tous niveaux.

Délice des développeurs : PrimeNG rationalise le processus, vous permettant de créer une expérience de changement de thème transparente dans votre application Angular 17.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Basculement de thème sans effort dans les applications autonomes angulaires avec PrimeNG

Incluez les styles dans angulaire.json :