Bài 25: Ion-item,Ion-item-divider, Ion-item-group

Ion-item

item là các phần tử có thể chứa văn bản, biểu tượng, hình đại diện, hình ảnh, đầu vào và bất kỳ phần tử gốc hoặc tùy chỉnh nào khác. Nói chung chúng được đặt trong một danh sách với các mục khác. item có thể được vuốt, xóa, sắp xếp lại thứ tự, chỉnh sửa và hơn thế nữa.

Clickable Items

Một item được coi là "có thể nhấp" nếu nó có bộ href hoặc thuộc tính button. Các Item có thể nhấp có một số khác biệt trực quan cho thấy chúng có thể được tương tác. Ví dụ: một item có thể nhấp nhận được hiệu ứng gợn sóng khi kích hoạt ở md chế độ, có điểm nổi bật khi được kích hoạt ở chế độ ios và có detail arrow theo mặc định ở chế độ ios.

Detail Arrows

Theo mặc định clickable items sẽ hiển thị biểu tượng mũi tên phải trên chế độ ios . Để ẩn biểu tượng mũi tên phải trên các phần tử có thể nhấp, hãy đặt thuộc detail tính thành false. Để hiển thị biểu tượng mũi tên phải trên một mục không hiển thị tự nhiên, hãy đặt thuộc detail tính thành true.

Item Placement

item sử dụng slots được đặt tên để định vị nội dung. Logic này giúp bạn có thể viết một mục phức tạp bằng cách đánh dấu đơn giản, dễ hiểu mà không cần phải lo lắng về việc tạo kiểu và định vị các phần tử.

Biểu đồ dưới đây nêu chi tiết các vị trí item và nơi nó sẽ đặt phần tử bên trong mục:

Slot	Description
`start`	Placed to the left of all other content in LTR, and to the `right` in RTL.
`end`	Placed to the right of all other content in LTR, and to the `left` in RTL.
none	Placed inside of the input wrapper.

Text Alignment

Các item căn trái văn bản và thêm dấu chấm lửng khi văn bản rộng hơn mục đó. Xem Tài liệu về Tiện ích CSS cho các lớp có thể được thêm vào <ion-item>để chuyển đổi văn bản.

Input Highlight

Highlight Height

Các item có chứa đầu vào sẽ đánh dấu đường viền dưới cùng của đầu vào bằng màu khác khi được đặt tiêu điểm, hợp lệ hoặc không hợp lệ. Theo mặc định, md các mục có điểm đánh dấu với độ cao được đặt thành 2px và ios không có điểm đánh dấu (về mặt kỹ thuật, độ cao được đặt thành 0). Chiều cao có thể được thay đổi bằng cách sử dụng thuộc tính --highlight-height CSS. Để tắt phần đánh dấu, hãy đặt biến này thành 0. Để biết thêm thông tin về cách đặt thuộc tính CSS,

Highlight Color

highlight color thay đổi dựa trên trạng thái vật phẩm, nhưng tất cả các trạng thái đều sử dụng màu Ionic theo mặc định. Khi được lấy nét, điểm sáng đầu vào sẽ sử dụng màu primary. Nếu đầu vào hợp lệ, nó sẽ sử dụng màu success và các đầu vào không hợp lệ sẽ sử dụng màu danger.

Usage

<!-- Default Item -->
<ion-item>
  <ion-label>
    Item
  </ion-label>
</ion-item>

<!-- Item as a Button -->
<ion-item button (click)="buttonClick()">
  <ion-label>
    Button Item
  </ion-label>
</ion-item>

<!-- Item as an Anchor -->
<ion-item href="https://www.ionicframework.com">
  <ion-label>
    Anchor Item
  </ion-label>
</ion-item>

<ion-item color="secondary">
  <ion-label>
    Secondary Color Item
  </ion-label>
</ion-item>

<!-- Default Item -->
<ion-item>
  <ion-label>
    Item
  </ion-label>
</ion-item>

<!-- Item as a Button -->
<ion-item button onclick="buttonClick()">
  <ion-label>
    Button Item
  </ion-label>
</ion-item>

<!-- Item as an Anchor -->
<ion-item href="https://www.ionicframework.com">
  <ion-label>
    Anchor Item
  </ion-label>
</ion-item>

<ion-item color="secondary">
  <ion-label>
    Secondary Color Item
  </ion-label>
</ion-item>

import React from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonItem, IonLabel, IonList, IonText, IonAvatar, IonThumbnail, IonButton, IonIcon, IonDatetime, IonSelect, IonSelectOption, IonToggle, IonInput, IonCheckbox, IonRange } from '@ionic/react';
import { closeCircle, home, star, navigate, informationCircle, checkmarkCircle, shuffle } from 'ionicons/icons';

