UnoCSS 中文网

Appearance

自动完成功能 ​

UnoCSS 的自动完成工具：@unocss/autocomplete。此工具已嵌入到 在线编辑器 和 VS Code 扩展 中。

使用方法 ​

静态规则 ​

像这样的静态规则无需任何配置即可正常工作。

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

动态规则 ​

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

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

模板使用一种简单的领域特定语言（DSL）来指定自动完成建议。其语法如下：

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

示例 ​

示例 1 ​

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

示例 2 ​

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

示例 3 ​

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

示例 4 ​

对于多个模板：

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

许可证 ​