Autocomplete

Orodja za samodejno dopolnjevanje za UnoCSS: @unocss/autocomplete. To je vgrajeno v igrišče in razširitev VS Code.

Uporaba

Statična pravila

Statična pravila, kot je to, bodo delovala brez kakršne koli konfiguracije.

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

Dinamična pravila

Za dinamična pravila lahko zagotovite dodaten predmet meta pravilu in določite predlogo za samodejno dopolnjevanje.

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

Predloga uporablja preprost DSL za določanje predlogov za samodejno dopolnjevanje. Sintaksa je:

• (...|...): logični OR združuje z | kot ločilom. Uporabljen bo kot predlog, ko se ujema eden od združb.
• <...>: vgrajene bližnjice. Trenutno podpira <num>, <percent> in <directions>
• $...: sklepanje teme. Na primer, $colors bo izpisal vse lastnosti predmeta colors teme.

Primeri

Primer 1

• Predloga: (border|b)-(solid|dashed|dotted|double|hidden|none)
• Vnos: b-do
• Predlogi: b-dotted, b-double

Primer 2

• Predloga: m-<num>
• Vnos: m-
• Predlogi: m-1, m-2, m-3…

Primer 3

• Predloga: text-$colors
• Vnos: text-r
• Predlogi: text-red, text-rose…

Primer 4

Za več predlog:

• Predloga: ['(border|b)-<num>', '(border|b)-<directions>-<num>']
• Vnos: b-
• Predlogi: b-x, b-y, b-1, b-2…
• Vnos: b-x-
• Predlogi: b-x-1, b-x-2…

Licenca

• MIT License © 2021-PRESENT Anthony Fu