export const ItemExamples: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>ItemExamples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        {/*-- Default Item --*/}
        <IonItem>
          <IonLabel>
            Item
          </IonLabel>
        </IonItem>

        {/*-- Item as a Button --*/}
        <IonItem button onClick={() => { }}>
          <IonLabel>
            Button Item
          </IonLabel>
        </IonItem>

        {/*-- Item as an Anchor --*/}
        <IonItem href="https://www.ionicframework.com">
          <IonLabel>
            Anchor Item
          </IonLabel>
        </IonItem>

        <IonItem color="secondary">
          <IonLabel>
            Secondary Color Item
          </IonLabel>
        </IonItem>

        {/*-- Detail Arrows --*/}
        <IonItem detail>
          <IonLabel>
            Standard Item with Detail Arrow
          </IonLabel>
        </IonItem>

        <IonItem button onClick={() => { }} detail>
          <IonLabel>
            Button Item with Detail Arrow
          </IonLabel>
        </IonItem>

        <IonItem detail={false} href="https://www.ionicframework.com">
          <IonLabel>
            Anchor Item with no Detail Arrow
          </IonLabel>
        </IonItem>

        <IonList>
          <IonItem>
            <IonLabel>
              Item
            </IonLabel>
          </IonItem>

          <IonItem lines="none">
            <IonLabel>
              No Lines Item
            </IonLabel>
          </IonItem>

          <IonItem>
            <IonLabel className="ion-text-wrap">
              Multiline text that should wrap when it is too long
              to fit on one line in the item.
            </IonLabel>
          </IonItem>

          <IonItem>
            <IonLabel className="ion-text-wrap">
              <IonText color="primary">
                <h3>H3 Primary Title</h3>
              </IonText>
              <p>Paragraph line 1</p>
              <IonText color="secondary">
                <p>Paragraph line 2 secondary</p>
              </IonText>
            </IonLabel>
          </IonItem>

          <IonItem lines="full">
            <IonLabel>
              Item with Full Lines
            </IonLabel>
          </IonItem>
        </IonList>

        {/*-- Item Inset Lines --*/}
        <IonItem lines="inset">
          <IonLabel>Item Lines Inset</IonLabel>
        </IonItem>

        {/*-- Item Full Lines --*/}
        <IonItem lines="full">
          <IonLabel>Item Lines Full</IonLabel>
        </IonItem>

        {/*-- Item None Lines --*/}
        <IonItem lines="none">
          <IonLabel>Item Lines None</IonLabel>
        </IonItem>

        {/*-- List Full Lines --*/}
        <IonList lines="full">
          <IonItem>
            <IonLabel>Full Lines Item 1</IonLabel>
          </IonItem>

          <IonItem>
            <IonLabel>Full Lines Item 2</IonLabel>
          </IonItem>
        </IonList>

        {/*-- List Inset Lines --*/}
        <IonList lines="inset">
          <IonItem>
            <IonLabel>Inset Lines Item 1</IonLabel>
          </IonItem>

          <IonItem>
            <IonLabel>Inset Lines Item 2</IonLabel>
          </IonItem>
        </IonList>

        {/*-- List No Lines --*/}
        <IonList lines="none">
          <IonItem>
            <IonLabel>No lines Item 1</IonLabel>
          </IonItem>

          <IonItem>
            <IonLabel>No lines Item 2</IonLabel>
          </IonItem>

          <IonItem>
            <IonLabel>No lines Item 3</IonLabel>
          </IonItem>
        </IonList>

        <IonItem button onClick={() => { }}>
          <IonAvatar slot="start">
            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
          </IonAvatar>
          <IonLabel>
            Avatar Start, Button Item
          </IonLabel>
        </IonItem>

        <IonItem href="#">
          <IonLabel>
            Thumbnail End, Anchor Item
          </IonLabel>
          <IonThumbnail slot="end">
            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
          </IonThumbnail>
        </IonItem>

        <IonItem>
          <IonThumbnail slot="start">
            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
          </IonThumbnail>
          <IonLabel>
            <h2>H2 Title Text</h2>
            <p>Button on right</p>
          </IonLabel>
          <IonButton fill="outline" slot="end">View</IonButton>
        </IonItem>

        <IonItem button onClick={() => { }}>
          <IonThumbnail slot="start">
            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
          </IonThumbnail>
          <IonLabel>
            <h3>H3 Title Text</h3>
            <p>Icon on right</p>
          </IonLabel>
          <IonIcon icon={closeCircle} slot="end" />
        </IonItem>

        {/*-- Buttons in Items --*/}
        <IonItem>
          <IonButton slot="start">
            Start
          </IonButton>
          <IonLabel>Button Start/End</IonLabel>
          <IonButton slot="end">
            End
          </IonButton>
        </IonItem>

        <IonItem>
          <IonButton slot="start">
            Start Icon
            <IonIcon icon={home} slot="end" />>
          </IonButton>
          <IonLabel>Buttons with Icons</IonLabel>
          <IonButton slot="end">
            <IonIcon icon={star} slot="end" />
            End Icon
          </IonButton>
        </IonItem>

        <IonItem>
          <IonButton slot="start">
            <IonIcon slot="icon-only" icon={navigate} />
          </IonButton>
          <IonLabel>Icon only Buttons</IonLabel>
          <IonButton slot="end">
            <IonIcon slot="icon-only" icon={star} />
          </IonButton>
        </IonItem>

        <IonItem>
          <IonLabel>
            Icon End
          </IonLabel>
          <IonIcon icon={informationCircle} slot="end" />
        </IonItem>

        <IonItem>
          <IonLabel>
            Large Icon End
          </IonLabel>
          <IonIcon icon={informationCircle} size="large" slot="end" />
        </IonItem>

        <IonItem>
          <IonLabel>
            Small Icon End
          </IonLabel>
          <IonIcon icon={informationCircle} size="small" slot="end" />
        </IonItem>

        <IonItem>
          <IonIcon icon={star} slot="start" />
          <IonLabel>
            Icon Start
          </IonLabel>
        </IonItem>

        <IonItem>
          <IonLabel>
            Two Icons End
          </IonLabel>
          <IonIcon icon={checkmarkCircle} slot="end" />
          <IonIcon icon={shuffle} slot="end" />
        </IonItem>

        <IonItem>
          <IonLabel position="floating">Datetime</IonLabel>
          <IonDatetime></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel position="floating">Select</IonLabel>
          <IonSelect>
            <IonSelectOption value="">No Game Console</IonSelectOption>
            <IonSelectOption value="nes">NES</IonSelectOption>
            <IonSelectOption value="n64">Nintendo64</IonSelectOption>
            <IonSelectOption value="ps">PlayStation</IonSelectOption>
            <IonSelectOption value="genesis">Sega Genesis</IonSelectOption>
            <IonSelectOption value="saturn">Sega Saturn</IonSelectOption>
            <IonSelectOption value="snes">SNES</IonSelectOption>
          </IonSelect>
        </IonItem>

        <IonItem>
          <IonLabel>Toggle</IonLabel>
          <IonToggle slot="end"></IonToggle>
        </IonItem>

        <IonItem>
          <IonLabel position="floating">Floating Input</IonLabel>
          <IonInput></IonInput>
        </IonItem>

        <IonItem>
          <IonLabel>Input (placeholder)</IonLabel>
          <IonInput placeholder="Placeholder"></IonInput>
        </IonItem>

        <IonItem>
          <IonLabel>Checkbox</IonLabel>
          <IonCheckbox slot="start" />
        </IonItem>

        <IonItem>
          <IonLabel>Range</IonLabel>
          <IonRange></IonRange>
        </IonItem>
      </IonContent>
    </IonPage>
  );
};

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

