Bài 28: Ion-list: Tìm hiểu về ion-list, ion-list-header

ion-list

List được tạo thành từ nhiều hàng mục có thể chứa văn bản, nút, nút chuyển đổi, biểu tượng, hình thu nhỏ, v.v. List thường chứa các mục có nội dung dữ liệu tương tự, chẳng hạn như hình ảnh và văn bản.

List hỗ trợ một số tương tác bao gồm vuốt các mục để hiển thị các tùy chọn, kéo để sắp xếp lại các mục trong danh sách và xóa các mục.

Usage

<!-- List of Text Items -->
<ion-list>
  <ion-item>
    <ion-label>Pokémon Yellow</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Mega Man X</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>The Legend of Zelda</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Pac-Man</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Super Mario World</ion-label>
  </ion-item>
</ion-list>

<!-- List of Input Items -->
<ion-list>
  <ion-item>
    <ion-label>Input</ion-label>
    <ion-input></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Toggle</ion-label>
    <ion-toggle slot="end"></ion-toggle>
  </ion-item>
  <ion-item>
    <ion-label>Radio</ion-label>
    <ion-radio slot="end"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Checkbox</ion-label>
    <ion-checkbox slot="start"></ion-checkbox>
  </ion-item>
</ion-list>

<!-- List of Sliding Items -->
<ion-list>
  <ion-item-sliding>
    <ion-item>
      <ion-label>Item</ion-label>
    </ion-item>
    <ion-item-options side="end">
      <ion-item-option (click)="unread(item)">Unread</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

  <ion-item-sliding>
    <ion-item>
      <ion-label>Item</ion-label>
    </ion-item>
    <ion-item-options side="end">
      <ion-item-option (click)="unread(item)">Unread</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

<!-- List of Text Items -->
<ion-list>
  <ion-item>
    <ion-label>Pokémon Yellow</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Mega Man X</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>The Legend of Zelda</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Pac-Man</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Super Mario World</ion-label>
  </ion-item>
</ion-list>

<!-- List of Input Items -->
<ion-list>
  <ion-item>
    <ion-label>Input</ion-label>
    <ion-input></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Toggle</ion-label>
    <ion-toggle slot="end"></ion-toggle>
  </ion-item>
  <ion-item>
    <ion-label>Radio</ion-label>
    <ion-radio slot="end"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Checkbox</ion-label>
    <ion-checkbox slot="start"></ion-checkbox>
  </ion-item>
</ion-list>

<!-- List of Sliding Items -->
<ion-list>
  <ion-item-sliding>
    <ion-item>
      <ion-label>Item</ion-label>
    </ion-item>
    <ion-item-options side="end">
      <ion-item-option onClick="unread(item)">Unread</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

  <ion-item-sliding>
    <ion-item>
      <ion-label>Item</ion-label>
    </ion-item>
    <ion-item-options side="end">
      <ion-item-option onClick="unread(item)">Unread</ion-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, IonContent } from '@ionic/react';

export const ListExample: React.FC = () => (
  <IonContent>
    {/*-- List of Text Items --*/}
    <IonList>
      <IonItem>
        <IonLabel>Pokémon Yellow</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>Mega Man X</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>The Legend of Zelda</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>Pac-Man</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>Super Mario World</IonLabel>
      </IonItem>
    </IonList>

    {/*-- List of Input Items --*/}
    <IonList>
      <IonItem>
        <IonLabel>Input</IonLabel>
        <IonInput></IonInput>
      </IonItem>
      <IonItem>
        <IonLabel>Toggle</IonLabel>
        <IonToggle slot="end"></IonToggle>
      </IonItem>
      <IonItem>
        <IonLabel>Radio</IonLabel>
        <IonRadio slot="end"></IonRadio>
      </IonItem>
      <IonItem>
        <IonLabel>Checkbox</IonLabel>
        <IonCheckbox slot="start" />
      </IonItem>
    </IonList>

    {/*-- List of Sliding Items --*/}
    <IonList>
      <IonItemSliding>
        <IonItem>
          <IonLabel>Item</IonLabel>
        </IonItem>
        <IonItemOptions side="end">
          <IonItemOption onClick={() => {}}>Unread</IonItemOption>
        </IonItemOptions>
      </IonItemSliding>

      <IonItemSliding>
        <IonItem>
          <IonLabel>Item</IonLabel>
        </IonItem>
        <IonItemOptions side="end">
          <IonItemOption onClick={() => {}}>Unread</IonItemOption>
        </IonItemOptions>
      </IonItemSliding>
    </IonList>
  </IonContent>
);

