Interface BEM<B>

BEM 名称助手，无命名空间版本。

interface BEM<B extends string> {
    b: () => B;
    be: <E extends string>(e: E) => `${B}__${E}`;
    bm: <M extends string>(m: M) => `${B}--${M}`;
    bem: <E extends string, M extends string>(e: E, m: M) => `${B}__${E}--${M}`;
    bs: <S extends string>(s: S) => `${B}-${S}`;
    cb: () => `.-${B}`;
    cbe: <E extends string>(e: E) => `.${B}__${E}`;
    cbm: <M extends string>(m: M) => `.${B}--${M}`;
    cbem: <E extends string, M extends string>(
        e: E,
        m: M,
    ) => `.${B}__${E}--${M}`;
    cbs: <S extends string>(s: S) => `.${B}-${S}`;
    cv: <V extends string>(v: V) => `--${B}-${V}`;
    cvm: <M extends Record<string, any>, S extends Record<any, any>>(
        m: M,
        s?: S,
    ) => { [K in string]: K extends `--${B}-${I}` ? M[I] : never } & S;
    gcv: <V extends string>(v: V) => `var(--${B}-${V})`;
    scv: <V extends string, S extends string>(
        v: V,
        s: S,
    ) => `--${B}-${V}: ${S};`;
}

Type Parameters

B extends string
块类型

Index

Properties

b be bm bem bs cb cbe cbm cbem cbs cv cvm gcv scv

Properties

b

b: () => B

获取 block 类名。

be

be: <E extends string>(e: E) => `${B}__${E}`

获取 block__element 类名。

Type Declaration

- <E extends string>(e: E): `${B}__${E}`
- Type Parameters
  - E extends string
  Parameters
  - e: E
    元素名
  Returns `${B}__${E}`

bm

bm: <M extends string>(m: M) => `${B}--${M}`

获取 block--modifier 类名。

Type Declaration

- <M extends string>(m: M): `${B}--${M}`
- Type Parameters
  - M extends string
  Parameters
  - m: M
    修饰符
  Returns `${B}--${M}`

bem

bem: <E extends string, M extends string>(e: E, m: M) => `${B}__${E}--${M}`

获取 block__element--modifier 类名。

Type Declaration

- <E extends string, M extends string>(e: E, m: M): `${B}__${E}--${M}`
- Type Parameters
  - E extends string
  - M extends string
  Parameters
  - e: E
    元素名
  - m: M
    修饰符
  Returns `${B}__${E}--${M}`

bs

bs: <S extends string>(s: S) => `${B}-${S}`

获取 block-suffix 类名。

Type Declaration

- <S extends string>(s: S): `${B}-${S}`
- Type Parameters
  - S extends string
  Parameters
  - s: S
    后缀
  Returns `${B}-${S}`

cb

cb: () => `.-${B}`

获取 .block CSS 类名。

cbe

cbe: <E extends string>(e: E) => `.${B}__${E}`

获取 .block__element CSS 类名。

Type Declaration

- <E extends string>(e: E): `.${B}__${E}`
- Type Parameters
  - E extends string
  Parameters
  - e: E
    元素名
  Returns `.${B}__${E}`

cbm

cbm: <M extends string>(m: M) => `.${B}--${M}`

获取 .block--modifier CSS 类名。

Type Declaration

- <M extends string>(m: M): `.${B}--${M}`
- Type Parameters
  - M extends string
  Parameters
  - m: M
    修饰符
  Returns `.${B}--${M}`

cbem

cbem: <E extends string, M extends string>(e: E, m: M) => `.${B}__${E}--${M}`

获取 .block__element--modifier CSS 类名。

Type Declaration

- <E extends string, M extends string>(e: E, m: M): `.${B}__${E}--${M}`
- Type Parameters
  - E extends string
  - M extends string
  Parameters
  - e: E
    元素名
  - m: M
    修饰符
  Returns `.${B}__${E}--${M}`

cbs

cbs: <S extends string>(s: S) => `.${B}-${S}`

获取 .block-suffix CSS 类名。

Type Declaration

- <S extends string>(s: S): `.${B}-${S}`
- Type Parameters
  - S extends string
  Parameters
  - s: S
    后缀
  Returns `.${B}-${S}`

cv

cv: <V extends string>(v: V) => `--${B}-${V}`

获取 --block-variable CSS 变量。

Type Declaration

- <V extends string>(v: V): `--${B}-${V}`
- Type Parameters
  - V extends string
  Parameters
  - v: V
    变量名
  Returns `--${B}-${V}`

cvm

cvm: <M extends Record<string, any>, S extends Record<any, any>>(
m: M,
s?: S,
) => { [K in string]: K extends `--${B}-${I}` ? M[I] : never } & S

将给定映射的每个键转换为 --block-key。

Type Declaration

- <M extends Record<string, any>, S extends Record<any, any>>(
  m: M,
  s?: S,
  ): { [K in string]: K extends `--${B}-${I}` ? M[I] : never } & S
- Type Parameters
  - M extends Record<string, any>
  - S extends Record<any, any>
  Parameters
  - m: M
    变量映射
  - Optionals: S
    结果映射
  Returns { [K in string]: K extends `--${B}-${I}` ? M[I] : never } & S

Example

const bem = useBEM('foo')
const style = bem.cvm({
  color: '#fff',
  'bg-color': '#333'
} as const)

// 类型和值: '#fff'
style['--foo-color']
// 类型和值: '#333'
style['--foo-bg-color']

gcv

gcv: <V extends string>(v: V) => `var(--${B}-${V})`

获取 var(--block-variable) CSS 样式值。

Type Declaration

- <V extends string>(v: V): `var(--${B}-${V})`
- Type Parameters
  - V extends string
  Parameters
  - v: V
    变量名
  Returns `var(--${B}-${V})`

scv

scv: <V extends string, S extends string>(v: V, s: S) => `--${B}-${V}: ${S};`

获取 --block-variable: style; CSS 样式内容。

Type Declaration

- <V extends string, S extends string>(v: V, s: S): `--${B}-${V}: ${S};`
- Type Parameters
  - V extends string
  - S extends string
  Parameters
  - v: V
    变量名
  - s: S
    样式值
  Returns `--${B}-${V}: ${S};`

Interface BEM<B>

Type Parameters

Index

Properties

Properties

b

be

Type Declaration

Type Parameters

Parameters

Returns `${B}__${E}`

bm

Type Declaration

Type Parameters

Parameters

Returns `${B}--${M}`

bem

Type Declaration

Type Parameters

Parameters

Returns `${B}__${E}--${M}`

bs

Type Declaration

Type Parameters

Parameters

Returns `${B}-${S}`

cb

cbe

Type Declaration

Type Parameters

Parameters

Returns `.${B}__${E}`

cbm

Type Declaration

Type Parameters

Parameters

Returns `.${B}--${M}`

cbem

Type Declaration

Type Parameters

Parameters

Returns `.${B}__${E}--${M}`

cbs

Type Declaration

Type Parameters

Parameters

Returns `.${B}-${S}`

cv

Type Declaration

Type Parameters

Parameters

Returns `--${B}-${V}`

cvm

Type Declaration

Type Parameters

Parameters

Returns { [K in string]: K extends `--${B}-${I}` ? M[I] : never } & S

Example

gcv

Type Declaration

Type Parameters

Parameters

Returns `var(--${B}-${V})`

scv

Type Declaration

Type Parameters

Parameters

Returns `--${B}-${V}: ${S};`

Settings

On This Page