Karta

ExtraStyleClass-group-box--card

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.

Kdy použít

• Potřebuji zobrazit větší množství informací
• Políčka na současném formuláři jsou poskládány neuspořádaně, bez řádu
• Nedokáži rozlišit související údaje
• Informace jsou skryté v záložkách, chci jich najednou vidět více nebo po scrollování

Doporučený počet karet

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. Vždy samozřejmě záleží na konkrétích datech. Naše obecné doporučení je:

• 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.

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.

Seznam jako karta

Pokud zamýšlíte umísit samostatnou seznamovou komponentu (např. ListFrame nebo LiteListFrame), umistěte ji na GridPanel přímo bez GroupBoxu.

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.