import { Component, h } from '@stencil/core';

@Component({
  tag: 'list-example',
  styleUrl: 'list-example.css'
})
export class ListExample {
  unread(ev: Event) {
    console.log('Item is unread', ev);
  }

  render() {
    return [
      // List of Text Items
      <ion-list>
        <ion-item>
          <ion-label>Pokémon Yellow</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>Mega Man X</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>The Legend of Zelda</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>Pac-Man</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>Super Mario World</ion-label>
        </ion-item>
      </ion-list>,

      // List of Input Items
      <ion-list>
        <ion-item>
          <ion-label>Input</ion-label>
          <ion-input></ion-input>
        </ion-item>
        <ion-item>
          <ion-label>Toggle</ion-label>
          <ion-toggle slot="end"></ion-toggle>
        </ion-item>
        <ion-item>
          <ion-label>Radio</ion-label>
          <ion-radio slot="end"></ion-radio>
        </ion-item>
        <ion-item>
          <ion-label>Checkbox</ion-label>
          <ion-checkbox slot="start"></ion-checkbox>
        </ion-item>
      </ion-list>,

      // List of Sliding Items
      <ion-list>
        <ion-item-sliding>
          <ion-item>
            <ion-label>Item</ion-label>
          </ion-item>
          <ion-item-options side="end">
            <ion-item-option onClick={(ev) => this.unread(ev)}>Unread</ion-item-option>
          </ion-item-options>
        </ion-item-sliding>

        <ion-item-sliding>
          <ion-item>
            <ion-label>Item</ion-label>
          </ion-item>
          <ion-item-options side="end">
            <ion-item-option onClick={(ev) => this.unread(ev)}>Unread</ion-item-option>
          </ion-item-options>
        </ion-item-sliding>
      </ion-list>
    ];
  }
}

<template>
  <!-- List of Text Items -->
  <ion-list>
    <ion-item>
      <ion-label>Pokémon Yellow</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Mega Man X</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>The Legend of Zelda</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Pac-Man</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Super Mario World</ion-label>
    </ion-item>
  </ion-list>

  <!-- List of Input Items -->
  <ion-list>
    <ion-item>
      <ion-label>Input</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Toggle</ion-label>
      <ion-toggle slot="end"></ion-toggle>
    </ion-item>
    <ion-item>
      <ion-label>Radio</ion-label>
      <ion-radio slot="end"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>Checkbox</ion-label>
      <ion-checkbox slot="start"></ion-checkbox>
    </ion-item>
  </ion-list>

  <!-- List of Sliding Items -->
  <ion-list>
    <ion-item-sliding>
      <ion-item>
        <ion-label>Item</ion-label>
      </ion-item>
      <ion-item-options side="end">
        <ion-item-option @click="unread(item)">Unread</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>

    <ion-item-sliding>
      <ion-item>
        <ion-label>Item</ion-label>
      </ion-item>
      <ion-item-options side="end">
        <ion-item-option @click="unread(item)">Unread</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</template>

<script>
import { 
  IonCheckbox, 
  IonInput, 
  IonItem, 
  IonItemOption, 
  IonItemOptions, 
  IonItemSliding, 
  IonList, 
  IonLabel, 
  IonRadio, 
  IonToggle 
} from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { 
    IonCheckbox, 
    IonInput, 
    IonItem, 
    IonItemOption, 
    IonItemOptions, 
    IonItemSliding, 
    IonList, 
    IonLabel, 
    IonRadio, 
    IonToggle 
  }
});
</script>

properties

