Přizpůsobení rozhraní Qodly pomocí CSS

V aplikaci Qodly Studio lze každý widget stylovat přímo pomocí jeho vlastností. Chcete-li však zachovat konzistentní vzhled celé aplikace a snadno použít globální styly (například barvu písma, velikost textu nebo vzhled výběrů), je vaším nejlepším spojencem CSS.

V tomto článku se seznámíme se základy používání CSS v aplikaci Qodly Studio na příkladech z aplikace Performance Review.

Aplikace Performance Review

Co je CSS ?

CSS (Cascading Style Sheets) je jazyk stylů pro ovládání vizuálního vzhledu prvků HTML na webové stránce. Používají se k definování barev, písem, okrajů, animací a mnoha dalších věcí, aby bylo možné vytvořit konzistentní, estetické a přizpůsobitelné rozhraní.

V tomto blogu si pouze ukážeme, jak používat a vytvářet třídy CSS v aplikaci Qodly Studio, a také několik jednoduchých příkladů. Pokud se chcete naučit psát CSS, existuje řada zdrojů dokumentace, školení a videí na toto téma.

Jak používat třídu CSS v Qodly

Vytvoření třídy CSS

Qodly umožňuje přidávat třídy CSS přímo do projektu. Zde je návod, jak na to:

• Přejděte do nabídky Styling ve Studiu Qodly.
• Vytvořte třídu CSS.
• Určete, zda je lokální nebo sdílená.
• Napište definici CSS.

Typy CSS v Qodly

Qodly nabízí tři typy CSS pro maximální flexibilitu:

• Místní: Používá se pouze pro konkrétní komponentu nebo stránku.
• Tématické: Sdílený pro více komponent, aby byla zachována konzistence v rámci části aplikace.
• Sdílené: Dostupné globálně v celém projektu.

Tyto možnosti vám poskytují velkou flexibilitu při strukturování a správě stylů.

Použít třídu CSS

Jakmile vytvoříte styl CSS, můžete v několika krocích aplikovat třídu na různé widgety:

• V Qodly Studiu vyberte widget.
• Přejděte na kartu Vlastnosti.
• Vyhledejte možnost Třída CSS a zadejte název třídy definované ve vašem souboru CSS.

Případy použití v reálném životě

Vezměme si jako příklad stránku Přihlášení z aplikace Performance Review.

Příklad 1: Stylování tlačítka pro přihlášení

Přihlašovací tlačítko chceme nastylovat pomocí:

• Bílý text
• Červené pozadí
• Zaoblené rohy
• Efekt najetí na tlačítko s tmavší červenou barvou

Vytvoříme třídu „button-full“.

Zadáme následující popis CSS:

Vložíme následující text: self {
  border-radius: Rádius: 4px;
  border: Rámeček: 1px solid #dd3c4c;
  background-color: #dd3c4c;
  color: #FFFFFF;
  transition-duration: 0.4s;
}

self:hover {
  border: 1px solid #c32232;
  background-color: #c32232;
  color: #FFFFFF;
}

V aplikaci Qodly Studio aplikujte tento styl pomocí třídy „button-full“ na tlačítka.

Příklad 2: Adaptivní tlačítka pro světlé a tmavé režimy

Pomocí dotazů na média můžete vytvořit adaptivní styly, které se automaticky přizpůsobí na základě světlého nebo tmavého režimu uživatele.

Pro tmavý režim chceme tmavší červenou barvu se světlejším hover efektem. Toho snadno dosáhneme pomocí selektoru @media (prefers-color-scheme: dark):

self {
  border-radius: 4px;
  border: 1px solid #dd3c4c;
  background-color: #dd3c4c;
  color: #FFFFFF;
  transition-duration: 0.4s;
}

self:hover {
  border: 1px solid #c32232;
  background-color: #c32232;
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  self {
    border-radius: 4px;
    border: 1px solid #c32232;
    background-color: #c32232;
    color: #ffffff;
    transition-duration: 0.4s;
  }
	
  self:hover {
    border: 1px solid #dd3c4c;
    background-color: #dd3c4c;
    color: #ffffff;
    }
}

