ion-item-group

Item groups are containers that organize similar items together. They can contain item dividers to divide the items into multiple sections. They can also be used to group sliding items.

Usage

ANGULAR

<ion-item-group>  <ion-item-divider>    <ion-label>A</ion-label>  </ion-item-divider>
  <ion-item>    <ion-label>Angola</ion-label>  </ion-item>  <ion-item>    <ion-label>Argentina</ion-label>  </ion-item>  <ion-item>    <ion-label>Armenia</ion-label>  </ion-item></ion-item-group>
<ion-item-group>  <ion-item-divider>    <ion-label>B</ion-label>  </ion-item-divider>
  <ion-item>    <ion-label>Bangladesh</ion-label>  </ion-item>  <ion-item>    <ion-label>Belarus</ion-label>  </ion-item>  <ion-item>    <ion-label>Belgium</ion-label>  </ion-item></ion-item-group>

<!-- They can also be used to group sliding items --><ion-item-group>  <ion-item-divider>    <ion-label>      Fruits    </ion-label>  </ion-item-divider>
  <ion-item-sliding>    <ion-item>      <ion-label>        <h3>Grapes</h3>      </ion-label>    </ion-item>    <ion-item-options>      <ion-item-option>        Favorite      </ion-item-option>    </ion-item-options>  </ion-item-sliding>
  <ion-item-sliding>    <ion-item>      <ion-label>        <h3>Apples</h3>      </ion-label>    </ion-item>    <ion-item-options>      <ion-item-option>        Favorite      </ion-item-option>    </ion-item-options>  </ion-item-sliding></ion-item-group>
<ion-item-group>  <ion-item-divider>    <ion-label>      Vegetables    </ion-label>  </ion-item-divider>
  <ion-item-sliding>    <ion-item>      <ion-label>        <h3>Carrots</h3>      </ion-label>    </ion-item>    <ion-item-options>      <ion-item-option>        Favorite      </ion-item-option>    </ion-item-options>  </ion-item-sliding>
  <ion-item-sliding>    <ion-item>      <ion-label>        <h3>Celery</h3>      </ion-label>    </ion-item>    <ion-item-options>      <ion-item-option>        Favorite      </ion-item-option>    </ion-item-options>  </ion-item-sliding></ion-item-group>

JAVASCRIPT

<ion-item-group>  <ion-item-divider>    <ion-label>A</ion-label>  </ion-item-divider>
  <ion-item>    <ion-label>Angola</ion-label>  </ion-item>  <ion-item>    <ion-label>Argentina</ion-label>  </ion-item>  <ion-item>    <ion-label>Armenia</ion-label>  </ion-item></ion-item-group>
<ion-item-group>  <ion-item-divider>    <ion-label>B</ion-label>  </ion-item-divider>
  <ion-item>    <ion-label>Bangladesh</ion-label>  </ion-item>  <ion-item>    <ion-label>Belarus</ion-label>  </ion-item>  <ion-item>    <ion-label>Belgium</ion-label>  </ion-item></ion-item-group>

<!-- They can also be used to group sliding items --><ion-item-group>  <ion-item-divider>    <ion-label>      Fruits    </ion-label>  </ion-item-divider>
  <ion-item-sliding>    <ion-item>      <ion-label>        <h3>Grapes</h3>      </ion-label>    </ion-item>    <ion-item-options>      <ion-item-option>        Favorite      </ion-item-option>    </ion-item-options>  </ion-item-sliding>
  <ion-item-sliding>    <ion-item>      <ion-label>        <h3>Apples</h3>      </ion-label>    </ion-item>    <ion-item-options>      <ion-item-option>        Favorite      </ion-item-option>    </ion-item-options>  </ion-item-sliding></ion-item-group>
