Runtime

يوفر UnoCSS runtime بناء CDN يعمل UnoCSS مباشرة في المتصفح. سيكتشف تغييرات DOM وينشئ الأنماط على الطاير.

الاستخدام

أضف السطر التالي إلى index.html الخاص بك:

<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>

يمكن تكوين runtime عن طريق تعريف التكوين قبل تحميل runtime:

<!-- تعريف خيارات unocss... -->
<script>
  window.__unocss = {
    rules: [
      // قواعد مخصصة...
    ],
    presets: [
      // إعدادات مسبقة مخصصة...
    ],
    // ...
  }
</script>
<!-- ... ثم تحميل runtime -->
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>

افتراضياً، يتم تطبيق إعداد Wind3 المسبق.

لا يأتي runtime مع preflights، إذا كنت تريد إعادة تعيين الأنماط، يمكنك إضافة الخاصة بك، أو استخدام واحدة من حزمة Reset.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/normalize.min.css" />
<!-- أو -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css" />

البناءات

تتوفر عدة بناءات لحالات استخدام مختلفة.

Uno (افتراضي)

مع إعداد @unocss/preset-wind3 المسبق:

<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/uno.global.js"></script>

Attributify

مع إعدادات @unocss/preset-wind3 و @unocss/preset-attributify المسبقة:

<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/attributify.global.js"></script>

Mini

مع إعدادات @unocss/preset-mini و @unocss/preset-attributify المسبقة:

<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/mini.global.js"></script>

Core

إذا كنت بحاجة إلى خلط ومطابقة الإعدادات المسبقة، يمكنك تحميل core runtime فقط وتعيين الإعدادات المسبقة يدوياً. جميع الإعدادات المسبقة الرسمية من UnoCSS متاحة. قم بتحميل ما تحتاجه قبل تهيئة core runtime.

<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/preset-icons.global.js"></script>
<script>
  window.__unocss = {
    presets: [
      () =>
        window.__unocss_runtime.presets.presetIcons({
          scale: 1.2,
          cdn: 'https://esm.sh/',
        }),
    ],
  }
</script>
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/core.global.js"></script>

استخدام Bundler

npm i @unocss/runtime

import initUnocssRuntime from '@unocss/runtime'

initUnocssRuntime({ /* الخيارات */ })

يمكن توفير تكوين UnoCSS باستخدام خاصية defaults:

import initUnocssRuntime from '@unocss/runtime'
import config from './uno.config'

initUnocssRuntime({ defaults: config })

يمكن استيراد الإعدادات المسبقة من esm.sh:

import { defineConfig } from '@unocss/runtime'
import presetIcons from 'https://esm.sh/@unocss/preset-icons/browser'
import presetWind3 from 'https://esm.sh/@unocss/preset-wind3'

export default defineConfig({
  presets: [presetWind3(), presetIcons({ cdn: 'https://esm.sh/' })],
})

منع FOUC

نظراً لأن UnoCSS يعمل بعد أن يصبح DOM جاهزاً، قد يكون هناك "وميض محتوى غير منسق" (FOUC) مما قد يؤدي إلى رؤية المستخدم للصفحة كغير منسقة.

استخدم سمة un-cloak مع قواعد CSS مثل [un-cloak] { display: none } لإخفاء العنصر غير المنسق حتى يطبق UnoCSS الأنماط له.

css

[un-cloak] {
  display: none;
}

html

<div class="text-blue-500" un-cloak>سيظهر هذا النص باللون الأزرق فقط.</div>