Autocomplete

Autocomplete utilities voor UnoCSS: @unocss/autocomplete. Dit is ingebed in de playground en de VS Code extension.

Gebruik

Statische regels

Statische regels zoals deze werken gewoon zonder enige configuratie.

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

Dynamische regels

Voor dynamische regels kun je een extra meta object toevoegen aan de regel en het autocomplete template specificeren.

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

Het template gebruikt een eenvoudige DSL om de autocomplete suggesties te specificeren. De syntax is:

• (...|...): logische OR groepen met | als separator. Het zal worden gebruikt als suggesties wanneer sommige van de groepen matchen.
• <...>: ingebouwde shorthands. Ondersteunt momenteel <num>, <percent> en <directions>
• $...: theme inferring. Bijvoorbeeld $colors zal alle properties van het colors object van het thema weergeven.

Voorbeelden

Voorbeeld 1

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

Voorbeeld 2

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

Voorbeeld 3

• Template: text-$colors
• Input: text-r