Eraser

 
<<< Назад

Шаблон отображения для "OperationalModes"

Объекту надо добавить:

  • свойство image c иконкой типа "fa-shield"
  • метод switch переключатель режима
    if ($this->getProperty("active"))
    $this->callMethod("deactivate");
    else
    $this->callMethod("activate");

    Стиль отображения

    <style>
    @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
    .containerMode {
    background-color: rgba(0, 0, 0, 0.3);
    width: 260px;
    height: 50px;
    border-radius: 15px;
    border:1px solid #444;
    cursor: pointer;
    }
    .iconMode{
    border-radius: 14px;
    border:1px solid #444;
    display:inline-block;
    font-size: 36px;
    color:gray;
    width: 46px;
    height: 46px;
    text-align: center;
    vertical-align: center;
    margin: 1px;
    float: left;
    }
    .nameMode {
    font-size: 140%;
    }
    .time {
    font-size: 60%;
    color:grey;
    }
    </style>
    <div class="containerMode" onClick='callMethod("%.object_title%.switch");'>
    <div class="iconMode" style='background-color:%.active|";yellow"%'>
        <i class="fa %.image%" aria-hidden="true"></i>
    </div>
    <div class="infoMode">
       <div class="nameMode">%.title%</div>
       <div class="time"><span class="ref_icon fa fa-refresh" aria-hidden="true"></span> %.updatedTime%</div>
    </div>
    </div>

Обсуждение (9) (6)

Смотрите так же:
03.08.2020 DashUI 2
30.09.2019 Включение DIY режима в Sonoff устройствах
12.09.2019 Голосовалка для телеграм бота
10.10.2018 DashUI. Свойства объектов используемых в интерфейсе
18.04.2018 Переключение режимов OperationalModes в телеграм
05.03.2018 Как вам такое меню?

Киров, Россия

На форуме: Eraser