06.07.2023 в 16:32

Как установить Angular с помощью Tailwind CSS и компонентов UI Flowbite

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

Фреймворк выпускался командой Google в 2010 году и используется такими веб-сайтами, как Upwork, Forbes, Gmail, YouTube, Udacity и другими, включая большинство приложений Google Suite.

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

Создание проекта Angular

Рекомендуемый и самый быстрый способ начать создание нового проекта Angular - это установить официальный инструмент CLI, выполнив следующую команду в вашем терминале:

npm install -g @angular/cli

Эта команда сделает Angular CLI доступным на вашем локальном компьютере.

Для создания нового проекта Angular вводим следующую команду:

ng new my-app

Вы можете следовать инструкциям из подсказок CLI, чтобы выбрать параметры, которые хотите выбрать при создании нового проекта - вы выбираете "CSS", когда вас спросят.

Эта команда создаст новую папку под названием my-app, в которой необходимые исходные файлы для запуска нового локального и готового к работе проекта Angular.

Запуск команды ng server --open в вашем терминале запустит локальный сервер:

ng serve --open

Это создаст локальный сервер разработки и автоматически откроет новую вкладку на порту localhost:4200, добавив флаг --open к команде.

Мы установили и настроили Angular project и он работает.

Установка Tailwind CSS

Теперь, когда вы успешно установили и настроили проект Angular, мы приступаем к установке популярной утилиты-первого CSS-фреймворка под названием Tailwind.

Следующей командой установим Tailwind CSS и опубликуем CSS через NPM

npm install tailwindcss postcss autoprefixer --save-dev

Эта команда установит зависимости Tailwind CSS, доступные в файле package.json.

Запуск команды init из Tailwind CSS создаст новый tailwind.config.js файл:

npx tailwindcss init

Обновите недавно сгенерированный конфигурационный файл, чтобы настроить исходные файлы шаблонов из Angular:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}", // add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Импортируйте основные директивы Tailwind внутри файла styles.css:

/* You can add global styles to this file, and also import other style files */

@tailwind base;
@tailwind components;
@tailwind utilities;

Запустите локальный сервер разработки на Angular, запустив ng server --open. Если у вас уже был открыт один из них, перезапустите его, чтобы позволить Angular внутренне настроить новую конфигурацию.

Теперь у вас появился доступ к использованию служебных классов из Tailwind CSS внутри вашего проекта Angular.

Установка Flowbite

Теперь, когда для вашего проекта веб-приложения настроены как Angular, так и Tailwind CSS, вы приступаете к установке библиотеки Flowbite для использования интерактивных компонентов UI, такие как навигационные панели, модалы, карточки, кнопки и многое другое, для ускорения создания пользовательских интерфейсов с поддержкой Tailwind CSS.

Установите и затребуйте Flow bite в качестве зависимости через NPM для вашего файла package.json:

npm install flowbite

Требуется плагин Flowbite внутри вашего tailwind.config.js файла:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin') // add this line
  ],
}

Настройте пути к шаблону так, чтобы они включали интерактивные классы Tailwind CSS из Flowbite:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
    "./node_modules/flowbite/**/*.js" // add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin')
  ],
}

Обновите файл app.component.ts, чтобы использовать функцию initFlowbite для включения интерактивных компонентов с помощью атрибутов данных:

import { Component } from '@angular/core';
import { OnInit } from '@angular/core';
import { initFlowbite } from 'flowbite';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'web-app';

  ngOnInit(): void {
    initFlowbite();
  }
}

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

Компоненты UI

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

Мы сначала начнем с копирования-вставки одного из примеров модальных компонентов по умолчанию из документации и добавим его внутрь app.component.html файл:

<!-- Modal toggle -->
<button data-modal-target="defaultModal" data-modal-toggle="defaultModal" class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
Toggle modal
</button>

<!-- Main modal -->
<div id="defaultModal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative w-full max-w-2xl max-h-full">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <!-- Modal header -->
            <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                    Terms of Service
                </h3>
                <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="defaultModal">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <!-- Modal body -->
            <div class="p-6 space-y-6">
                <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                </p>
                <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                </p>
            </div>
            <!-- Modal footer -->
            <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
                <button data-modal-hide="defaultModal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
                <button data-modal-hide="defaultModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Decline</button>
            </div>
        </div>
    </div>
</div>

Добавление этого кода создаст кнопку переключения, которая при событии click отображает модальный компонент. Интерактивность включена через интерфейс атрибутов данных из Flowbite.

Атрибуты данных

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

Добавим выпадающий компонент из библиотеки пользовательского интерфейса:

<button id="dropdownDefaultButton" data-dropdown-toggle="dropdown" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">Dropdown button <svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
  </svg></button>

