Label ion-label
ion-labelLabels are placed inside of an ion-item element and can be used to describe an ion-input, ion-toggle, ion-checkbox, and more.
Usage
<ion-item> <ion-label>Username</ion-label> <ion-input></ion-input> </ion-item> <ion-item> <ion-label fixed>Website</ion-label> <ion-input type="url"></ion-input> </ion-item> <ion-item> <ion-label floating>Email</ion-label> <ion-input type="email"></ion-input> </ion-item> <ion-item> <ion-label stacked>Phone</ion-label> <ion-input type="tel"></ion-input> </ion-item> <ion-item> <ion-label>Toggle</ion-label> <ion-toggle></ion-toggle> </ion-item> <ion-item> <ion-label>Checkbox</ion-label> <ion-checkbox></ion-checkbox> </ion-item> Attributes
| Attribute | Description |
|---|---|
| fixed | A persistent label that sits next the input. |
| floating | A label that will float above the input if the input is empty or loses focus. |
| stacked | A stacked label will always appear on top of the input. |
Sass Variables
| Property | Default | Description |
|---|---|---|
$label-ios-text-color | null | Text color of the label by an input, select, or datetime |
$label-ios-text-color-focused | null | Text color of the stacked/floating label when it is focused |
$label-ios-margin-top | $item-ios-padding-top | Margin top of the label |
$label-ios-margin-end | ($item-ios-padding-end / 2) | Margin end of the label |
$label-ios-margin-bottom | $item-ios-padding-bottom | Margin bottom of the label |
$label-ios-margin-start | 0 | Margin start of the label |
| Property | Default | Description |
|---|---|---|
$label-md-text-color | #999 | Text color of the label by an input, select, or datetime |
$label-md-text-color-focused | color($colors-md, primary) | Text color of the stacked/floating label when it is focused |
$label-md-margin-top | $item-md-padding-top | Margin top of the label |
$label-md-margin-end | ($item-md-padding-end / 2) | Margin end of the label |
$label-md-margin-bottom | $item-md-padding-bottom | Margin bottom of the label |
$label-md-margin-start | 0 | Margin start of the label |
| Property | Default | Description |
|---|---|---|
$label-wp-text-color | #999 | Text color of the label by an input, select, or datetime |
$label-wp-text-color-focused | color($colors-wp, primary) | Text color of the stacked/floating label when it is focused |