Инлайн-редактирование может заменить форму, когда пользователю нужно изменить всего несколько полей среди большого числа параметров.

В горизонтальном списке можно менять ширину колонки с названием параметра, устанавливать фиксированную или относительную величину.

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

По умолчанию используется формулировка «Не заполнено», но лучше под каждый параметр придумать осмысленный текст. Например: «Ответственный: Не назначен», «Окончание работы: Не определено».

Для полей без подписи вместо заглушки можно использовать формулировку с названием поля: описание, оператор, тип инцидента.

import { kbqDisableLegacyValidationDirectiveProvider } from '@koobiq/components/core';

providers: [kbqDisableLegacyValidationDirectiveProvider()];

Выход из режима редактирования запускает попытку применить изменения. Если новое значение невалидно, то показывается сообщение об ошибке, поле подсвечивается, фокус остается в поле.

Когда заранее известно, какие символы точно не подходят для ввода в поле, система предотвращает ввод некорректных значений. Для этого нужно запрещать ввод определенных символов, например букв в IP-адрес. При этом запрещенные символы не вводятся и показывается желтый тултип.

Если пользователь очистил значение, чтобы избежать ошибки можно при сохранении подставить значение по умолчанию или предыдущее валидное.

При наведении или фокусе на поле справа можно показать кнопку дополнительного действия или меню: скопировать текст, добавить значение в фильтр, очистить поле, заполнить по шаблону.

Дополнительные действия оттеняют значение и располагаются в правом верхнем углу. Когда открыто меню, то сохраняется видимой подсветка и иконка.

Элементы с возможностью инлайн-редактирования должны быть выровнены в соответствии с их видом в режиме просмотра, без учета дополнительных отступов у фона при наведении, фокусе или редактировании.

Поле с инлайн-редактированием должны сохраняться сразу после изменения без общей для всего экрана кнопки «Сохранить».

Не используйте:

• Внутри форм
• При создании сущности — спроектируйте форму для заполнения информации.
• Когда в поле сложная валидация. Например, пароль, эл. почта, уникальные поля, а также когда требуются маски, подсказки.
• Для зависимых полей — если изменение одного поля влияет на другие, лучше использовать форму.
• Для изменения важных данных.
• Когда требуется дополнительно подтверждения для сохранения. Например, диалог «Вы точно уверены?»

Заменой инлайн-редактированию может быть:

• Модальное окно или поповер с формой — для сложных или многострочных данных.
• Отдельная страница редактирования — когда нужен контроль над вводом.
• Инлайн-форма — поле раскрывается в более крупный редактор