inset
Description	If `true`, the list will have margin around it and rounded corners.
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"`

Methods

closeSlidingItems
Description	If `ion-item-sliding` are used inside the list, this method closes any open sliding item. Returns `true` if an actual `ion-item-sliding` is closed.
Signature	`closeSlidingItems() => Promise<boolean>`

ion-list-header

ListHeader một thành phần tiêu đề cho một danh sách. Không giống như ItemDivider, ListHeaders được thiết kế để trở nên nổi bật so với phần còn lại của các mục trong danh sách.

Usage

<!-- Default List Header -->
<ion-list-header>
  <ion-label>List Header</ion-label>
</ion-list-header>

<!-- List Header with Button -->
<ion-list-header>
  <ion-label>New This Week</ion-label>
  <ion-button>See All</ion-button>
</ion-list-header>

<!-- List Header with Outline Button -->
<ion-list-header>
  <ion-label>New This Week</ion-label>
  <ion-button fill="outline">See All</ion-button>
</ion-list-header>

<!-- List Header Full Lines -->
<ion-list-header lines="full">
  <ion-label>New This Week</ion-label>
  <ion-button>See All</ion-button>
</ion-list-header>

<!-- List Header Inset Lines -->
<ion-list-header lines="inset">
  <ion-label>New This Week</ion-label>
  <ion-button>See All</ion-button>
</ion-list-header>

<!-- List Headers in Lists -->
<ion-list>
  <ion-list-header lines="inset">
    <ion-label>Recent</ion-label>
    <ion-button>Clear</ion-button>
  </ion-list-header>
  <ion-item lines="none">
    <ion-label color="primary">
      <h1>I got you babe</h1>
    </ion-label>
  </ion-item>
</ion-list>

<ion-list>
  <ion-list-header lines="inset">
    <ion-label>Trending</ion-label>
  </ion-list-header>
  <ion-item>
    <ion-label color="primary">
      <h1>harry styles</h1>
    </ion-label>
  </ion-item>
  <ion-item>
    <ion-label color="primary">
      <h1>christmas</h1>
    </ion-label>
  </ion-item>
  <ion-item lines="none">
    <ion-label color="primary">
      <h1>falling</h1>
    </ion-label>
  </ion-item>
</ion-list>

<!-- Default List Header -->
<ion-list-header>
  <ion-label>List Header</ion-label>
</ion-list-header>

<!-- List Header with Button -->
<ion-list-header>
  <ion-label>New This Week</ion-label>
  <ion-button>See All</ion-button>
</ion-list-header>

<!-- List Header with Outline Button -->
<ion-list-header>
  <ion-label>New This Week</ion-label>
  <ion-button fill="outline">See All</ion-button>
</ion-list-header>

<!-- List Header Full Lines -->
<ion-list-header lines="full">
  <ion-label>New This Week</ion-label>
  <ion-button>See All</ion-button>
</ion-list-header>

<!-- List Header Inset Lines -->
<ion-list-header lines="inset">
  <ion-label>New This Week</ion-label>
  <ion-button>See All</ion-button>
</ion-list-header>

<!-- List Headers in Lists -->
<ion-list>
  <ion-list-header lines="inset">
    <ion-label>Recent</ion-label>
    <ion-button>Clear</ion-button>
  </ion-list-header>
  <ion-item lines="none">
    <ion-label color="primary">
      <h1>I got you babe</h1>
    </ion-label>
  </ion-item>
</ion-list>

<ion-list>
  <ion-list-header lines="inset">
    <ion-label>Trending</ion-label>
  </ion-list-header>
  <ion-item>
    <ion-label color="primary">
      <h1>harry styles</h1>
    </ion-label>
  </ion-item>
  <ion-item>
    <ion-label color="primary">
      <h1>christmas</h1>
    </ion-label>
  </ion-item>
  <ion-item lines="none">
    <ion-label color="primary">
      <h1>falling</h1>
    </ion-label>
  </ion-item>
</ion-list>

