Ionic Framework 4 is almost here. Preview the beta docs and try it out now! Try Ionic 4 Beta

Note

ion-note

Improve this doc

A note is detailed item in an ion-item. It creates greyed out element that can be on the left or right side of an item.

Usage

<ion-content>
  <ion-list>
    <ion-item>
      <ion-note item-left>
        Left Note
      </ion-note>
      My Item
      <ion-note item-right>
        Right Note
      </ion-note>
    </ion-item>
  </ion-list>
</ion-content>

ion-item

Input Properties

Attr Type Details
color string

The color to use from your Sass $colors map. Default options are: "primary", "secondary", "danger", "light", and "dark". For more information, see Theming your App.

mode string

The mode determines which platform styles to use. Possible values are: "ios", "md", or "wp". For more information, see Platform Styles.

Sass Variables

Property Default Description
$note-ios-color darken($list-ios-border-color, 10%)

Text color of the note

Property Default Description
$note-md-color darken($list-md-border-color, 10%)

Text color of the note

Property Default Description
$note-wp-color $input-wp-border-color

Text color of the note

API

Native

General