Описание компонента Toggle

Определение

Toggle (переключатель) — это интерактивный элемент пользовательского интерфейса, который позволяет пользователю переключаться между двумя состояниями.

Назначение

Основные функции toggle:

  • Предоставление простого способа изменения двоичных настроек (on/off)
  • Визуальная индикация текущего состояния
  • Альтернатива чекбоксам в современных интерфейсах

Параметры компонента

  • size - размер. Принимает значение small, которое уменьшает компонент;
  • type - тип компонента. Принимает следующие значения:
    • handle - уменьшает размер дорожки переключателя, оставляя стандартный размер "рукояти"
    • icon - добавляет иконку на переключатель

Данные компонента

  • label - заголовок переключателя (выделяется жирным шрифтом)
  • icon - иконка рядом с заголовком (например help)
  • description - пояснение под заголовком

Примеры использования

1. Стандартный toggle:

            
<smart
      name="toggle"
      sf-code="toggle"
      template="icon"
      data='{"label":"label", "description":"Description", "icon": "help"}'
  >
</smart>

2. Toggle с иконкой:

        
<smart
      name="toggle"
      sf-code="toggle"
      property = '{"type": "icon"}'
      data='{"label":"label", "description":"Description"}'
  >
</smart>

3. Toggle с параметром handle:

        
<smart
      name="toggle"
      sf-code="toggle"
      property = '{"type": "handle"}'
      data='{"label":"label", "description":"Description"}'
>
</smart>

4. Toggle уменьшенного размера:

        
<smart
  name="toggle"
  sf-code="toggle"
  property = '{"size": "small"}'
  data='{"label":"label", "description":"Description"}'
  >
</smart>

Изменить статью