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

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

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

التثبيت

pnpm

pnpm add -D @unocss/preset-attributify

yarn

yarn add -D @unocss/preset-attributify

npm

npm install -D @unocss/preset-attributify

bun

bun add -D @unocss/preset-attributify

import presetAttributify from '@unocss/preset-attributify'

export default defineConfig({
  presets: [
    presetAttributify({ /* خيارات الإعداد المسبق */ }),
    // ...
  ],
})

TIP

يتم تضمين هذا الإعداد المسبق في حزمة unocss، يمكنك أيضاً استيراده من هناك:

import { presetAttributify } from 'unocss'

وضع Attributify

تخيل أن لديك هذا الزر باستخدام أدوات Tailwind CSS. عندما تصبح القائمة أطول، يصبح من الصعب حقاً قراءتها وصيانتها.

<button
  class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600"
>
  Button
</button>

مع وضع attributify، يمكنك فصل الأدوات إلى سمات:

<button
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

على سبيل المثال، يمكن تجميع text-sm text-white في text="sm white" دون تكرار نفس البادئة.

الإشارة الذاتية للبادئة

للأدوات مثل flex و grid و border، التي لها أدوات مماثلة للبادئة، يتم توفير قيمة خاصة ~.

على سبيل المثال:

<button class="border border-red">Button</button>

يمكن كتابتها كـ:

<button border="~ red">Button</button>

Attributify بدون قيمة

بالإضافة إلى وضع attributify في Windi CSS، يدعم هذا الإعداد المسبق أيضاً السمات بدون قيمة.

على سبيل المثال،

<div class="m-2 rounded text-teal-400" />

يمكن الآن أن تكون

<div m-2 rounded text-teal-400 />

INFO

ملاحظة: إذا كنت تستخدم JSX، قد يتم تحويل <div foo> إلى <div foo={true}> مما يجعل CSS المُنشأ من UnoCSS يفشل في مطابقة السمات. لحل هذه المشكلة، قد ترغب في تجربة transformer-attributify-jsx مع هذا الإعداد المسبق.

تعارضات الخصائص

إذا تعارض اسم وضع السمات مع خصائص العناصر أو المكونات، يمكنك إضافة بادئة un- لتكون محددة لوضع attributify في UnoCSS.

على سبيل المثال:

<a text="red">هذا يتعارض مع خاصية `text` للروابط</a>
<!-- إلى -->
<a un-text="red">لون النص إلى الأحمر</a>

البادئة اختيارية افتراضياً، إذا كنت تريد فرض استخدام البادئة، اضبط

presetAttributify({
  prefix: 'un-',
  prefixedOnly: true, // <--
})

يمكنك أيضاً تعطيل المسح لسمات معينة عن طريق:

presetAttributify({
  ignoreAttributes: [
    'text'
    // ...
  ]
})

دعم TypeScript (JSX/TSX)

أنشئ shims.d.ts بالمحتوى التالي:

افتراضياً، يتضمن النوع السمات الشائعة من @unocss/preset-wind3. إذا كنت بحاجة إلى سمات مخصصة، راجع مصدر النوع لتنفيذ نوعك الخاص.

Vue

منذ Volar 0.36، أصبح الآن صارماً للسمات غير المعروفة. للانسحاب، يمكنك إضافة الملف التالي إلى مشروعك:

declare module '@vue/runtime-dom' {
  interface HTMLAttributes {
    [key: string]: any
  }
}
declare module '@vue/runtime-core' {
  interface AllowedComponentProps {
    [key: string]: any
  }
}
export {}

React

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module 'react' {
  interface HTMLAttributes<T> extends AttributifyAttributes {}
}

Vue 3

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module '@vue/runtime-dom' {
  interface HTMLAttributes extends AttributifyAttributes {}
}

SolidJS

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module 'solid-js' {
  namespace JSX {
    interface HTMLAttributes<T> extends AttributifyAttributes {}
  }
}

Svelte & SvelteKit

declare namespace svelteHTML {
  import type { AttributifyAttributes } from '@unocss/preset-attributify'

  type HTMLAttributes = AttributifyAttributes
}

Astro

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare global {
  namespace astroHTML.JSX {
    interface HTMLAttributes extends AttributifyAttributes { }
  }
}

Preact

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module 'preact' {
  namespace JSX {
    interface HTMLAttributes extends AttributifyAttributes {}
  }
}

Attributify مع البادئة

import type { AttributifyNames } from '@unocss/preset-attributify'

type Prefix = 'uno:' // غيّره إلى بادئتك

interface HTMLAttributes extends Partial<Record<AttributifyNames<Prefix>, string>> {}

الخيارات

strict

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

إنشاء CSS فقط لـ attributify أو class.

prefix

• النوع: string
• افتراضي: 'un-'

البادئة لوضع attributify.

prefixedOnly

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

مطابقة السمات ذات البادئة فقط.

nonValuedAttribute

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

دعم مطابقة السمات بدون قيمة.

ignoreAttributes

• النوع: string[]

قائمة السمات التي سيتم تجاهلها من الاستخراج.

trueToNonValued

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

ستطابق السمات بدون قيمة أيضاً إذا كانت القيمة الفعلية الممثلة في DOM هي true. يوجد هذا الخيار لدعم الأطر التي ترمّز السمات بدون قيمة كـ true. سيؤدي تمكين هذا الخيار إلى كسر القواعد التي تنتهي بـ true.

الاعتمادات

الفكرة الأولية من @Tahul و @antfu. التنفيذ السابق في Windi CSS بواسطة @voorjaar.