Kreator stylów systemu
Podsumowanie:W nAxiom można tworzyć definicje stylu określające wartości niektórych atrybutów wizualnych elementów interfejsu widocznych we FrontSPA. Ustawienia te obejmują między innymi logo, kolor główny, kolory zależne, odstępy między elementami i rozmiary czcionek. Niektóre atrybuty określane w definicji stylu można nadpisywać w definicji indywidualnych obiektów. Na przykład kolor główny określa domyślny tła przycisku, ale kolor tła można definiować indywidualnie dla przycisków.
☛ AdminSPA >
INTERFEJS UŻYTKOWNIKA>Kreator stylów
Kliknięcie polecenia Kreator stylów wyświetla listę zdefiniowanych stylów. Standardowo na liście znajduje się definicja stylu o nazwie Default. Po zdefiniowaniu nowej definicji stylu, w kolumnie przycisków dla tego stylu są widoczne przyciski Aktywuj i Usuń. Aby zastosować definicję we FrontSpa, należy kliknąć przycisk Aktywuj w wierszu tej definicji. Zmiany wprowadzone w aktywnej definicji są widoczne po odświeżeniu strony w przeglądarce.
Kliknięcie przycisku Nowa definicja wyświetla stronę ustawień definicji stylu. Niektóre z tych ustawie są oznaczone jako obowiązkowe i muszą zostać ustawione, aby można było zapisać definicję.
Aby utworzyć nową definicję stylu, należy określić następujące ustawienia:
-
Nazwa stylu: nazwa definicji stylu. -
Główne logo aplikacji: logo wyświetlane w lewym górnym rogu FrontSPA i AdminSPA; oryginalne logo nAxiom znajduje się w lokalizacji /folder-instalacyjny-naxiom/front/assets/img/brand/logo.svg. -
Mini logo aplikacji dla mniejszych ekranów: logo wyświetlane w lewym górnym rogu FrontSPA i AdminSPA na ekranach o szerokości poniżej 992 px; oryginalne logo nAxiom znajduje się w lokalizacji /folder-instalacyjny-naxiom/front/assets/img/brand/mini-logo.svg. -
Kolor główny: podstawowy kolor używany dla wielu elementów interfejsu, między innymi jako domyślne tło przycisków. -
Odblokuj zmianę kolorów zależnych...: po włączeniu pozwala na dowolne zmiany kolorów zależnych; domyślnie wyłączony. -
Kolor zależny A/B/C: kolory uzyskiwane z koloru głównego przez zastosowanie do nich wartości krycia odpowiednio: 4%, 10% i 15%. -
Kolor akcji: między innymi kolor linków z aktywnym fokusem. -
Wyświetlanie kontrolek: pozwala określić kolor wypełnienia i kolor ramki osobno w trybie edytowalnym i osobno w trybie tylko do odczytu; dodatkowo dla trybu tylko do odczytu można określić kolor czcionki. -
Wygląd przycisków w trybie tylko do odczytu na listach i formularzach: kolor wypełnienia, czcionki i ikony dla nieaktywnych przycisków. -
Zaokrąglenia elementów: określa promień zaokrąglenia elementów interfejsu użytkownika; obsługiwane są wszystkie jednostki używane w CSS; wartość tej właściwości można określić osobno dla następujących grup elementów:- Przyciski, kontrolki edycyjne, elementy list i sekcji systemowych,
- Etykieta akronimu dokumentu biznesowego
- Pozostałe elementy
Nie zaleca się stosowania promieni zaokrągleń przycisków większych niż 0,5 rem (lub równoważnych w innych jednostkach) ze względu na nieprawidłowe wyświetlanie innych elementów interfejsu użytkownika, np. list rozwijanych.
-
Odstępy między elementami: pozwala określić odstępy między rekordami listy, polami formularza, pozycjami menu, a także odstępy w poziomie i w pionie od tekstu na przycisku (paddingi). -
Rozmiary czcionek: pozwala określić rozmiary czcionek dla etykiet pól formularza, wartości w kontrolkach i polach edycyjnych, nazwy menu, pozycji nadrzędnej menu i pozycji menu, napisu na przycisku oraz; w tej sekcji można także określić domyślny rozmiar ikon na przyciskach.
Selektor koloru
Do ustawiania koloru w Kreatorze stylów służy selektor koloru, który składa się z elementów opisanych poniżej.
- Paleta odcieni
- Suwak kolorów
- Ikona braku koloru
- Szesnastkowy kod koloru
- Wartości R, G i B koloru.