ion-item
Ionic4项目中我们可以使用Ionic4列表项组件ion-item对项目进行布局。 ion-item官方文档地址:https://ionicframework.com/docs/api/itemItems 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
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
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 用法(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