Rozložení
Pomocí GridPanelu rozmistěte obsah podle našich nejčastějších typů rozložení. Rozšířenými styly potom dosáhneme modernějšího vzhledu.
Doporučený počet karet
- Maximálně 10 panelů, které dočítají data přes vazbu.
- Maximálně 3 podřízené seznamy, přičemž na úrovni seznamu je doporučovaný počet sloupců do 15.
Aby nedocházelo k příliš dlouhému načítání formuláře, doporučujeme počet viditelných panelů a podřízených seznamů držet na rozumné míře. Pokud je potřeba zobrazit více informací, rozdělte je pomocí Pages na další logické celky.
Vzor 1
Základní rozložení pro běžný formulář o třech sloupcích.
GridPanel- 1 sloupec
- L nebo XL: 3 sloupce
-
ExtraStyleClass-group-box--card
-
ExtraStyleClass-detail-frame--transparent
ExtraStyleClass-container
(pokud obsah vyžaduje větší šířku, je možné použítExtraStyleClass-container--wide
nebo tento styl vynechat)ExtraStyleClass-edit--disabled-as-label
ExtraStyleClass-edit--caption-left
Vzor 2
Základní rozložení pro běžný formulář o čtyřech sloupcích.
GridPanel- 1 sloupec
- M: 2 sloupce (nepovinné)
- L nebo XL: 4 sloupce
-
ExtraStyleClass-group-box--card
-
ExtraStyleClass-detail-frame--transparent
ExtraStyleClass-container
(pokud obsah vyžaduje větší šířku, je možné použítExtraStyleClass-container--wide
nebo tento styl vynechat)ExtraStyleClass-edit--disabled-as-label
ExtraStyleClass-edit--caption-left
Vzor 3
Vhodné pro parametrické formuláře, kde je potřeba lineárně vyplnit údaje a potvrdit.
GridPanel- 1 sloupec vždy
Další možnosti
Hlavička
Na hlavičku máme ve standardu MW připraveny styly pro dvě šablony. Potřeba je dodržet strukturu a názvosloví v ExtendedProperties.
Velikost písma (nejen v hlavičce) už nejběžnější komponenty umí. Jak moc velké nadpisy používat záleží na chtěném efektu konkrétního formuláře.
Pro editovatelné položky z hlavičky chystáme pro Edity nový režim, ve kterém bude popisek mimo editaci skrytý. Tím zajistíme čistý design hlavičky. Samozřejmě tento režim půjde využít nejen v hlavičce, ale bude to pravděpodobně nejčastější usecase.
Záložky
Pokud je obsahu opravdu moc a je výhodnější nebo přehlednější jej rozdělit, využijte je. Umíme je dokonce elegantně zobrazit v rámci hlavičky.
Zarovnání komponent
- Popisek i hodnoty doleva. Výchozí styl je prozatím nastaven doprava, jelikož jen pomocí CSS nejsme schopni určit šířku sloupce s popisky podle nejširšího z nich. Rozvoj je zadán.
- U NumEditu zůstane zachováno zarovnání doprava.
- V chystaném panelu s komponentami bude možné zvolit maximální šířku popisků, která zajistí zalomení textu.