ion-item

概要(CONTENTS)

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

ion-item官方文档地址:https://ionicframework.com/docs/api/item

Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. Generally they are placed in a list with other items. Items can be swiped, deleted, reordered, edited, and more.

Clickable Items

An item is considered "clickable" if it has an href or button property set. Clickable items have a few visual differences that indicate they can be interacted with. For example, a clickable item receives the ripple effect upon activation in md mode, has a highlight when activated in ios mode, and has a detail arrow by default in ios mode.

ion-item 箭头(Detail Arrows)

By default clickable items will display a right arrow icon on ios mode. To hide the right arrow icon on clickable elements, set the detail property to false. To show the right arrow icon on an item that doesn't display it naturally, set the detail property to true.

ion-item 位置(Item Placement)

Item uses named slots in order to position content. This logic makes it possible to write a complex item with simple, understandable markup without having to worry about styling and positioning the elements.

The below chart details the item slots and where it will place the element inside of the item:

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

Items left align text and add an ellipsis when the text is wider than the item. See the Utility Attributes Documentation for attributes that can be added to to transform the text.

ion-item 输入框高度设置(Input Highlight)

Highlight Height

Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, md items have a highlight with a height set to 2px and ios has no highlight (technically the height is set to 0). The height can be changed using the --highlight-height CSS property. To turn off the highlight, set this variable to 0. For more information on setting CSS properties, see the theming documentation.

Highlight Color

The highlight color changes based on the item state, but all of the states use Ionic colors by default. When focused, the input highlight will use the primary color. If the input is valid it will use the success color, and invalid inputs will use the danger color. See the ion-item中的CSS 自定义属性 section below for the highlight color variables.

ion-item 用法(Usage)

Basic ion-item 用法(Usage)


<ion-item>
  <ion-label>
    Item
  ion-label>
ion-item>


<ion-item (click)="buttonClick()">
  <ion-label>
    Button Item
  ion-label>
ion-item>


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

ion-item 箭头(Detail Arrows)

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

<ion-item (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>

List Items

<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 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 text-wrap>
      <ion-text color="primary">
        <h3>H3 Primary Titleh3>
      ion-text>
      <p>Paragraph line 1p>
      <ion-text color="secondary">
        <p>Paragraph line 2 secondaryp>
      ion-text>
    ion-label>
  ion-item>

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

ion-list>

Item Lines


<ion-item lines="inset">
  <ion-label>Item Lines Insetion-label>
ion-item>


<ion-item lines="full">
  <ion-label>Item Lines Fullion-label>
ion-item>


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


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

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


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

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


<ion-list lines="none">
  <ion-item>
    <ion-label>No lines Item 1ion-label>
  ion-item>

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

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

Media Items

<ion-item (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 Texth2>
    <p>Button on rightp>
  ion-label>
  <ion-button fill="outline" slot="end">Viewion-button>
ion-item>

<ion-item (click)="testClick()">
  <ion-thumbnail slot="start">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
  ion-thumbnail>
  <ion-label>
    <h3>H3 Title Texth3>
    <p>Icon on rightp>
  ion-label>
  <ion-icon name="close-circle" slot="end">ion-icon>
ion-item>

Buttons in Items

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

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

<ion-item>
  <ion-button slot="start">
    <ion-icon slot="icon-only" name="navigate">ion-icon>
  ion-button>
  <ion-label>Icon only Buttonsion-label>
  <ion-button slot="end">
    <ion-icon slot="icon-only" name="star">ion-icon>
  ion-button>
ion-item>

Icons in Items

<ion-item>
  <ion-label>
    Icon End
  ion-label>
  <ion-icon name="information-circle" slot="end">ion-icon>
ion-item>

<ion-item>
  <ion-label>
    Large Icon End
  ion-label>
  <ion-icon name="information-circle" size="large" slot="end">ion-icon>
ion-item>

<ion-item>
  <ion-label>
    Small Icon End
  ion-label>
  <ion-icon name="information-circle" size="small" slot="end">ion-icon>
ion-item>

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

<ion-item>
  <ion-label>
    Two Icons End
  ion-label>
  <ion-icon name="checkmark-circle" slot="end">ion-icon>
  <ion-icon name="shuffle" slot="end">ion-icon>
ion-item>

Item Inputs

<ion-item>
  <ion-label position="floating">Datetimeion-label>
  <ion-datetime>ion-datetime>
ion-item>

<ion-item>
  <ion-label position="floating">Selection-label>
  <ion-select>
    <ion-select-option value="">No Game Consoleion-select-option>
    <ion-select-option value="nes">NESion-select-option>
    <ion-select-option value="n64" selected>Nintendo64ion-select-option>
    <ion-select-option value="ps">PlayStationion-select-option>
    <ion-select-option value="genesis">Sega Genesision-select-option>
    <ion-select-option value="saturn">Sega Saturnion-select-option>
    <ion-select-option value="snes">SNESion-select-option>
  ion-select>
ion-item>

<ion-item>
  <ion-label>Toggleion-label>
  <ion-toggle slot="end">ion-toggle>
ion-item>

<ion-item>
  <ion-label position="floating">Floating Inpution-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>Checkboxion-label>
  <ion-checkbox slot="start">ion-checkbox>
ion-item>

<ion-item>
  <ion-label>Rangeion-lab