@Component({
  tag: 'item-example',
  styleUrl: 'item-example.css'
})
export class ItemExample {
  buttonClick() {
    console.log('Clicked button');
  }

  render() {
    return [
      // Default Item
      <ion-item>
        <ion-label>
          Item
        </ion-label>
      </ion-item>,

      // Item as a Button
      <ion-item button onClick={() => this.buttonClick()}>
        <ion-label>
          Button Item
        </ion-label>
      </ion-item>,

      // Item as an Anchor
      <ion-item href="https://www.ionicframework.com">
        <ion-label>
          Anchor Item
        </ion-label>
      </ion-item>,

      <ion-item color="secondary">
        <ion-label>
          Secondary Color Item
        </ion-label>
      </ion-item>
    ];
  }
}

<template>
  <!-- Default Item -->
  <ion-item>
    <ion-label>
      Item
    </ion-label>
  </ion-item>

  <!-- Item as a Button -->
  <ion-item button @click="buttonClick()">
    <ion-label>
      Button Item
    </ion-label>
  </ion-item>

  <!-- Item as an Anchor -->
  <ion-item href="https://www.ionicframework.com">
    <ion-label>
      Anchor Item
    </ion-label>
  </ion-item>

  <ion-item color="secondary">
    <ion-label>
      Secondary Color Item
    </ion-label>
  </ion-item>
</template>

Copy

Detail Arrows

<template>
  <ion-item detail>
    <ion-label>
      Standard Item with Detail Arrow
    </ion-label>
  </ion-item>

  <ion-item button @click="buttonClick()" detail>
    <ion-label>
      Button Item with Detail Arrow
    </ion-label>
  </ion-item>

  <ion-item detail="false" href="https://www.ionicframework.com">
    <ion-label>
      Anchor Item with no Detail Arrow
    </ion-label>
  </ion-item>
</template>

List Items

<template>
  <ion-list>
    <ion-item>
      <ion-label>
        Item
      </ion-label>
    </ion-item>

    <ion-item lines="none">
      <ion-label>
        No Lines Item
      </ion-label>
    </ion-item>

    <ion-item>
      <ion-label class="ion-text-wrap">
      Multiline text that should wrap when it is too long
      to fit on one line in the item.
      </ion-label>
    </ion-item>

    <ion-item>
      <ion-label class="ion-text-wrap">
        <ion-text color="primary">
          <h3>H3 Primary Title</h3>
        </ion-text>
        <p>Paragraph line 1</p>
        <ion-text color="secondary">
          <p>Paragraph line 2 secondary</p>
        </ion-text>
      </ion-label>
    </ion-item>

    <ion-item lines="full">
      <ion-label>
        Item with Full Lines
      </ion-label>
    </ion-item>

  </ion-list>
</template>

Item Lines

