@44north/classnames 中文文档教程

Question

@44north/classnames

帮助管理应用程序中类名的模块

Install

npm install @44north/classnames

或

yarn add @44north/classnames

Usage

import React from "react";
import { ClassNames } from "@44north/classnames";

const Page = () => <h1 classNames={new ClassNames("text-xl").list()}>Hello World</h1>;

API

.add()

将类添加到实例中

import { ClassNames } from "@44north/classnames";

const list = new ClassNames("a", "b", "c").list();
// list => "a b c"

const list = new ClassNames().add("a", "b", "c").list();
// list => "a b c"

const list = new ClassNames().add(["a", "b", "c"]).list();
// list => "a b c"

const list = new ClassNames().add("a b c").list();
// list => "a b c"

const list = new ClassNames().add(["a b c"]).list();
// list => "a b c"

const list = new ClassNames("a").add(new ClassNames(["b", "c"])).list();
// list => "a b c"

Conditionals

您可以将对象作为添加的一部分传递，类名作为键，值作为布尔值。

const values = {
    a: true,
    b: false,
    c: a !== b
};

const list = new ClassNames(values).list();
// list => "a c"

.remove()

从实例中删除一个类

const list = new ClassNames().add(["a", "b", "c"]).remove("a").list();
// list => "b c"

const list = new ClassNames().add(["a", "b", "c"]).remove(["a", "c"]).list();
// list => "b"

const list = new ClassNames().add(["a", "b", "c"]).remove("a", "c").list();
// list => "b"

const list = new ClassNames().add(["mt-3", "mb-4", "pt-8"]).remove(new RegExp("t-")).list();
// list => "mb-4"

.list() / .toString()

将此实例作为类格式的字符串返回。

const list = new ClassNames().add(["a", "b", "c"]).list();
// list => "b c"

<h1 classNames={new ClassNames("text-xl").list()}>Hello World!</h1>

.find()

允许您搜索特定类

const list = new ClassNames().add(["a", "b", "c"]).find("b");
// list => ["b"]

const list = new ClassNames().add(["mt-3", "mb-4", "pt-8"]).find(new RegExp("b"));
// list => "mb-4"

.isEmpty()

的实例返回如果实例有任何类

const value = new ClassNames(["a", "b", "c"]).isEmpty();
// value => false

.has()

返回如果实例具有提供的值

const value = new ClassNames(["a", "b", "c"]).has("b");
// value => true

const value = new ClassNames(["mt-3", "mb-4", "pt-8"]).has(new RegExp("z-"));
// value => false

.isClassNames()

返回如果提供的值是 ClassName 的实例

const value = new ClassNames().isClassName(["a"]);
// value => false

.length

返回添加到实例的类的数量

const value = new ClassNames(["a", "b", "c"]).length;
// value => 3

Static Methods

• .add() - Alias of new ClassNames().add()
• .isClassNames() - Alias of new ClassNames().isClassNames()