Мобильная разработка с помощью Ionic и React - элементы и группы элементов

Если мы знаем, как создавать веб-приложения на React, но хотим разрабатывать мобильные приложения, мы можем использовать фреймворк Ionic.

В этой статье мы рассмотрим, как начать разработку мобильных приложений с помощью фреймворка Ionic и React.

Предметы

Мы можем добавить элемент в ионный компонент, используя компоненты IonItem и IonLabel.

Например, мы можем написать:

import React from 'react';
import { IonContent, IonItem, IonLabel } from '@ionic/react';
import './Tab1.css';
const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonItem>
        <IonLabel>
          Item
        </IonLabel>
      </IonItem>
    </IonContent>
  );
};
export default Tab1;

чтобы добавить товар.

Мы можем добавить опору detail, чтобы добавить стрелку детали:

import React from 'react';
import { IonContent, IonItem, IonLabel } from '@ionic/react';
import './Tab1.css';
const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonItem detail>
        <IonLabel>
          Item
        </IonLabel>
      </IonItem>
    </IonContent>
  );
};
export default Tab1;

Мы можем добавить опору onClick, чтобы добавить обработчик кликов для элемента:

import React from 'react';
import { IonContent, IonItem, IonLabel } from '@ionic/react';
import './Tab1.css';
const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonItem button onClick={() => { }} detail>
        <IonLabel>
          Button Item with Detail Arrow
          </IonLabel>
      </IonItem>
    </IonContent>
  );
};
export default Tab1;

И мы можем использовать его как ссылку:

import React from 'react';
import { IonContent, IonItem, IonLabel } from '@ionic/react';
import './Tab1.css';
const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonItem detail={false} href="https://www.ionicframework.com">
        <IonLabel>
          Button Item with Detail Arrow
          </IonLabel>
      </IonItem>
    </IonContent>
  );
};
export default Tab1;

Мы можем добавлять строки с помощью пропа lines:

import React from 'react';
import { IonContent, IonItem, IonLabel } from '@ionic/react';
import './Tab1.css';
const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonItem lines="full">
        <IonLabel>Item Lines Full</IonLabel>
      </IonItem>
    </IonContent>
  );
};
export default Tab1;

Разделитель предметов

Мы можем добавить разделитель между элементами.

Например, мы можем написать:

import React from 'react';
import { IonContent, IonItemDivider, IonLabel } from '@ionic/react';
import './Tab1.css';
const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonItemDivider>
        <IonLabel>
          Basic Item Divider
        </IonLabel>
      </IonItemDivider>
      <IonItemDivider color="secondary">
        <IonLabel>
          Secondary Item Divider
        </IonLabel>
      </IonItemDivider>
    </IonContent>
  );
};
export default Tab1;

Мы добавляем IonItemDivider вокруг IonLabel, чтобы добавить элементы.

Группы товаров

Мы можем группировать предметы по группам.

Например, мы можем написать:

import React from 'react';
import { IonContent, IonItem, IonItemDivider, IonItemGroup, IonLabel } from '@ionic/react';
import './Tab1.css';
const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonItemGroup>
        <IonItemDivider>
          <IonLabel>A</IonLabel>
        </IonItemDivider>
        <IonItem>
          <IonLabel>Angola</IonLabel>
        </IonItem>
        <IonItem>
          <IonLabel>Argentina</IonLabel>
        </IonItem>
        <IonItem>
          <IonLabel>Armenia</IonLabel>
        </IonItem>
      </IonItemGroup>
    </IonContent>
  );
};
export default Tab1;

Мы добавляем IonItemDivider, IonLabel и IonLitem внутрь IonItemGroup, чтобы сгруппировать их.

IonItemDivider используется для заголовков.

Мы также можем поместить компонент IonItemSliding внутрь группы:

import React from 'react';
import { IonContent, IonItem, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel } from '@ionic/react';
import './Tab1.css';
const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonItemGroup>
        <IonItemSliding>
          <IonItem>
            <IonLabel>
              <h3>Grapes</h3>
            </IonLabel>
          </IonItem>
          <IonItemOptions>
            <IonItemOption>
              Favorite
          </IonItemOption>
          </IonItemOptions>
        </IonItemSliding>
      </IonItemGroup>
    </IonContent>
  );
};
export default Tab1;

чтобы сделать группу скользящей.

Заключение

Мы можем добавлять элементы и группы элементов с помощью Ionic.