美文网首页
classnames 一个简单的JavaScript实用程序,用

classnames 一个简单的JavaScript实用程序,用

作者: CodeBub | 来源:发表于2021-09-10 09:50 被阅读0次

    一个简单的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实用程序,用

          本文链接:https://www.haomeiwen.com/subject/tgugwltx.html