Theme Controller — sgcHTML | eSeGeCe

Theme Controller

TsgcHTMLThemeController / TsgcHTMLThemeBuilder — zarządzają motywami jasnym, ciemnym i systemowym na wszystkich stronach oraz generują bloki zmiennych CSS Bootstrap dla niestandardowych kolorów marki.

Rzut oka

TsgcHTMLThemeController & TsgcHTMLThemeBuilder

TsgcHTMLThemeController wybiera motyw strony (ptDefault, ptDark lub ptDarkPro) i generuje pasujący CSS do wstrzyknięcia w nagłówek strony. TsgcHTMLThemeBuilder generuje blok <style>, który nadpisuje zmienne CSS Bootstrap kolorami Twojej marki.

Klasy komponentów

TsgcHTMLThemeController, TsgcHTMLThemeBuilder

Rola

Motywowanie jasne/ciemne i niestandardowy CSS

Rodzina

Infrastruktura & Silnik

Języki

Delphi, C++ Builder, .NET

Szybki start

Przełączaj motywy, wstrzykuj niestandardowe kolory

Użyj TsgcHTMLThemeController, aby wybrać motyw strony i wygenerować jego CSS za pomocą GetCSS. Użyj TsgcHTMLThemeBuilder, aby wygenerować niestandardowy blok zmiennych CSS dla kolorów Twojej marki.

uses
  sgcHTML_Component, sgcHTML_ThemeBuilder, sgcHTML_Template_Bootstrap;

// 1) Pick a page theme and inject its CSS into the head:
var
  oTheme: TsgcHTMLThemeController;
begin
  oTheme := TsgcHTMLThemeController.Create(nil);
  try
    oTheme.Theme     := ptDark;   // ptDefault / ptDark / ptDarkPro
    oTheme.CustomCSS := '.navbar{border-bottom:2px solid #7C3AED;}';
    // GetCSS = shared component CSS + theme CSS + your CustomCSS:
    oTemplate.ThemeCSS := oTheme.GetCSS;
  finally
    oTheme.Free;
  end;
end;

// 2) Override Bootstrap CSS variables with your brand colours:
var
  oBuilder: TsgcHTMLThemeBuilder;
begin
  oBuilder := TsgcHTMLThemeBuilder.Create(nil);
  try
    oBuilder.PrimaryColor   := '#7C3AED';
    oBuilder.SecondaryColor := '#1E293B';
    // GetHTML returns a <style> block (+ sync script for tmSystem):
    oTemplate.CustomHead := oTemplate.CustomHead + oBuilder.GetHTML;
  finally
    oBuilder.Free;
  end;
end;

TsgcHTMLThemeController *oTheme = new TsgcHTMLThemeController(NULL);
try
{
  oTheme->Theme    = ptDark;   // ptDefault / ptDark / ptDarkPro
  oTheme->CustomCSS = ".navbar{border-bottom:2px solid #7C3AED;}";
  oTemplate->ThemeCSS = oTheme->GetCSS();
}
__finally { delete oTheme; }

TsgcHTMLThemeBuilder *oBuilder = new TsgcHTMLThemeBuilder(NULL);
try
{
  oBuilder->PrimaryColor   = "#7C3AED";
  oBuilder->SecondaryColor = "#1E293B";
  oTemplate->CustomHead = oTemplate->CustomHead + oBuilder->GetHTML();
}
__finally { delete oBuilder; }

var themeCtrl = new TsgcHTMLThemeController();
themeCtrl.Theme     = TsgcHTMLPageTheme.ptDark;   // ptDefault / ptDark / ptDarkPro
themeCtrl.CustomCSS = ".navbar{border-bottom:2px solid #7C3AED;}";
template.ThemeCSS = themeCtrl.GetCSS();

var themeBuilder = new TsgcHTMLThemeBuilder();
themeBuilder.PrimaryColor   = "#7C3AED";
themeBuilder.SecondaryColor = "#1E293B";
template.CustomHead += themeBuilder.GetHTML();

Dokumentacja

Główne właściwości i metody

Najczęściej używane elementy.

TsgcHTMLThemeController.Theme

Wybiera motyw strony: ptDefault, ptDark lub ptDarkPro.

TsgcHTMLThemeController.CustomCSS

Dodatkowy CSS dołączany do wygenerowanego CSS motywu na potrzeby dostosowań w danej aplikacji.

GetCSS / GetSharedCSS

GetCSS zwraca współdzielony CSS komponentów wraz z CSS wybranego motywu oraz Twoim CustomCSS, gotowy do wstrzyknięcia w <head>. Metoda klasowa GetSharedCSS zwraca sam współdzielony CSS komponentów.

TsgcHTMLThemeBuilder.PrimaryColor

Nadpisuje zmienną CSS Bootstrap --bs-primary kolorem Twojej marki.

TsgcHTMLThemeBuilder.Mode

Tryb palety: tmLight, tmDark lub tmSystem (tryb systemowy podąża za preferencją systemu operacyjnego poprzez zapytanie media query).

TsgcHTMLThemeBuilder.GetHTML

Zwraca blok <style> zbudowany na podstawie właściwości kolorów, wraz ze skryptem synchronizacji z preferencją systemu operacyjnego, gdy Mode ma wartość tmSystem.

Zasoby

Kontynuuj eksplorację

	Pomoc onlinePełna dokumentacja API i przewodnik użytkowania tego komponentu.	Otwórz
	Wszystkie komponenty sgcHTMLPrzeglądaj pełną macierz funkcji 60+ komponentów.	Otwórz
	Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.	Otwórz
	CenyLicencje Single, Team i Site z pełnym kodem źródłowym.	Otwórz