Rozšířené styly

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.

Zobrazit výchozí styl

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í

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.

Seznamy

Pokud zamýšlíte umísit samostatnou seznamovou komponentu (např. ListFrame nebo LiteListFrame), umistětě 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.

Průhledný detail ExtraStyleClass-detail-frame--transparent

Odstraňuje pozadí, stín a roztahuje frame k okrajům. Využijete nejvíce v kombinaci s GroupBoxem ve stylu karty.

Zobrazit výchozí styl

Kdy použít

• Chci zobrazit GroupBoxy ve stylu karty

Hlavička ExtraStyleClass-[detail-frame--with-header | detail-frame--with-sticky-header]

Důležité informace je možné umístit do hlavičky, formulář tak získá výraznější vizuální hierarchii.

Zobrazit výchozí styl

Kdy použít

• Některé informace jsou důležité, chci je upřednostnit
• Chci vytvořit hierarchii informací pomocí velkých nadpisů
• Občasný uživatel nemusí nutně vědět, které údaje mohou být kritické pro jeho činnost

Rozložení formuláře pro statickou hlavičku

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.

Rozložení formuláře pro sticky hlavičku

První panel formuláře ukotvěte nahoru. Jako komponentu pro obsah použijte GridPanel. Pokud situace vyžaduje členení do záložek, využijte Pages. Obsah jednotlivých Page opět umistěte do GridPanelu.

Šablony

Pro jednodušší skládání obsahu do hlavičky nabízí Multiweb několik šablon. Vše je řešeno přes pevně stanovenou skladbu komponent doplěných o ExtendedProperties.

Šablona 1

Struktura

Šířka komponent

Editovatelné komponenty nelze roztahovat dle textu uvnitř. Nedávejte je proto v sekcích Title a Subtitle vedle sebe, jinak mezi nimi vznikne velká mezera. Naopak komponenty jako Label a DataLabel lze pokládat libovolně za sebe.

Šablona 2

Šířka komponent

Editovatelné komponenty nelze roztahovat dle textu uvnitř. Nedávejte je proto v sekcích Title a Subtitle vedle sebe, jinak mezi nimi vznikne velká mezera. Naopak komponenty jako Label a DataLabel lze pokládat libovolně za sebe.

Šablona 3

Šablona 4

Šablona 5

Kontejner ExtraStyleClass-[container | container--narrow | container--wide]

Obsah formuláře je omezen na maximální šířku a zarovnán na střed.

Zobrazit demo

Kdy použít

• Chci vytvořit vzdušnější formulář
• Větší šířka obsahu nepřinese větší informační hodnotu
• Úzký (narrow) kontejner je ideální v pro formuláře (většinou parametrické) určené pouze k vyplňování. V kombinaci s GridPanelem s jedním sloupcem se jedná o nejjednodušší a nejeefektivnější layout pro tento účel.

Edit jako label ExtraStyleClass-edit--disabled-as-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í.

Zobrazit výchozí styl

Kdy použít

• Šedý rámeček snižuje čitelnost údajů na formuláři
• Chci čistější vzhled
• Uživatel potřebuje častěji informace pouze číst než vyplňovat

Popisek vlevo ExtraStyleClass-edit--caption-left

Přesouvá popisek Edit a DataLabelu nalevo. Ve vlastních stylech snadno změníte uspořádání popisků a hodnot pomocí připravených proměnných.

Dostupné proměnné Obnovit hodnoty Šířka popisku --caption-width: Zarovnání textu popisku --caption-text-align: Zalamovani popisku --caption-white-space: Šířka hodnoty --value-width: Zarovnání textu hodnoty --value-text-align: Zarovnání bloku hodnoty --value-block-align: Zalamovani hodnoty --value-white-space:

Šířka

Řídí se dle dostupných hodnot vlastnosti grid-template-columns.

Zarovnání textu

Hodnoty left, center nebo right.

Zarovnání bloku

Hodnoty start, center nebo end. Využívá se například pro zarovnání checkboxu.

Zalamování

Řídí se dle dostupných hodnot vlastnosti white-space, nejčastěji normal. U elementů input nebude mít změna vliv, nicméně zalamování je možné využít pro náš DataLabel.

Každý obsah je však unikátní a nelze jej zobecnit pro všechny formuláře. Díky výše uvedeným properties je možné hodnoty měnit pro celý formulář nebo pro vybrané bloky.

Kdy použít

• Pro uživatele je snažší skenovat pod sebou umistěné informace, protože nemusí očima přeskakovat popisky
• Chci ušetřit vertikální místo
• Pro rozmístění editačních komponent pod sebe uvažuji o GridPanelu

Rozmístění

Komponenty umistěte do GridPanelu uvnitř GroupBoxu.

Formulář

Nejjednodušší způsobem je selektovat podle atributu data-name na elementu .Form.

.Form[data-name='FRM.CMerna_jednotka.Edit'] {
  --caption-width: 20ch;
  --value-justify: end;
}

Blok

Využijte ExtendedProperties pro selektování v CSS. Pokud pro danou komponentu potřebujete přiřadit více ExtendedProperties, oddělujete je mezerami.

[data-extendedproperties~='foo'] {
  --caption-width:   1fr;
  --value-width:     2fr;
  --caption-justify: end;
}

Selektor atributu

Pozor na operátor ~=, který u atributu data-extendedproperties selektuje celá slova, nikoliv celý jeho obsah.

Větší text ExtraStyleClass-font-size--large

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.

Zobrazit výchozí styl

Kdy použít

• Chci zvýšit komfort čtení
• Uživatel často odbíhá od počítače nebo si k němu nesedne a ve stoje rychle "něco nakliká"