ion-item-divider

shadow

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

Basic Usage

<ion-list>
  <ion-item-group>
    <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 lines="none">
      <ion-label>A3</ion-label>
    </ion-item>
  </ion-item-group>

  <ion-item-group>
    <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 lines="none">
      <ion-label>B3</ion-label>
    </ion-item>
  </ion-item-group>
</ion-list>

Theming

Colors

<ion-item-divider>
  <ion-label>Default</ion-label>
</ion-item-divider>
<ion-item-divider color="primary">
  <ion-label>Primary</ion-label>
</ion-item-divider>
<ion-item-divider color="secondary">
  <ion-label>Secondary</ion-label>
</ion-item-divider>
<ion-item-divider color="tertiary">
  <ion-label>Tertiary</ion-label>
</ion-item-divider>
<ion-item-divider color="success">
  <ion-label>Success</ion-label>
</ion-item-divider>
<ion-item-divider color="warning">
  <ion-label>Warning</ion-label>
</ion-item-divider>
<ion-item-divider color="danger">
  <ion-label>Danger</ion-label>
</ion-item-divider>
<ion-item-divider color="light">
  <ion-label>Light</ion-label>
</ion-item-divider>
<ion-item-divider color="medium">
  <ion-label>Medium</ion-label>
</ion-item-divider>
<ion-item-divider color="dark">
  <ion-label>Dark</ion-label>
</ion-item-divider>

CSS Custom Properties

src/app/example.component.html

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

src/app/example.component.css

ion-item-divider {
  --background: #19422d;
  --color: #fff;

  --padding-top: 10px;
  --padding-bottom: 10px;
  --padding-start: 20px;
  --padding-end: 20px;
}

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	"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ 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では右側に配置されます。