import React from 'react';
import { IonButton, IonContent, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';

export const ListHeaderExample: React.FC = () => (
  <IonContent>
    {/*-- Default List Header --*/}
    <IonListHeader>
      <IonLabel>List Header</IonLabel>
    </IonListHeader>

    {/*-- List Header with Button --*/}
    <IonListHeader>
      <IonLabel>New This Week</IonLabel>
      <IonButton>See All</IonButton>
    </IonListHeader>

    {/*-- List Header with Outline Button --*/}
    <IonListHeader>
      <IonLabel>New This Week</IonLabel>
      <IonButton fill="outline">See All</IonButton>
    </IonListHeader>

    {/*-- List Header Full Lines --*/}
    <IonListHeader lines="full">
      <IonLabel>New This Week</IonLabel>
      <IonButton>See All</IonButton>
    </IonListHeader>

    {/*-- List Header Inset Lines --*/}
    <IonListHeader lines="inset">
      <IonLabel>New This Week</IonLabel>
      <IonButton>See All</IonButton>
    </IonListHeader>

    {/*-- List Headers in Lists --*/}
    <IonList>
      <IonListHeader lines="inset">
        <IonLabel>Recent</IonLabel>
        <IonButton>Clear</IonButton>
      </IonListHeader>
      <IonItem lines="none">
        <IonLabel color="primary">
          <h1>I got you babe</h1>
        </IonLabel>
      </IonItem>
    </IonList>

    <IonList>
      <IonListHeader lines="inset">
        <IonLabel>Trending</IonLabel>
      </IonListHeader>
      <IonItem>
        <IonLabel color="primary">
          <h1>harry styles</h1>
        </IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel color="primary">
          <h1>christmas</h1>
        </IonLabel>
      </IonItem>
      <IonItem lines="none">
        <IonLabel color="primary">
          <h1>falling</h1>
        </IonLabel>
      </IonItem>
    </IonList>
  </IonContent>
);

import { Component, h } from '@stencil/core';

@Component({
  tag: 'list-header-example',
  styleUrl: 'list-header-example.css'
})
export class ListHeaderExample {
  render() {
    return [
      // Default List Header
      <ion-list-header>
        <ion-label>List Header</ion-label>
      </ion-list-header>,

      // List Header with Button
      <ion-list-header>
        <ion-label>New This Week</ion-label>
        <ion-button>See All</ion-button>
      </ion-list-header>,

      // List Header with Outline Button
      <ion-list-header>
        <ion-label>New This Week</ion-label>
        <ion-button fill="outline">See All</ion-button>
      </ion-list-header>,

      // List Header Full Lines
      <ion-list-header lines="full">
        <ion-label>New This Week</ion-label>
        <ion-button>See All</ion-button>
      </ion-list-header>,

      // List Header Inset Lines
      <ion-list-header lines="inset">
        <ion-label>New This Week</ion-label>
        <ion-button>See All</ion-button>
      </ion-list-header>,

      // List Headers in Lists
      <ion-list>
        <ion-list-header lines="inset">
          <ion-label>Recent</ion-label>
          <ion-button>Clear</ion-button>
        </ion-list-header>
        <ion-item lines="none">
          <ion-label color="primary">
            <h1>I got you babe</h1>
          </ion-label>
        </ion-item>
      </ion-list>,

      <ion-list>
        <ion-list-header lines="inset">
          <ion-label>Trending</ion-label>
        </ion-list-header>
        <ion-item>
          <ion-label color="primary">
            <h1>harry styles</h1>
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-label color="primary">
            <h1>christmas</h1>
          </ion-label>
        </ion-item>
        <ion-item lines="none">
          <ion-label color="primary">
            <h1>falling</h1>
          </ion-label>
        </ion-item>
      </ion-list>
    ];
  }
}

<template>
  <!-- Default List Header -->
  <ion-list-header>
    <ion-label>List Header</ion-label>
  </ion-list-header>

  <!-- List Header with Button -->
  <ion-list-header>
    <ion-label>New This Week</ion-label>
    <ion-button>See All</ion-button>
  </ion-list-header>

  <!-- List Header with Outline Button -->
  <ion-list-header>
    <ion-label>New This Week</ion-label>
    <ion-button fill="outline">See All</ion-button>
  </ion-list-header>

  <!-- List Header Full Lines -->
  <ion-list-header lines="full">
    <ion-label>New This Week</ion-label>
    <ion-button>See All</ion-button>
  </ion-list-header>

  <!-- List Header Inset Lines -->
  <ion-list-header lines="inset">
    <ion-label>New This Week</ion-label>
    <ion-button>See All</ion-button>
  </ion-list-header>

  <!-- List Headers in Lists -->
  <ion-list>
    <ion-list-header lines="inset">
      <ion-label>Recent</ion-label>
      <ion-button>Clear</ion-button>
    </ion-list-header>
    <ion-item lines="none">
      <ion-label color="primary">
        <h1>I got you babe</h1>
      </ion-label>
    </ion-item>
  </ion-list>

  <ion-list>
    <ion-list-header lines="inset">
      <ion-label>Trending</ion-label>
    </ion-list-header>
    <ion-item>
      <ion-label color="primary">
        <h1>harry styles</h1>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-label color="primary">
        <h1>christmas</h1>
      </ion-label>
    </ion-item>
    <ion-item lines="none">
      <ion-label color="primary">
        <h1>falling</h1>
      </ion-label>
    </ion-item>
  </ion-list>
</template>

<script>
import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonItem, IonLabel, IonList, IonListHeader }
});
</script>

