Tailwind CSS + Svelte + DaisyUI — отзывчивые Front-End компоненты. Эп. 1

Чтобы следовать этому руководству, вам понадобится следующее:

  • Базовое понимание HTML, CSS и JavaScript.
  • Базовые знания Tailwind CSS и классов утилит.

Начало работы

Приступайте к инициализации нашего нового проекта с помощью игровой площадки Svelte из CodeSandbox или используйте один из их шаблонов, доступных на Github.

# Creating a new project
npx degit sveltejs/template 

# Install the dependencies...
npm install
Войдите в полноэкранный режим Выйдите из полноэкранного режима

…затем запустите Rollup.

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

Перейдите на localhost:8080 и вы увидите, что ваше приложение запущено. Отредактируйте файл компонента в src, сохраните его и перезагрузите страницу, чтобы увидеть свои изменения.

Настройка DaisyUI + TailWind CSS

Если вы еще не использовали компоненты DaisyUI или TailWind, то я настоятельно рекомендую вам изучить их документацию.

Мы будем использовать CodeSandbox Svelte playground вместе с DaisyUI CDN без необходимости устанавливать что-либо.

Возьмите следующий код

# Method: Just add one of these to the head tag of your HTML.

<link href="https://cdn.jsdelivr.net/npm/daisyui@2.15.2/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
Вход в полноэкранный режим Выйти из полноэкранного режима

…и добавьте один из них в тег head вашего HTML.

Следующий шаг — подготовка нашего файла App.Svelte со следующей структурой.

<script>
<!-- JavaScript Logic -->
</script>

<style>
<!-- CSS Styles -->
</style>

<!-- HTML Markup -->
Вход в полноэкранный режим Выйти из полноэкранного режима

Внутри нашего компонента App код содержит три основные секции, которые являются необязательными.

  • Блок <script>, который содержит JavaScript, запускаемый при создании экземпляра компонента.
  • Блок <style>, который будет привязан к данному компоненту.
  • Блок <main>, который содержит шаблон нашего приложения.

Компонент приложения

Внутри вашего файла App.svelte добавьте следующий код внутри тегов:

<section class="text-gray-600 body-font">
  <div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
    <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
      <img class="object-cover object-center rounded" alt="hero" src="https://api.lorem.space/image/game?w=720&h=900&hash=8B7BCDC2">
    </div>
    <div class="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
      <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium uppercase text-white-900">Netflix Watch 
        <br class="hidden lg:inline-block">Party
      </h1>
      <p class="mb-8 leading-relaxed">Copper mug try-hard pitchfork pour-over freegan heirloom neutra air plant cold-pressed tacos poke beard tote bag. Heirloom echo park mlkshk tote bag selvage hot chicken authentic tumeric truffaut hexagon try-hard chambray.</p>
      <div class="flex justify-center">
        <button class="btn btn-primary inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">Button</button>
        <button class="btn btn-accent btn-outline ml-4 inline-flex text-gray-700 border-0 py-2 px-6 rounded text-lg">Button</button>
      </div>
    </div>
  </div>
</section>
Вход в полноэкранный режим Выйти из полноэкранного режима

В приведенном выше коде мы создали элемент Section; внутри нашего элемента div мы инициализировали imgURL, который содержит URL для изображения-заполнителя в нашем браузере. Далее мы использовали индивидуальные стили для изображения героя: заголовок героя, текст героя и кнопки для завершения домашнего раздела с помощью классов Tailwind CSS.

Подведение итогов

Если вы следовали за нами, то вы должны были завершить учебник и закончить работу над компонентом App.

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

Лицензия: 📝

Этот проект находится под лицензией MIT (MIT). Смотрите ЛИЦЕНЗИЮ для получения дополнительной информации.

Вклад

Вклад всегда приветствуется…

  • Форк репозитория
  • Улучшить текущую программу путем
  • улучшения функциональности
  • добавление новой функции
  • исправления ошибок
  • Выкладывайте свою работу и создавайте Pull Request

Полезные ресурсы

https://sveltestrap.js.org/
https://github.com/sveltejs/template
https://lorem.space/
https://daisyui.com/
https://tailwindcss.com/
https://github.com/rosstopping/tailwindcss-templates

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