Главная » CSS

Как создать отзывчивый компонент заголовка с помощью Tailwind CSS

На чтение 12 мин. Просмотров 27 Опубликовано

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

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

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

Вот как компонент заголовка будет выглядеть на настольном и мобильном компьютерах после того, как мы его создадим:

А вот мобильный вид:

Мы даже закодируем классы для темного режима:

Без лишних слов, давайте начнем!

Содержание
  1. Установите Tailwind CSS и Flowbite
  2. Установите Flowbite
  3. Создание компонента заголовка в Tailwind CSS
  4. Блоки Flowbite
  5. Библиотека Flowbite

Установите Tailwind CSS и Flowbite

Для этого проекта нам понадобится установить Tailwind CSS на ваш локальный проект.

Для этого вам нужно следовать официальному руководству по установке и установить его через NPM:

npm install -D tailwindcss
npx tailwindcss init
Войдите в полноэкранный режим Выйти из полноэкранного режима

Теперь необходимо настроить пути к шаблонам:

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Далее создайте CSS файл в папке src/input.css и импортируйте директивы Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;
Войти в полноэкранный режим Выйти из полноэкранного режима

Используйте инструмент CLI, чтобы следить за изменениями и компилировать код CSS:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Войти в полноэкранный режим Выйти из полноэкранного режима

Установите Flowbite

Вам необходимо установить Flowbite, чтобы убедиться, что переключение меню будет работать. Следуйте руководству по быстрому запуску Flowbite и выполните следующие шаги:

Установите Flowbite через NPM:

npm i flowbite
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Требуйте Flowbite в качестве плагина:

module.exports = {

    plugins: [
        require('flowbite/plugin')
    ]

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

Настройте путь шаблона к папке node_modules/:

module.exports = {

    content: [
        "./node_modules/flowbite/**/*.js"
    ]

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

Наконец, включите файл JavaScript для работы интерактивных элементов:

<script src="../path/to/flowbite/dist/flowbite.js"></script>
Войти в полноэкранный режим Выйти из полноэкранного режима

Как вариант, вы также можете просто использовать CDN:

<script src="https://unpkg.com/flowbite@1.4.7/dist/flowbite.js"></script>
Войти в полноэкранный режим Выйти из полноэкранного режима

Потрясающе! Теперь, когда у вас есть рабочий проект Tailwind CSS + Flowbite, легко приступить к созданию компонента заголовка.

Создание компонента заголовка в Tailwind CSS

Прежде всего, нам нужно создать основную HTML-разметку. У нас будет логотип, список пунктов меню и несколько CTA-кнопок с правой стороны.

Мы будем использовать оба HTML-элемента <header> и <nav>:

<header>
    <nav>
        <div>
            <a href="#">
                <img src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo" />
                <span>Flowbite</span>
            </a>
            <div>
                <a href="#">Log in</a>
                <a href="#">Get started</a>
            </div>
            <div>
                    <li>
                        <a href="#" aria-current="page">Home</a>
                    </li>
                    <li>
                        <a href="#">Company</a>
                    </li>
                    <li>
                        <a href="#">Marketplace</a>
                    </li>
                    <li>
                        <a href="#">Features</a>
                    </li>
                    <li>
                        <a href="#">Team</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>
Вход в полноэкранный режим Выход из полноэкранного режима

Довольно хорошая и чистая разметка, однако, нам нужно начать оформлять все стилями.

Давайте воспользуемся стилями из компонента Tailwind CSS Header из коллекции Flowbite:

<header>
    <nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
        <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
            <a href="https://flowbite.com" class="flex items-center">
                <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
                <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
            </a>
            <div class="flex items-center lg:order-2">
                <a href="#" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Log in</a>
                <a href="#" class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800">Get started</a>
            </div>
            <div class="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu">
                <ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
                    <li>
                        <a href="#" class="block py-2 pr-4 pl-3 text-white rounded bg-primary-700 lg:bg-transparent lg:text-primary-700 lg:p-0 dark:text-white" aria-current="page">Home</a>
                    </li>
                    <li>
                        <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Company</a>
                    </li>
                    <li>
                        <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Marketplace</a>
                    </li>
                    <li>
                        <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Features</a>
                    </li>
                    <li>
                        <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Team</a>
                    </li>
                    <li>
                        <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь добавим иконку гамбургера и используем атрибут данных data-collapse-toggle из функциональности коллапса из основной библиотеки Flowbite JS:

<button data-collapse-toggle="mobile-menu" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu" aria-expanded="false">
                    <span class="sr-only">Open main menu</span>
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
                    <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
Вход в полноэкранный режим Выход из полноэкранного режима

Этот элемент будет добавлен сразу после двух CTA-кнопок, и мы будем показывать его только на мобильных устройствах.

Вот окончательный HTML:

<header>
    <nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
        <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
            <a href="https://flowbite.com" class="flex items-center">
                <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
                <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
            </a>
            <div class="flex items-center lg:order-2">
                <a href="#" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Log in</a>
                <a href="#" class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800">Get started</a>
                <button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
                    <span class="sr-only">Open main menu</span>
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
                    <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                </button>
            </div>
            <div class="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
                <ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
                    <li>
                        <a href="#" class="block py-2 pr-4 pl-3 text-white rounded bg-primary-700 lg:bg-transparent lg:text-primary-700 lg:p-0 dark:text-white" aria-current="page">Home</a>
                    </li>
                    <li>
                        <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Company</a>
                    </li>
                    <li>
                        <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Marketplace</a>
                    </li>
                    <li>
                        <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Features</a>
                    </li>
                    <li>
                        <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Team</a>
                    </li>
                    <li>
                        <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>
Вход в полноэкранный режим Выход из полноэкранного режима

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

Блоки Flowbite

Что, если я скажу вам, что вам не нужно кодировать все эти вещи с нуля? Вы можете воспользоваться Flowbite Library и Flowbite Blocks, чтобы использовать компоненты и разделы сайта и создавать свои проекты еще быстрее с помощью Tailwind CSS.

Вот несколько примеров более продвинутых компонентов заголовков из коллекции Flowbite Blocks:

  • Flowbite Blocks
  • Tailwind CSS Headers

Библиотека Flowbite

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

  • Библиотека Flowbite

Рекомендуем почитать:

Оцените статью
Procodings.ru
Добавить комментарий