メインコンテンツまでスキップ
バージョン: v8

ion-item-divider

shadow

アイテムディバイダは、リスト内の アイテム を区切るために使用できるブロック要素です。リストヘッダーと似ていますが、リストの一番上に置くだけでなく、アイテムのグループの間に置く必要があります。

基本的な使い方

テーマ

Colors

CSSカスタムプロパティ

プロパティ

color

DescriptionThe 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.
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

sticky

DescriptionWhen 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
Attributesticky
Typeboolean
Defaultfalse

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

NameDescription
--backgroundBackground of the item divider
--backgroundBackground of the item divider
--colorColor of the item divider
--colorColor of the item divider
--inner-padding-bottomBottom inner padding of the item divider
--inner-padding-bottomBottom inner padding of the item divider
--inner-padding-endEnd inner padding of the item divider
--inner-padding-endEnd inner padding of the item divider
--inner-padding-startStart inner padding of the item divider
--inner-padding-startStart inner padding of the item divider
--inner-padding-topTop inner padding of the item divider
--inner-padding-topTop inner padding of the item divider
--padding-bottomBottom padding of the item divider
--padding-bottomBottom padding of the item divider
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider
--padding-topTop padding of the item divider
--padding-topTop padding of the item divider

Slots

NameDescription
``Content is placed between the named slots if provided without a slot.
endContent is placed to the right of the divider text in LTR, and to the left in RTL.
startContent is placed to the left of the divider text in LTR, and to the right in RTL.