Основное
 Установка Версионирование Темизация Типографика Дизайн-токены Схематики Гайды по миграции
Компоненты
 Accordion Actions panel AG grid Alert App Switcher Autocomplete Badge Breadcrumbs Button Button Group Button toggle Checkbox Clamped list Clamped text Code block Content panel Core Datepicker Description list Divider Dropdown Dynamic translation Empty state File upload Filter Bar Form field Icon Icon Button Icon Item Inline edit Input Layout flex Link List Markdown Modal Navbar Notification Center Overflow items Overlay Popover Progress bar Progress spinner Radio Resizer Scrollbar Search expandable Select Sidebar Sidepanel Skeleton Split button Splitter Table Tabs Tag Tag autocomplete Tag input Tag list Textarea Time range Timepicker Timezone Title Toast Toggle Tooltip Topbar Tree Tree select Username
Другое
 Date formatter Filesize formatter Forms Number formatter Validation
Иконки
CDK
 Key managers Keycodes
Язык интерфейса и примеров
Русский, English
Версия
19.8.0
Tag autocomplete

Tags Autocomplete используется для выбора одного или нескольких значений из списка и для ввода собственных значений.

При фокусе в поле открывается меню справочника. По мере ввода меняется автодополнение. Выбор опции из списка добавляет тег, очищает текст в поле и закрывает меню.

Добавление в справочник

На первом месте в меню автодополнения располагается опция создания нового тега. Она создаёт новый токен из введённого текста, если такого нет в словаре.

Добавление тега также работает по клавише Tab.

Создать копию выбранного тега нельзя: система покажет сообщение Ничего не найдено.

Удаление тегов

Порядок удаления тегов:

  • Если есть выделенные теги, будут удалены они все.
  • Если выделенных тегов нет, будет удалён тег в фокусе.

Теги можно удалить несколькими способами:

  • Клик по иконке удаления (директива kbqTagRemove) внутри тега.
  • Нажатие клавиши Delete или Backspace.
  • Программное удаление через API компонента.

Опция удаления настраивается при помощи атрибута removable (по умолчанию включена).

Выбор тегов

Теги можно выбрать несколькими способами:

  • Клик по тегу при зажатом Ctrl.
  • Нажатие комбинации клавиш Ctrl+A.
  • Space при фокусе на теге.
  • Программный выбор через API компонента.

Опция выбора настраивается при помощи атрибута selectable (по умолчанию включена).

Редактирование

Для включения режима редактирования необходимо установить свойство editable для kbq-tag-list или отдельного kbq-tag.

Вход в режим:

  • При двойном клике по тегу.
  • При нажатии клавиши Enter или F2 (при фокусе на теге).

Сохранение изменений:

  • При нажатии клавиши Enter.
  • При нажатии на кнопку подтверждения (директива kbqTagEditSubmit).

Отмена изменений:

  • При нажатии клавиши Escape.
  • При потере фокуса.

В режиме редактирования тег превращается в поле ввода и остается на той же позиции внутри контрола.

Перестановка и сортировка

Для включения возможности перестановки тегов необходимо установить свойство draggable для kbq-tag-list.

Навигация с клавиатуры
Фокус в пустой области ввода
Клавиша
 Действие
Backspace / ← / Shift + Tab Переместить фокус на последний тег.
Ctrl + A Выделить все теги и поставить фокус на последний из них.
Фокус на теге
Клавиша
 Действие
← / → Переместить фокус на предыдущий/следующий тег.
Space Выбрать/снять выбор тега.
Delete / Backspace Удалить тег.
F2 / Enter Начать редактирование.
Ctrl + A Выделить все теги.
Home / End Переместить фокус на первый/последний тег.
Режим редактирования тега
Клавиша
 Действие
Enter Сохранить изменения.
Esc Отменить изменения.
Вопросы и предложения по документации
Если у вас есть вопросы или вы хотите внести свой вклад в написание документации, пожалуйста, создайте issue в нашем репозитории на GitHub.