<template>
  <!-- Item Inset Lines -->
  <ion-item lines="inset">
    <ion-label>Item Lines Inset</ion-label>
  </ion-item>

  <!-- Item Full Lines -->
  <ion-item lines="full">
    <ion-label>Item Lines Full</ion-label>
  </ion-item>

  <!-- Item None Lines -->
  <ion-item lines="none">
    <ion-label>Item Lines None</ion-label>
  </ion-item>

  <!-- List Full Lines -->
  <ion-list lines="full">
    <ion-item>
      <ion-label>Full Lines Item 1</ion-label>
    </ion-item>

    <ion-item>
      <ion-label>Full Lines Item 2</ion-label>
    </ion-item>
  </ion-list>

  <!-- List Inset Lines -->
  <ion-list lines="inset">
    <ion-item>
      <ion-label>Inset Lines Item 1</ion-label>
    </ion-item>

    <ion-item>
      <ion-label>Inset Lines Item 2</ion-label>
    </ion-item>
  </ion-list>

  <!-- List No Lines -->
  <ion-list lines="none">
    <ion-item>
      <ion-label>No lines Item 1</ion-label>
    </ion-item>

    <ion-item>
      <ion-label>No lines Item 2</ion-label>
    </ion-item>

    <ion-item>
      <ion-label>No lines Item 3</ion-label>
    </ion-item>
  </ion-list>
</template>

Media Items

<template>
  <ion-item button @click="testClick()">
    <ion-avatar slot="start">
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
    </ion-avatar>
    <ion-label>
      Avatar Start, Button Item
    </ion-label>
  </ion-item>

  <ion-item href="#">
    <ion-label>
      Thumbnail End, Anchor Item
    </ion-label>
    <ion-thumbnail slot="end">
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
    </ion-thumbnail>
  </ion-item>

  <ion-item>
    <ion-thumbnail slot="start">
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
    </ion-thumbnail>
    <ion-label>
      <h2>H2 Title Text</h2>
      <p>Button on right</p>
    </ion-label>
    <ion-button fill="outline" slot="end">View</ion-button>
  </ion-item>

  <ion-item button @click="testClick()">
    <ion-thumbnail slot="start">
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
    </ion-thumbnail>
    <ion-label>
      <h3>H3 Title Text</h3>
      <p>Icon on right</p>
    </ion-label>
    <ion-icon :icon="closeCircle" slot="end"></ion-icon>
  </ion-item>
</template>

Buttons in items

<template>
  <ion-item>
    <ion-button slot="start">
      Start
    </ion-button>
    <ion-label>Button Start/End</ion-label>
    <ion-button slot="end">
      End
    </ion-button>
  </ion-item>

  <ion-item>
    <ion-button slot="start">
      Start Icon
      <ion-icon :icon="home" slot="end"></ion-icon>
    </ion-button>
    <ion-label>Buttons with Icons</ion-label>
    <ion-button slot="end">
      <ion-icon :icon="star" slot="end"></ion-icon>
      End Icon
    </ion-button>
  </ion-item>

  <ion-item>
    <ion-button slot="start">
      <ion-icon slot="icon-only" :icon="navigate"></ion-icon>
    </ion-button>
    <ion-label>Icon only Buttons</ion-label>
    <ion-button slot="end">
      <ion-icon slot="icon-only" :icon="star"></ion-icon>
    </ion-button>
  </ion-item>
</template>

icons in Items

<template>
  <ion-item>
    <ion-label>
      Icon End
    </ion-label>
    <ion-icon :icon="informationCircle" slot="end"></ion-icon>
  </ion-item>

  <ion-item>
    <ion-label>
      Large Icon End
    </ion-label>
    <ion-icon :icon="informationCircle" size="large" slot="end"></ion-icon>
  </ion-item>

  <ion-item>
    <ion-label>
      Small Icon End
    </ion-label>
    <ion-icon :icon="informationCircle" size="small" slot="end"></ion-icon>
  </ion-item>

  <ion-item>
    <ion-icon :icon="star" slot="start"></ion-icon>
    <ion-label>
      Icon Start
    </ion-label>
  </ion-item>

  <ion-item>
    <ion-label>
      Two Icons End
    </ion-label>
    <ion-icon :icon="checkmarkCircle" slot="end"></ion-icon>
    <ion-icon :icon="shuffle" slot="end"></ion-icon>
  </ion-item>
</template>

item Inputs

<template>
  <ion-item>
    <ion-label position="floating">Datetime</ion-label>
    <ion-datetime></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label position="floating">Select</ion-label>
    <ion-select>
      <ion-select-option value="">No Game Console</ion-select-option>
      <ion-select-option value="nes">NES</ion-select-option>
      <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
      <ion-select-option value="ps">PlayStation</ion-select-option>
      <ion-select-option value="genesis">Sega Genesis</ion-select-option>
      <ion-select-option value="saturn">Sega Saturn</ion-select-option>
      <ion-select-option value="snes">SNES</ion-select-option>
    </ion-select>
  </ion-item>

  <ion-item>
    <ion-label>Toggle</ion-label>
    <ion-toggle slot="end"></ion-toggle>
  </ion-item>

  <ion-item>
    <ion-label position="floating">Floating Input</ion-label>
    <ion-input></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Input (placeholder)</ion-label>
    <ion-input placeholder="Placeholder"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Checkbox</ion-label>
    <ion-checkbox slot="start"></ion-checkbox>
  </ion-item>

  <ion-item>
    <ion-label>Range</ion-label>
    <ion-range></ion-range>
  </ion-item>
</template>

