Preset Tagify

Questo abilita la modalità tagify per altri preset.

Codice Sorgente

Installazione

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({ /* opzioni */ }),
    // ...altri preset
  ],
})

Modalità Tagify

Questo preset può essere utile quando devi applicare solo una singola regola unocss a un elemento.

<span class="text-red"> testo rosso </span>
<div class="flex">flexbox</div>
Mi sento <span class="i-line-md-emoji-grin"></span> oggi!

Con la modalità tagify, puoi incorporare stili CSS nei tag HTML:

<text-red> testo rosso </text-red>
<flex> flexbox </flex>
Mi sento <i-line-md-emoji-grin /> oggi!

L'HTML sopra funziona esattamente come ti aspetteresti.

Con prefisso

presetTagify({
  prefix: 'un-'
})

<!-- questo verrà corrisposto -->
<un-flex> </un-flex>
<!-- questo non verrà corrisposto -->
<flex> </flex>

Proprietà extra

Puoi iniettare proprietà extra alle regole corrisposte:

presetTagify({
  // aggiunge display: inline-block alle icone corrisposte
  extraProperties: matched => matched.startsWith('i-')
    ? { display: 'inline-block' }
    : { }
})

presetTagify({
  // extraProperties può anche essere un oggetto semplice
  extraProperties: { display: 'block' }
})

Opzioni

prefix

• Tipo: string

Il prefisso da usare per la variante tagify.

excludedTags

• Tipo: string[] | RegExp[]
• Predefinito: ['b', /^h\d+$/, 'table']

Tag esclusi dall'elaborazione.

extraProperties

• Tipo: Record<string, string> | ((matched: string) => Partial<Record<string, string>>)

Proprietà CSS extra da applicare alle regole corrisposte.

defaultExtractor

• Tipo: boolean
• Predefinito: true

Abilita l'estrattore predefinito.