Meta-tagi
Wewnątrz tagu <head> tagi <meta> dostarczają informacji o tytule i wydawcy oraz pozwalają nam odbierać dane wejściowe użytkownika. Dostępnych jest sześć konfigurowalnych przez użytkownika kontrolek: suwaki liczbowe, suwaki odcienia, przełączniki boolean, selektory kolorów, pola tekstowe i listy. Każda kontrolka wymaga czterech głównych atrybutów plus atrybutów specyficznych dla danej kontrolki.
| Główny atrybut | Opis | |
|---|---|---|
| property | Definiuje nazwę zmiennej używanej w twoim kodzie | |
| label | Etykieta tekstowa wyświetlana użytkownikom dla interfejsu kontrolki | |
| type | Określa typ danych: number, hue, boolean lub color | |
| default | Ustawia wartość początkową używaną przez kontrolkę | |
| tooltip* | (*Opcjonalny) Wyświetla krótki opis, gdy użytkownik najedzie na kontrolkę |
Suwak liczbowy
Dział zatytułowany „Suwak liczbowy”Suwak liczbowy pozwala użytkownikowi wybrać liczbę całkowitą w określonym zakresie. Jest szeroko stosowany do dostosowywania parametrów, takich jak szybkość animacji, liczba kształtów na ekranie lub częstotliwość aktywowania efektu.
<meta property="myNum" label="Number Control" type="number" default="5" min="0" max="10">Oto jak to wygląda w praktyce:
Suwak liczbowy wymaga dwóch dodatkowych atrybutów, aby działać poprawnie:
| Atrybut | Opis |
|---|---|
| min | Ustawia najniższą wartość, którą użytkownik może wybrać. |
| max | Ustawia najwyższą wartość, którą użytkownik może wybrać. |
Suwak odcienia
Dział zatytułowany „Suwak odcienia”Suwak odcienia pozwala użytkownikowi wybrać odcień koloru za pomocą modelu kolorów HSL (Hue, Saturation, Lightness). Jest zwykle używany do prostych dostosowań kolorów lub wyboru podstawowego koloru dla efektów i elementów.
<meta property="myHuePicker" label="Hue Picker Control" type="hue" default="120" min="0" max="360">Wizualnie wygląda tak:
Aby działać poprawnie, suwak odcienia wymaga dwóch dodatkowych atrybutów:
| Atrybut | Opis |
|---|---|
| min | Definiuje najniższą wartość odcienia, którą użytkownik może wybrać. Minimalna możliwa wartość to 0 |
| max | Definiuje najwyższą dostępną wartość odcienia. Maksymalna możliwa wartość to 360 |
Boolean
Dział zatytułowany „Boolean”Przełącznik boolean pozwala użytkownikowi przełączać się między dwoma stanami: “włączony” i “wyłączony”. Wartości są ograniczone do 0 (wyłączony) lub 1 (włączony). W przeciwieństwie do innych kontrolek, booleany są wyłącznie zależne od domyślnych atrybutów i nie wymagają dodatkowej konfiguracji.
<meta property="myBool" label="Boolean Control" type="boolean" default="0"/>Są szeroko stosowane do włączania lub wyłączania konkretnych funkcji, przełączania między trybami (np. pionowym i poziomym), zarządzania widocznością i przełącznikami zachowania w interfejsie lub aktywowania powtórki efektów.
Oto przykład jak to wygląda:
Selektor kolorów
Dział zatytułowany „Selektor kolorów”Selektor kolorów pozwala użytkownikowi wybrać kolor poprzez dostosowanie składowych odcienia, nasycenia i jasności w standardowym modelu kolorów HSL. Jest to najczęściej używane i standardowe narzędzie do wyboru kolorów, czy to dla teł, czy elementów ekranu.
<meta property="myColorpicker1" label="Colorpicker Control" type="color" default="#009bde" min="0" max="360"/>Wizualnie wygląda tak:
Wartość domyślna selektora kolorów musi być podana w formacie szesnastkowym. Ponadto wymagane są dwa dodatkowe atrybuty:
| Atrybut | Opis |
|---|---|
| min | Minimalna możliwa do wybrania wartość, najniższa możliwa wartość to 0. |
| max | Maksymalna możliwa do wybrania wartość, najwyższa możliwa wartość to 360. |
Pole tekstowe
Dział zatytułowany „Pole tekstowe”Pole tekstowe, czyli pole wprowadzania tekstu, pozwala użytkownikowi wpisać ciąg znaków. Dane wejściowe są aktualizowane za każdym razem, gdy znak jest dodany lub usunięty z pola.
<meta property="myText" label="Text Field" type="textfield" default="yourText">Oto jak to wygląda:
| Atrybut | Opis |
|---|---|
| default | nie może zawierać znaków |
Lista pozwala użytkownikowi wybrać jedną opcję z predefiniowanej listy wartości. Użytkownik może na przykład przełączać się między różnymi wyborami postaci lub efektami, aby wybrać pożądaną opcję.
<meta property="effectChoice" label="Effect Choice" type="list" values="Low Health,Option1,Option2,Option3" default="Low Health"/>Oto jak to wygląda w praktyce:
Atrybut values definiuje wszystkie dostępne wybory, podczas gdy atrybut default wskazuje, która opcja jest początkowo zaznaczona.
| Atrybut | Opis |
|---|---|
| values | Lista możliwych opcji ciągów znaków oddzielona przecinkami |
| default | Ustawia domyślnie zaznaczoną opcję. Jeśli ta wartość nie jest zawarta na liście wartości, lista rozwijana nie wyświetli domyślnego wyboru i mogą wystąpić problemy. |
Aby uzyskać więcej informacji o zbieraniu surowych danych z twojej aplikacji, sprawdź naszą stronę Smart Tags!