UnoCSS 中文网

主题

自动补齐 ​

🌐 Autocomplete

UnoCSS 的自动补齐功能：@unocss/autocomplete。它嵌入在 playground 和VS Code 插件中。

用法 ​

🌐 Usage

静态规则 ​

🌐 Static rules

像这样的静态规则无需任何配置即可运行。

🌐 Static rules like this will just work without any configuration.

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

动态规则 ​

🌐 Dynamic rules

对于动态规则，你可以向规则提供一个额外的 meta 对象，并指定自动补齐模板。

🌐 For dynamic rules, you can provide an extra meta object to the rule and specify the autocomplete template.

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

该模板使用简单的 DSL 来指定自动补齐建议。语法如下：

🌐 The template uses a simple DSL to specify the autocomplete suggestions. The syntax is:

  • (...|...)：使用 | 作为分隔符的逻辑 OR 组。当某些组匹配时，它将作为建议使用。
  • <...>：内置简写。目前支持 <num>、<percent> 和 <directions>
  • $...：主题推断。例如，$colors 将列出主题中 colors 对象的所有属性。

示例 ​

🌐 Examples

实现例 1 ​

🌐 Example 1

  • 模板：(border|b)-(solid|dashed|dotted|double|hidden|none)
  • 输入：b-do
  • 建议：b-dotted，b-double

实现例 2 ​

🌐 Example 2

  • 模板：m-<num>
  • 输入：m-
  • 建议：m-1、m-2、m-3…

实现例 3 ​

🌐 Example 3

  • 模板：text-$colors
  • 输入: text-r
  • 建议：text-red、text-rose……

实现例 4 ​

🌐 Example 4

对于多个模板：

🌐 For multiple templates:

  • 模板：['(border|b)-<num>', '(border|b)-<directions>-<num>']
  • 输入：b-
  • 建议：b-x、b-y、b-1、b-2…
  • 输入: b-x-
  • 建议：b-x-1、b-x-2……

许可 ​

🌐 License