icon
Widok Ikona jest podobny do widoku Plakietka. Najczęściej jest używany do następujących celów:
- Dodawanie do strony znaku poprawiającego jej wygląd
- Używanie jako klikalnego przycisku
Powiązanie danych
Na karcie właściwości Ogólne można ustawiać i modyfikować powiązanie danych widoku. Jeśli widok Ikona jest używany jako klikalny przycisk, w powiązaniu danych jest rejestrowane, czy instancja przycisku została kliknięta. Typ danych:Boolean.Właściwości konfiguracyjne
W obszarze Konfiguracja można ustawić lub zmodyfikować właściwości wyglądu i zachowania widoku.
- Wielkość ekranu
- Właściwość konfiguracyjna, na której znajduje się ikona Rozmiarów ekranu
obok nazwy właściwości, może mieć różne wartości dla każdej wielkości ekranu. Jeśli nie zostanie ustawiona wartość, wielkość ekranu dziedziczy wartość następnej większej wielkości ekranu jako swoją wartość domyślną.
- Definicje kompozycji
- Definicje kompozycji służą do podawania kolorów i stylów widoku oraz do określania jego wyglądu. W edytorze kompozycji można wyświetlić podgląd wyglądu i zachowania widoku. Patrz Kompozycje.
| Właściwość konfiguracyjna wyglądu | Opis | Typ danych |
|---|---|---|
| Styl koloru | Służy do podawania stylu koloru widoku. Kolory odpowiadają zmiennym w podanej kompozycji. Domyślnym stylem koloru jest Domyślny (szary). | IconColorStyle |
Wielkość ikony ![]() |
Służy do podawania wielkości ikony, która jest wyrażana w pikselach (px) lub w firetach (em). Na przykład: 43px lub 43em. Jeśli liczba zostanie podana bez jednostki, będzie interpretowana jako liczba pikseli. Wartością domyślną jest 43. | String |
| Tylko kontur | Służy do wskazywania, czy po umieszczeniu kursora nad widokiem ma on być wyświetlany tylko przy użyciu stylu koloru. Domyślnie ta właściwość nie jest wybrana. | Wartość boolowska |
| Ikona | Określa nazwę akceptowalnej ikony z serwisu WWW produktu Czcionka Awesome V4.7.0 . Na przykład: calendar, clock-oi camera. Przedrostek fa- serwisu Font Awesome jest opcjonalny. Domyślnie to pole początkowo jest puste, ale należy podać ikonę. | String |
| Promień zaokrąglenia krawędzi | Służy do podawania promienia krzywizny krawędzi ikony. Ikona może być idealnie okrągła, jeśli zostanie wprowadzona wartość, która będzie równa co najmniej połowie szerokości podanej we właściwości Szerokość. Domyślnie promień zaokrąglenia krawędzi nie jest podawany. | String |
Szerokość ![]() |
Służy do podawania szerokości ikony, która jest wyrażana w pikselach (px), jako wartość procentowa (%) lub w firetach (em). Na przykład: 50px lub 20% lub 0.4em. Jeśli liczba zostanie podana bez jednostki, będzie interpretowana jako liczba pikseli. Domyślnie szerokość nie jest podawana. | String |
| Właściwość konfiguracyjna zachowania | Opis | Typ danych |
|---|---|---|
| Zapobiegaj wielokrotnym kliknięciom | Służy do blokowania użytkownikowi możliwości kliknięcia ikony więcej niż raz, jeśli ikona jest używana jako przycisk. Domyślnie ta właściwość nie jest wybrana. | Boolean |
Przykład
W tym przykładzie widok Ikona ma ustawione następujące właściwości konfiguracyjne wyglądu:
- Opcja Styl kolorów jest ustawiona na wartość Danger.
- Opcja Wielkość ikony jest ustawiona na wartość 43.
- Ikona jest ustawiona na wartość gear.
Te właściwości i ich wartości spowodują wyświetlenie ikony koła zębatego takiego jak ten na poniższym obrazku:
![]()
Jeśli jednak ikona jest zagnieżdżona w sekcji oznaczonej jako tylko do odczytu (np. w układzie poziomym, układzie pionowym lub widoku), będzie lekko przyciemniona. Na przykład:
![]()
Przyciemniona ikona może stanowić problem, jeśli inne widoki Ikona znajdujące się poza sekcją tylko do odczytu będą miały taki sam kolor. Aby mieć pewność, że kolor ikony nie ulegnie zmianie podczas zagnieżdżania wewnątrz sekcji tylko do odczytu, można ustawić procedurę obsługi zdarzeń produktu On load w taki sposób, aby była używana metoda setEnabled . Na przykład:
me.setEnabled(true)
Zdarzenia
We właściwościach Zdarzenia można ustawiać i modyfikować procedury obsługi zdarzeń widoku. Zdarzenia mogą być uruchamiane w sposób programowy lub w wyniku interakcji użytkownika z widokiem. Informacje na temat definiowania zdarzeń i kodu zdarzeń zawiera sekcja Zdarzenia zdefiniowane przez użytkownika. Widok ikon ma następujące typy procedur obsługi zdarzeń:- On load: aktywowano podczas ładowania strony. Na przykład:
me.setIcon("gears") - On click: Aktywowano, gdy kliknięto ikonę używaną jako przycisk. Na przykład:
return confirm("Are you sure?") - On boundary event: aktywowano, gdy istnieje zdarzenie graniczne. Ta procedura obsługi zdarzeń działa najlepiej w przypadku zdarzeń granicznych, które kończą się zdarzeniem Stay on Page , ponieważ logika w tym zdarzeniu jest wyzwalana podczas powrotu na stronę. Procedura obsługi zdarzeń On boundary
Event jest przydatna w sytuacjach, gdy logika musi wystąpić po logice po stronie serwera, która jest wyzwalana przez graniczne zdarzenie. Na przykład:
alert("Stay on Page status '" + status + "'")
metody
Szczegółowe informacje na temat dostępnych metod dla ikony znajduje się w podręczniku Funkcja API JavaScript . .
Zasoby dodatkowe
Więcej informacji na temat sposobu tworzenia formatki lub strony zawiera sekcja Budowanie formatek.
Informacje na temat standardowych właściwości (Ogólne, Konfiguracja, Pozycjonowanie, Widocznośći Atrybuty HTML) można znaleźć w sekcji Właściwości widoku.