Autocomplete

Utilități Autocomplete pentru UnoCSS: @unocss/autocomplete. Acesta este încorporat în playground și extensia VS Code.

Utilizare

Reguli statice

Regulile statice ca aceasta vor funcționa fără nicio configurație.

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

Reguli dinamice

Pentru regulile dinamice, puteți furniza un obiect suplimentar meta la regulă și specifica șablonul autocomplete.

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

Șablonul folosește un DSL simplu pentru a specifica sugestiile de autocomplete. Sintaxa este:

• (...|...): grupuri logice SAU folosind | ca separator. Va fi folosit ca sugestii când unele dintre grupuri se potrivesc.
• <...>: prescurtări încorporate. În prezent suportă <num>, <percent> și <directions>
• $...: inferare din temă. De exemplu, $colors va lista toate proprietățile obiectului colors din temă.

Exemple

Exemplu 1

• Șablon: (border|b)-(solid|dashed|dotted|double|hidden|none)
• Input: b-do
• Sugestii: b-dotted, b-double

Exemplu 2

• Șablon: m-<num>
• Input: m-
• Sugestii: m-1, m-2, m-3…

Exemplu 3

• Șablon: text-$colors
• Input: text-r
• Sugestii: text-red, text-rose…

Exemplu 4

Pentru șabloane multiple:

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

Licență

• Licență MIT © 2021-PREZENT Anthony Fu