Autocomplete

Autocomplete-verktyg för UnoCSS: @unocss/autocomplete. Detta är inbäddat i playground och VS Code-tillägget.

Användning

Statiska regler

Statiska regler som denna fungerar utan konfiguration.

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

Dynamiska regler

För dynamiska regler kan du tillhandahålla ett extra meta-objekt till regeln och ange en autocomplete-mall.

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

Mallen använder en enkel DSL för att ange autocomplete-förslag. Syntaxen är:

• (...|...): logisk OR-gruppering med | som separator. Det kommer att användas som förslag när någon av grupperna matchar.
• <...>: inbyggda genvägar. Stöder för närvarande <num>, <percent> och <directions>
• $...: tema-härledning. Till exempel kommer $colors att lista alla egenskaper för colors-objektet i temat.

Exempel

Exempel 1

• Mall: (border|b)-(solid|dashed|dotted|double|hidden|none)
• Inmatning: b-do
• Förslag: b-dotted, b-double

Exempel 2

• Mall: m-<num>
• Inmatning: m-
• Förslag: m-1, m-2, m-3…

Exempel 3

• Mall: text-$colors
• Inmatning: text-r
• Förslag: text-red, text-rose…

Exempel 4

För flera mallar:

• Mall: ['(border|b)-<num>', '(border|b)-<directions>-<num>']
• Inmatning: b-
• Förslag: b-x, b-y, b-1, b-2…
• Inmatning: b-x-
• Förslag: b-x-1, b-x-2…

Licens

• MIT License © 2021-PRESENT Anthony Fu