<ion-item-group>  <ion-item-divider>    <ion-label>      Vegetables    </ion-label>  </ion-item-divider>
  <ion-item-sliding>    <ion-item>      <ion-label>        <h3>Carrots</h3>      </ion-label>    </ion-item>    <ion-item-options>      <ion-item-option>        Favorite      </ion-item-option>    </ion-item-options>  </ion-item-sliding>
  <ion-item-sliding>    <ion-item>      <ion-label>        <h3>Celery</h3>      </ion-label>    </ion-item>    <ion-item-options>      <ion-item-option>        Favorite      </ion-item-option>    </ion-item-options>  </ion-item-sliding></ion-item-group>

REACT

import React from 'react';
import { IonItemGroup, IonItemDivider, IonLabel, IonItem, IonItemSliding, IonItemOptions, IonItemOption } from '@ionic/react';
const Example: React.FC<{}> = () => (  <>    <IonItemGroup>      <IonItemDivider>        <IonLabel>A</IonLabel>      </IonItemDivider>
      <IonItem>        <IonLabel>Angola</IonLabel>      </IonItem>      <IonItem>        <IonLabel>Argentina</IonLabel>      </IonItem>      <IonItem>        <IonLabel>Armenia</IonLabel>      </IonItem>    </IonItemGroup>
    <IonItemGroup>      <IonItemDivider>        <IonLabel>B</IonLabel>      </IonItemDivider>
      <IonItem>        <IonLabel>Bangladesh</IonLabel>      </IonItem>      <IonItem>        <IonLabel>Belarus</IonLabel>      </IonItem>      <IonItem>        <IonLabel>Belgium</IonLabel>      </IonItem>    </IonItemGroup>

    {/*-- They can also be used to group sliding items --*/}    <IonItemGroup>      <IonItemDivider>        <IonLabel>          Fruits        </IonLabel>      </IonItemDivider>
      <IonItemSliding>        <IonItem>          <IonLabel>            <h3>Grapes</h3>          </IonLabel>        </IonItem>        <IonItemOptions>          <IonItemOption>            Favorite          </IonItemOption>        </IonItemOptions>      </IonItemSliding>
      <IonItemSliding>        <IonItem>          <IonLabel>            <h3>Apples</h3>          </IonLabel>        </IonItem>        <IonItemOptions>          <IonItemOption>            Favorite          </IonItemOption>        </IonItemOptions>      </IonItemSliding>    </IonItemGroup>
    <IonItemGroup>      <IonItemDivider>        <IonLabel>          Vegetables        </IonLabel>      </IonItemDivider>
      <IonItemSliding>        <IonItem>          <IonLabel>            <h3>Carrots</h3>          </IonLabel>        </IonItem>        <IonItemOptions>          <IonItemOption>            Favorite          </IonItemOption>        </IonItemOptions>      </IonItemSliding>
      <IonItemSliding>        <IonItem>          <IonLabel>            <h3>Celery</h3>          </IonLabel>        </IonItem>        <IonItemOptions>          <IonItemOption>            Favorite          </IonItemOption>        </IonItemOptions>      </IonItemSliding>    </IonItemGroup>  </>);
export default Example;

STENCIL

