Перейти к содержанию

Recipes Component

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

В разработке этого компонента используются компоненты Ionic и Angular для создания пользовательского интерфейса и взаимодействия с данными. Внутри компонента включены ключевые HTML элементы и директивы Angular для рендеринга списка рецептов и отображения их деталей. К ним относятся:

  • *ngFor - структурная директива для рендеринга списка рецептов.
  • [(ngModel)] - двухстороннее связывание для поискового запроса.
  • ion-card - компонент Ionic для отображения каждого рецепта в виде карточки.
  • ion-searchbar - компонент Ionic для поиска рецептов.
  • ion-card-header, ion-card-title, ion-card-subtitle - компоненты Ionic для отображения заголовков и подзаголовков карточки рецепта.
  • convertNewlinesToBreaks - метод для преобразования новой строки в HTML-тег <br>.

Интеграция данного компонента предоставляет пользователям удобный и интерактивный способ поиска и просмотра рецептов.

Key Features

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

Key HTML Elements and Angular Directives

  • Header: Отображает заголовок "Рецепты" с правой стороны.
  • Search Container: Содержит поисковое поле и кнопку для переключения типа поиска (по названию или ингредиентам).
  • Recipes List: Использует *ngFor для отображения каждого рецепта в виде карточки.
  • Recipe Card: Отображает изображение, название, описание и кнопку для просмотра деталей рецепта.
  • Recipe Details Modal: Отображается при выборе рецепта и содержит изображение, название, список ингредиентов и подробное описание.

Styling

  • Custom Buttons: Кнопки имеют собственный стиль с фоновым цветом, границами и эффектом при наведении.
  • Card Styles: Карточки рецептов имеют границы, тени и анимацию при наведении.
  • Modal Styles: Модальное окно имеет фоновое затемнение, собственный стиль и анимацию появления.

Todo-list

  • Хранение данных рецептов и их валидация.
  • Добавление функционала для добавления и редактирования рецептов.
  • Улучшение стилизации и адаптивности компонента для различных устройств.