Пресет тегов

Этот пресет включает режим тегов для других пресетов.

Исходный код

Установка

pnpm

pnpm add -D @unocss/preset-tagify

yarn

yarn add -D @unocss/preset-tagify

npm

npm install -D @unocss/preset-tagify

bun

bun add -D @unocss/preset-tagify

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

export default defineConfig({
  presets: [
    presetTagify({ /* параметры */ }),
    // ...другие пресеты
  ],
})

Режим тегов

Этот пресет может быть полезен, когда вам нужно применить одно правило unocss к элементу.

<span class="text-red"> красный текст </span>
<div class="flex">флексбокс</div>
Я чувствую себя <span class="i-line-md-emoji-grin"></span> сегодня!

С режимом тегов вы можете встраивать CSS-стили непосредственно в HTML-теги:

<text-red> красный текст </text-red>
<flex> флексбокс </flex>
Я чувствую себя <i-line-md-emoji-grin /> сегодня!

HTML выше работает точно так, как вы ожидаете.

С префиксом

presetTagify({
  prefix: 'un-'
})

<!-- это будет сопоставлено -->
<un-flex> </un-flex>
<!-- это не будет сопоставлено -->
<flex> </flex>

Дополнительные свойства

Вы можете добавлять дополнительные свойства к сопоставленным правилам:

presetTagify({
  // добавляет display: inline-block к сопоставленным иконкам
  extraProperties: matched => matched.startsWith('i-')
    ? { display: 'inline-block' }
    : { }
})

presetTagify({
  // extraProperties также может быть простым объектом
  extraProperties: { display: 'block' }
})

Параметры

prefix

• Тип: string

Префикс для варианта тегов.

excludedTags

• Тип: string[] | RegExp[]
• По умолчанию: ['b', /^h\d+$/, 'table']

Теги, исключенные из обработки.

extraProperties

• Тип: Record<string, string> | ((matched: string) => Partial<Record<string, string>>)

Дополнительные CSS-свойства для применения к сопоставленным правилам.

defaultExtractor

• Тип: boolean
• По умолчанию: true

Включить экстрактор по умолчанию.