Autocompletamento

Utility di autocompletamento per UnoCSS: @unocss/autocomplete. Questo è incorporato nel playground e nell'estensione VS Code.

Utilizzo

Regole statiche

Regole statiche come questa funzioneranno senza alcuna configurazione.

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

Regole dinamiche

Per le regole dinamiche, puoi fornire un oggetto meta aggiuntivo alla regola e specificare il template di autocompletamento.

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

Il template usa una semplice DSL per specificare i suggerimenti di autocompletamento. La sintassi è:

• (...|...): gruppi logici OR usando | come separatore. Verrà usato come suggerimenti quando alcuni dei gruppi corrispondono.
• <...>: scorciatoie integrate. Attualmente supporta <num>, <percent> e <directions>
• $...: inferenza del tema. Ad esempio $colors elencherà tutte le proprietà dell'oggetto colors del tema.

Esempi

Esempio 1

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

Esempio 2

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

Esempio 3

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

Esempio 4

Per più template:

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

Licenza

• MIT License © 2021-PRESENT Anthony Fu