UnoCSS 中文网

主题

自动补齐 ​

¥Autocomplete

UnoCSS 的自动补齐工具：@unocss/autocomplete。这是嵌入在 在线运行 和 VS Code 扩展 中的。

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

用法 ​

¥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 分组。当某些组匹配时，它将用作建议。

    ¥(...|...): logic OR groups using | as the separator. It will be used as suggestions when some of the groups match.

  • <...>：内置简写。目前支持 <num>、<percent> 和 <directions>

    ¥<...>: built-in shorthands. Currently supports <num>, <percent> and <directions>

  • $...：主题推断。例如 $colors 将列出主题的 colors 对象的所有属性。

    ¥$...: theme inferring. For example $colors will list all the properties of the colors object of the theme.

示例 ​

¥Examples

实现例 1 ​

¥Example 1

  • 模板：(border|b)-(solid|dashed|dotted|double|hidden|none)

    ¥Template: (border|b)-(solid|dashed|dotted|double|hidden|none)

  • 输入：b-do

    ¥Input: b-do

  • 建议：b-dotted、b-double

    ¥Suggestions: b-dotted, b-double

实现例 2 ​

¥Example 2

  • 模板：m-<num>

    ¥Template: m-<num>

  • 输入：m-

    ¥Input: m-

  • 建议：m-1、m-2、m-3……

    ¥Suggestions: m-1, m-2, m-3…

实现例 3 ​

¥Example 3

  • 模板：text-$colors

    ¥Template: text-$colors

  • 输入：text-r

    ¥Input: text-r

  • 建议：text-red、text-rose……

    ¥Suggestions: text-red, text-rose…

实现例 4 ​

¥Example 4

对于多个模板：

¥For multiple templates:

  • 模板：['(border|b)-<num>', '(border|b)-<directions>-<num>']

    ¥Template: ['(border|b)-<num>', '(border|b)-<directions>-<num>']

  • 输入：b-

    ¥Input: b-

  • 建议：b-x、b-y、b-1、b-2……

    ¥Suggestions: b-x, b-y, b-1, b-2…

  • 输入：b-x-

    ¥Input: b-x-

  • 建议：b-x-1、b-x-2……

    ¥Suggestions: b-x-1, b-x-2…

许可 ​

¥License