Flutter教程

ion-item-divider

概要(CONTENTS)

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

ion-item-divider官方文档地址:https://ionicframework.com/docs/api/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 like items.

ion-item-divider　用法(Usage) 

<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>
import React from 'react';

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

const Example: React.SFC<{}> = () => (
  <>
    <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>A1IonLabel>IonItem>
      <IonItem><IonLabel>A2IonLabel>IonItem>
      <IonItem><IonLabel>A3IonLabel>IonItem>
      <IonItem><IonLabel>A4IonLabel>IonItem>
      <IonItem><IonLabel>A5IonLabel>IonItem>

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

      <IonItem><IonLabel>B1IonLabel>IonItem>
      <IonItem><IonLabel>B2IonLabel>IonItem>
      <IonItem><IonLabel>B3IonLabel>IonItem>
      <IonItem><IonLabel>B4IonLabel>IonItem>
      <IonItem><IonLabel>B5IonLabel>IonItem>
    IonList>
  >
);

export default Example
<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>

  
  <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>
template>

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
Default false

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

Slots

Name Description
Content is placed between the named slots if provided without a slot.
"end" Content is placed to the right of the divider text in LTR, and to the left in RTL.
"start" Content is placed to the left of the divider text in LTR, and to the right in RTL.