Interface NBEM<B, N>

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

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

Type Parameters

B extends string
块类型
N extends string
命名空间类型

Index

Properties

b be bm bem bs ns cb cbe cbm cbem cbs cns cv cvm gcv scv nv nvm gnv snv

Properties

b

b: () => `${N}-${B}`

获取 namespace-block 类名。

be

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

获取 namespace-block__element 类名。

Type Declaration

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

bm

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

获取 namespace-block--modifier 类名。

Type Declaration

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

bem

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

获取 namespace-block__element--modifier 类名。

Type Declaration

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

bs

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

获取 namespace-block-suffix 类名。

Type Declaration

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

ns

ns: <S extends string>(s: S) => `${N}-${S}`

获取 namespace-suffix 类名。

Type Declaration

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

cb

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

获取 .namespace-block CSS 类名。

cbe

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

获取 .namespace-block__element CSS 类名。

Type Declaration

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

cbm

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

获取 .namespace-block--modifier CSS 类名。

Type Declaration

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

cbem

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

获取 .namespace-block__element--modifier CSS 类名。

Type Declaration

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

cbs

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

获取 .namespace-block-suffix CSS 类名。

Type Declaration

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

cns

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

获取 .namespace-suffix CSS 类名。

Type Declaration

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

cv

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

获取 --namespace-block-variable CSS 变量。

Type Declaration

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

cvm

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

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

Type Declaration

- <M extends Record<string, any>, S extends Record<any, any>>(
  m: M,
  s?: S,
  ): { [K in string]: K extends `--${N}-${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 `--${N}-${B}-${I}` ? M[I] : never } & S

Example

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

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

gcv

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

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

Type Declaration

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

scv

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

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

Type Declaration

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

nv

nv: <V extends string>(v: V) => `--${N}-${V}`

获取 --namespace-variable CSS 变量。

Type Declaration

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

nvm

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

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

Type Declaration

- <M extends Record<string, any>, S extends Record<any, any>>(
  m: M,
  s?: S,
  ): { [K in string]: K extends `--${N}-${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 `--${N}-${I}` ? M[I] : never } & S

Example

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

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

gnv

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

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

Type Declaration

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

snv

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

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

Type Declaration

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

Interface NBEM<B, N>

Type Parameters

Index

Properties

Properties

b

be

Type Declaration

Type Parameters

Parameters

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

bm

Type Declaration

Type Parameters

Parameters

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

bem

Type Declaration

Type Parameters

Parameters

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

bs

Type Declaration

Type Parameters

Parameters

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

ns

Type Declaration

Type Parameters

Parameters

Returns `${N}-${S}`

cb

cbe

Type Declaration

Type Parameters

Parameters

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

cbm

Type Declaration

Type Parameters

Parameters

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

cbem

Type Declaration

Type Parameters

Parameters

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

cbs

Type Declaration

Type Parameters

Parameters

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

cns

Type Declaration

Type Parameters

Parameters

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

cv

Type Declaration

Type Parameters

Parameters

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

cvm

Type Declaration

Type Parameters

Parameters

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

Example

gcv

Type Declaration

Type Parameters

Parameters

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

scv

Type Declaration

Type Parameters

Parameters

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

nv

Type Declaration