import { Component, h } from '@stencil/core';
@Component({  tag: 'item-group-example',  styleUrl: 'item-group-example.css'})export class ItemGroupExample {  render() {    return [      <ion-item-group>        <ion-item-divider>          <ion-label>A</ion-label>        </ion-item-divider>
        <ion-item>          <ion-label>Angola</ion-label>        </ion-item>        <ion-item>          <ion-label>Argentina</ion-label>        </ion-item>        <ion-item>          <ion-label>Armenia</ion-label>        </ion-item>      </ion-item-group>
      <ion-item-group>        <ion-item-divider>          <ion-label>B</ion-label>        </ion-item-divider>
        <ion-item>          <ion-label>Bangladesh</ion-label>        </ion-item>        <ion-item>          <ion-label>Belarus</ion-label>        </ion-item>        <ion-item>          <ion-label>Belgium</ion-label>        </ion-item>      </ion-item-group>

      // They can also be used to group sliding items      <ion-item-group>        <ion-item-divider>          <ion-label>            Fruits          </ion-label>        </ion-item-divider>
        <ion-item-sliding>          <ion-item>            <ion-label>              <h3>Grapes</h3>            </ion-label>          </ion-item>          <ion-item-options>            <ion-item-option>              Favorite            </ion-item-option>          </ion-item-options>        </ion-item-sliding>
        <ion-item-sliding>          <ion-item>            <ion-label>              <h3>Apples</h3>            </ion-label>          </ion-item>          <ion-item-options>            <ion-item-option>              Favorite            </ion-item-option>          </ion-item-options>        </ion-item-sliding>      </ion-item-group>
      <ion-item-group>        <ion-item-divider>          <ion-label>            Vegetables          </ion-label>        </ion-item-divider>
        <ion-item-sliding>          <ion-item>            <ion-label>              <h3>Carrots</h3>            </ion-label>          </ion-item>          <ion-item-options>            <ion-item-option>              Favorite            </ion-item-option>          </ion-item-options>        </ion-item-sliding>
        <ion-item-sliding>          <ion-item>            <ion-label>              <h3>Celery</h3>            </ion-label>          </ion-item>          <ion-item-options>            <ion-item-option>              Favorite            </ion-item-option>          </ion-item-options>        </ion-item-sliding>      </ion-item-group>    ];  }}

VUE

<template>  <ion-item-group>    <ion-item-divider>      <ion-label>A</ion-label>    </ion-item-divider>
    <ion-item>      <ion-label>Angola</ion-label>    </ion-item>    <ion-item>      <ion-label>Argentina</ion-label>    </ion-item>    <ion-item>      <ion-label>Armenia</ion-label>    </ion-item>  </ion-item-group>
  <ion-item-group>    <ion-item-divider>      <ion-label>B</ion-label>    </ion-item-divider>
    <ion-item>      <ion-label>Bangladesh</ion-label>    </ion-item>    <ion-item>      <ion-label>Belarus</ion-label>    </ion-item>    <ion-item>      <ion-label>Belgium</ion-label>    </ion-item>  </ion-item-group>

  <!-- They can also be used to group sliding items -->  <ion-item-group>    <ion-item-divider>      <ion-label>        Fruits      </ion-label>    </ion-item-divider>
    <ion-item-sliding>      <ion-item>        <ion-label>          <h3>Grapes</h3>        </ion-label>      </ion-item>      <ion-item-options>        <ion-item-option>          Favorite        </ion-item-option>      </ion-item-options>    </ion-item-sliding>
    <ion-item-sliding>      <ion-item>        <ion-label>          <h3>Apples</h3>        </ion-label>      </ion-item>      <ion-item-options>        <ion-item-option>          Favorite        </ion-item-option>      </ion-item-options>    </ion-item-sliding>  </ion-item-group>
  <ion-item-group>    <ion-item-divider>      <ion-label>        Vegetables      </ion-label>    </ion-item-divider>
    <ion-item-sliding>      <ion-item>        <ion-label>          <h3>Carrots</h3>        </ion-label>      </ion-item>      <ion-item-options>        <ion-item-option>          Favorite        </ion-item-option>      </ion-item-options>    </ion-item-sliding>
    <ion-item-sliding>      <ion-item>        <ion-label>          <h3>Celery</h3>        </ion-label>      </ion-item>      <ion-item-options>        <ion-item-option>          Favorite        </ion-item-option>      </ion-item-options>    </ion-item-sliding>  </ion-item-group></template><script>import {   IonItem,   IonItemDivider,  IonItemGroup,   IonItemOption,   IonItemOptions,   IonItemSliding,   IonLabel} from '@ionic/vue';import { defineComponent } from 'vue';
export default defineComponent({  components: {     IonItem,    IonItemDivider,     IonItemGroup,     IonItemOption,     IonItemOptions,     IonItemSliding,     IonLabel  }});</script>