Autouzupełnianie

Narzędzia autouzupełniania dla UnoCSS: @unocss/autocomplete. Jest wbudowane w playground i rozszerzenie VS Code.

Użycie

Reguły statyczne

Reguły statyczne jak ta po prostu zadziałają bez żadnej konfiguracji.

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

Reguły dynamiczne

Dla reguł dynamicznych możesz podać dodatkowy obiekt meta do reguły i określić szablon autouzupełniania.

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

Szablon używa prostego DSL do określania sugestii autouzupełniania. Składnia to:

• (...|...): grupy logiczne LUB używające | jako separatora. Będzie używane jako sugestie, gdy niektóre grupy pasują.
• <...>: wbudowane skróty. Obecnie obsługuje <num>, <percent> i <directions>
• $...: wnioskowanie z motywu. Na przykład $colors wyświetli wszystkie właściwości obiektu colors motywu.

Przykłady

Przykład 1

• Szablon: (border|b)-(solid|dashed|dotted|double|hidden|none)
• Wejście: b-do
• Sugestie: 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

For multiple 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