Tagify 預設集

這將為其他預設集啟用 tagify 模式。

原始碼

安裝

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 模式

當您只需要將單個 unocss 規則應用於元素時，此預設集會很方便。

<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 標籤中

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

上面的 HTML 正如您預期的那樣運作。

使用前綴

presetTagify({
  prefix: 'un-'
})

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

額外屬性

您可以將額外屬性注入到匹配的規則中

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' }
})

選項

prefix

• 類型： string

用於 tagify 變體的前綴。

excludedTags

• 類型： string[] | RegExp[]
• 預設值： ['b', /^h\d+$/, 'table']

排除處理的標籤。

extraProperties

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

要應用於匹配規則的額外 CSS 屬性。

defaultExtractor

• 類型： boolean
• 預設值： true

啟用預設提取器。