<script>
import { 
  IonAvatar,
  IonButton,
  IonCheckbox, 
  IonDatetime,
  IonIcon,
  IonInput, 
  IonItem, 
  IonLabel, 
  IonRange,
  IonSelect, 
  IonSelectOption, 
  IonText,
  IonThumbnail,
  IonToggle
} from '@ionic/vue';
import { 
  checkmarkCircle, 
  closeCircle, 
  home, 
  informationCircle, 
  navigate, 
  shuffle, 
  star
} from 'ionicons/icons';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { 
    IonAvatar,
    IonButton,
    IonCheckbox, 
    IonDatetime,
    IonIcon,
    IonInput, 
    IonItem, 
    IonLabel, 
    IonRange,
    IonSelect, 
    IonSelectOption, 
    IonText,
    IonThumbnail,
    IonToggle
  },
  setup() {
    return {
      checkmarkCircle, 
      closeCircle, 
      home, 
      informationCircle, 
      navigate, 
      shuffle, 
      star
    }
  }
});
</script>

Properties

button
Description	If `true`, a button tag will be rendered and the item will be tappable.
Attribute	`button`
Type	`boolean`
Default	`false`
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`
detail
Description	If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present.
Attribute	`detail`
Type	`boolean \| undefined`
detailIcon
Description	The icon to use when `detail` is set to `true`.
Attribute	`detail-icon`
Type	`string`
Default	`'chevron-forward'`
disabled
Description	If `true`, the user cannot interact with the item.
Attribute	`disabled`
Type	`boolean`
Default	`false`
download
Description	This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
Attribute	`download`
Type	`string \| undefined`
href
Description	Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
Attribute	`href`
Type	`string \| undefined`
lines
Description	How the bottom border should be displayed on the item.
Attribute	`lines`
Type	`"full" \| "inset" \| "none" \| undefined`
mode
Description	The mode determines which platform styles to use.
Attribute	`mode`
Type	`"ios" \| "md"`
rel
Description	Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.
Attribute	`rel`
Type	`string \| undefined`
routerAnimation
Description	When using a router, it specifies the transition animation when navigating to another page using `href`.
Type	`((baseEl: any, opts?: any) => Animation) \| undefined`
routerDirection
Description	When using a router, it specifies the transition direction when navigating to another page using `href`.
Attribute	`router-direction`
Type	`"back" \| "forward" \| "root"`
Default	`'forward'`
target
Description	Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
Attribute	`target`
Type	`string \| undefined`
type
Description	The type of the button. Only used when an `onclick` or `button` property is present.
Attribute	`type`
Type	`"button" \| "reset" \| "submit"`
Default	`'button'`

CSS Shadow Parts

Name	Description
`detail-icon`	The chevron icon for the item. Only applies when `detail="true"`.
`native`	The native HTML button, anchor or div element that wraps all child elements.

CSS Custom Properties

Name	Description
`--background`	Background of the item
`--background-activated`	Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.
`--background-activated-opacity`	Opacity of the item background when pressed
`--background-focused`	Background of the item when focused with the tab key
`--background-focused-opacity`	Opacity of the item background when focused with the tab key
`--background-hover`	Background of the item on hover
`--background-hover-opacity`	Opacity of the background of the item on hover
`--border-color`	Color of the item border
`--border-radius`	Radius of the item border
`--border-style`	Style of the item border
`--border-width`	Width of the item border
`--color`	Color of the item
`--color-activated`	Color of the item when pressed
`--color-focused`	Color of the item when focused with the tab key
`--color-hover`	Color of the item on hover
`--detail-icon-color`	Color of the item detail icon
`--detail-icon-font-size`	Font size of the item detail icon
`--detail-icon-opacity`	Opacity of the item detail icon
`--highlight-color-focused`	The color of the highlight on the item when focused
`--highlight-color-invalid`	The color of the highlight on the item when invalid
`--highlight-color-valid`	The color of the highlight on the item when valid
`--highlight-height`	The height of the highlight on the item
`--inner-border-width`	Width of the item inner border
`--inner-box-shadow`	Box shadow of the item inner
`--inner-padding-bottom`	Bottom padding of the item inner
`--inner-padding-end`	Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner
`--inner-padding-start`	Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner
`--inner-padding-top`	Top padding of the item inner
`--min-height`	Minimum height of the item
`--padding-bottom`	Bottom padding of the item
`--padding-end`	Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item
`--padding-start`	Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item
`--padding-top`	Top padding of the item
`--ripple-color`	Color of the item ripple effect
`--transition`	Transition of the item

Slots

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

Ion-item-divider, Ion-item-group

Ion-item-divider

Item Dividers là các phần tử khối có thể được sử dụng để tách các mục trong danh sách. Chúng tương tự như các tiêu đề danh sách, nhưng thay vì được đặt ở đầu danh sách, chúng nên nằm giữa các nhóm items.

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>

<!-- Item Dividers in a List -->
<ion-list>
  <ion-item-divider>
    <ion-label>
      Section A
    </ion-label>
  </ion-item-divider>

  <ion-item><ion-label>A1</ion-label></ion-item>
  <ion-item><ion-label>A2</ion-label></ion-item>
  <ion-item><ion-label>A3</ion-label></ion-item>
  <ion-item><ion-label>A4</ion-label></ion-item>
  <ion-item><ion-label>A5</ion-label></ion-item>

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

  <ion-item><ion-label>B1</ion-label></ion-item>
  <ion-item><ion-label>B2</ion-label></ion-item>
  <ion-item><ion-label>B3</ion-label></ion-item>
  <ion-item><ion-label>B4</ion-label></ion-item>
  <ion-item><ion-label>B5</ion-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>

<!-- Item Dividers in a List -->
<ion-list>
  <ion-item-divider>
    <ion-label>
      Section A
    </ion-label>
  </ion-item-divider>

  <ion-item><ion-label>A1</ion-label></ion-item>
  <ion-item><ion-label>A2</ion-label></ion-item>
  <ion-item><ion-label>A3</ion-label></ion-item>
  <ion-item><ion-label>A4</ion-label></ion-item>
  <ion-item><ion-label>A5</ion-label></ion-item>

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

  <ion-item><ion-label>B1</ion-label></ion-item>
  <ion-item><ion-label>B2</ion-label></ion-item>
  <ion-item><ion-label>B3</ion-label></ion-item>
  <ion-item><ion-label>B4</ion-label></ion-item>
  <ion-item><ion-label>B5</ion-label></ion-item>
</ion-list>

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

export const ItemDividerExample: React.FC = () => (
  <IonContent>
    <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>A1</IonLabel></IonItem>
      <IonItem><IonLabel>A2</IonLabel></IonItem>
      <IonItem><IonLabel>A3</IonLabel></IonItem>
      <IonItem><IonLabel>A4</IonLabel></IonItem>
      <IonItem><IonLabel>A5</IonLabel></IonItem>

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

      <IonItem><IonLabel>B1</IonLabel></IonItem>
      <IonItem><IonLabel>B2</IonLabel></IonItem>
      <IonItem><IonLabel>B3</IonLabel></IonItem>
      <IonItem><IonLabel>B4</IonLabel></IonItem>
      <IonItem><IonLabel>B5</IonLabel></IonItem>
    </IonList>
  </IonContent>
);

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

@Component({
  tag: 'item-divider-example',
  styleUrl: 'item-divider-example.css'
})
export class ItemDividerExample {
  render() {
    return [
      <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>,

      //  Item Dividers in a List
      <ion-list>
        <ion-item-divider>
          <ion-label>
            Section A
          </ion-label>
        </ion-item-divider>

        <ion-item><ion-label>A1</ion-label></ion-item>
        <ion-item><ion-label>A2</ion-label></ion-item>
        <ion-item><ion-label>A3</ion-label></ion-item>
        <ion-item><ion-label>A4</ion-label></ion-item>
        <ion-item><ion-label>A5</ion-label></ion-item>

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

        <ion-item><ion-label>B1</ion-label></ion-item>
        <ion-item><ion-label>B2</ion-label></ion-item>
        <ion-item><ion-label>B3</ion-label></ion-item>
        <ion-item><ion-label>B4</ion-label></ion-item>
        <ion-item><ion-label>B5</ion-label></ion-item>
      </ion-list>
    ];
  }
}

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

  <!-- Item Dividers in a List -->
  <ion-list>
    <ion-item-divider>
      <ion-label>
        Section A
      </ion-label>
    </ion-item-divider>

    <ion-item><ion-label>A1</ion-label></ion-item>
    <ion-item><ion-label>A2</ion-label></ion-item>
    <ion-item><ion-label>A3</ion-label></ion-item>
    <ion-item><ion-label>A4</ion-label></ion-item>
    <ion-item><ion-label>A5</ion-label></ion-item>

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

    <ion-item><ion-label>B1</ion-label></ion-item>
    <ion-item><ion-label>B2</ion-label></ion-item>
    <ion-item><ion-label>B3</ion-label></ion-item>
    <ion-item><ion-label>B4</ion-label></ion-item>
    <ion-item><ion-label>B5</ion-label></ion-item>
  </ion-list>
</template>

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

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

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`

