Tagify preset

এটি অন্যান্য presets-এর জন্য tagify mode সক্ষম করে।

সোর্স কোড

ইনস্টলেশন

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({ /* options */ }),
    // ...other presets
  ],
})

Tagify mode

এই preset তখনই কাজে আসে যখন আপনাকে শুধুমাত্র একটি element-এ একটি unocss rule apply করতে হয়।

<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 mode-এর সাথে, আপনি CSS styles HTML tags-এ embed করতে পারেন:

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

উপরের HTML ঠিক আপনার প্রত্যাশার মতোই কাজ করে।

Prefix-এর সাথে

presetTagify({
  prefix: 'un-'
})

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

অতিরিক্ত properties

আপনি matched rules-এ অতিরিক্ত properties inject করতে পারেন:

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

• Type: string

Tagify variant-এর জন্য ব্যবহার করার prefix।

excludedTags

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

Processing থেকে বাদ দেওয়া tags।

extraProperties

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

Matched rules-এ apply করার জন্য অতিরিক্ত CSS properties।

defaultExtractor

• Type: boolean
• Default: true

Default extractor সক্ষম করুন।