Autocomplete

Tiện ích tự động hoàn thành cho UnoCSS: @unocss/autocomplete. Điều này được nhúng vào playground và phần mở rộng VS Code.

Sử dụng

Quy tắc tĩnh

Quy tắc tĩnh như thế này sẽ hoạt động mà không cần bất kỳ cấu hình nào.

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

Quy tắc động

Đối với các quy tắc động, bạn có thể cung cấp một đối tượng meta bổ sung cho quy tắc và chỉ định mẫu tự động hoàn thành.

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

Mẫu sử dụng một DSL đơn giản để chỉ định các đề xuất tự động hoàn thành. Cú pháp là:

• (...|...): nhóm logic OR dùng | làm dấu phân cách. Nó sẽ được dùng làm đề xuất khi một số nhóm khớp.
• <...>: các viết tắt tích hợp. Hiện tại hỗ trợ <num>, <percent> và <directions>
• $...: suy luận chủ đề. Ví dụ $colors sẽ liệt kê tất cả các thuộc tính của đối tượng colors của chủ đề.

Ví dụ

Ví dụ 1

• Mẫu: (border|b)-(solid|dashed|dotted|double|hidden|none)
• Nhập: b-do
• Đề xuất: b-dotted, b-double

Ví dụ 2

• Mẫu: m-<num>
• Nhập: m-
• Đề xuất: m-1, m-2, m-3…

Ví dụ 3

• Mẫu: text-$colors
• Nhập: text-r
• Đề xuất: text-red, text-rose…

Ví dụ 4

Đối với nhiều mẫu:

• Mẫu: ['(border|b)-<num>', '(border|b)-<directions>-<num>']
• Nhập: b-
• Đề xuất: b-x, b-y, b-1, b-2…
• Nhập: b-x-
• Đề xuất: b-x-1, b-x-2…

Giấy phép

• MIT License © 2021-PRESENT Anthony Fu