Přizpůsobení tlačítek, přepínačů a zaškrtávacích políček pomocí vlastností pozadí a ohraničení

Představte si, že vytváříte panel nástrojů s barevnými akčními tlačítky nebo panel nastavení se stylizovanými přepínači a zaškrtávacími políčky. Nepotřebujete k tomu žádné vlastní grafické prvky ani složitou grafiku, stačí modré tlačítko se zaoblenými rohy a jemným rámečkem.

Dosud i jednoduché vizuální přizpůsobení vyžadovalo vytvoření speciálních obrazových prvků.

Počínaje verzí 4D 21 R5 můžete nastavit barvu pozadí a vlastnosti ohraničení přímo u tlačítek, přepínačů a zaškrtávacích políček s vlastním stylem.

Přímo barvěte své objekty

Dříve bylo pro přizpůsobení barvy pozadí tlačítka, přepínače nebo zaškrtávacího políčka s vlastním stylem nutné použít obrázek pozadí. Nyní můžete barvu pozadí definovat v editoru formulářů nebo ji změnit za běhu pomocí příkazů 4D.

U tlačítek byl zaveden nový styl ohraničení „custom“, který zachovává zpětnou kompatibilitu. Umožňuje použití nové vlastnosti pozadí, aniž by došlo ke změně vzhledu stávajících tlačítek.

// Set a blue background on a custom-styled button
OBJECT SET BORDER STYLE(*; "myButton"; Border custom)
OBJECT SET RGB COLORS(*; "myButton"; 0xFFFFFF; 0x1E90FF)

// Set a blue background on a custom-styled check box
OBJECT SET RGB COLORS(*; "myCheckBox"; 0xFFFFFF; 0x1E90FF)

Výchozí hodnota je „none“, což zachovává vzhled stávajících formulářů. Pokud je k dispozici obrázek pozadí, je vykreslen přes barvu pozadí, což umožňuje kombinovat barevná pozadí s průhlednými ikonami nebo obrázky.

Přidávejte rámečky během několika sekund

K přidání ohraničení již nepotřebujete speciální obrázky. Nové vlastnosti ohraničení vám umožňují přímo přizpůsobit vzhled tlačítek, přepínačů nebo zaškrtávacích políček s vlastním stylem:

• Barva ohraničení
• Šířka rámečku
• Poloměr rohu

Ať už dáváte přednost jemným obrysům nebo zaobleným akčním tlačítkům, vše lze nyní konfigurovat přímo z editoru formulářů, pomocí CSS nebo kódu 4D.

A když zkombinujete zaoblené rohy s obrázkem na pozadí nebo barvou pozadí, 4D automaticky ořízne pozadí podle ohraničení. Není potřeba žádné maskování ani úpravy obrázků.

U tlačítek jsou tyto nové vlastnosti k dispozici pouze tehdy, je-li styl ohraničení nastaven na „vlastní“, čímž se zachová vzhled stávajících formulářů.

// Set a border radius on a custom-styled button 
OBJECT SET BORDER STYLE(*; "myButton"; Border custom) 
OBJECT SET CORNER RADIUS(*; "myButton"; 2) 

// Set a border radius on a custom-styled check box 
OBJECT SET CORNER RADIUS(*; "myCheckBox"; 2) 

Jednou nastavit styl pomocí CSS

Pokud vaše aplikace již používá CSS, tyto nové vlastnosti se přirozeně začlení do vašeho stávajícího stylu. Definujte styl jednou a použijte jej kdekoli, kde ho potřebujete.

@media (prefers-color-scheme: light) {
    .custom-style-class {
        borderStyle: custom;
        borderRadius: 10;
        borderFillColor: #e0f7fa;
        borderColor: #00ACC1;
        customBorderX: 1;
        iconFrames: 4;
        textPlacement: right;
        imageHugsTitle: false;
        stroke: #00ACC1;
        textAlign: center;
    }
}
@media (prefers-color-scheme: dark) {
    .custom-style-class {
        borderStyle: custom;
        borderRadius: 10;
        borderFillColor: #164B52;
        borderColor: #45A9B9;
        customBorderX: 1;
        iconFrames: 4;
        textPlacement: right;
        imageHugsTitle: false;
        stroke: #45A9B9;
        textAlign: center;
    }
}

Díky tomu je snazší vytvořit jednotnou vizuální identitu všech vašich formulářů a zároveň snížit počet obrázků, o které se musíte starat.

Jednodušší stylizace, méně údržby

Objekty založené na obrázcích zůstávají nejlepší volbou, pokud potřebujete pro každý stav odlišný vzhled. V mnoha případech však stačí jednoduché barevné tlačítko, přepínač nebo zaškrtávací políčko, a vlastnosti pozadí a ohraničení poskytují mnohem rychlejší a snadnější řešení.

Ať už je nakonfigurujete v editoru formulářů, upravíte jejich styl pomocí CSS nebo je aktualizujete pomocí kódu, výsledek je stejný: méně grafických prvků, o které se musíte starat, a více času věnovaného vývoji aplikace namísto úprav grafiky.