Mobile Development with Ionic and React — Items and Item Groups

If we know how to create React web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with React.

Items

We can add an item into the Ionic component by using the IonItem and IonLabel components.

For example, we can write:

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;

to add the item.

We can add the detail prop to add a detail arrow:

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;

We can add a onClick prop to add a click handler for the item:

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;

And we can use it as a link:

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;

We can add lines with the lines prop:

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;

Item Divider

We can add an item divider between the items.

For instance, we can write:

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;

We add the IonItemDivider around the IonLabel to add items.

Item Groups

We can group items with item groups.

For example, we can write:

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;

We add the IonItemDivider , IonLabel , and IonLitem inside the IonItemGroup to group them.

IonItemDivider is used for the headings.

We can also put the IonItemSliding component inside the group:

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;

to make the group a sliding item.

Conclusion

We can add items and item groups with Ionic.