Meta-tags
Bên trong thẻ <head>, các thẻ <meta> cung cấp thông tin về tiêu đề và nhà xuất bản, và cho phép nhận đầu vào của người dùng. Có sáu điều khiển có thể tùy chỉnh: thanh trượt số, bộ chọn sắc độ, công tắc boolean, bộ chọn màu, trường văn bản và danh sách. Mỗi điều khiển yêu cầu bốn thuộc tính cơ bản, cũng như các thuộc tính dành riêng cho điều khiển đó.
| Thuộc tính cơ bản | Mô tả | |
|---|---|---|
| property | Xác định tên biến được sử dụng trong code | |
| label | Nhãn văn bản hiển thị cho người dùng của điều khiển | |
| type | Chỉ định loại dữ liệu: number, hue, boolean hoặc color | |
| default | Đặt giá trị ban đầu của điều khiển | |
| tooltip* | (*Tùy chọn) Hiển thị mô tả ngắn khi người dùng di chuột qua điều khiển |
Thanh trượt số
Phần tiêu đề “Thanh trượt số”Thanh trượt số cho phép người dùng chọn một số nguyên trong một phạm vi được chỉ định. Thường được sử dụng để điều chỉnh các tham số như tốc độ animation, số lượng hình dạng được hiển thị, hoặc tần suất hiệu ứng được kích hoạt.
<meta property="myNum" label="Number Control" type="number" default="5" min="0" max="10">Trong thực tế trông như thế này:
Thanh trượt số yêu cầu hai thuộc tính bổ sung để hoạt động đúng cách:
| Thuộc tính | Mô tả |
|---|---|
| min | Đặt giá trị thấp nhất mà người dùng có thể chọn. |
| max | Đặt giá trị cao nhất mà người dùng có thể chọn. |
Bộ chọn sắc độ
Phần tiêu đề “Bộ chọn sắc độ”Bộ chọn sắc độ cho phép người dùng chọn sắc độ bằng mô hình màu HSL (Hue, Saturation, Lightness). Thường được sử dụng để điều chỉnh màu sắc đơn giản hoặc chọn màu cơ sở cho các hiệu ứng và phần tử.
<meta property="myHuePicker" label="Hue Picker Control" type="hue" default="120" min="0" max="360">Trực quan trông như thế này:
Để bộ chọn sắc độ hoạt động đúng cách cần có hai thuộc tính bổ sung:
| Thuộc tính | Mô tả |
|---|---|
| min | Xác định giá trị sắc độ thấp nhất mà người dùng có thể chọn. Giá trị nhỏ nhất có thể là 0 |
| max | Xác định giá trị sắc độ cao nhất có sẵn. Giá trị lớn nhất có thể là 360 |
Boolean
Phần tiêu đề “Boolean”Công tắc boolean cho phép người dùng chọn giữa hai trạng thái: “bật” và “tắt”. Các giá trị của nó bị giới hạn ở 0 (tắt) hoặc 1 (bật). Không giống như các điều khiển khác, boolean chỉ dựa vào thuộc tính default và không yêu cầu cấu hình bổ sung.
<meta property="myBool" label="Boolean Control" type="boolean" default="0"/>Thường được sử dụng để kích hoạt hoặc vô hiệu hóa các tính năng nhất định, chuyển đổi giữa các chế độ (ví dụ: dọc và ngang), quản lý khả năng hiển thị và công tắc hành vi trong giao diện hoặc kích hoạt phát hiệu ứng.
Trông như thế này trên màn hình:
Bộ chọn màu
Phần tiêu đề “Bộ chọn màu”Bộ chọn màu cho phép người dùng chọn màu bằng cách điều chỉnh các thành phần sắc độ, độ bão hòa và độ sáng trong mô hình màu HSL tiêu chuẩn. Đây là phương tiện phổ biến và tiêu chuẩn nhất để chọn màu, dù cho nền hay các phần tử màn hình.
<meta property="myColorpicker1" label="Colorpicker Control" type="color" default="#009bde" min="0" max="360"/>Trực quan trông như thế này:
Giá trị mặc định cho bộ chọn màu phải được chỉ định ở định dạng thập lục phân. Ngoài ra, cần có hai thuộc tính bổ sung:
| Thuộc tính | Mô tả |
|---|---|
| min | Giá trị tối thiểu có thể chọn; giá trị nhỏ nhất có thể là 0. |
| max | Giá trị tối đa có thể chọn; giá trị lớn nhất có thể là 360. |
Trường văn bản
Phần tiêu đề “Trường văn bản”Trường văn bản cho phép người dùng nhập một chuỗi ký tự. Đầu vào được cập nhật mỗi khi một ký tự được thêm hoặc xóa khỏi trường.
<meta property="myText" label="Text Field" type="textfield" default="yourText">Trông như thế này:
| Thuộc tính | Mô tả |
|---|---|
| default | không được chứa các ký tự |
Danh sách
Phần tiêu đề “Danh sách”Danh sách cho phép người dùng chọn một tùy chọn từ danh sách các giá trị được xác định trước. Ví dụ: người dùng có thể chọn giữa các tùy chọn nhân vật hoặc hiệu ứng khác nhau để chọn tùy chọn mong muốn.
<meta property="effectChoice" label="Effect Choice" type="list" values="Low Health,Option1,Option2,Option3" default="Low Health"/>Trong thực tế trông như thế này:
Thuộc tính values xác định tất cả các tùy chọn có sẵn, trong khi thuộc tính default chỉ định tùy chọn nào được chọn ban đầu.
| Thuộc tính | Mô tả |
|---|---|
| values | Danh sách các tùy chọn chuỗi có thể có được phân tách bằng dấu phẩy |
| default | Đặt tùy chọn được chọn mặc định. Nếu giá trị này không có trong danh sách các giá trị, danh sách sẽ không hiển thị lựa chọn mặc định và có thể xảy ra sự cố. |
Để biết thêm thông tin về việc lấy dữ liệu thô từ ứng dụng, xem trang Smart Tags của chúng tôi!