icon

Służy do dodawania ikony niestandardowej do apki. Element Ikona można zaprogramować jako klikalny przycisk.

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 Ikona wielkości 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ści konfiguracyjne wyglądu widoku Ikona znajdują się w poniższej tabeli:
Tabela 1. Właściwości konfiguracyjne wyglądu elementu Ikona
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 Ikona wielkości ekranu 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ść Ikona wielkości ekranu 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ści konfiguracyjne zachowania widoku Ikona znajdują się w poniższej tabeli:
Tabela 2. Właściwości konfiguracyjne zachowania elementu Ikona
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:

Obraz ikony koła zębatego

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:

Obraz ikony ściemniaczy, która jest zagnieżdżona wewnątrz sekcji tylko do odczytu

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.