classnames 一个简单的JavaScript实用程序,用于有条件地连接类名

一个简单的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 });

你可能感兴趣的:(classnames 一个简单的JavaScript实用程序,用于有条件地连接类名)