Autocomplete

Autocomplete utilities สำหรับ UnoCSS: @unocss/autocomplete สิ่งนี้ถูกฝังอยู่ใน playground และ VS Code extension

Usage

Static rules

Static rules แบบนี้จะทำงานได้โดยไม่ต้องกำหนดค่าใดๆ

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

Dynamic rules

สำหรับ dynamic rules คุณสามารถให้ object meta เพิ่มเติมกับ rule และระบุ autocomplete template

rules: [
  [
    /^m-(\d)$/,
    ([, d]) => ({ margin: `${d / 4}rem` }),
    { autocomplete: 'm-<num>' }, // <-- ตรงนี้
  ],
]

Template ใช้ DSL แบบง่ายเพื่อระบุคำแนะนำ autocomplete ไวยากรณ์คือ:

• (...|...): logic OR groups โดยใช้ | เป็นตัวแบ่ง จะถูกใช้เป็นคำแนะนำเมื่อบางกลุ่มตรงกัน
• <...>: built-in shorthands ปัจจุบันรองรับ <num>, <percent> และ <directions>
• $...: theme inferring ตัวอย่างเช่น $colors จะแสดงรายการ properties ทั้งหมดของ object colors ของ theme

Examples

Example 1

• Template: (border|b)-(solid|dashed|dotted|double|hidden|none)
• Input: b-do
• Suggestions: b-dotted, b-double

Example 2

• Template: m-<num>
• Input: m-
• Suggestions: m-1, m-2, m-3…

Example 3

• Template: text-$colors
• Input: text-r
• Suggestions: text-red, text-rose…

Example 4

สำหรับหลาย templates:

• Template: ['(border|b)-<num>', '(border|b)-<directions>-<num>']
• Input: b-
• Suggestions: b-x, b-y, b-1, b-2…
• Input: b-x-
• Suggestions: b-x-1, b-x-2…

License

• MIT License © 2021-PRESENT Anthony Fu