Создание боковой панели с помощью Tailwind CSS

Tailwind — это фреймворк CSS. При его использовании вам не придется писать пользовательский CSS для стилизации вашего приложения. Tailwind предоставляет глубокий каталог инструментов и классов CSS для управления отступом, полями, цветом, шрифтом и многим другим для создания красивого пользовательского дизайна.

Давайте посмотрим, как можно создать боковую панель с помощью Tailwind.

Первый тег, внутри которого будут находиться все остальные теги, — это div, в который мы запишем классы:

  • min-h-0 (min-height: 0px)
  • flex-1 (flex: 1 1 0%)
<div class="min-h-0 flex-1 flex overflow-hidden">
....
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

Второй тег, внутри первого div — это nav со следующими классами:

  • bg-gray-800 (background-color: rgb(31 41 55))
<div class=" min-h-0 flex-1 flex overflow-hidden">
    <nav aria-label="Sidebar" class="narrow-sidebar hidden lg:block lg:flex-shrink-0 lg:bg-gray-800 lg:overflow-y-auto">
....
    </nav>
</div>
Войти в полноэкранный режим Выход из полноэкранного режима

Третий тег, внутри nav — еще один div, со следующими классами:

  • relative (position: relative)
  • w-20 (width: 5rem; /* 80px */)
  • flex (display: flex)
  • space-y-16 (margin-top: 4rem; /* 64px */)
  • flex-col (to position flex items vertically)
<div class=" min-h-0 flex-1 flex overflow-hidden">
    <nav aria-label="Sidebar" class=" hidden lg:block flex-shrink-0 bg-gray-800 overflow-y-auto">
        <div class="relative w-20 flex space-y-16 flex-col p-3">
....
        </div>
    </nav>
</div>
Войти в полноэкранный режим Выход из полноэкранного режима

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

<div class=" min-h-0 flex-1 flex overflow-hidden">
    <nav aria-label="Sidebar" class="hidden lg:block flex-shrink-0 bg-gray-800 overflow-y-auto">
        <div class="relative w-20 flex space-y-16 flex-col p-3">

            <a href="#" class="text-gray-400 hover:text-red-700">
                <div class="flex-shrink-0 inline-flex items-center justify-center w-14">
                    <i class="fa fa-house"></i>
                </div>
                <div class="text-center text-xs font-normal ">Home</div>
            </a>

            <a href="#" class="text-gray-400 hover:text-red-700">
                <div class="flex-shrink-0 inline-flex items-center justify-center w-14">
                    <i class="fa fa-cog"></i>
                </div>
                <div class="text-center text-xs font-normal ">Settings</div>
            </a>

            <a href="#" class="text-gray-400 hover:text-red-700">
                <div class="flex-shrink-0 inline-flex items-center justify-center w-14">
                    <i class="fa fa-envelope"></i>
                </div>
                <div class="text-center text-xs font-normal ">Messages</div>
            </a>

        </div>
    </nav>
</div>

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

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

Окончательный вид боковой панели выглядит следующим образом:

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