Графические контролы для выбора опций

Webix включает различные способы выбирать одну или несколько опций из списка.

живое демо

  • Интеграция: jQuery, Angular, React, Vue.js, Backbone
  • Поддерживается во всех современных браузерах
  • Работает на устройствах с сенсорным экраном
  • Соответствует требованиям Секции 508
  • Удобная стилизация с помощью CSS

Обзор

Webix предлагает несколько контролов, которые позволяют выбирать опции из списка: Select, RichSelect, Combo, Multicombo, Multiselect, Checkbox, Radio и Suggest List. С каждым из них удобно и легко работать, а также их легко настроить.

Контрол Select - самый простой из этой группы виджетов. Он позволяет выбирать одну опцию из выпадающего списка.

Если вам нужен более сложный виджет, вы можете выбрать Multicombo, который позволяет выбирать несколько опций из списка. Пользователи также могут вводить текст в поле над списком.

Checkbox

Checkbox - это контрол, который позволяет пользователям управлять параметром с двумя состояниями — включено и выключено. Вы можете добавить несколько чекбоксов для выбора нескольких опций из списка. Webix Checkbox работает также, как обычный HTML чекбокс.

Switch

Switch - это более заметный аналог чекбокса, который хорошо подходит для переключения состояний в настройках. На Switch можно добавлять ярлык для отображения значений 'включено' и 'выключено'.

Radio

Radio - это контрол, который позволяет пользователям выбрать одну опцию из предопределенного набора. Webix Radio работает так же, как и обычный HTML контрол radio.

Suggest List

Suggest List - это контрол, который помогает пользователям заполнять формы. Когда пользователь начинает набирать, на экране появляется список подсказок. Список подсказок формируется в зависимости от введенных символов. Вы можете сочетать этот контрол со стандартным HTML полем ввода, полем ввода Webix Text, или текстовым редактором в виджете для данных. Webix включает различные типы контрола Suggest List.

Type letter 'a' in the 'Country' field

MentionSuggest

MentionSuggest - это выпадающий список с опциями для текстовых полей. MentionSuggest открывается после того, как пользователь введет определенный символ. После того, как пользователь введет еще минимум один символ, список начнет предлагать опции для подстановки на основе ввода.

Введите @ или $ и введите по крайней мере один символ, чтобы открыть один из двух списков

MultiSuggest

MultiSuggest - это улучшенная версия контрола Suggest List. Виджет состоит из выпадающего списка опций и позволяет выбор нескольких опций. Выбранные опции подсвечиваются. Кнопка в конце списка позволяет подтвердить выбор и закрыть список.

CheckSuggest

CheckSuggest - это улучшенная версия контрола Suggest List, который позволяет пользователю выбирать несколько опций. Напротив каждой опции в списке - чекбокс, с помощью которого вы можете отметить опцию для выбора.

GridSuggest

GridSuggest - это улучшенная версия контрола Suggest List. Вместо выпадающего списка с опциями - всплывающее окно с виджетом DataTable, легко настраиваемым компонентом для визуализации табличных данных с сортировкой и полосой прокрутки.

DataSuggest

DataSuggest - это улучшенная версия контрола Suggest List. Вместо выпадающего списка опций - окно с виджетом DataView, который идеально подходит для опций с изображениями.

DateRangeSuggest

DateRangeSuggest - это улучшенная версия контрола Suggest List. Вместо выпадающего списка - всплывающее окно с контролом DateRangePicker для выбора диапазона дат.

Select

Select - это контрол, который позволяет выбирать опцию из выпадающего списка. Он работает как стандартный HTML < select > и работа с ним не требует много усилий.

RichSelect

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

Combo

Контрол Combo - это редактируемое текстовое поле со всплывающим списком опций, который появляется после клика по полю. Пользователи также могут редактировать содержимое текстового поля. Список опций сокращается в зависимости от введенных символов. Combo предоставляет множество настроек для изменения вида списка опций.

Начните набирать слово 'Banana' в поле Fruit

Multicombo

Multicombo - это контрол, который сочетается со всплывающим списком CheckSuggest. Напротив каждой опции из списка есть checkbox, с помощью которого можно выбирать сразу несколько опций. Список появляется по клику на текстовом поле. Пока пользователи вводят символы, список опций соответственно сокращается. Выбранные опции можно убрать из списка, нажав на 'крестик'. Вы также можете настроить вид выбранных опций и показывать только их количество.

Multiselect

Multiselect - это нередактируемый контрол, который позволяет выбирать опции из выпадающего списка. Вы можете открыть список опций, кликнув по текстовому полю. По умолчанию, Multiselect открывает всплывающий список контрола CheckSuggest, поэтому напротив каждой опции есть чекбокс. Вы можете настроить работу виджета, а также вид списка опций.