إعداد Tagify المسبق

هذا يمكّن وضع tagify للإعدادات المسبقة الأخرى.

الكود المصدري

التثبيت

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({ /* الخيارات */ }),
    // ...إعدادات مسبقة أخرى
  ],
})

وضع Tagify

يمكن أن يكون هذا الإعداد المسبق مفيداً عندما تحتاج فقط إلى تطبيق قاعدة unocss واحدة على عنصر.

<span class="text-red"> نص أحمر </span>
<div class="flex">flexbox</div>
أشعر <span class="i-line-md-emoji-grin"></span> اليوم!

مع وضع tagify، يمكنك تضمين أنماط CSS في علامات HTML:

<text-red> نص أحمر </text-red>
<flex> flexbox </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

البادئة لاستخدامها لمتغير tagify.

excludedTags

• النوع: string[] | RegExp[]
• افتراضي: ['b', /^h\d+$/, 'table']

العلامات المستبعدة من المعالجة.

extraProperties

• النوع: Record<string, string> | ((matched: string) => Partial<Record<string, string>>)

خصائص CSS إضافية لتطبيقها على القواعد المطابقة.

defaultExtractor

• النوع: boolean
• افتراضي: true

تمكين المستخرج الافتراضي.