CSS Custom Properties

Name	Description
`--background`	Background of the item divider
`--color`	Color of the item divider
`--inner-padding-bottom`	Bottom inner padding of the item divider
`--inner-padding-end`	End inner padding of the item divider
`--inner-padding-start`	Start inner padding of the item divider
`--inner-padding-top`	Top inner padding of the item divider
`--padding-bottom`	Bottom padding of the item divider
`--padding-end`	Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider
`--padding-start`	Left padding if direction is left-to-right, and right padding if direction is right-to-left 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.

Ion-item-group

Item groups là các thùng chứa sắp xếp các mục tương tự với nhau. Chúng có thể chứa các ngăn chia mục để chia các mục thành nhiều phần(multiple sections). Chúng cũng có thể được sử dụng để nhóm các mục trượt(group sliding items).

Usage

<ion-item-group>
  <ion-item-divider>
    <ion-label>A</ion-label>
  </ion-item-divider>

  <ion-item>
    <ion-label>Angola</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Argentina</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Armenia</ion-label>
  </ion-item>
</ion-item-group>

<ion-item-group>
  <ion-item-divider>
    <ion-label>B</ion-label>
  </ion-item-divider>

  <ion-item>
    <ion-label>Bangladesh</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Belarus</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Belgium</ion-label>
  </ion-item>
