Tagify preset

นี้เปิดใช้งาน tagify mode สำหรับ presets อื่นๆ

Source Code

การติดตั้ง

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 */ }),
    // ...presets อื่นๆ
  ],
})

Tagify mode

preset นี้มีประโยชน์เมื่อคุณต้องการใช้ unocss rule เดียวกับ element

<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:

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

HTML ข้างต้นทำงานเหมือนที่คุณคาดหวัง

With prefix

presetTagify({
  prefix: 'un-'
})

<!-- นี่จะถูกจับคู่ -->
<un-flex> </un-flex>
<!-- นี่จะไม่ถูกจับคู่ -->
<flex> </flex>

Extra properties

คุณสามารถ inject extra properties เข้าไปใน rules ที่ถูกจับคู่:

presetTagify({
  // เพิ่ม display: inline-block ให้กับ icons ที่ถูกจับคู่
  extraProperties: matched => matched.startsWith('i-')
    ? { display: 'inline-block' }
    : { }
})

presetTagify({
  // extraProperties สามารถเป็น plain object ได้เช่นกัน
  extraProperties: { display: 'block' }
})

Options

prefix

• Type: string

Prefix ที่จะใช้สำหรับ tagify variant

excludedTags

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

Tags ที่ถูกยกเว้นจากการประมวลผล

extraProperties

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

Extra CSS properties ที่จะใช้กับ rules ที่ถูกจับคู่

defaultExtractor

• Type: boolean
• Default: true

เปิดใช้งาน default extractor