Theme Controller

Bir bakışta

TsgcHTMLThemeController & TsgcHTMLThemeBuilder

TsgcHTMLThemeController, bir sayfa teması seçer (ptDefault, ptDark veya ptDarkPro) ve sayfanın head bölümüne enjekte edilecek eşleşen CSS'i üretir. TsgcHTMLThemeBuilder, Bootstrap CSS değişkenlerini marka renklerinizle geçersiz kılan bir <style> bloğu üretir.

Bileşen sınıfları

TsgcHTMLThemeController, TsgcHTMLThemeBuilder

Rol

Açık/koyu tema ve özel CSS

Aile

Altyapı & Motor

Diller

Delphi, C++ Builder, .NET

Hızlı başlangıç

Tema değiştirin, özel renkler ekleyin

Bir sayfa teması seçmek ve GetCSS ile CSS'ini yaymak için TsgcHTMLThemeController kullanın. Marka renkleriniz için özel bir CSS değişken bloğu yaymak üzere TsgcHTMLThemeBuilder kullanın.

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();

Referans

Temel özellikler ve yöntemler

En sık kullanılan üyeler.

TsgcHTMLThemeController.Theme

Sayfa temasını seçer: ptDefault, ptDark veya ptDarkPro.

TsgcHTMLThemeController.CustomCSS

Uygulamaya özgü ince ayarlar için üretilen tema CSS'ine eklenen ek CSS.

GetCSS / GetSharedCSS

GetCSS, paylaşılan bileşen CSS'ini, seçilen tema CSS'ini ve CustomCSS'inizi döndürür; <head>'e enjekte edilmeye hazırdır. GetSharedCSS sınıf yöntemi yalnızca paylaşılan bileşen CSS'ini döndürür.

TsgcHTMLThemeBuilder.PrimaryColor

Bootstrap'in --bs-primary CSS değişkenini marka renginizle geçersiz kılar.

TsgcHTMLThemeBuilder.Mode

Palet modu: tmLight, tmDark veya tmSystem (sistem, bir medya sorgusu aracılığıyla işletim sistemi tercihini izler).

TsgcHTMLThemeBuilder.GetHTML

Renk özelliklerinden oluşturulan bir <style> bloğu döndürür; ayrıca Mode tmSystem olduğunda bir işletim sistemi tercihi eşitleme betiği döndürür.

Kaynaklar

Keşfetmeye devam edin

	Çevrimiçi yardımBu bileşen için tam API referansı ve kullanım kılavuzu.	Aç
	Tüm sgcHTML bileşenleri60'tan fazla bileşenin tam özellik matrisine göz atın.	Aç
	Ücretsiz deneme sürümünü indirin30 günlük deneme sürümü 60.HTML demo projelerini içerir.	Aç
	FiyatlandırmaTam kaynak kodlu Tekli, Ekip ve Site lisansları.	Aç