الإكمال التلقائي

أدوات الإكمال التلقائي لـ UnoCSS: @unocss/autocomplete. هذا مضمن في ملعب التجربة وامتداد VS Code.

الاستخدام

القواعد الثابتة

القواعد الثابتة مثل هذه ستعمل فقط دون أي تكوين.

rules: [
  ['flex', { display: 'flex' }]
]

القواعد الديناميكية

للحصول على قواعد ديناميكية، يمكنك توفير كائن meta إضافي للقاعدة وتحديد قالب الإكمال التلقائي.

rules: [
  [
    /^m-(\d)$/,
    ([, d]) => ({ margin: `${d / 4}rem` }),
    { autocomplete: 'm-<num>' }, // <-- هذا
  ],
]

يستخدم القالب DSL بسيط لتحديد اقتراحات الإكمال التلقائي. بناء الجملة هو:

• (...|...): مجموعات OR المنطقية باستخدام | كفاصل. سيتم استخدامها كاقتراحات عندما تطابق بعض المجموعات.
• <...>: اختصارات مدمجة. يدعم حالياً <num> و <percent> و <directions>
• $...: استنتاج السمة. على سبيل المثال $colors سيسرد جميع خصائص كائن colors للسمة.

أمثلة

المثال 1

• القالب: (border|b)-(solid|dashed|dotted|double|hidden|none)
• الإدخال: b-do
• الاقتراحات: b-dotted، b-double

المثال 2

• القالب: m-<num>
• الإدخال: m-
• الاقتراحات: m-1، m-2، m-3…

المثال 3

• القالب: text-$colors
• الإدخال: text-r
• الاقتراحات: text-red، text-rose…

المثال 4

لعدة قوالب:

• القالب: ['(border|b)-<num>', '(border|b)-<directions>-<num>']
• الإدخال: b-
• الاقتراحات: b-x، b-y، b-1، b-2…
• الإدخال: b-x-
• الاقتراحات: b-x-1، b-x-2…

الترخيص

• MIT License © 2021-PRESENT Anthony Fu