Version: v5

ion-item-divider

Item Dividers are block elements that can be used to separate items in a list. They are similar to list headers, but instead of being placed at the top of a list, they should go in between groups of items.

Usage

Angular
Javascript
React
Stencil
Vue

<ion-item-divider>
  <ion-label> Basic Item Divider </ion-label>
</ion-item-divider>

<ion-item-divider color="secondary">
  <ion-label> Secondary Item Divider </ion-label>
</ion-item-divider>

<!-- Item Dividers in a List -->
<ion-list>
  <ion-item-divider>
    <ion-label> Section A </ion-label>
  </ion-item-divider>

  <ion-item><ion-label>A1</ion-label></ion-item>
  <ion-item><ion-label>A2</ion-label></ion-item>
  <ion-item><ion-label>A3</ion-label></ion-item>
  <ion-item><ion-label>A4</ion-label></ion-item>
  <ion-item><ion-label>A5</ion-label></ion-item>

  <ion-item-divider>
    <ion-label> Section B </ion-label>
  </ion-item-divider>

  <ion-item><ion-label>B1</ion-label></ion-item>
  <ion-item><ion-label>B2</ion-label></ion-item>
  <ion-item><ion-label>B3</ion-label></ion-item>
  <ion-item><ion-label>B4</ion-label></ion-item>
  <ion-item><ion-label>B5</ion-label></ion-item>
</ion-list>

<ion-item-divider>
  <ion-label> Basic Item Divider </ion-label>
</ion-item-divider>

<ion-item-divider color="secondary">
  <ion-label> Secondary Item Divider </ion-label>
</ion-item-divider>

<!-- Item Dividers in a List -->
<ion-list>
  <ion-item-divider>
    <ion-label> Section A </ion-label>
  </ion-item-divider>

  <ion-item><ion-label>A1</ion-label></ion-item>
  <ion-item><ion-label>A2</ion-label></ion-item>
  <ion-item><ion-label>A3</ion-label></ion-item>
  <ion-item><ion-label>A4</ion-label></ion-item>
  <ion-item><ion-label>A5</ion-label></ion-item>

  <ion-item-divider>
    <ion-label> Section B </ion-label>
  </ion-item-divider>

  <ion-item><ion-label>B1</ion-label></ion-item>
  <ion-item><ion-label>B2</ion-label></ion-item>
  <ion-item><ion-label>B3</ion-label></ion-item>
  <ion-item><ion-label>B4</ion-label></ion-item>
  <ion-item><ion-label>B5</ion-label></ion-item>
</ion-list>

import React from 'react';
import { IonItemDivider, IonLabel, IonList, IonItem, IonContent } from '@ionic/react';

export const ItemDividerExample: React.FC = () => (
  <IonContent>
    <IonItemDivider>
      <IonLabel>Basic Item Divider</IonLabel>
    </IonItemDivider>

    <IonItemDivider color="secondary">
      <IonLabel>Secondary Item Divider</IonLabel>
    </IonItemDivider>

    {/*-- Item Dividers in a List --*/}
    <IonList>
      <IonItemDivider>
        <IonLabel>Section A</IonLabel>
      </IonItemDivider>

      <IonItem>
        <IonLabel>A1</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>A2</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>A3</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>A4</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>A5</IonLabel>
      </IonItem>

      <IonItemDivider>
        <IonLabel>Section B</IonLabel>
      </IonItemDivider>

      <IonItem>
        <IonLabel>B1</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>B2</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>B3</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>B4</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>B5</IonLabel>
      </IonItem>
    </IonList>
  </IonContent>
);

import { Component, h } from '@stencil/core';

@Component({
  tag: 'item-divider-example',
  styleUrl: 'item-divider-example.css',
})
export class ItemDividerExample {
  render() {
    return [
      <ion-item-divider>
        <ion-label>Basic Item Divider</ion-label>
      </ion-item-divider>,

      <ion-item-divider color="secondary">
        <ion-label>Secondary Item Divider</ion-label>
      </ion-item-divider>,

      //  Item Dividers in a List
      <ion-list>
        <ion-item-divider>
          <ion-label>Section A</ion-label>
        </ion-item-divider>

        <ion-item>
          <ion-label>A1</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>A2</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>A3</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>A4</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>A5</ion-label>
        </ion-item>

        <ion-item-divider>
          <ion-label>Section B</ion-label>
        </ion-item-divider>

        <ion-item>
          <ion-label>B1</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>B2</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>B3</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>B4</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>B5</ion-label>
        </ion-item>
      </ion-list>,
    ];
  }
}

<template>
  <ion-item-divider>
    <ion-label> Basic Item Divider </ion-label>
  </ion-item-divider>

  <ion-item-divider color="secondary">
    <ion-label> Secondary Item Divider </ion-label>
  </ion-item-divider>

  <!-- Item Dividers in a List -->
  <ion-list>
    <ion-item-divider>
      <ion-label> Section A </ion-label>
    </ion-item-divider>

    <ion-item><ion-label>A1</ion-label></ion-item>
    <ion-item><ion-label>A2</ion-label></ion-item>
    <ion-item><ion-label>A3</ion-label></ion-item>
    <ion-item><ion-label>A4</ion-label></ion-item>
    <ion-item><ion-label>A5</ion-label></ion-item>

    <ion-item-divider>
      <ion-label> Section B </ion-label>
    </ion-item-divider>

    <ion-item><ion-label>B1</ion-label></ion-item>
    <ion-item><ion-label>B2</ion-label></ion-item>
    <ion-item><ion-label>B3</ion-label></ion-item>
    <ion-item><ion-label>B4</ion-label></ion-item>
    <ion-item><ion-label>B5</ion-label></ion-item>
  </ion-list>
</template>

<script>
  import { IonItem, IonItemDivider, IonLabel } from '@ionic/vue';
  import { defineComponent } from 'vue';

  export default defineComponent({
    components: { IonItem, IonItemDivider, IonLabel },
  });
</script>

Properties

color

Description	The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see theming.
Attribute	`color`
Type	`string ｜ undefined`
Default	`undefined`

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

sticky

Description	When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it. This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky
Attribute	`sticky`
Type	`boolean`
Default	`false`

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

Name	Description
`--background`	アイテムディバイダーの背景
`--color`	アイテムディバイダーの色
`--inner-padding-bottom`	アイテムディバイダーのBottom Inner Padding
`--inner-padding-end`	アイテムディバイダーのEnd Inner Padding
`--inner-padding-start`	アイテムディバイダーのStart Inner Padding
`--inner-padding-top`	アイテムディバイダーのTop Inner Padding
`--padding-bottom`	アイテムディバイダーのBottom Padding
`--padding-end`	アイテムディバイダーの方向が左から右の場合はRight Padding、右から左の場合はLeft Padding
`--padding-start`	アイテムディバイダーの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。
`--padding-top`	アイテムディバイダーのTop Padding

Slots

Name	Description
``	slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。
`end`	コンテンツは、LTRでは仕切り文字の右側に、RTLでは左側に配置されます。
`start`	コンテンツは、LTRでは仕切り文字の左側に、RTLでは右側に配置されます。

Usage​

Properties​

color​

mode​

sticky​

Events​

Methods​

CSS Shadow Parts​

CSS Custom Properties​

Slots​

Contents