UnoCSSTagify 预设
该预设可为其他预设启用 标签化模式。
安装
bash
pnpm add -D @unocss/preset-tagifypnpm add -D @unocss/preset-tagifybash
yarn add -D @unocss/preset-tagifyyarn add -D @unocss/preset-tagifybash
npm install -D @unocss/preset-tagifynpm install -D @unocss/preset-tagifyts
// uno.config.ts
import { defineConfig } from 'unocss'
import presetTagify from '@unocss/preset-tagify'
export default defineConfig({
presets: [
presetTagify({
/* options */
})
// ...other presets
]
})// uno.config.ts
import { defineConfig } from 'unocss'
import presetTagify from '@unocss/preset-tagify'
export default defineConfig({
presets: [
presetTagify({
/* options */
})
// ...other presets
]
})标签化模式
当您只需要将单个 unocss 规则应用于元素时，该预设会非常有用。
html
<span class="text-red">red text</span>
<div class="flex">flexbox</div>
I'm feeling
<span class="i-line-md-emoji-grin"></span>
today!<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 标签：
html
<text-red>red text</text-red>
<flex>flexbox</flex>
I'm feeling
<i-line-md-emoji-grin />
today!<text-red>red text</text-red>
<flex>flexbox</flex>
I'm feeling
<i-line-md-emoji-grin />
today!上面的 HTML 与您预期的完全一样。
带前缀
js
presetTagify({
prefix: 'un-'
})presetTagify({
prefix: 'un-'
})html
<!-- this will be matched -->
<un-flex></un-flex>
<!-- this will not be matched -->
<flex></flex><!-- this will be matched -->
<un-flex></un-flex>
<!-- this will not be matched -->
<flex></flex>额外属性
您可以将额外的属性注入到匹配规则中：
js
presetTagify({
// adds display: inline-block to matched icons
extraProperties: matched =>
matched.startsWith('i-') ? { display: 'inline-block' } : {}
})presetTagify({
// adds display: inline-block to matched icons
extraProperties: matched =>
matched.startsWith('i-') ? { display: 'inline-block' } : {}
})js
presetTagify({
// extraProperties can also be a plain object
extraProperties: { display: 'block' }
})presetTagify({
// extraProperties can also be a plain object
extraProperties: { display: 'block' }
})Options
prefix
- Type:
string
Tagify 变量使用的前缀。
excludedTags
- Type:
string[] | RegExp[] - Default:
['b', /^h\d+$/, 'table']
要排除处理的标签。
extraProperties
- Type:
Record<string, string> | ((matched: string) => Partial<Record<string, string>>)
要应用于匹配规则的额外 CSS 属性。
defaultExtractor
- Type:
boolean - Default:
true
启用默认提取器。