SegmentButton
ion-segment-button
ion-segment-buttonThe child buttons of the ion-segment component. Each ion-segment-button must have a value.
Usage
<ion-content>
<!-- Segment buttons with icons -->
<ion-segment [(ngModel)]="icons" color="secondary">
<ion-segment-button value="camera">
<ion-icon name="camera"></ion-icon>
</ion-segment-button>
<ion-segment-button value="bookmark">
<ion-icon name="bookmark"></ion-icon>
</ion-segment-button>
</ion-segment>
<!-- Segment buttons with text -->
<ion-segment [(ngModel)]="relationship" color="primary">
<ion-segment-button value="friends" (ionSelect)="selectedFriends()">
Friends
</ion-segment-button>
<ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
Enemies
</ion-segment-button>
</ion-segment>
</ion-content>
Input Properties
| Attr | Type | Details |
|---|---|---|
| disabled | boolean |
If true, the user cannot interact with this element. |
| value | string |
the value of the segment button. Required. |
Output Events
| Attr | Details |
|---|---|
| ionSelect | Emitted when a segment button has been clicked. |
Sass Variables
| Property | Default | Description |
|---|---|---|
$segment-button-ios-background-color |
transparent |
Background of the segment button |
$segment-button-ios-background-color-activated |
$toolbar-ios-active-color |
Background of the activated segment button |
$segment-button-ios-text-color |
color-contrast($colors-ios, $segment-button-ios-background-color-activated) |
Text color of the segment button |
$segment-button-ios-transition-activated |
100ms all linear |
Transition of the activated segment button |
$segment-button-ios-transition-hover |
100ms all linear |
Transition of the segment button on hover |
$segment-button-ios-transition-active |
100ms all linear |
Transition of the segment button when pressed |
$segment-button-ios-opacity-hover |
.1 |
Opacity of the segment button on hover |
$segment-button-ios-opacity-active |
.16 |
Opacity of the segment button when pressed |
$segment-button-ios-opacity-activated |
1 |
Opacity of the activated segment button |
$segment-button-ios-opacity-disabled |
.3 |
Opacity of the disabled segment button |
$segment-button-ios-border-width |
1px |
Border width of the segment button |
$segment-button-ios-height |
3.2rem |
Height of the segment button |
$segment-button-ios-line-height |
3rem |
Line height of the segment button |
$segment-button-ios-font-size |
1.3rem |
Font size of the segment button |
$segment-button-ios-border-radius |
4px |
Border radius of the segment button |
$segment-button-ios-icon-size |
2.6rem |
Size of an icon in the segment button |
$segment-button-ios-icon-line-height |
2.8rem |
Line height of an icon in the segment button |
$segment-button-ios-toolbar-button-max-width |
100px |
Max width of the segment button in a toolbar |
$segment-button-ios-toolbar-button-height |
2.6rem |
Height of the segment button in a toolbar |
$segment-button-ios-toolbar-line-height |
2.5rem |
Line height of the segment button in a toolbar |
$segment-button-ios-toolbar-font-size |
1.2rem |
Font size of the segment button in a toolbar |
$segment-button-ios-toolbar-icon-size |
2.2rem |
Size of an icon in the segment button in a toolbar |
$segment-button-ios-toolbar-icon-line-height |
2.4rem |
Line height of an icon in the segment button in a toolbar |
| Property | Default | Description |
|---|---|---|
$segment-button-md-text-color-activated |
$toolbar-md-active-color |
Text color of the activated segment button |
$segment-button-md-border-color-activated |
$toolbar-md-active-color |
Border color of the activated segment button |
$segment-button-md-border-bottom-width |
2px |
Width of the bottom border on the segment button |
$segment-button-md-border-bottom-color |
rgba(#000, .10) |
Color of the bottom border on the segment button |
$segment-button-md-opacity |
.7 |
Opacity of the segment button |
$segment-button-md-opacity-activated |
1 |
Opacity of the activated segment button |
$segment-button-md-opacity-disabled |
.3 |
Opacity of the disabled segment button |
$segment-button-md-padding |
0 6px |
Padding of the segment button |
$segment-button-md-height |
4.2rem |
Height of the segment button |
$segment-button-md-line-height |
4rem |
Line height of the segment button |
$segment-button-md-font-size |
1.2rem |
Font size of the segment button |
$segment-button-md-icon-size |
2.6rem |
Size of an icon in the segment button |
$segment-button-md-icon-line-height |
$segment-button-md-line-height |
Line height of an icon in the segment button |
| Property | Default | Description |
|---|---|---|
$segment-button-wp-background-color |
transparent |
Background of the segment button |
$segment-button-wp-text-color-activated |
$toolbar-wp-text-color |
Text color of the activated segment button |
$segment-button-wp-padding |
0 6px |
Padding of the segment button |
$segment-button-wp-height |
4rem |
Height of the segment button |
$segment-button-wp-line-height |
4rem |
Line height of the segment button |
$segment-button-wp-font-size |
1.3rem |
Font size of the segment button |
$segment-button-wp-text-transform |
uppercase |
Text transform of the segment button |
$segment-button-wp-font-weight |
bold |
Font weight of the segment button |
$segment-button-wp-opacity |
.5 |
Opacity of the segment button |
$segment-button-wp-opacity-activated |
1 |
Opacity of the activated segment button |
$segment-button-wp-opacity-disabled |
.3 |
Opacity of the disabled segment button |
$segment-button-wp-icon-size |
2.6rem |
Size of an icon in the segment button |
$segment-button-wp-icon-line-height |
$segment-button-wp-line-height |
Line height of an icon in the segment button |
$segment-button-wp-buttons-justify-content |
flex-start |
Position of the buttons in the segment |