</ion-item-group>


<!-- They can also be used to group sliding items -->
<ion-item-group>
  <ion-item-divider>
    <ion-label>
      Fruits
    </ion-label>
  </ion-item-divider>

  <ion-item-sliding>
    <ion-item>
      <ion-label>
        <h3>Grapes</h3>
      </ion-label>
    </ion-item>
    <ion-item-options>
      <ion-item-option>
        Favorite
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

  <ion-item-sliding>
    <ion-item>
      <ion-label>
        <h3>Apples</h3>
      </ion-label>
    </ion-item>
    <ion-item-options>
      <ion-item-option>
        Favorite
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-item-group>

<ion-item-group>
  <ion-item-divider>
    <ion-label>
      Vegetables
    </ion-label>
  </ion-item-divider>

  <ion-item-sliding>
    <ion-item>
      <ion-label>
        <h3>Carrots</h3>
      </ion-label>
    </ion-item>
    <ion-item-options>
      <ion-item-option>
        Favorite
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

  <ion-item-sliding>
    <ion-item>
      <ion-label>
        <h3>Celery</h3>
      </ion-label>
    </ion-item>
    <ion-item-options>
      <ion-item-option>
        Favorite
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-item-group>

<ion-item-group>
  <ion-item-divider>
    <ion-label>A</ion-label>
  </ion-item-divider>

  <ion-item>
    <ion-label>Angola</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Argentina</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Armenia</ion-label>
  </ion-item>
</ion-item-group>

<ion-item-group>
  <ion-item-divider>
    <ion-label>B</ion-label>
  </ion-item-divider>

  <ion-item>
    <ion-label>Bangladesh</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Belarus</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Belgium</ion-label>
  </ion-item>
</ion-item-group>


<!-- They can also be used to group sliding items -->
<ion-item-group>
  <ion-item-divider>
    <ion-label>
      Fruits
    </ion-label>
  </ion-item-divider>

  <ion-item-sliding>
    <ion-item>
      <ion-label>
        <h3>Grapes</h3>
      </ion-label>
    </ion-item>
    <ion-item-options>
      <ion-item-option>
        Favorite
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

  <ion-item-sliding>
    <ion-item>
      <ion-label>
        <h3>Apples</h3>
      </ion-label>
    </ion-item>
    <ion-item-options>
      <ion-item-option>
        Favorite
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-item-group>

<ion-item-group>
  <ion-item-divider>
    <ion-label>
      Vegetables
    </ion-label>
  </ion-item-divider>

  <ion-item-sliding>
    <ion-item>
      <ion-label>
        <h3>Carrots</h3>
      </ion-label>
    </ion-item>
    <ion-item-options>
      <ion-item-option>
        Favorite
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

  <ion-item-sliding>
    <ion-item>
      <ion-label>
        <h3>Celery</h3>
      </ion-label>
    </ion-item>
    <ion-item-options>
      <ion-item-option>
        Favorite
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-item-group>

import React from 'react';

import { IonItemGroup, IonItemDivider, IonLabel, IonItem, IonItemSliding, IonItemOptions, IonItemOption } from '@ionic/react';

const Example: React.FC<{}> = () => (
  <>
    <IonItemGroup>
      <IonItemDivider>
        <IonLabel>A</IonLabel>
      </IonItemDivider>

      <IonItem>
        <IonLabel>Angola</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>Argentina</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>Armenia</IonLabel>
      </IonItem>
    </IonItemGroup>

    <IonItemGroup>
      <IonItemDivider>
        <IonLabel>B</IonLabel>
      </IonItemDivider>

      <IonItem>
        <IonLabel>Bangladesh</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>Belarus</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>Belgium</IonLabel>
      </IonItem>
    </IonItemGroup>


    {/*-- They can also be used to group sliding items --*/}
    <IonItemGroup>
      <IonItemDivider>
        <IonLabel>
          Fruits
        </IonLabel>
      </IonItemDivider>

      <IonItemSliding>
        <IonItem>
          <IonLabel>
            <h3>Grapes</h3>
          </IonLabel>
        </IonItem>
        <IonItemOptions>
          <IonItemOption>
            Favorite
          </IonItemOption>
        </IonItemOptions>
      </IonItemSliding>

      <IonItemSliding>
        <IonItem>
          <IonLabel>
            <h3>Apples</h3>
          </IonLabel>
        </IonItem>
        <IonItemOptions>
          <IonItemOption>
            Favorite
          </IonItemOption>
        </IonItemOptions>
      </IonItemSliding>
    </IonItemGroup>

    <IonItemGroup>
      <IonItemDivider>
        <IonLabel>
          Vegetables
        </IonLabel>
      </IonItemDivider>

      <IonItemSliding>
        <IonItem>
          <IonLabel>
            <h3>Carrots</h3>
          </IonLabel>
        </IonItem>
        <IonItemOptions>
          <IonItemOption>
            Favorite
          </IonItemOption>
        </IonItemOptions>
      </IonItemSliding>

      <IonItemSliding>
        <IonItem>
          <IonLabel>
            <h3>Celery</h3>
          </IonLabel>
        </IonItem>
        <IonItemOptions>
          <IonItemOption>
            Favorite
          </IonItemOption>
        </IonItemOptions>
      </IonItemSliding>
    </IonItemGroup>
  </>
);

