Примеры компонентов ввода чисел с открытым исходным кодом
В этой статье я покажу вам коллекцию компонентов ввода чисел, закодированных с помощью Tailwind CSS, которые вы можете использовать в своем проекте, чтобы на этих примерах пользователи могли вводить все типы числовых форматов, такие как адреса с почтовым индексом, данные кредитной карты, валюту. конверсии, номера телефонов и многое другое.
Прежде чем приступить к работе, убедитесь, что в вашем проекте установлены как Tailwind CSS, так и Flowbite, чтобы визуализированные HTML и JS работали.
Без лишних слов, давайте перейдем к примерам компонентов пользовательского интерфейса!
Числовой ввод Tailwind CSS
Компонент ввода чисел из Flowbite можно использовать для ввода числовых значений внутри формы, например, для поля количества, почтового индекса, номера телефона, номера вашей кредитной карты и т. д. Все компоненты пользовательского интерфейса написаны исключительно с помощью Tailwind CSS.
Примеры на этой странице имеют базовую функциональность, закодированную с помощью JavaScript, а ввод количества имеет более расширенную возможность увеличивать и уменьшать значение с помощью атрибута из data-input-counter Flowbite JS API.
Поле ввода почтового индекса
Используйте этот пример со значком и вспомогательным текстом, чтобы установить значение почтового индекса внутри поля формы, также применив атрибут шаблона для проверки ввода с помощью регулярного выражения для 5-значного числа.
Поле номера телефона
Используйте этот пример, чтобы задать номер телефона внутри поля формы на основе атрибута type="phone" и раскрывающегося меню для выбора кода страны.
Кнопки управления
Используйте этот пример с кнопками управления, чтобы увеличивать и уменьшать значение внутри поля ввода.
Если в вашем проекте установлен Flowbite JS, вы можете использовать атрибут данных data-input-counter для инициализации целевого поля ввода, а затем использовать следующие атрибуты данных для назначения кнопок, которые будут увеличивать и уменьшать значение поля ввода:
data-input-counter- инициализировать поле вводаdata-input-counter-increment- увеличить значение поля вводаdata-input-counter-decrement- уменьшить значение поля ввода
Кнопки управления со значком
Используйте этот пример, чтобы добавить значок в поле ввода, чтобы улучшить взаимодействие с пользователем.
Вход счетчика
Используйте этот пример как альтернативу приведенному выше примеру кнопок управления.
Ввод валюты
Этот компонент можно использовать для установки значения валюты внутри поля формы, когда вам нужно установить цену.
Ввод кредитной карты
Используйте этот компонент для установки информации, необходимой при совершении онлайн-транзакции с помощью кредитной карты, путем добавления номера карты, даты истечения срока действия и кода безопасности. Компонент использует Flowbite Datepicker.
Ввод пин-кода
Используйте этот пример ввода PIN-кода, чтобы установить 6-значный код. Его можно использовать при настройке новой учетной записи или при совершении платежа. Код отправляется по телефону или электронной почте.
Ввод числа с помощью ползунка
Этот пример можно использовать для установки значения поля ввода числа, перемещая компонент ползунка диапазона или вводя значение в поле ввода. Компонент использует ползунок диапазона Flowbite.
Конвертировать валюту
Используйте этот пример двух полей ввода чисел и раскрывающихся списков для конвертации валюты и даже из фиатной валюты в криптовалюту.
Поведение JavaScript
Вы можете ознакомиться с примерами Flowbite JS API, чтобы узнать, как программно работать с полями ввода чисел с помощью JavaScript.
Компоненты
Эти невозможно было бы создать без следующих ресурсов и компонентов пользовательского интерфейса с открытым исходным кодом:
