Как создать компонент ввода поиска с помощью Tailwind CSS и Flowbite

Автор Абрамов Илья На чтение 4 мин. Просмотров 9 Опубликовано 12.02.2023

Я уже давно использую Tailwind CSS и Flowbite при разработке веб-сайтов, в основном из-за того, как быстро и эффективно я могу создавать страницы с помощью классов утилит и предварительно созданных компонентов Flowbite, таких как навигационные панели, модалы, кнопки и многое другое.

Flowbite — одна из самых популярных библиотек компонентов, построенная на основе классов Tailwind CSS, включая навигационные панели, модалы, строки поиска и многое другое.

Tailwind CSS — один из самых быстроразвивающихся CSS-фреймворков, основанный на методологии классов, ориентированных на полезность.

Сегодня я хочу показать вам, как можно создать компонент ввода поиска с использованием классов Tailwind CSS и компонентов Flowbite.

Давайте приступим!

Tailwind CSS Search Input — Flowbite

Первое, что нам нужно сделать, это настроить HTML-разметку для компонента, которая будет включать form, label, input и кнопку отправки.

Вот пример:

<form>   
    <label for="default-search">Search</label>
        <input type="search" id="default-search" placeholder="Search Mockups, Logos..." required>
        <button type="submit">Search</button>
</form>

Вход в полноэкранный режим Выход из полноэкранного режима

Выглядит не слишком хорошо, поскольку мы еще не применили никаких стилей, но мы начнем добавлять некоторые классы Tailwind CSS и сразу же сделаем это лучше.

Начнем со стилизации элементов label и input:

<form>   
    <label class="mb-2 text-sm font-medium text-gray-900 sr-only" for="default-search">Search</label>
        <input class="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" type="search" id="default-search" placeholder="Search Mockups, Logos..." required>
        <button type="submit">Search</button>
</form>

Вход в полноэкранный режим Выход из полноэкранного режима

У нас получается, но этого все еще недостаточно. Давайте также стилизуем элемент button:

<form>   
    <label class="mb-2 text-sm font-medium text-gray-900 sr-only" for="default-search">Search</label>
        <input class="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" type="search" id="default-search" placeholder="Search Mockups, Logos..." required>
        <button class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2" type="submit">Search</button>
</form>

Вход в полноэкранный режим Выход из полноэкранного режима

Добавим дополнительную обертку div и SVG-иконку с контуром, чтобы показать, что это строка поиска:

<form>   
    <label class="mb-2 text-sm font-medium text-gray-900 sr-only" for="default-search">Search</label>
    <div class="relative">
        <input class="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" type="search" id="default-search" placeholder="Search Mockups, Logos..." required>
        <button class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2" type="submit">Search</button>
</div>
</form>

Вход в полноэкранный режим Выход из полноэкранного режима

Наконец, добавим классы для темного режима:

<form>   
    <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300">Search</label>
    <div class="relative">
        <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
            <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </div>
        <input type="search" id="default-search" class="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search Mockups, Logos..." required>
        <button type="submit" class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Search</button>
    </div>
</form>

Вход в полноэкранный режим Выход из полноэкранного режима

Конечный результат должен выглядеть примерно так:

Вы можете посмотреть больше примеров поискового ввода Tailwind CSS в официальной документации Flowbite.

Вот несколько примеров:

Tailwind CSS Search Input — Flowbite
Flowbite — библиотека компонентов Tailwind CSS

Добавить комментарий