Мобилна разработка с Ionic и React — Сигнали, значки и бутони

Ако знаем как да създаваме React уеб приложения, но искаме да разработваме мобилни приложения, можем да използваме Ionic framework.

В тази статия ще разгледаме как да започнете с мобилна разработка с Ionic framework с React.

Сигнали

Можем да добавим сигнали към нашето приложение Ionic React, като напишем:

import React, { useState } from 'react';
import { IonAlert, IonButton, IonContent } from '@ionic/react';
import './Tab1.css';
const Tab1: React.FC = () => {
  const [showAlert, setShowAlert] = useState(false);
  return (
    <IonContent>
      <IonButton onClick={() => setShowAlert(true)} expand="block">Show Alert</IonButton>
      <IonAlert
        isOpen={showAlert}
        onDidDismiss={() => setShowAlert(false)}
        cssClass='my-custom-class'
        header={'Alert'}
        subHeader={'Subtitle'}
        message={'This is an alert message.'}
        buttons={['OK']}
      />
    </IonContent>
  );
};
export default Tab1;

Добавяме куката useState, за да контролираме състоянието showAlert.

Тогава можем да съдим това, за да контролираме отварянето на предупреждението с компонента IonButton.

Подложката isOpen контролира дали предупреждението е отворено или не.

onDidDismiss ни позволява да стартираме нещо, когато отхвърлим предупреждението.

cssClass има CSS класа за предупреждението.

header има заглавката на предупреждението.

subHeader има подзаглавие за предупреждение.

message има предупредително съобщение.

buttons има бутони за предупреждение.

Можем да обработваме събития към бутоните и да ги персонализираме.

Например, можем да напишем:

import React, { useState } from 'react';
import { IonAlert, IonButton, IonContent } from '@ionic/react';
import './Tab1.css';
const Tab1: React.FC = () => {
  const [showAlert, setShowAlert] = useState(false);
return (
    <IonContent>
      <IonButton onClick={() => setShowAlert(true)} expand="block">Show Alert</IonButton>
      <IonAlert
        isOpen={showAlert}
        onDidDismiss={() => setShowAlert(false)}
        cssClass='my-custom-class'
        header={'Alert'}
        subHeader={'Subtitle'}
        message={'This is an alert message.'}
        buttons={[
          {
            text: 'Cancel',
            role: 'cancel',
            cssClass: 'secondary',
            handler: blah => {
              console.log('Confirm Cancel: blah');
            }
          },
          {
            text: 'Okay',
            handler: () => {
              console.log('Confirm Okay');
            }
          }
        ]}
      />
    </IonContent>
  );
};
export default Tab1;

за добавяне на обекти в масива buttons prop за добавяне на бутоните.

handler има манипулатор на събития, който се извиква, когато щракнем върху него.

cssClass има името на класа.

text има текст на бутона.

role има ролята на бутона.

Значка

Можем да добавим значка с компонента IonBadge.

Например, можем да напишем:

import React from 'react';
import { IonBadge, IonContent } from '@ionic/react';
import './Tab1.css';
const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonBadge color="primary">11</IonBadge>
    </IonContent>
  );
};
export default Tab1;

за да добавите значката с компонента IonBadge.

color има цвета на значката.

Бутон

Можем да добавим бутони към нашето приложение Ionic React с компонента IonButton.

Например, можем да напишем:

import React from 'react';
import { IonButton, IonContent } from '@ionic/react';
import './Tab1.css';
const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonButton color="dark">Dark</IonButton>
      <IonButton shape="round">Round Button</IonButton>
      <IonButton expand="full">Full Button</IonButton>
    </IonContent>
  );
};
export default Tab1;

за добавяне на бутоните.

color има цвета на фона на бутона.

shape има формата на бутон.

expand зададено на full означава, че бутонът обхваща цялата ширина на екрана.

Заключение

Можем лесно да добавяме сигнали, бутони и значки с Ionic React.