При разработке интерфейсов на управляемых формах 1С часто возникает задача сделать элемент управления (например, иконку карандаша для редактирования) кликабельным, но при этом избежать стандартного визуального выделения гиперссылки — синего цвета и подчеркивания. Стандартный объект ФорматированнаяСтрока обладает жестко заданными правилами отрисовки: любой текст, имеющий навигационную ссылку, автоматически подчеркивается платформой. В этой статье мы подробно разберем несколько способов, как обойти это ограничение и добиться желаемого визуального результата.
Прежде всего, проанализируем ситуацию с объектом ФорматированнаяСтрока. Платформа 1С:Предприятие 8.3 при рендеринге этого объекта в управляемой форме самостоятельно определяет стилистику ссылок. Даже если вы попытаетесь программно изменить шрифт фрагмента текста и убрать свойство Подчеркивание, наличие заполненного поля НавигационнаяСсылка заставит систему отрисовать линию под текстом. Поэтому для решения нашей задачи нам придется использовать альтернативные элементы управления или комбинировать их в группах.
Этот метод считается наиболее «нативным» для платформы 1С и рекомендуется в большинстве случаев, так как он не требует написания HTML-кода и работает быстрее всего. Основная проблема, с которой сталкиваются разработчики — это лишние отступы между текстом и иконкой. Разберем по шагам, как настроить элементы правильно. Для тонкой настройки отступов и тестирования интерфейса на лету подойдёт инструмент для редактирования свойств элементов формы в режиме Предприятия.
Шаг 1. Подготовка группы элементов
Для того чтобы текст и иконка (например, карандаш) выглядели как единое целое, их нужно поместить в одну группу. Создадим на форме группу и установим следующие свойства:
Ложь (это критически важно, чтобы группа «обжимала» содержимое).0. Это позволит иконке стоять вплотную к тексту.Шаг 2. Размещение текста и картинки
Внутри группы разместим два элемента:
Шаг 3. Настройка иконки
У элемента «Декорация-Картинка» установим свойство Гиперссылка в значение Истина. Это сделает картинку кликабельной, при наведении курсор будет меняться на «руку», но при этом никакого подчеркивания под картинкой не появится. В событии Нажатие этой декорации мы пропишем необходимый код:
&НаКлиенте
Процедура ДекорацияКарандашНажатие(Элемент)
// Логика открытия формы редактирования или другого действия
Сообщить("Редактирование разрешено!");
КонецПроцедуры
Если вам требуется максимально точное позиционирование символов внутри сложного текста или вы хотите убрать подчеркивание именно у текстовой ссылки, лучшим выбором будет использование Поля HTML-документа. Этот метод позволяет использовать CSS для управления внешним видом.
Рассмотрим пример формирования HTML-строки, где ссылка не будет иметь подчеркивания:
ТекстHTML = "
|<html>
|<body style='font-family: Arial; font-size: 10pt; margin: 0;'>
| Здесь какой-то текст
| <a href='edit' style='text-decoration: none; color: black;' id='pencil_link'>✎</a>
|</body>
|</html>";
Обратите внимание на свойство text-decoration: none; — именно оно отвечает за отсутствие подчеркивания. Чтобы обработать нажатие на такую ссылку в 1С, проанализируем событие ПриНажатии (или onclick в более современных сценариях):
&НаКлиенте
Процедура ПолеHTMLДокументаПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
// Отменяем стандартный переход браузера по ссылке
СтандартнаяОбработка = Ложь;
// Проверяем, по какому элементу кликнули
Если ДанныеСобытия.Element.id = "pencil_link" Тогда
ВыполнитьДействиеРедактирования();
КонецЕсли;
КонецПроцедуры
Выясним еще одну хитрость: использование кнопки. Кнопка в 1С может иметь вид гиперссылки, но при этом она позволяет отображать только картинку без текста. Если мы установим у кнопки свойство Отображение в значение Картинка, платформа не будет пытаться подчеркивать пустое место, где должен был быть текст. При необходимости можно использовать набор графических ресурсов платформы 1С для выбора подходящей иконки.
Рассмотрим настройки такой кнопки:
Изменить или свою иконку карандаша.Разместив такую кнопку вплотную к надписи (как описано в первом решении), мы получим идеальный визуальный эффект кликабельного символа без лишних линий.
Проанализируем ситуацию, когда не хочется возиться с файлами картинок. В современных версиях Windows и мобильных платформах шрифты содержат множество Unicode-символов (например, ✎, ✏, ⚙). Мы можем использовать обычную декорацию-надпись, установив в ее заголовке такой символ.
Чтобы убрать подчеркивание в этом случае, нам всё равно придется отказаться от использования свойства НавигационнаяСсылка самой надписи, так как оно принудительно включает подчеркивание. Вместо этого мы используем событие Нажатие и устанавливаем свойство надписи Гиперссылка = Истина. При этом в настройках шрифта декорации убедимся, что галочка Подчеркнутый снята.
Подводя итог, можно сказать следующее:
Помните, что визуальный комфорт пользователя — важная часть качественного интерфейса, и отсутствие лишних подчеркиваний там, где они не нужны, делает форму более «чистой» и современной.