Трюк с ручкой для переключения ионов и диапазона ионов

Это небольшая статья об использовании сокращенного свойства CSS "background" для стилизации современных (4+) компонентов ion-toggle и ion-range Ionic.

Ionic Framework великолепен тем, что построен с использованием стандартных веб-технологий (веб-компонентов).

Одна проблема, с которой я недавно столкнулся при использовании новых версий фреймворка, была связана с компонентами ion-range и ion-toggle: Ionic 4+ и более новые версии используют shadow DOM для своих компонентов и стилизации внутренних элементов внутри Ionic-компонента. это вызов (подробнее об этом читайте в статье Джошуа Морони).

Параметры стилизации внутренних элементов каждого компонента Ionic (пока) ограничены открытыми в настоящее время настраиваемыми свойствами CSS, например, это то, что у вас есть для ion-toggle:

В моем приложении мне нужно было добавить выражение, чтобы подчеркнуть состояние ion-toggle, и в идеале я хотел что-то вроде этого:

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

Стилизация ручки

Я посмотрел на самую первую переменную CSS «- background» и понял, что это…

… Сокращение, которое устанавливает следующие свойства в одном объявлении: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size и background-attachment.

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

Размещение SVG-изображения ion-icon на ручке:

Поскольку Ionic поставляется с набором иконок ion, мы можем получить такие иконки в векторном формате (SVG) на сайте www.ionicons.com:

Я загрузил значки галочка и закрыть как SVG, а затем использовал этот замечательный URL-кодировщик, чтобы подготовить его для моего CSS:

Некоторые основные моменты вышеизложенного:

Я удалил width=’512' height=’512' из источника SVG, поскольку Safari плохо справляется с такими атрибутами
Я изменил цвет stroke на «белый» (#fff) вместо черного (# 000) для значка галочки, чтобы сделать его более заметным на темном фоне.
Я использовал «центр / 80%», чтобы настроить размер значка и централизовать его размещение.

С внесенными выше изменениями мы получили следующее:

Размещение буквы на ручке:

Иногда мы хотим разместить на ручке заглавную букву. Итак, в моем приложении я хотел получить буквы H, S, L и A для цветовых диапазонов, которые я реализовал с помощью ion-range.

Для этого мы снова можем использовать возможности SVG. Я создал этот URL-кодированный SVG здесь, который использует центрально выровненный текстовый элемент SVG, и теперь я могу заменить букву на все, что мне нужно:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">

    <text style='font-size: 48px' fill='black' x='50%' y='50%' alignment-baseline='central' text-anchor='middle'>
    A
    </text>

</svg>

Теперь, используя тот же кодировщик URL, я создал эти правила CSS:

И конечный результат:

Сокращенные свойства CSS удивительны, поскольку они позволяют стилизовать многие аспекты ваших элементов, а не только один. Свойство CSS «background» очень мощно, так как оно имеет множество параметров стилей, и мы можем использовать его с любым компонентом Ionic, который предоставляет его через переменную CSS.

Спасибо за чтение и удачного кодирования!

Трюк с ручкой для переключения ионов и диапазона ионов