ion-list
Ionic4项目中我们可以使用Ionic4列表组件ion-list对项目进行布局。 ion-list官方文档地址:https://ionicframework.com/docs/api/listLists are made up of multiple rows of items which can contain text, buttons, toggles, icons, thumbnails, and much more. Lists generally contain items with similar data content, such as images and text.
Lists support several interactions including swiping items to reveal options, dragging to reorder items within the list, and deleting items.
ion-list 用法(Usage)
<ion-list>
<ion-item>
<ion-label>Pokémon Yellowion-label>
ion-item>
<ion-item>
<ion-label>Mega Man Xion-label>
ion-item>
<ion-item>
<ion-label>The Legend of Zeldaion-label>
ion-item>
<ion-item>
<ion-label>Pac-Manion-label>
ion-item>
<ion-item>
<ion-label>Super Mario Worldion-label>
ion-item>
ion-list>
<ion-list>
<ion-item>
<ion-label>Inpution-label>
<ion-input>ion-input>
ion-item>
<ion-item>
<ion-label>Toggleion-label>
<ion-toggle slot="end">ion-toggle>
ion-item>
<ion-item>
<ion-label>Radioion-label>
<ion-radio slot="end">ion-radio>
ion-item>
<ion-item>
<ion-label>Checkboxion-label>
<ion-checkbox slot="start">ion-checkbox>
ion-item>
ion-list>
<ion-list>
<ion-item-sliding>
<ion-item>
<ion-label>Itemion-label>
ion-item>
<ion-item-options side="end">
<ion-item-option (click)="unread(item)">Unreadion-item-option>
ion-item-options>
ion-item-sliding>
<ion-item-sliding>
<ion-item>
<ion-label>Itemion-label>
ion-item>
<ion-item-options side="end">
<ion-item-option (click)="unread(item)">Unreadion-item-option>
ion-item-options>
ion-item-sliding>
ion-list>
<ion-list>
<ion-item>
<ion-label>Pokémon Yellowion-label>
ion-item>
<ion-item>
<ion-label>Mega Man Xion-label>
ion-item>
<ion-item>
<ion-label>The Legend of Zeldaion-label>
ion-item>
<ion-item>
<ion-label>Pac-Manion-label>
ion-item>
<ion-item>
<ion-label>Super Mario Worldion-label>
ion-item>
ion-list>
<ion-list>
<ion-item>
<ion-label>Inpution-label>
<ion-input>ion-input>
ion-item>
<ion-item>
<ion-label>Toggleion-label>
<ion-toggle slot="end">ion-toggle>
ion-item>
<ion-item>
<ion-label>Radioion-label>
<ion-radio slot="end">ion-radio>
ion-item>
<ion-item>
<ion-label>Checkboxion-label>
<ion-checkbox slot="start">ion-checkbox>
ion-item>
ion-list>
<ion-list>
<ion-item-sliding>
<ion-item>
<ion-label>Itemion-label>
ion-item>
<ion-item-options side="end">
<ion-item-option onClick="unread(item)">Unreadion-item-option>
ion-item-options>
ion-item-sliding>
<ion-item-sliding>
<ion-item>
<ion-label>Itemion-label>
ion-item>
<ion-item-options side="end">
<ion-item-option onClick="unread(item)">Unreadion-item-option>
ion-item-options>
ion-item-sliding>
ion-list>
import React from 'react';
import { IonList, IonItem, IonLabel, IonInput, IonToggle, IonRadio, IonCheckbox, IonItemSliding, IonItemOption, IonItemOptions } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
{/*-- List of Text Items --*/}
<IonList>
<IonItem>
<IonLabel>Pokémon YellowIonLabel>
IonItem>
<IonItem>
<IonLabel>Mega Man XIonLabel>
IonItem>
<IonItem>
<IonLabel>The Legend of ZeldaIonLabel>
IonItem>
<IonItem>
<IonLabel>Pac-ManIonLabel>
IonItem>
<IonItem>
<IonLabel>Super Mario WorldIonLabel>
IonItem>
IonList>
{/*-- List of Input Items --*/}
<IonList>
<IonItem>
<IonLabel>InputIonLabel>
<IonInput>IonInput>
IonItem>
<IonItem>
<IonLabel>ToggleIonLabel>
<IonToggle slot="end">IonToggle>
IonItem>
<IonItem>
<IonLabel>RadioIonLabel>
<IonRadio slot="end">IonRadio>
IonItem>
<IonItem>
<IonLabel>CheckboxIonLabel>
<IonCheckbox slot="start" />
IonItem>
IonList>
{/*-- List of Sliding Items --*/}
<IonList>
<IonItemSliding>
<IonItem>
<IonLabel>ItemIonLabel>
IonItem>
<IonItemOptions side="end">
<IonItemOption onClick={() => {}}>UnreadIonItemOption>
IonItemOptions>
IonItemSliding>
<IonItemSliding>
<IonItem>
<IonLabel>ItemIonLabel>
IonItem>
<IonItemOptions side="end">
<IonItemOption onClick={() => {}}>UnreadIonItemOption>
IonItemOptions>
IonItemSliding>
IonList>
>
);
export default Example;
<template>
<ion-list>
<ion-item>
<ion-label>Pokémon Yellowion-label>
ion-item>
<ion-item>
<ion-label>Mega Man Xion-label>
ion-item>
<ion-item>
<ion-label>The Legend of Zeldaion-label>
ion-item>
<ion-item>
<ion-label>Pac-Manion-label>
ion-item>
<ion-item>
<ion-label>Super Mario Worldion-label>
ion-item>
ion-list>
<ion-list>
<ion-item>
<ion-label>Inpution-label>
<ion-input>ion-input>
ion-item>
<ion-item>
<ion-label>Toggleion-label>
<ion-toggle slot="end">ion-toggle>
ion-item>
<ion-item>
<ion-label>Radioion-label>
<ion-radio slot="end">ion-radio>
ion-item>
<ion-item>
<ion-label>Checkboxion-label>
<ion-checkbox slot="start">ion-checkbox>
ion-item>
ion-list>
<ion-list>
<ion-item-sliding>
<ion-item>
<ion-label>Itemion-label>
ion-item>
<ion-item-options side="end">
<ion-item-option @click="unread(item)">Unreadion-item-option>
ion-item-options>
ion-item-sliding>
<ion-item-sliding>
<ion-item>
<ion-label>Itemion-label>
ion-item>
<ion-item-options side="end">
<ion-item-option @click="unread(item)">Unreadion-item-option>
ion-item-options>
ion-item-sliding>
ion-list>
template>
ion-list 属性(Properties)
inset | |
---|---|
Description | If |
Attribute | inset |
Type | boolean |
Default | false |
lines | |
Description | How the bottom border should be displayed on all items. |
Attribute | lines |
Type | "full" | "inset" | "none" | undefined |
mode | |
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
ion-list 内置方法(Methods)
closeSlidingItems | |
---|---|
Description | If Returns |
Signature | closeSlidingItems() => Promise |