ion-item-group

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4列表项组件ion-item-group对项目进行布局。

ion-item-group官方文档地址:https://ionicframework.com/docs/api/item-group

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

ion-item-group　用法(Usage)

<ion-item-group>
  <ion-item-divider>
    <ion-label>Aion-label>
  ion-item-divider>

  <ion-item>
    <ion-label>Angolaion-label>
  ion-item>
  <ion-item>
    <ion-label>Argentinaion-label>
  ion-item>
  <ion-item>
    <ion-label>Armeniaion-label>
  ion-item>
ion-item-group>

<ion-item-group>
  <ion-item-divider>
    <ion-label>Bion-label>
  ion-item-divider>

  <ion-item>
    <ion-label>Bangladeshion-label>
  ion-item>
  <ion-item>
    <ion-label>Belarusion-label>
  ion-item>
  <ion-item>
    <ion-label>Belgiumion-label>
  ion-item>
ion-item-group>



<ion-item-group>
  <ion-item-divider>
    <ion-label>
      Fruits
    ion-label>
  ion-item-divider>

  <ion-item-sliding>
    <ion-item>
      <ion-label>
        <h3>Grapesh3>
      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>Applesh3>
      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>Carrotsh3>
      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>Celeryh3>
      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>Aion-label>
  ion-item-divider>

  <ion-item>
    <ion-label>Angolaion-label>
  ion-item>
  <ion-item>
    <ion-label>Argentinaion-label>
  ion-item>
  <ion-item>
    <ion-label>Armeniaion-label>
  ion-item>
ion-item-group>

<ion-item-group>
  <ion-item-divider>
    <ion-label>Bion-label>
  ion-item-divider>

  <ion-item>
    <ion-label>Bangladeshion-label>
  ion-item>
  <ion-item>
    <ion-label>Belarusion-label>
  ion-item>
  <ion-item>
    <ion-label>Belgiumion-label>
  ion-item>
ion-item-group>



<ion-item-group>
  <ion-item-divider>
    <ion-label>
      Fruits
    ion-label>
  ion-item-divider>

  <ion-item-sliding>
    <ion-item>
      <ion-label>
        <h3>Grapesh3>
      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>Applesh3>
      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>Carrotsh3>
      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>Celeryh3>
      ion-label>
    ion-item>
    <ion-item-options>
      <ion-item-option>
        Favorite
      ion-item-option>
    ion-item-options>
  ion-item-sliding>
ion-item-group>

import React from 'react';

import { IonItemGroup, IonItemDivider, IonLabel, IonItem, IonItemSliding, IonItemOptions, IonItemOption } from '@ionic/react';

const Example: React.SFC<{}> = () => (
  <>
    <IonItemGroup>
      <IonItemDivider>
        <IonLabel>AIonLabel>
      IonItemDivider>

      <IonItem>
        <IonLabel>AngolaIonLabel>
      IonItem>
      <IonItem>
        <IonLabel>ArgentinaIonLabel>
      IonItem>
      <IonItem>
        <IonLabel>ArmeniaIonLabel>
      IonItem>
    IonItemGroup>

    <IonItemGroup>
      <IonItemDivider>
        <IonLabel>BIonLabel>
      IonItemDivider>

      <IonItem>
        <IonLabel>BangladeshIonLabel>
      IonItem>
      <IonItem>
        <IonLabel>BelarusIonLabel>
      IonItem>
      <IonItem>
        <IonLabel>BelgiumIonLabel>
      IonItem>
    IonItemGroup>


    {/*-- They can also be used to group sliding items --*/}
    <IonItemGroup>
      <IonItemDivider>
        <IonLabel>
          Fruits
        IonLabel>
      IonItemDivider>

      <IonItemSliding>
        <IonItem>
          <IonLabel>
            <h3>Grapesh3>
          IonLabel>
        IonItem>
        <IonItemOptions>
          <IonItemOption>
            Favorite
          IonItemOption>
        IonItemOptions>
      IonItemSliding>

      <IonItemSliding>
        <IonItem>
          <IonLabel>
            <h3>Applesh3>
          IonLabel>
        IonItem>
        <IonItemOptions>
          <IonItemOption>
            Favorite
          IonItemOption>
        IonItemOptions>
      IonItemSliding>
    IonItemGroup>

    <IonItemGroup>
      <IonItemDivider>
        <IonLabel>
          Vegetables
        IonLabel>
      IonItemDivider>

      <IonItemSliding>
        <IonItem>
          <IonLabel>
            <h3>Carrotsh3>
          IonLabel>
        IonItem>
        <IonItemOptions>
          <IonItemOption>
            Favorite
          IonItemOption>
        IonItemOptions>
      IonItemSliding>

      <IonItemSliding>
        <IonItem>
          <IonLabel>
            <h3>Celeryh3>
          IonLabel>
        IonItem>
        <IonItemOptions>
          <IonItemOption>
            Favorite
          IonItemOption>
        IonItemOptions>
      IonItemSliding>
    IonItemGroup>
  >
);

export default Example;

<template>
  <ion-item-group>
    <ion-item-divider>
      <ion-label>Aion-label>
    ion-item-divider>

    <ion-item>
      <ion-label>Angolaion-label>
    ion-item>
    <ion-item>
      <ion-label>Argentinaion-label>
    ion-item>
    <ion-item>
      <ion-label>Armeniaion-label>
    ion-item>
  ion-item-group>

  <ion-item-group>
    <ion-item-divider>
      <ion-label>Bion-label>
    ion-item-divider>

    <ion-item>
      <ion-label>Bangladeshion-label>
    ion-item>
    <ion-item>
      <ion-label>Belarusion-label>
    ion-item>
    <ion-item>
      <ion-label>Belgiumion-label>
    ion-item>
  ion-item-group>


  
  <ion-item-group>
    <ion-item-divider>
      <ion-label>
        Fruits
      ion-label>
    ion-item-divider>

    <ion-item-sliding>
      <ion-item>
        <ion-label>
          <h3>Grapesh3>
        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>Applesh3>
        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>Carrotsh3>
        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>Celeryh3>
        ion-label>
      ion-item>
      <ion-item-options>

ion-item-group

ion-item-group 用法(Usage)

ion-item-group　用法(Usage)