Как сделать компонент справочного центра с помощью TailwindCSS

RedDeveloper
31.03.2023 10:15
Как сделать компонент справочного центра с помощью TailwindCSS

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

Хорошие справочные центры хорошо организованы и тщательно представлены, что позволяет клиентам легко ориентироваться на сайте и находить то, что они ищут.

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

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

Демонстрация справочного центра
Демонстрация справочного центра

Понимание задачи

Как уже говорилось ранее, справочный центр - это место, где клиент может найти ответ на все интересующие его вопросы. Он может сделать это двумя возможными способами: через поиск или через заранее заданный вопрос.

Поэтому наш справочный центр будет состоять из двух частей.

  • Панель поиска
  • Определенные разделы
Справочный центр
Справочный центр

Давайте создадим этот удивительный компонент

Структура кода

Наша основная структура выглядит следующим образом

<body>
<!-- First Layer -->
 <div>
<!-- Second Layer -->
  <div>
        <!--   
              Here Goes the content
          -->
  </div>
 </div>
    
</body>

Давайте начнем с создания первой части справочного центра, это панель поиска и заголовок

Заголовок и панель поиска

<!-- Header --> 
<h2 class="text-3xl font-semibold text-center">Help Center</h2>
<div class="w-[55%] flex items-center border rounded-full p-2 mt-6 mb-12 mx-auto">
                <!-- Search Icon -->
      <div class="w-[10%] bg-red-600"></div>
      <input type="text" name="search" class="w-full h-4/5 border-0 focus:border-0 focus:outline-none focus:ring-0" placeholder="search">
</div>

Очень простой раздел, как и его стилизация. Для заголовка мы задали ему размер шрифта text-3xl, font-weight font-semibold и расположили его по центру с помощью text-center.

Переходя к строке поиска, мы используем поле ввода и div. Мы дали ему возможность добавить иконку. В данном случае мы не стали добавлять иконку.

Контейнеру, содержащему поле ввода и иконку, мы задали ширину w-[55%] родительского контейнера, сделали его flexbox с border-radius rounded-full.

Для поля ввода мы удалили все предопределенные стили, используя border-0 focus:border-0 focus:outline-none focus:ring-0

И это практически все для первой части.

Заголовок центра помощи
Заголовок центра помощи

Определенные разделы

Эти определенные разделы обычно представляют собой ссылки на уже отвеченные вопросы, сгруппированные по определенным категориям.

Вот как выглядит код

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-0.5 bg-slate-200 [&>*]:h-24 [&>*]:px-3 [&>*]:bg-white [&>*]:flex [&>*]:items-center [&>*]:justify-center [&>*]:cursor-pointer [&>*:hover]:scale-105 [&>*:hover]:shadow-sm [&>*:hover]:shadow-slate-800/80">
                <div><h2>Biling and Membership</h2></div>
                <div><h2>Managing and Organizing</h2></div>
                <div><h2>Uploading</h2></div>
                <div><h2>Uploading</h2></div>
                <div><h2>Video Enterprise</h2></div>
                <div><h2>Creators</h2></div>
                <div><h2>Enterprise</h2></div>
                <div><h2>Features</h2></div>
                <div><h2>Sales</h2></div>
                <div><h2>Embeding and Sharing</h2></div>
                <div><h2>FAQs</h2></div>
                <div><h2>Developers</h2></div>
</div>

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

Чтобы придать общий стиль, мы использовали свойство [&>*] из TailwindCSS.

Свойство [&>*] просто означает "выбрать каждого ребенка отдельно", что позволяет нам применить одинаковые свойства стиля ко всем ближайшим детям.

Каждому из детей мы задали высоту h-24, padding-inline px-3. Также мы сделали каждый из них гибким контейнером и отцентрировали их содержимое с помощью flex items-center justify-center . Также были добавлены эффекты наведения, при наведении ребенок масштабируется и добавляется тень [&>*:hover]:scale-105 [&>*:hover]:shadow-sm [&>*:hover]:shadow-slate-800/80

Для основного контейнера, содержащего эту различную категорию, мы сделали контейнер в виде сетки с 1 колонкой на мобильных экранах, 2 колонками на маленьких экранах и 3 колонками на средних экранах и выше grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-0.5

Разделы, разработанные для справочного центра
Разделы, разработанные для справочного центра

И это практически все для этого учебника.

И это практически все для этого учебника

Заключение

Мы только что создали компонент Справочного центра 🤩. И вы наверняка поняли, что это было очень просто, чем мы думали вначале 😏. Мы сделали все это без какого-либо напряжения и не оставляя наш HTML файл.

Вы можете посмотреть Live preview на Codepen или найти код на GitHub.

Не стесняйтесь поделиться со мной, если вам удалось завершить этот урок, я буду рад увидеть все дополнительные компоненты и стили, которые вы добавили в свою работу.

Если у вас есть какие-то опасения или предложения, не стесняйтесь их высказывать! 😊

До встречи! 👋

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.