Výsledek v obrázcích:

Příklad 3: Použití proměnných CSS

Proměnné CSS umožňují definovat opakovaně použitelné konstanty, což usnadňuje a dynamizuje správu stylů.

Můžete například centralizovat správu barev a dynamicky je aplikovat na základě světlého nebo tmavého režimu.

Krok 1: Definujte sdílený soubor stylů

Vytvořte sdílený soubor stylů a definujte všechny konstanty:

:root {
   --main-bg-color: #FFFFFF;
   --main-fg-color: #000000;
   --accent-color1: #dd3c4c;
   --accent-color2: #c32232;

  @media (prefers-color-scheme: dark) {
    --main-bg-color: #121212;
    --main-fg-color: #E0E0E0;
    --accent-color1: #c32232;
    --accent-color2: #dd3c4c;
  }
}

Krok 2: Použijte proměnnou na třídu button-full.

Chcete-li ve třídě CSS použít proměnnou, jednoduše použijte funkci var():

self {
  border-radius: 4px;
  border: (--accent-color1): 1px solid var(--accent-color1);
  background-color: var(--accent-color1);
  barva: var(--text-color1);
  transition-duration: 0.4s;
}

self:hover {
  border: (--accent-color2);
  background-color: var(--accent-color2);
  color: var(--text-color1);
}

Nyní se při každé aktualizaci proměnných barev automaticky aktualizují všechny stylizované prvky, čímž se zajistí konzistentní téma v celé aplikaci.

Příklad 4: Stylování reagujících komponent

Následující příklad ukazuje, jak vytvořit responzivní design, který se přizpůsobuje podle šířky obrazovky.

Přihlašovací panel se skládá ze tří rámečků Style Box:

• Rámeček pro název aplikace.
• Rámeček pro pole přihlašovacího jména a hesla.
• Kontejner, který oba boxy obaluje.

Kontejner používá display: flex; a flex-wrap: wrap; pro zajištění rychlé odezvy. Pokud budou boxy příliš široké, budou se skládat vertikálně, místo aby byly vedle sebe.

U dalších dvou políček se pak šířka mění v rozmezí 50 % až 100 % v závislosti na velikosti obrazovky. Z estetických důvodů je také upraven rámeček.

Zde je příklad CSS boxu umístěného vlevo nebo nahoře v závislosti na obrazovce:

self {
    border-radius: 10px 0 0 10px;
    šířka: 50%;
    height: 100%;
}

@media screen and (max-width: 800px) {
    self {
      border-radius: 10px 10px 0 0;
      width: 100%;
      height: fit-content;
    }
}

Výsledek v obrázcích:

Rychlý tip pro začátek

Pokud si nejste jisti, jak strukturovat své CSS, Qodly poskytuje praktickou funkci. Můžete definovat styly prostřednictvím vlastností widgetu a exportovat je jako CSS.

Díky tomu můžete vidět, jak vypadá pravidlo CSS, a snadno vytvářet a upravovat vlastní třídy CSS.

Přejděte dále

Doufáme, že tyto příklady ukázaly sílu a flexibilitu CSS v Qodly Studio. Chcete-li prozkoumat další možnosti, podívejte se na tyto další zdroje:

• Přizpůsobení stylu tlačítek
• Přizpůsobení stylů zaškrtávacích políček
• Přizpůsobení stylu DataTable
• Přizpůsobení stylů matice
• Přizpůsobení stylů Select Box
• Přizpůsobení stylů rádia
• Přizpůsobení stylů textových vstupů

Pomocí CSS můžete své aplikace Qodly proměnit v jedinečné, profesionální vizuální zážitky a zároveň zjednodušit správu stylů. Začněte a podělte se o své výtvory nebo položte své dotazy na fóru!