ion-item-divider

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4列表项组件ion-item-divider对项目进行布局。ion-item-divider中有ionic ion-item-divider 用法(Usage) ,ionic ion-item-divider 属性(Properties) ,ionic ion-item-divider 中的CSS 自定义属性等

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 like items.

ion-item-divider 用法(Usage)

angular javascript
<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>


<ion-list>
  <ion-item-divider>
    <ion-label>
      Section A
    ion-label>
  ion-item-divider>

  <ion-item><ion-label>A1ion-label>ion-item>
  <ion-item><ion-label>A2ion-label>ion-item>
  <ion-item><ion-label>A3ion-label>ion-item>
  <ion-item><ion-label>A4ion-label>ion-item>
  <ion-item><ion-label>A5ion-label>ion-item>

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

  <ion-item><ion-label>B1ion-label>ion-item>
  <ion-item><ion-label>B2ion-label>ion-item>
  <ion-item><ion-label>B3ion-label>ion-item>
  <ion-item><ion-label>B4ion-label>ion-item>
  <ion-item><ion-label>B5ion-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>


<ion-list>
  <ion-item-divider>
    <ion-label>
      Section A
    ion-label>
  ion-item-divider>

  <ion-item><ion-label>A1ion-label>ion-item>
  <ion-item><ion-label>A2ion-label>ion-item>
  <ion-item><ion-label>A3ion-label>ion-item>
  <ion-item><ion-label>A4ion-label>ion-item>
  <ion-item><ion-label>A5ion-label>ion-item>

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

  <ion-item><ion-label>B1ion-label>ion-item>
  <ion-item><ion-label>B2ion-label>ion-item>
  <ion-item><ion-label>B3ion-label>ion-item>
  <ion-item><ion-label>B4ion-label>ion-item>
  <ion-item><ion-label>B5ion-label>ion-item>
ion-list>

ion-item-divider 属性(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

mode

Description

The mode determines which platform styles to use.

Attribute mode
Type "ios" | "md"

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

ion-item-divider中的CSS 自定义属性

Name Description
--background Background of the item divider
--color Color of the item divider
--padding-bottom Bottom padding of the item divider
--padding-end End padding of the item divider
--padding-start Start padding of the item divider
--padding-top Top padding of the item divider