Properties

color
Description	Màu sắc để sử dụng từ bảng màu ứng dụng của bạn. Tùy chọn mặc định là: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
Attribute	`color`
Type	`string \| undefined`
lines
Description	Cách đường viền dưới cùng sẽ được hiển thị trên tiêu đề danh sách.
Attribute	`lines`
Type	`"full" \| "inset" \| "none" \| undefined`
mode
Description	mode xác định kiểu nền tảng nào sẽ sử dụng
Attribute	`mode`
Type	`"ios" \| "md"`

CSS custom properties

Name	Description
`--background`	Background of the list header
`--border-color`	Color of the list header border
`--border-style`	Style of the list header border
`--border-width`	Width of the list header border
`--color`	Color of the list header text
`--inner-border-width`	Width of the inner list header border

Bài 28: Ion-list: Tìm hiểu về ion-list, ion-list-header

ion-list

Usage

properties

inset

lines

mode

Methods

closeSlidingItems

ion-list-header

Usage

Properties

color

lines

mode

CSS custom properties

Người đăng: codersulution

Đăng nhận xét

0 Nhận xét

Chuyên Mục 🦊 adoperator

Chuyên Mục 🦊 ggads

Giới thiệu về tôi

Facebook

Most Popular

Tags

url

Labels

Most Popular

Bài 17: Khái niệm về lập trình hướng đối tượng trong java

Bài 11: Mệnh đề if-else trong java

Bài 12: Mệnh đề Switch-case - vòng lặp for trong java

Tổng số lượt xem trang

Featured post

Bài 17: Khái niệm về lập trình hướng đối tượng trong java

Footer Menu Widget

Contact form

Bài 28: Ion-list: Tìm hiểu về ion-list, ion-list-header

ion-list

Usage

properties

inset

lines

mode

Methods

closeSlidingItems

ion-list-header

Usage

Properties

color

lines

mode

CSS custom properties

Người đăng: codersulution

Bạn có thể thích những bài đăng này

Đăng nhận xét

0 Nhận xét

Social Plugin

Chuyên Mục 🦊 adoperator

Chuyên Mục 🦊 ggads

Giới thiệu về tôi

Facebook

Most Popular

Tags

myadcash

url

Labels

Most Popular

Bài 17: Khái niệm về lập trình hướng đối tượng trong java

Bài 11: Mệnh đề if-else trong java

Bài 12: Mệnh đề Switch-case - vòng lặp for trong java

Tổng số lượt xem trang

Featured post

Bài 17: Khái niệm về lập trình hướng đối tượng trong java

Footer Menu Widget

Contact form