Skip to main content

Šablóny

WebJet Elements ponúka celý rad globálnych premenných, ktoré možno použiť na úpravu predvolenej šablóny v celej aplikácii. Farby aplikácie sú užitočné na zmenu vzhľadu mnohých WebJET komponentov.

Aplikačné farby​

Aplikačné farby zohrávajú v aplikácii významnú úlohu a často sa používajú v rôznych kontextoch. Sú obzvlášť praktické na bezproblémové vytváranie tmavých tém alebo tém, ktoré sú v súlade s identitou značky.

NázovPopis
--wj-border-colorUrčuje farbu okrajov v celej aplikácii
--wj-border-radiusUrčuje zaoblenie okrajov v celej aplikácii
--wj-border-sizeUrčuje šírku okrajov v celej aplikácii
--wj-border-styleUrčuje štýl okrajov v celej aplikácii
--wj-colorUrčuje farbu textu naprieč aplikáciou
--wj-font-familyUrčuje font textov v celej aplikácii
--wj-font-family-secondaryUrčuje sekundárny font textov v celej aplikácii
--wj-force-mac-font-familyUrčuje font textov pre pre zariadenia Mac v celej aplikácii
--wj-font-sizeUrčuje veľkosť textu naprieč aplikáciou
--wj-line-heightUrčuje výšku textov v celej aplikácii
NázovPopis
--wj-backdropFarba backdrop overlay overlays and modal backgrounds a pozadí
--wj-backdrop-opacityOpacity of the backdrop
--wj-border-radius-circleUrčuje predvolenú veľkosť zaoblenia v %
--wj-border-radius-largeBorder radius for large-sized elements
--wj-border-radius-mediumBorder radius for medium-sized elements
--wj-border-radius-pillBorder radius for pill-shaped elements
--wj-border-radius-smallBorder radius for small-sized elements
--wj-border-radius-x-largeBorder radius for extra-large-sized elements
--wj-border-sizeHrúbka okrajov
--wj-border-styleStyle of borders
--wj-box-shadow-largeBox shadow for large-sized elements
--wj-box-shadow-mediumBox shadow for medium-sized elements
--wj-card-backgroundBackground color for card elements
--wj-card-colorText color for card elements
--wj-color-whiteWhite color
--wj-color-blackBlack color
--wj-font-familyUrčuje font textov v celej aplikácii
--wj-font-family-secondaryUrčuje sekundárny font textov v celej aplikácii
--wj-force-mac-font-familyUrčuje font textov pre pre zariadenia Mac v celej aplikácii
--wj-font-sizeBase font size
--wj-font-size-2x-largeFont size for 2x large text
--wj-font-size-3x-largeFont size for 3x large text
--wj-font-size-4x-largeFont size for 4x large text
--wj-font-size-largeFont size for large text
--wj-font-size-mediumFont size for medium text
--wj-font-size-smallFont size for small text
--wj-font-size-x-largeFont size for extra-large text
--wj-font-size-x-smallFont size for extra-small text
--wj-line-heightLine height for text elements

Odstupňované farby​

Zatiaľ čo aktualizácia premenných pozadia (--wj-background-color) a textu (--wj-text-color) zmení vzhľad aplikácie pre väčšinu komponentov, existujú určité komponenty Ionic, kde to môže vyzerať neštandardne alebo nefunkčne. Bude to viac viditeľné pri použití tmavšej témy.

V niektorých komponentoch používame odtieň tmavší ako pozadie alebo svetlejší ako text. Napríklad text nadpisu položky môže potrebovať farbu #404040, ktorá je o niekoľko odtieňov svetlejšia ako naša predvolená farba textu. Medzitým je pozadie komponentu načítania o odtieň tmavšie ako biela, pričom sa používa #f2f2f2. Na definovanie týchto miernych odchýlok používame stupňovité farby. Pri aktualizácii farby pozadia alebo textu aplikácie je dôležité aktualizovať krokové farby.

V predvolenom nastavení začínajú krokové farby Ionic na predvolenej hodnote farby pozadia #ffffff a miešajú sa s hodnotou farby textu #000000 pomocou zvyšujúceho sa percenta. Úplný zoznam krokových farieb je uvedený v generátore nižšie.

Generátor odstupňovaných farieb​

Vytvorenie vlastnej témy pozadia a farby textu pre vašu aplikáciu. Aktualizujte hexadecimálne hodnoty farieb pozadia alebo textu nižšie a potom skopírujte a vložte vygenerovaný kód priamo do projektu WebJET Elements.

Pozadie

Text

:root {
	--wj-background-color: #ffffff;
	--wj-background-color-rgb: 255,255,255;

	--wj-text-color: #000000;
	--wj-text-color-rgb: 0,0,0;

	--wj-color-step-1: #f2f2f2;
	--wj-color-step-2: #e6e6e6;
	--wj-color-step-3: #d9d9d9;
	--wj-color-step-4: #cccccc;
	--wj-color-step-5: #bfbfbf;
	--wj-color-step-6: #b3b3b3;
	--wj-color-step-7: #a6a6a6;
	--wj-color-step-8: #999999;
	--wj-color-step-9: #8c8c8c;
	--wj-color-step-10: #808080;
	--wj-color-step-11: #737373;
}

Content