Maison > interface Web > js tutoriel > Jolie classe

Jolie classe

Linda Hamilton
Libérer: 2025-01-04 15:26:44
original
882 Les gens l'ont consulté

Pretty Class

Jolie classe

pretty-class est un package utilitaire léger conçu pour simplifier le processus de génération de noms de classe dynamiques dans les applications JavaScript et TypeScript. Il fournit un moyen flexible et intuitif de combiner conditionnellement des noms de classe en fonction de différents types d'entrée.

Installation

Pour installer Pretty-Class, utilisez npm ou Yarn :

npm install pretty-class
Copier après la connexion

ou

yarn add pretty-class
Copier après la connexion

Usage

Importation du package

import prettyClass from 'pretty-class';
Copier après la connexion

Signature de fonction

export type prettyClassTypes = string | Record<string, boolean> | prettyClassTypes[] | undefined | null | false;
const prettyClass: (...args: prettyClassTypes[]) => string;
Copier après la connexion

Paramètres

  • args : un nombre variable d'arguments de type PrettyClassTypes. Chaque argument peut être :
    • Une chaîne : ajoute la chaîne directement à la liste des classes.
    • Un objet avec des clés comme noms de classe et des valeurs booléennes : inclut la clé si la valeur est vraie.
    • Un tableau : traite de manière récursive les éléments du tableau.
    • undefined, null ou false : ignoré dans la sortie.

Retours

  • Une chaîne contenant les noms de classes concaténés.

Exemple d'utilisation

Entrée de chaîne de base

const result = prettyClass('class1', 'class2');
console.log(result); // Output: "class1 class2"
Copier après la connexion

Classes conditionnelles

const result = prettyClass({ 'class1': true, 'class2': false, 'class3': true });
console.log(result); // Output: "class1 class3"
Copier après la connexion

Tableaux imbriqués

const result = prettyClass(['class1', { 'class2': true }, ['class3', { 'class4': false }]]);
console.log(result); // Output: "class1 class2 class3"
Copier après la connexion

Entrées mixtes

const result = prettyClass('class1', { 'class2': true }, ['class3', null, false]);
console.log(result); // Output: "class1 class2 class3"
Copier après la connexion

Avantages

  • Léger : empreinte de code minimale.
  • Flexible : prend en charge différents types d'entrée.
  • Récursif : gère les tableaux imbriqués avec élégance.
  • Tapé : Entièrement tapé pour les utilisateurs de TypeScript.

Licence

pretty-class est sous licence MIT. Voir le fichier LICENCE pour plus de détails.


Pour les contributions, les problèmes ou les demandes de fonctionnalités, visitez le référentiel GitHub.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal