Tagify preset

Toto umožňuje režim tagify pre ostatné presety.

Zdrojový kód

Inštalácia

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({ /* možnosti */ }),
    // ...ostatné presety
  ],
})

Režim Tagify

Tento preset sa môže hodiť, keď potrebujete aplikovať iba jedno pravidlo unocss na prvok.

<span class="text-red"> červený text </span>
<div class="flex">flexbox</div>
Dnes sa cítim <span class="i-line-md-emoji-grin"></span>!

S režimom tagify môžete vložiť CSS štýly do HTML tagov:

<text-red> červený text </text-red>
<flex> flexbox </flex>
Dnes sa cítim <i-line-md-emoji-grin />!

HTML vyššie funguje presne tak, ako by ste očakávali.

S prefixom

presetTagify({
  prefix: 'un-'
})

<!-- toto bude spárované -->
<un-flex> </un-flex>
<!-- toto nebude spárované -->
<flex> </flex>

Extra vlastnosti

Môžete vložiť extra vlastnosti do spárovaných pravidiel:

presetTagify({
  // pridá display: inline-block do spárovaných ikon
  extraProperties: matched => matched.startsWith('i-')
    ? { display: 'inline-block' }
    : { }
})

presetTagify({
  // extraProperties môže byť aj obyčajný objekt
  extraProperties: { display: 'block' }
})

Možnosti

prefix

• Type: string

Prefix na použitie pre variant tagify.

excludedTags

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

Tagy vylúčené zo spracovania.

extraProperties

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

Extra CSS vlastnosti na aplikovanie na spárované pravidlá.

defaultExtractor

• Type: boolean
• Default: true

Povoliť predvolený extractor.