一个简单的JavaScript实用程序,用于有条件地连接类名。
- 安装
npm install classnames
- 用法
classNames函数接受任意数量的参数,可以是字符串或对象。参数“foo”是{foo: true}的缩写。如果与给定键相关联的值是false,则该键将不包含在输出中。
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'
// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'
var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'
如果你在一个支持计算键的环境中(在ES2015和Babel中可用),你可以使用动态类名:
let buttonType = 'primary';
classNames({ [`btn-${buttonType}`]: true });