首頁 > web前端 > js教程 > 漂亮班

漂亮班

Linda Hamilton
發布: 2025-01-04 15:26:44
原創
809 人瀏覽過

Pretty Class

漂亮班

pretty-class 是一個輕量級實用程式包,旨在簡化在 JavaScript 和 TypeScript 應用程式中產生動態類別名稱的過程。它提供了一種靈活直觀的方式來根據不同的輸入類型有條件地組合類別名稱。

安裝

要安裝pretty-class,請使用npm或yarn:

npm install pretty-class
登入後複製


yarn add pretty-class
登入後複製

用法

導入包

import prettyClass from 'pretty-class';
登入後複製

函數簽名

export type prettyClassTypes = string | Record<string, boolean> | prettyClassTypes[] | undefined | null | false;
const prettyClass: (...args: prettyClassTypes[]) => string;
登入後複製

參數

  • args:類型為 PrettyClassTypes 的可變數量的參數。每個參數可以是:
    • 字串:將字串直接加入到類別列表中。
    • 鍵為類別名稱、值為布林值的物件:如果值為 true,則包含鍵。
    • 陣列:遞歸處理陣列元素。
    • undefined、null 或 false:在輸出中被忽略。

退貨

  • 包含串聯類別名稱的字串。

用法範例

基本字串輸入

const result = prettyClass('class1', 'class2');
console.log(result); // Output: "class1 class2"
登入後複製

條件類

const result = prettyClass({ 'class1': true, 'class2': false, 'class3': true });
console.log(result); // Output: "class1 class3"
登入後複製

嵌套數組

const result = prettyClass(['class1', { 'class2': true }, ['class3', { 'class4': false }]]);
console.log(result); // Output: "class1 class2 class3"
登入後複製

混合輸入

const result = prettyClass('class1', { 'class2': true }, ['class3', null, false]);
console.log(result); // Output: "class1 class2 class3"
登入後複製

好處

  • 輕量級:最少的程式碼佔用。
  • 靈活:支援多種輸入類型。
  • 遞歸:優雅地處理巢狀數組。
  • Typed:為 TypeScript 使用者完全鍵入。

執照

pretty-class 是根據 MIT 許可證獲得許可的。有關更多詳細信息,請參閱許可證文件。


有關貢獻、問題或功能請求,請造訪 GitHub 儲存庫。

以上是漂亮班的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板