标签化预设

¥Tagify preset

这使得 标签化模式 能够用于其他预设。

¥This enables the tagify mode for other presets.

源代码

¥Source Code

安装

¥Installation

pnpm

pnpm add -D @unocss/preset-tagify

yarn

yarn add -D @unocss/preset-tagify

npm

npm install -D @unocss/preset-tagify

uno.config.ts

import presetTagify from '@unocss/preset-tagify'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetTagify({ /* options */ }),
    // ...other presets
  ],
})

标签化模式

¥Tagify mode

当你只需要对元素应用单个 unocss 规则时，此预设会派上用场。

¥This preset can come in handy when you only need to apply a single unocss rule to an element.

<span class="text-red"> red text </span>
<div class="flex"> flexbox </div>
I'm feeling <span class="i-line-md-emoji-grin"></span> today!

使用 tagify 模式，你可以将 CSS 样式嵌入到 HTML 标签中：

¥With tagify mode, you can embed CSS styles into HTML tags:

<text-red> red text </text-red>
<flex> flexbox </flex>
I'm feeling <i-line-md-emoji-grin /> today!

上面的 HTML 完全按照你的预期工作。

¥The HTML above works exactly as you would expect.

带前缀

¥With prefix

presetTagify({
  prefix: 'un-'
})

<!-- this will be matched -->
<un-flex> </un-flex>
<!-- this will not be matched -->
<flex> </flex>

额外属性

¥Extra properties

你可以向匹配的规则注入额外的属性：

¥You can inject extra properties to the matched rules:

presetTagify({
  // adds display: inline-block to matched icons
  extraProperties: matched => matched.startsWith('i-')
    ? { display: 'inline-block' }
    : { }
})

presetTagify({
  // extraProperties can also be a plain object
  extraProperties: { display: 'block' }
})

选项

¥Options

prefix

• 类型：string

  ¥Type: string

用于 tagify 变体的前缀。

¥The prefix to use for the tagify variant.

excludedTags

• 类型：string[] | RegExp[]

  ¥Type: string[] | RegExp[]

• 默认：['b', /^h\d+$/, 'table']

  ¥Default: ['b', /^h\d+$/, 'table']

不参与处理的标签。

¥Tags excluded from processing.

extraProperties

• 类型：Record<string, string> | ((matched: string) => Partial<Record<string, string>>)

  ¥Type: Record<string, string> | ((matched: string) => Partial<Record<string, string>>)

应用于匹配规则的额外 CSS 属性。

¥Extra CSS properties to apply to matched rules.

defaultExtractor

• 类型：boolean

  ¥Type: boolean

• 默认：true

  ¥Default: true

启用默认提取器。

¥Enable default extractor.