@zarm-design/bem
Usage in JS
import { createBEM } from '@zarm-design/bem';
const bem = createBEM('button', { prefixCls: 'za' });
bem(); // za-button
bem([{ loading: true }, 'customClass']); // za-button za-button--loading customClass
bem('text'); // za-button__text
bem('text', ['customClass']); // za-button__text customClass
bem('text', [
{
theme: 'primary',
block,
loading: true,
disabled: false,
},
'customClass',
]); // za-button__text za-button__text--theme-primary za-button__text--block za-button__text--loading customClassUsage in SASS
Input
@import '~@zarm-design/bem/sass';
// set classname prefix
$prefixCls: za;
@include b(button) {
height: 40px;
@include m(primary) {
background: #00bc70;
@include m(active) {
opacity: 0.9;
@include b(icon) {
display: inline-block;
}
}
}
@include e(text) {
color: #fff;
@include m(disabled) {
color: #ddd;
cursor: not-allowed;
}
}
}Output
.za-button {
height: 40px;
}
.za-button--primary {
background: #00bc70;
}
.za-button--primary.za-button--active {
opacity: 0.9;
}
.za-button--primary.za-button--active .za-icon {
display: inline-block;
}
.za-button__text {
color: #fff;
}
.za-button__text--disabled {
color: #ddd;
cursor: not-allowed;
}API
const createBEM: (
name: string,
config?: BEMConfig,
) => (element: string | ModifierType, modifiers?: ModifierType) => string;ModifierType
type ModifierType = (string | undefined | { [x: string]: boolean | string | undefined })[];BEMConfig
interface BEMConfig {
prefixCls?: string;
blockSeparator?: string;
elementSeparator?: string;
modifierSeparator?: string;
modifierValueSeparator?: string;
}| 属性 | 对应 SASS 变量 | 类型 | 默认值 | 说明 |
|---|---|---|---|---|
| prefixCls | $prefixCls | string | '' | 类名前缀 |
| blockSeparator | $blockSeparator | string | '-' | 模块连接符 |
| elementSeparator | $elementSeparator | string | '__' | 元素连接符 |
| modifierSeparator | $modifierSeparator | string | '--' | 修饰符连接符 |
| modifierValueSeparator | - | string | '-' | 修饰符值连接符 |