ion-note
Notes are text elements generally used as subtitles that provide more information. They are styled to appear grey by default. Notes can be used in an item as metadata text.
Basic Usage
<ion-note>Default Note</ion-note>
Item Notes
<ion-item>
<ion-label>Label</ion-label>
<ion-note slot="end">Note (End)</ion-note>
</ion-item>
<ion-item>
<ion-note slot="start">Note (Start)</ion-note>
<ion-label>Label</ion-label>
</ion-item>
Theming
Colors
<ion-note>Default Note</ion-note>
<ion-note color="primary">Primary Note</ion-note>
<ion-note color="secondary">Secondary Note</ion-note>
<ion-note color="tertiary">Tertiary Note</ion-note>
<ion-note color="success">Success Note</ion-note>
<ion-note color="warning">Warning Note</ion-note>
<ion-note color="danger">Danger Note</ion-note>
<ion-note color="light">Light Note</ion-note>
<ion-note color="medium">Medium Note</ion-note>
<ion-note color="dark">Dark Note</ion-note>
CSS Custom Properties
- src/app/example.component.css
- src/app/example.component.html
ion-note {
--color: #54dc98;
}
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 | "danger" ๏ฝ "dark" ๏ฝ "light" ๏ฝ "medium" ๏ฝ "primary" ๏ฝ "secondary" ๏ฝ "success" ๏ฝ "tertiary" ๏ฝ "warning" ๏ฝ string & Record<never, never> ๏ฝ undefined |
Default | undefined |
mode
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" ๏ฝ "md" |
Default | undefined |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
Name | Description |
---|---|
--color | Color of the note |
Slots
No slots available for this component.