Хотя type="color" - это не то, что нужно большинству веб-разработчиков в их повседневном дизайне, это своего рода элемент управления вводом, который присутствует повсюду, и его поддержка еще не популярна в основных браузерах и платформах.
Имея немного дополнительного времени, я решил попробовать свои силы в настраиваемом компоненте ввода, который можно использовать для ввода цветов. Это не так необычно, как то, что реализовано в Chrome или Firefox, но это действительно простой компонент, который позволяет вам вводить цвет в любом формате (шестнадцатеричный, rgb (), rgba (), прозрачный или именованный цвет - и даже градиенты) и показывает вы предварительный просмотр этого цвета.
HTML: определение структуры компонентов
Что касается структуры компонентов, нам нужно что-то действительно простое. Мой взгляд на эту тему следующий:
- Внешний
<div>контейнер, который держит все вместе. - Два
<div>контейнера внутри, которые используют FlexBox для создания удобного макета. - Один элемент
<input>внутри первого контейнера, в который пользователь может ввести текст. - Один цветной элемент
<div>, который будет предварительно просматривать цвет, вводимый пользователем.
CSS: Делаем все красивым
В своей реализации я использовал около 30 строк CSS. Что делает мой код, по сути, следующее:
- Настройте макет для компонента с помощью FlexBox. Два внутренних контейнера
<div>имеют соотношение 19: 1. - Примените базовый стиль к элементу
<input>, чтобы элемент по умолчанию выглядел немного красивее. - Придайте элементу предварительного просмотра
<div>базовый стиль, чтобы он выглядел как элемент предварительного просмотра цвета.
JavaScript: создание динамических компонентов и события
Заключительная часть - использовать Javascript, чтобы воплотить нашу идею в жизнь. Я решил сделать свой компонент модульным, поэтому я могу использовать одну функцию для преобразования любого <div> элемента на моей странице в компонент, который я только что создал. Вышеупомянутая функция выполняет следующие действия примерно в 15 строках JavaScript:
- Добавьте соответствующий класс в контейнер
<div>. - Заполните контейнер соответствующим HTML-кодом.
- Обновите элементы внутри него, чтобы они имели соответствующие
id. - Добавьте прослушиватель событий для события ввода в поле
<input>, чтобы элемент предварительного просмотра<div>реагировал на изменения ввода.
Вот и все. Вот как выглядит компонент:
И вот некоторые из поддерживаемых форматов значений (которые, по сути, являются любым допустимым значением background в CSS):
Полный код компонента можно найти здесь, а также Демо Codepen, если вам так удобнее. Я также обнаружил, что этот компонент совместим с Bootstrap (и, возможно, с другими фреймворками CSS) и выглядит вполне прилично без каких-либо изменений в его CSS, поэтому вы можете добавить его в любой и все свои проекты.
Спасибо за внимание! Если вам понравилась эта статья, хлопните в ладоши или 50 - все зависит от вас!
