Системный хайлайтер

Системный хайлайтер — это CSS-обводка для временного выделения элемента интерфейса. Расширение добавляет анимированную градиентную рамку и при необходимости внешнее свечение.

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

Расширение ui.system.highlighter работает через CSS-классы и CSS-переменные на DOM-элементе.

Подключить расширениеПодключить расширение

Если вы подключаете стили из PHP, загрузите расширение ui.system.highlighter.

\Bitrix\Main\UI\Extension::load('ui.system.highlighter');
        

Если хайлайтер нужен внутри собственного расширения, добавьте import 'ui.system.highlighter'; .

После подключения добавьте класс ui-highlighter к элементу, который нужно выделить.

<div class="task-card ui-highlighter">
            Новая задача
        </div>
        

Для корректного отображения рамки задайте выделяемому элементу position: relative.

.task-card {
            position: relative;
            border-radius: 12px;
        }
        

Добавить свечениеДобавить свечение

Чтобы добавить внешнее свечение, передайте класс —with-glow.

<div class="task-card ui-highlighter —with-glow">
            Новая задача
        </div>
        

После завершения цикла анимации свечение плавно скрывается. Рамка остается на элементе.

Если у элемента или его родителя задан overflow: hidden, внешнее свечение может обрезаться. Учитывайте это для карточек, строк таблиц и элементов внутри прокручиваемых контейнеров.

Выбрать оформлениеВыбрать оформление

Цветовая схема задается модификаторами.

• Без модификатора — синяя рамка с зеленым переходом. Используется как базовое выделение.

• —success — зеленая рамка с зеленым переходом. Подходит для успешного состояния или завершенного действия.

• —alert — оранжевая рамка с желтым переходом. Подходит для предупреждения или состояния, которое требует внимания.

<div class="task-card ui-highlighter —success —with-glow">
            Задача выполнена
        </div>
        
        <div class="task-card ui-highlighter —alert —with-glow">
            Проверьте срок задачи
        </div>
        

Настроить толщину рамки и свеченияНастроить толщину рамки и свечения

Толщину рамки можно задать готовыми классами.

• —border-md — рамка 1px.

• —border-lg — рамка 2px.

Толщину свечения задают классы —glow-md и —glow-lg. Эти классы работают только вместе с —with-glow.

• —glow-md — свечение 1px.

• —glow-lg — свечение 2px.

<div class="task-card ui-highlighter —with-glow —border-lg —glow-lg">
            Важное изменение
        </div>
        

Задать собственные значенияЗадать собственные значения

Хайлайтер поддерживает CSS-переменные. Передайте их в стиле элемента или в отдельном CSS-классе на том же элементе.

• —ui-highlighter-radius — радиус скругления рамки. Значение по умолчанию — 29px.

• —ui-highlighter-border-size — толщина рамки. Значение по умолчанию — 1px.

• —ui-highlighter-glow-size — толщина свечения. Значение по умолчанию — 2px.

• —ui-highlighter-animation-duration — длительность одного оборота градиента. Значение по умолчанию — 5s.

• —ui-highlighter-iteration-count — количество оборотов градиента. Значение по умолчанию — 2.

<div class="pipeline-stage ui-highlighter —with-glow">
            Стадия изменена
        </div>
        

.pipeline-stage {
            position: relative;
            border-radius: 8px;
            —ui-highlighter-radius: 8px;
            —ui-highlighter-border-size: 2px;
            —ui-highlighter-glow-size: 4px;
            —ui-highlighter-animation-duration: 3s;
            —ui-highlighter-iteration-count: 3;
        }
        

Задайте для —ui-highlighter-radius то же значение, что и для border-radius элемента. Так рамка повторит форму блока и не будет выглядеть отдельной от него.

Ограничения компонентаОграничения компонента

Хайлайтер отвечает только за визуальное выделение. Он не добавляет и не удаляет классы, не меняет содержимое элемента и не обрабатывает клики.

Если выделение нужно показать после действия, добавьте классы в своем коде. Когда выделение больше не нужно, удалите эти классы.

В примере после изменения задачи компонент добавляет хайлайтер к карточке, а затем снимает выделение.

import { Dom } from 'main.core';
        
        const taskCard = document.querySelector('.task-card');
        
        if (taskCard)
        {
            // Показать выделение после действия.
            Dom.addClass(taskCard, ['ui-highlighter', '—with-glow', '—success']);
        
            setTimeout(() => {
                // Убрать выделение, когда оно больше не нужно.
                Dom.removeClass(taskCard, ['ui-highlighter', '—with-glow', '—success']);
            }, 12000);
        }