<div id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
    <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Sign out</a>
      </li>
    </ul>
</div>

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

JavaScript API

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

Например, вот как вы можете настроить компонент Carousel непосредственно с помощью JavaScript:

import { Carousel } from "flowbite";
import type { CarouselItem, CarouselOptions, CarouselInterface } from "flowbite";

const $prevButton = document.getElementById('data-carousel-prev');
const $nextButton = document.getElementById('data-carousel-next');

$prevButton.addEventListener('click', () => {
    carousel.prev();
});

$nextButton.addEventListener('click', () => {
    carousel.next();
});

const items: CarouselItem[] = [
    {
        position: 0,
        el: document.getElementById('carousel-item-1')
    },
    {
        position: 1,
        el: document.getElementById('carousel-item-2')
    },
    {
        position: 2,
        el: document.getElementById('carousel-item-3')
    },
    {
        position: 3,
        el: document.getElementById('carousel-item-4')
    },
];

const options: CarouselOptions = {
    defaultPosition: 1,
    interval: 3000,

    indicators: {
        activeClasses: 'bg-white dark:bg-gray-800',
        inactiveClasses: 'bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800',
        items: [
            {
                position: 0,
                el: document.getElementById('carousel-indicator-1')
            },
            {
                position: 1,
                el: document.getElementById('carousel-indicator-2')
            },
            {
                position: 2,
                el: document.getElementById('carousel-indicator-3')
            },
            {
                position: 3,
                el: document.getElementById('carousel-indicator-4')
            },
        ]
    },

    // callback functions
    onNext: () => {
        console.log('next slider item is shown');
    },
    onPrev: ( ) => {
        console.log('previous slider item is shown');
    },
    onChange: ( ) => {
        console.log('new slider item has been shown');
    }
};

const carousel: CarouselInterface = new Carousel(items, options);

carousel.cycle()

// set event listeners for prev and next buttons
const $prevButton = document.getElementById('data-carousel-prev');
const $nextButton = document.getElementById('data-carousel-next');

$prevButton.addEventListener('click', () => {
    carousel.prev();
});

$nextButton.addEventListener('click', () => {
    carousel.next();
});

Вам также необходимо расположить следующую разметку HTML внутри вашей кодовой базы и файлов шаблонов Angular:

<div class="relative w-full">
    <!-- Carousel wrapper -->
    <div class="relative h-56 overflow-hidden rounded-lg sm:h-64 xl:h-80 2xl:h-96">
         <!-- Item 1 -->
        <div id="carousel-item-1" class="hidden duration-700 ease-in-out">
            <img src="/docs/images/carousel/carousel-1.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
        </div>
        <!-- Item 2 -->
        <div id="carousel-item-2" class="hidden duration-700 ease-in-out">
            <img src="/docs/images/carousel/carousel-2.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
        </div>
        <!-- Item 3 -->
        <div id="carousel-item-3" class="hidden duration-700 ease-in-out">
            <img src="/docs/images/carousel/carousel-3.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
        </div>
        <!-- Item 4 -->
        <div id="carousel-item-4" class="hidden duration-700 ease-in-out">
            <img src="/docs/images/carousel/carousel-4.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
        </div>
    </div>
    <!-- Slider indicators -->
    <div class="absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2">
        <button id="carousel-indicator-1" type="button" class="w-3 h-3 rounded-full" aria-current="true" aria-label="Slide 1"></button>
        <button id="carousel-indicator-2" type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2"></button>
        <button id="carousel-indicator-3" type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3"></button>
        <button id="carousel-indicator-4" type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 4"></button>
    </div>
    <!-- Slider controls -->
    <button id="data-carousel-prev" type="button" class="absolute top-0 left-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none">
        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
            <svg class="w-4 h-4 text-white dark:text-gray-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
            </svg>
            <span class="hidden">Previous</span>
        </span>
    </button>
    <button id="data-carousel-next" type="button" class="absolute top-0 right-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none">
        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
            <svg class="w-4 h-4 text-white dark:text-gray-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
            </svg>
            <span class="hidden">Next</span>
        </span>
    </button>
</div>

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

Использование TypeScript

Компоненты UI Flowbite также поддерживают TypeScript, и вы можете импортировать типы и применять их при программном использовании JavaScript API.

Импорт типов для компонента Carousel:

import type { CarouselItem, CarouselOptions, CarouselInterface } from "flowbite";

// ... other code

const carousel: CarouselInterface = new Carousel(items, options);

Стартовый проект Angular

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

Flowbite библиотека Angular

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

Отказ от ответственности: этот учебник был впервые представлен в учебнике Angular + Tailwind CSS в документации Flowbite.

Источник:

Selected Sort Option

#Angular

Войти на сайт