Wondering what’s next for npm?Check out our public roadmap! »

    bem-style-classnames
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.1 • Public • Published

    used in jsx

    step1: global options

    import getBem from "bem-style-classnames/lib/jsx";
    export default getBem({
    	debug: true,
        elementSep: '__',
        modifierSep: '--',
    });

    step2: local

    import getBem from 'step1: global options';
    const bem = getBem('nav');
    
    const NavWithBem = (props) => {
        return (
            {/* .nav */}
            <nav className={bem()}>
                {/* .nav__container */}
                <ul className={bem('container')}>
                    {/* .nav__item */}
                    <li className={bem('item')}></li>
                    <li className={bem('item')}></li>
                    {/* .nav__item .nav__item--disabled */}
                    <li className={bem('item', 'disabled')}></li>
                    {/* .nav__item .nav__item--active */}
                    <li className={bem('item', {
                            'active': true
                        })}></li>
                </ul>
            </nav>
        );
    };

    used in vue

    step 1: global options

    import getBem from "bem-classnames/lib/vue";
    // step 1: global options
    export default getBem({
        debug: true
    });

    step 2: register local directives

    import getBem from 'step 1: global options';
    
    export default {
        data() {
            return {};
        },
        directives: {
            classnames: getBem("nav"),
        },
        methods: {},
    };

    step 3: use in html

    <template>
        <div v-classnames="[]">
            <!-- nav__item -->
            <div v-classnames="['item']">item1</div>
            <!-- nav__item nav__item--diabled -->
            <div
                v-classnames="[
                    'item',
                    {
                        disabled: true,
                    },
                ]"
            >
                item2
            </div>
        </div>
    </template>

    classnames

    classNames支持多种参数形式,string | Object | Array | undefined | null

    import getClassNames from 'bem-style-classnames/lib/classnames';
    const classNames = getClassNames({
        debug: true
    });
    
    // string
    classNames('foo', 'bar'); // => 'foo bar'
    // Object
    classNames('foo', { bar: true }));; // => 'foo bar'
    // Array
    classNames('foo', ['bar', {}]);; // => 'foo bar'
    // total
    classNames('one', ['two', { 'three': true, 'four': false }], 'five'); // => 'one two three five'

    支持CSSModule

    以classnames为例,其他的类似

    import getClassNames from 'bem-style-classnames/lib/classnames';
    const classNames = getClassNames({
        debug: true
    });
    
    const style = {
        'icon': 'abc',
        'icon--up': 'def',
        'icon--down': 'xyz',
    };
    
    const cls = classNames.bind(style);
    
    cls('icon', 'icon--up'); // => 'abc def'
    cls('not found'); // warn to console

    options

    debug

    调试模式下,如果从style中找不到对应的选项,则提示警告,默认关闭

    const { classNames } = bemClassNames('', { debug: true });
    const style = {
        'icon': 'abc',
        'icon--up': 'def',
        'icon--down': 'xyz',
    };
    
    const cls = classNames.bind(style);
    
    cls('xxx'); // warn to console

    elementSep

    bem中block-name与element-name之间的分割线,默认为__

    const { bem } = bemClassNames('nav', { elementSep: '_' });
    bem('item'); // => nav_item

    modifierSep

    修饰符分割线,默认为--

    const { bem } = bemClassNames('', { modifierSep: '-' });
    bem('icon', 'up'); // => icon icon-up
    
    const { bem } = bemClassNames('', { modifierSep: '---' });
    bem('icon', 'up'); // => icon icon---up

    deleteDuplicate

    是否删除重复的类名,默认为true

    Install

    npm i bem-style-classnames

    DownloadsWeekly Downloads

    5

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    26 kB

    Total Files

    35

    Last publish

    Collaborators

    • avatar