Блок "Checkbox с подписью"

Блок доступен начиная с версии 1.0

Назначение блока

Блок позволяет задать логическое значение (True / False) с помощью переключателя (чекбокса) и сопровождается текстовой подписью.

Чтобы начать работать с блоком. его необходимо выбрать в библиотеке и переместить в область графа.

Настройки блока

Работа с настройками блока осуществляется через локальное меню (пункт Настройки):

Модальное окно настроек представлено ниже:

Общие настройки блоков описаны в отдельном разделе.

Раздел "Настройки checkbox"

Наименование	Тип	Обязательное	Описание	Пример
Текст подписи	Строковый	Нет	Подпись чекбокса	text
Отметка по умолчанию	Флаг	Нет	Начальная отметка чекбокса	-
Заблокировать Checkbox	Флаг	Нет	Статус недоступности компонента	-
Стили	HTML	Нет	Стили компонента	.vismind-checkbox-container {} .vismind-checkbox-container-input {} .vismind-checkbox-container-label {}

Входы блока

Наименование выхода	Тип	Описание
Отметка по умолчанию	Флаг	Начальная отметка чекбокса
Заблокировать Checkbox	Флаг	Статус недоступности компонента
Стили	HTML	Стили компонента

Выходы блока

В блоке нет выходов

События блока

Название выхода	Тип	Описание
Событие смены выбора (Отметка)	Флаг	Используется для динамического обновления визуализаторов, при изменении отметки чекбокса

Описание работы блока

Блок предназначен для задания логического значения. При изменении значения запускается расчет событийной ветки блока.

Визуализатор выглядит следующим образом:

Стилизация выпадающего списка

Структура выпадающего списка для стилизации

  <div class="vismind-checkbox-container">
    <input
      type="checkbox"
      class="vismind-checkbox-container-input"
    />
    <label
      class="vismind-checkbox-container-label"
    >
    </label>
  </div>

Пример стилей для выпадающего списка

.vismind-checkbox-container {
    --size: 100px;
    display: flex;
    align-items: center;
}

.vismind-checkbox-container-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: var(--size);
    height: calc(var(--size) / 2);
    background-color: #fff;
    border: 3px solid #222;
    border-radius: 30px 100px 100px 100px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    outline: none;  
    cursor: pointer;
    position: relative;
    transition: all 0.5s ease-in-out;
    margin: 0;
    flex-shrink: 0;
}

.vismind-checkbox-container-input::before {
    content: "";
    position: absolute;
    width: calc(var(--size) / 2);
    height: calc(var(--size) / 2);
    left: 0;
    top: 50%;
    transform: translateY(-50%) scale(0.7);
    border: 3px solid #222;
    border-radius: 30px 100px 100px 100px;
    background-color: #fde881;
    box-sizing: border-box;
    transition: all 0.5s ease-in-out;
}

.vismind-checkbox-container-input:checked {
    background-color: #fde881;
    border-radius: 100px 100px 30px 100px;
}

.vismind-checkbox-container-input:checked::before {
    left: 50%;
    background-color: #fff;
    border-radius: 100px 100px 30px 100px;
}

.vismind-checkbox-container-label {
    margin-left: 15px;
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    font-size: 18px;
    color: #333;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.2;
}