Skip to main content

Farby

Farebná paleta Elements sa skladá zo 7 predvolených farieb, ktoré si je možné jednoducho upraviť. Paleta je navrhnutá tak aby spĺňala aktuálne trendy a zároveň zabezpečovala prístupnosť. Používatelia si môžu prispôsobiť jej farby pomocou CSS premenných, čo im umožňuje zmeniť predvolené farby alebo pridať vlastné.

Vo vačšine elementov je možné nastaviť farbu elementu pomocou atribútu color a ako jeho hodnotu je potrebné zvoliť názov niektorej z farieb z farebnej palety.

<wj-button>Default</wj-button>
<wj-button color="primary">Primary</wj-button>
<wj-button color="complete">Complete</wj-button>
<wj-button color="success">Success</wj-button>
<wj-button color="warning">Warning</wj-button>
<wj-button color="danger">Danger</wj-button>
<wj-button color="neutral">Neutral</wj-button>

Upravenie existujúcej farby​

Upravenie hodnoty niektorej z farieb farebnej palety dosiahnete nastavením CSS vlastnosti. Napríklad na upravenie hodnoty farby primary na #FFd945 použijete vlastnosť nižšie:

:root {
  --wj-color-primary: #FFd945;
}

Pridanie novej farby​

Farbu možno pridať na použitie v celej aplikácii nastavením vlastnosti color na komponente WebJET alebo štylizáciou pomocou CSS.

Ak chcete začleniť novú farbu do farebnej palety, začnite vytvorením jej premennej CSS na root úrovni. Ak chcete napríklad pridať farbu s názvom coral, s hodnotou #FF7F50 je potrebné definovať premennú nasledovne:

:root {
  --wj-color-coral: #FF7F50;
}

Potom vytvorte novú triedu, ktorá použije túto premennú CSS. Trieda musí byť zapísaná vo formáte .wj-color-{COLOR}, kde {COLOR} je názov farby, ktorú chcete pridať:

.wj-color-coral {
  --wj-color-base: var(--wj-color-coral);
}

Po pridaní triedy je možné farbu použiť v ľubovoľnej komponente WebJET, ktorá podporuje vlastnosť color. Príklad použitia farby coral na wj-button je uvedený nižšie.

<wj-button color="coral">Coral</wj-button>

Premenné CSS definované v koreňovom adresári možno použiť aj na štylizáciu ľubovoľného elementu pomocou CSS:

div {
  background: var(--wj-color-coral);
}

Pre viac informácií o použití CSS premenných prejdite na stránku CSS Premenné

Content