Одними из моих любимых технологий при создании пользовательских интерфейсов для веб-сайтов являются Tailwind CSS и Flowbite.
Tailwind CSS — это быстро развивающийся CSS-фреймворк благодаря своему подходу к использованию классов. Это позволяет легко создавать страницы непосредственно из HTML без необходимости кодирования в CSS-файлах, а также поддерживать одни и те же классы во всех проектах.
Flowbite — самая популярная библиотека компонентов, построенная с использованием классов Tailwind CSS, включая интерактивные элементы, такие как выпадающие окна, модалы, навигационные панели, карусельные слайдеры и многое другое.
Сегодня я хочу показать вам, как можно создать компонент аватара с помощью Tailwind CSS и Flowbite.
Аватар Tailwind CSS
Компонент аватар может использоваться в качестве визуального идентификатора профиля пользователя на сайте. Обычно он состоит из элемента изображения.
Давайте посмотрим простой пример из Flowbite:
<img class="w-10 h-10 rounded-full" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Rounded avatar">
Как видите, все, что нам нужно было сделать, это применить класс rounded-full к элементу изображения.
Давайте создадим более интересный стиль для компонента аватара с помощью границы:
<img class="w-10 h-10 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500" src="https:/flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Bordered avatar">
Потрясающе! Мы можем взять другой пример с Flowbite, добавив зеленую или красную точку относительно изображения, чтобы показать онлайн статус пользователя:
<div class="relative">
<img class="w-10 h-10 rounded-full" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="">
<span class="top-0 left-7 absolute w-3.5 h-3.5 bg-green-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
</div>
Если пользователь не установил аватар по умолчанию, вы также можете использовать следующий пример SVG в качестве заполнителя:
<div class="relative w-10 h-10 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600">
<svg class="absolute w-12 h-12 text-gray-400 -left-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
</div>
Вы можете посмотреть другие примеры Tailwind CSS Avatar на Flowbite.
Flowbite — Компоненты Tailwind CSS
Если вы хотите получить доступ к большему количеству компонентов Tailwind CSS, вы можете ознакомиться с библиотекой компонентов Flowbite, которая включает до 30 компонентов, таких как выпадающие окна, модалы, навигационные панели и многое другое.
- Flowbite — Компоненты Tailwind CSS