Přeskočit na obsah

Přizpůsobení vzhledu

Pomocí stylů

NázevHodnotyPopis
@condensed-captionsfalse | trueZobrazení popisků komponent zhuštěným fontem
@uppercase-buttonsfalse | trueZobrazení textů tlačítek velkými písmeny
@uppercase-tabsfalse | trueZobrazení textů záložek velkými písmeny
@table-head-text-wrapfalse | trueZalamování popisků v hlavičce seznamu
@table-cell-vertical-borderfalse | trueZobrazení svislého oddělovače sloupců seznamu také na needitovatelném seznamu
@table-zebra-stripingfalse | trueStřídavé obarvování řádků seznamu

Výchozí hodnota je vždy false.

@condensed-captions

Image one
Image two
Image one
Image two

@uppercase-buttons

Image one
Image two
Image one
Image two

@uppercase-tabs

Image one
Image two
Image one
Image two

@table-head-text-wrap

Image one
Image two
Image one
Image two

@table-cell-vertical-border

Image one
Image two
Image one
Image two

@table-zebra-striping

Image one
Image two
Image one
Image two

Pomocí komponent

Typografie

Velikost písma 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 komponenty typu Edit, Label a DataLabel jsou v Xgenu dostupné vlastnosti pro změnu typografie.

  • Edit - InputAppearance
  • DataLabel - ValueAppearance
  • Label - CaptionAppearance
VýznamHodnotyVolba x Xgen
VzhledHeading 1font—h1
Je to přesná definice fontu: velikost, tloušťka, rozpal písmen, výška řádku… Neplést si s pouhou velikostí.Heading 2font—h2
Heading 3font—h3
Heading 4font—h4
Heading 5font—h5
Heading 6font—h6
Bodyfont—body
Buttonfont—button
Captionfont—caption
VelikostFont Size Heading 1font-size—h1
Zachovává tloušťku a jiné proporce definované na komponentě.Font Size Heading 2font-size—h2
Font Size Heading 3font-size—h3
Font Size Heading 4font-size—h4
Font Size Heading 5font-size—h5
Font Size Heading 6font-size—h6
Font Size Bodyfont-size—body
Font Size Buttonfont-size—button
Font Size Captionfont-size—caption
TloušťkaNormalfont-weight—normal
Mediumfont-weight—medium
Boldfont-weight—bold
OdstínPrimarytext-color—primary
Secondarytext-color—secondary
Disabledtext-color—disabled

Popisek políčka jen v editaci

Pro Edity jsem vytvořili režim AlwaysShowCaption, 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ší případ.

Image one
Image two
AlwaysShowCaption v náhledu a editaci
Image one
Image two
AlwaysShowCaption v náhledu a editaci