ion-item-divider
Ionic4项目中我们可以使用Ionic4列表项组件ion-item-divider对项目进行布局。 ion-item-divider官方文档地址:https://ionicframework.com/docs/api/item-dividerItem 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: |
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 This feature relies in |
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. |