export default Example;

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

@Component({
  tag: 'item-group-example',
  styleUrl: 'item-group-example.css'
})
export class ItemGroupExample {
  render() {
    return [
      <ion-item-group>
        <ion-item-divider>
          <ion-label>A</ion-label>
        </ion-item-divider>

        <ion-item>
          <ion-label>Angola</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>Argentina</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>Armenia</ion-label>
        </ion-item>
      </ion-item-group>

      <ion-item-group>
        <ion-item-divider>
          <ion-label>B</ion-label>
        </ion-item-divider>

        <ion-item>
          <ion-label>Bangladesh</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>Belarus</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>Belgium</ion-label>
        </ion-item>
      </ion-item-group>


      // They can also be used to group sliding items
      <ion-item-group>
        <ion-item-divider>
          <ion-label>
            Fruits
          </ion-label>
        </ion-item-divider>

        <ion-item-sliding>
          <ion-item>
            <ion-label>
              <h3>Grapes</h3>
            </ion-label>
          </ion-item>
          <ion-item-options>
            <ion-item-option>
              Favorite
            </ion-item-option>
          </ion-item-options>
        </ion-item-sliding>

        <ion-item-sliding>
          <ion-item>
            <ion-label>
              <h3>Apples</h3>
            </ion-label>
          </ion-item>
          <ion-item-options>
            <ion-item-option>
              Favorite
            </ion-item-option>
          </ion-item-options>
        </ion-item-sliding>
      </ion-item-group>

      <ion-item-group>
        <ion-item-divider>
          <ion-label>
            Vegetables
          </ion-label>
        </ion-item-divider>

        <ion-item-sliding>
          <ion-item>
            <ion-label>
              <h3>Carrots</h3>
            </ion-label>
          </ion-item>
          <ion-item-options>
            <ion-item-option>
              Favorite
            </ion-item-option>
          </ion-item-options>
        </ion-item-sliding>

        <ion-item-sliding>
          <ion-item>
            <ion-label>
              <h3>Celery</h3>
            </ion-label>
          </ion-item>
          <ion-item-options>
            <ion-item-option>
              Favorite
            </ion-item-option>
          </ion-item-options>
        </ion-item-sliding>
      </ion-item-group>
    ];
  }
}

<template>
  <ion-item-group>
    <ion-item-divider>
      <ion-label>A</ion-label>
    </ion-item-divider>

    <ion-item>
      <ion-label>Angola</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Argentina</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Armenia</ion-label>
    </ion-item>
  </ion-item-group>

  <ion-item-group>
    <ion-item-divider>
      <ion-label>B</ion-label>
    </ion-item-divider>

    <ion-item>
      <ion-label>Bangladesh</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Belarus</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Belgium</ion-label>
    </ion-item>
  </ion-item-group>


  <!-- They can also be used to group sliding items -->
  <ion-item-group>
    <ion-item-divider>
      <ion-label>
        Fruits
      </ion-label>
    </ion-item-divider>

    <ion-item-sliding>
      <ion-item>
        <ion-label>
          <h3>Grapes</h3>
        </ion-label>
      </ion-item>
      <ion-item-options>
        <ion-item-option>
          Favorite
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>

    <ion-item-sliding>
      <ion-item>
        <ion-label>
          <h3>Apples</h3>
        </ion-label>
      </ion-item>
      <ion-item-options>
        <ion-item-option>
          Favorite
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-item-group>

  <ion-item-group>
    <ion-item-divider>
      <ion-label>
        Vegetables
      </ion-label>
    </ion-item-divider>

    <ion-item-sliding>
      <ion-item>
        <ion-label>
          <h3>Carrots</h3>
        </ion-label>
      </ion-item>
      <ion-item-options>
        <ion-item-option>
          Favorite
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>

    <ion-item-sliding>
      <ion-item>
        <ion-label>
          <h3>Celery</h3>
        </ion-label>
      </ion-item>
      <ion-item-options>
        <ion-item-option>
          Favorite
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-item-group>
</template>
<script>
import { 
  IonItem, 
  IonItemDivider,
  IonItemGroup, 
  IonItemOption, 
  IonItemOptions, 
  IonItemSliding, 
  IonLabel
} from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { 
    IonItem,
    IonItemDivider, 
    IonItemGroup, 
    IonItemOption, 
    IonItemOptions, 
    IonItemSliding, 
    IonLabel
  }
});
</script>

Bài 25: Ion-item,Ion-item-divider, Ion-item-group

Ion-item

Clickable Items

Detail Arrows

Item Placement

Text Alignment

Input Highlight

Highlight Height

Highlight Color

Usage

Detail Arrows

List Items

Item Lines

Media Items

Buttons in items

icons in Items

item Inputs

Properties

button

color

detail

detailIcon

disabled

download

href

lines

mode

rel

routerAnimation

routerDirection

target

type

CSS Shadow Parts

CSS Custom Properties

Slots

Ion-item-divider, Ion-item-group

Ion-item-divider

Usage

Properties

color

mode

sticky

CSS Custom Properties

Slots

Ion-item-group

Usage

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