Jak aplikovat
V Xgenu vyberte chtěné styly. Toť vše.
V případě nejasností nebo nápadů na další styly se neváhejte obrátit na oddělení UX e-mailem nebo se připojte do skupiny na MS Teams.
Dostupné styly
ExtraStyleClass-group-box--card
Karta
Transformuje vzhled GroupBoxu do karty, tedy boxu se stínem. Hodí se perfektně k přehlednějšímu uspořádání informací na formuláři.
Rozmístění
GroupBoxy na DetailFramu rozmistěte pomocí GridPanelu. Pokud obsah formuláře vyžaduje seskupit některé GroupBoxy dohromady, je možné vnořit GridPanel do GridPanelu.
Obsah
Pro rozmístění obsahu využívejte GridPanel, například pro naskládání políček pod sebe. Pokud potřebujete umístit jednu komponentu, můžete GridPanel vynechat.
U GroupBoxů ležících na jednom řádku v GridPanlu nastavte stretch na Stretch="stVertical"
, aby se výška GroupBoxu přizpůsobila výšce řádku.
Jedna komponenta s alClient GroupBox se Stretch="stVertical"
s jednou komponentou s Align="alClient"
nemá žádnou výšku. Tu získá pouze, pokud je na společném řádku s vyšším GroupBoxem.
Mezera komponent Hodnotu můžete měnit pomocí CSS proměnné --card-components-gap
. Ve výchozím stavu stylu je nastavena na --base-h
, tedy 4px.
ExtraStyleClass-detail-frame--transparent
Průhledný detail
Odstraňuje pozadí, stín a roztahuje frame k okrajům. Využijete nejvíce v kombinaci s GroupBoxem ve stylu karty.
ExtraStyleClass-detail-frame--with-header
Hlavička
Důležité informace je možné umístit do hlavičky, formulář tak získá výraznější vizuální hierarchii.
Rozmístění
Jako první item GridPanelu použijte Panel, který je v tomto styly roztažen přes všechny sloupce. Jeho pozadí je roztaženo přes celou šířku formuláře. GroupBoxy na DetailFramu rozmistěte pomocí GridPanelu, jak je popsáno v zde.
ExtraStyleClass-[container | container--narrow | container--wide]
Kontejner
Obsah formuláře je omezen na maximální šířku a zarovnán na střed.
ExtraStyleClass-edit--disabled-as-label
Edit jako label
Odstraňuje rámeček, pozadí a padding editovatelných komponent. Zbavíte se tak zbytečných grafických prvků, které znepřehledňují čtení infomací.
ExtraStyleClass-font-size--large
Větší text
Zvětšuje velikost fotnu nadpisu 5 a níže. Nadpisu 4 a větším zůstává velikost neměnná. Použijte u formulářů, kde se nespokojíte s histroicky drobným písmem.
Vzorová aplikace
Postupně přebíráme redesignované formuáře a umisťujeme je do aplikace určené pro ukázku vzorových řešení.
Příklady
Screenshoty již realizovaných formulářů za pomocí rozšířených stylů.
Použito
- Karta
- Průheldný detail
- Popisky nalevo
Vlastní styly
- Hlavička detailu
- Maximální šířka obsahu detailu a hlavičky detailu
- Umístění tlačítek "Upravit"
- Pozadí obarvených komponent
Použito
- Karta
- Průheldný detail
- Popisky nalevo
- Hlavička
- Kontejner
Vlastní styly
- Nadpisy v hlavičce
- Obarvení stavu
Použito
- Karta
- Průheldný detail
- Popisky nalevo
- Kontejner
Vlastní styly
- Nastavení šířky popisků
- Workflow tlačítka na detailu
Použito
- Karta
- Průheldný detail
- Popisky nalevo
- Hlavička
Vlastní styly
- Nastavení šířky popisků
- Workflow tlačítka na detailu
Inspirace
Některé formuláře byly upraveny čistě pomocí CSS ve ve vlastních stylech