UI компоненти Ionic: кнопки, картки, модальні вікна

Лекція: UI компоненти Ionic: кнопки, картки, модальні вікна

Вступ

Інтерфейс користувача (UI) є ключовим елементом мобільних додатків. У фреймворку Ionic для створення сучасних і зручних інтерфейсів пропонується велика бібліотека UI-компонентів. У цьому занятті ми розглянемо основні компоненти, такі як кнопки, картки та модальні вікна. Ці елементи дозволяють розробникам швидко створювати інтуїтивно зрозумілий дизайн, який підтримує адаптивність і інтерактивність.

1. Основи UI-компонентів Ionic

UI-компоненти Ionic – це готові елементи інтерфейсу, що адаптовані для використання на мобільних платформах (Android, iOS) та веб-додатках. Вони розроблені з використанням HTML, CSS та Angular, що дозволяє легко інтегрувати їх у проекти.

Переваги використання UI-компонентів Ionic:

1. Кросплатформеність: компоненти автоматично налаштовуються під стиль платформи (Material Design для Android, Human Interface Guidelines для iOS).

2. Адаптивність: елементи інтерфейсу підтримують різні розміри екранів.

3. Інтерактивність: готові стилі та події для взаємодії з користувачем.

2. Кнопки (Buttons)

Що таке кнопка?

Кнопка (<ion-button>) – це базовий елемент взаємодії з користувачем, що дозволяє виконувати дії, викликати події чи відкривати інші елементи.

Синтаксис:

<ion-button>Стандартна кнопка</ion-button>

<ion-button color="primary">Пріоритетна кнопка</ion-button>

<ion-button fill="outline">Контурна кнопка</ion-button>

Властивості кнопок:

• color: задає колір (наприклад, primary, secondary, danger).

• fill: визначає стиль кнопки (solid, outline, clear).

• expand: задає розмір кнопки (block, full).

• shape: форма кнопки (round для закруглених країв).

Приклад із подіями:

<ion-button (click)="handleClick()">Натисни мене</ion-button>

handleClick() {

console.log('Кнопку натиснуто!');

}

3. Картки (Cards)

Що таке картка?

Картка (<ion-card>) – це контейнер для відображення структурованої інформації (зображення, текст, кнопки тощо).

Синтаксис:

<ion-card>

<ion-card-header>

<ion-card-title>Заголовок</ion-card-title>

<ion-card-subtitle>Підзаголовок</ion-card-subtitle>

</ion-card-header>

<ion-card-content>

Це приклад вмісту картки. Ви можете додати сюди текст або інші елементи.

</ion-card-content>

</ion-card>

Особливості карток:

• ion-card-header: розділ для заголовка та підзаголовка.

• ion-card-content: основний вміст картки.

• ion-card-title та ion-card-subtitle: дозволяють додавати заголовки різних рівнів.

Стилізація карток:

<ion-card color="light">

<ion-card-header>

<ion-card-title>Світла картка</ion-card-title>

</ion-card-header>

<ion-card-content>

Використання кольорової стилізації.

</ion-card-content>

</ion-card>

Інтерактивні картки:

<ion-card (click)="onCardClick()">

<ion-card-header>

<ion-card-title>Картка для дій</ion-card-title>

</ion-card-header>

<ion-card-content>

Натисніть, щоб побачити дію.

</ion-card-content>

</ion-card>

onCardClick() {

alert('Картку натиснуто!');

}

4. Модальні вікна (Modals)

Що таке модальне вікно?

Модальне вікно (<ion-modal>) – це діалогове вікно, що з'являється поверх основного вмісту. Воно зазвичай використовується для відображення додаткової інформації чи взаємодії.

Використання модального вікна:

Модальні вікна створюються програмно через ModalController.

import { Component } from '@angular/core';

import { ModalController } from '@ionic/angular';

import { ModalPage } from './modal-page.component';

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

styleUrls: ['home.page.scss'],

})

export class HomePage {

constructor(private modalCtrl: ModalController) {}

async openModal() {

const modal = await this.modalCtrl.create({

component: ModalPage,

componentProps: { value: 123 }

});

await modal.present();

const { data } = await modal.onWillDismiss();

console.log('Дані з модального вікна:', data);

}

}

Шаблон модального вікна:

<ion-header>

<ion-toolbar>

<ion-title>Модальне вікно</ion-title>

<ion-buttons slot="end">

<ion-button (click)="closeModal()">Закрити</ion-button>

</ion-buttons>

</ion-toolbar>

</ion-header>

<ion-content>

<p>Це модальне вікно з переданими даними: {{ value }}</p>

</ion-content>

Закриття модального вікна:

import { ModalController } from '@ionic/angular';

constructor(private modalCtrl: ModalController) {}

closeModal() {

this.modalCtrl.dismiss({

dismissed: true

});

}

5. Практичне застосування компонентів

1. Кнопки: використовуйте для виконання дій, таких як відправка форми чи відкриття сторінок.

2. Картки: для організації контенту, наприклад, профілів користувачів чи списків товарів.

3. Модальні вікна: для відображення додаткової інформації або форм.

Питання вихідного контролю

1. Які основні переваги використання UI-компонентів Ionic?

2. Як змінити колір кнопки в Ionic? Наведіть приклад.

3. Що таке модальне вікно, і для чого його використовують?

4. Як створити картку з заголовком та вмістом у Ionic?

5. Яка директива використовується для обробки подій натискання кнопки?

6. Як викликати модальне вікно програмно?

7. Що таке ModalController, і яку роль він виконує?

8. Як налаштувати кнопки для розтягування на всю ширину екрана?

9. У яких випадках доцільно використовувати модальні вікна?

10. Як інтегрувати подію натискання на картці?