ui-kit-classnames
compose classnames for components
Last updated 4 years ago by mndvns .
MIT · Original npm · Tarball · package.json
$ cnpm install ui-kit-classnames 
SYNC missed versions from official npm registry.

classnames

compose classnames for components

Nest classnames

import classnames from 'ui-kit-classnames'
var $ = classnames('1', props)

div(class=$('&'))
  div(class=$('>-2A'))
    div(class=$('>>-3A'))
      div(class=$('>>>-4A'))
      div(class=$('>>>-4B'))
    div(class=$('>>-3B'))
  div(class=$('>-2B'))

yields

<div class="1">
  <div class="1-2A">
    <div class="1-2A-3A">
      <div class="1-2A-3A-4A"></div>
      <div class="1-2A-3A-4B"></div>
    </div>
    <div class="1-2A-3B"></div>
  </div>
  <div class="1-2B-2B"></div>
</div>

Append conditional classes

import classnames from 'ui-kit-classnames'
var $ = classnames('StatusComponent', props, {isGlobal1: true, isGlobal2: false})

div(class=$('&'))
  div(class=$('>-foo', {thisIsTrue: true}))
  div(class=$('>-bar', {thisIsFalse: false}))

yields

<div class="StatusComponent StatusComponent-is-global-1">
  <div class="StatusComponent-foo StatusComponent-foo-is-global-1 StatusComponent-foo-this-is-true"></div>
  <div class="StatusComponent-bar StatusComponent-bar-is-global-1"></div>
</div>

Rewrite base

thing.jade

import classnames from 'ui-kit-classnames'
var $ = classnames('Thing', props)

div(class=$('&'))
  div(class=$('>-greeting')) hello

index.jade

import Thing from './thing.jade'

Thing()
Thing(&='AAA')
Thing(&='& BBB CCC')
Thing(&=['&', 'BBB', 'CCC']) // same as the line above

yields

<div class="Thing">
  <div class="Thing-greeting">hello</div>
</div>

<div class="AAA">
  <div class="AAA-greeting">hello</div>
</div>

<div class="Thing BBB CCC">
  <div class="Thing-greeting BBB-greeting CCC-greeting">hello</div>
</div>

<div class="Thing BBB CCC">
  <div class="Thing-greeting BBB-greeting CCC-greeting">hello</div>
</div>

License

MIT

Current Tags

  • 1.0.3                                ...           latest (4 years ago)

2 Versions

  • 1.0.3                                ...           4 years ago
  • 1.0.1                                ...           5 years ago
Maintainers (2)
Downloads
Today 0
This Week 1
This Month 1
Last Day 0
Last Week 0
Last Month 1
Dependencies (0)
None
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |