Как изменить цвет сторон переключателя ToggleButton в TMS Web Core для темной и светлой темы интерфейса

Delphi , Компоненты и Классы , Кнопки

Разработчики, работающие с TMS Web Core, часто сталкиваются с необходимостью реализации светлых и темных тем в своих веб-приложениях. Одним из элементов интерфейса, который может быть адаптирован под текущую тему, является переключатель ToggleButton. В данной статье мы рассмотрим, как можно изменить цвета сторон переключателя в TMS Web Core, чтобы отразить текущий режим интерфейса - светлый или темный.

Проблема

При работе с компонентом TWebToggleButton в TMS Web Core может возникнуть задача изменения цвета для каждой из сторон переключателя. По умолчанию, компонент не имеет встроенных свойств для изменения цвета, что делает эту задачу нестандартной.

Решение

Для начала, давайте создадим функцию, которая будет изменять цвет переключателя. Функция ChangeToggleButtonColor принимает на вход экземпляр TWebToggleButton и желаемый цвет в виде TColor.

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;

Теперь, чтобы установить начальный цвет для переключателя, мы используем событие OnCreate формы:

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

И, наконец, для изменения цвета при каждом клике по переключателю, используем событие OnClick:

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

Теперь у вас есть TWebToggleButton с настраиваемым цветом для каждой из сторон (Checked и not Checked), что позволяет легко интегрировать светлый и темный режимы в ваше приложение.

Подтвержденный ответ

Решение проблемы заключается в создании функции для изменения цвета переключателя и настройке событий, которые будут вызывать эту функцию в соответствии с текущим состоянием переключателя.

Альтернативный ответ

Не требуется, так как предоставленное решение полностью решает задачу изменения цвета переключателя.

Заключение

Используя приведенный выше код, вы можете легко настроить цвета переключателя ToggleButton в TMS Web Core для отображения текущего режима интерфейса - светлого или темного. Это позволит улучшить пользовательский опыт и сделать ваше приложение более адаптивным.

Создано по материалам из источника по ссылке.

Разработчики TMS Web Core могут изменять цвета сторон переключателя ToggleButton для адаптации интерфейса под светлую и темную тему, используя специальную функцию для изменения цвета и настройки событий.

Комментарии и вопросы

Получайте свежие новости и обновления по Object Pascal, Delphi и Lazarus прямо в свой смартфон. Подпишитесь на наш Telegram-канал delphi_kansoftware и будьте в курсе последних тенденций в разработке под Linux, Windows, Android и iOS

:: Главная :: Кнопки ::