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 |