Eraser

 
<<< Back

Шаблон отображения для "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>

Discuss (9) (6)

See also:
2020-08-03 DashUI 2
2019-09-30 Включение DIY режима в Sonoff устройствах
2019-09-12 Голосовалка для телеграм бота
2018-10-10 DashUI. Свойства объектов используемых в интерфейсе
2018-04-18 Переключение режимов OperationalModes в телеграм
2018-03-05 Как вам такое меню?

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

На форуме: Eraser