切换按钮换色器

Question

我有一个像这样的切换按钮

我想更改切换按钮两侧的颜色以表示亮/暗模式

您好，我刚刚开始使用 TMS Web 核心，想使用 ToggleButton 合并亮/暗模式，如何更改 ToggleButton 两侧的颜色以表示亮/暗模式？

Answer 1

所以改变

TWebToggleButton

的颜色是一项艰巨的工作！不过，这是一个很好的问题，因为该组件没有任何属性可用于在设计时执行此操作。

首先，我做了一个改变颜色的函数：

procedure ChangeToggleButtonColor(aToggleButton: TWebToggleButton; aColor: TColor);
var
  aBtn: TJSHTMLElement;
  aBtnSlider: TJSNode;
  aBtnColor: String;
begin
  aBtnColor := '#' + IntToHex(GetRValue(aColor), 2) + IntToHex(GetGValue(aColor), 2) + IntToHex(GetBValue(aColor), 2) ;
  aBtn := aToggleButton.ElementHandle;
  aBtnSlider := aBtn.getElementsByClassName(aToggleButton.Name + '_slider').item(0);
  asm
    aBtnSlider.style["background-color"] = aBtnColor;
  end;
end;

您传入

TWebToggleButton

和

TColor

来获取它。这样就成功改变颜色了。

然后您需要为表单的

TWebToggleButton

事件上的

OnCreate

设置默认/起始颜色：

procedure TForm1.WebFormCreate(Sender: TObject);
begin
  WebToggleButton.Checked := False;
  ChangeToggleButtonColor(WebToggleButton, clRed);
end;

然后在

TWebToggleButton

的

onClick

事件上，您也需要在用户每次点击它时更改颜色：

procedure TForm1.WebToggleButtonClick(Sender: TObject);
begin
  if (TWebToggleButton(Sender).Checked) then
    ChangeToggleButtonColor(TWebToggleButton(Sender), clBlue)
  else
    ChangeToggleButtonColor(TWebToggleButton(Sender), clRed);
end;

就是这样。现在您应该有一个

TWebToggleButton

，两侧都设置了自定义颜色（选中和未选中）。

未检查：

已检查：