ion-item

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4列表项组件ion-item对项目进行布局。ion-item中有Detail Arrows ,Item Placement ,Input Highlight ,ionic ion-item 用法(Usage) ,ionic ion-item 属性(Properties) ,ionic ion-item 中的CSS 自定义属性等

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.

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, add the detail attribute to the item.

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 right 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 input with a different color border 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)

angular javascript

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-label>
  <ion-range>ion-range>
ion-item>

Basic ion-item 用法(Usage)


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


<ion-item onclick="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 onclick="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 onclick="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 onclick="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-label>
  <ion-range>ion-range>
ion-item>

ion-item 属性(Properties)

button

Description

If true, a button tag will be rendered and the item will be tappable.

Attribute button
Type boolean

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