Autocomplete

Autocomplete utilities for UnoCSS: @unocss/autocomplete. This is embedded in the playground and the VS Code extension.

Usage

静态规则

像这样的静态规则将在没有任何配置的情况下正常工作。

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

动态规则

对于动态规则，您可以为规则提供一个额外的meta对象，并指定自动完成模板。

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

该模板使用一个简单的DSL来指定自动完成建议。语法为：

• (...|...): logic OR groups using | as the separator. It will be used as suggestions when some of the groups match.
• <...>: built-in shorthands. Currently supports <num>, <percent> and <directions>
• $...: theme inferring. For example $colors will list all the properties of the colors object of the theme.

示例

示例 1

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

示例 2

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

示例 3

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

示例 4

多模板:

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

License

• MIT License © 2021-PRESENT Anthony Fu