mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
105 lines
2.7 KiB
TypeScript
105 lines
2.7 KiB
TypeScript
import { Component, ElementRef, EventEmitter, HostListener, Input, Output, Renderer, ViewEncapsulation } from '@angular/core';
|
|
|
|
import { isPresent, isTrueProperty } from '../../util/util';
|
|
|
|
/**
|
|
* @name SegmentButton
|
|
* @description
|
|
* The child buttons of the `ion-segment` component. Each `ion-segment-button` must have a value.
|
|
*
|
|
* @usage
|
|
*
|
|
* ```html
|
|
* <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>
|
|
* ```
|
|
*
|
|
*
|
|
* @demo /docs/v2/demos/src/segment/
|
|
* @see {@link /docs/v2/components#segment Segment Component Docs}
|
|
* @see {@link /docs/v2/api/components/segment/Segment/ Segment API Docs}
|
|
*/
|
|
@Component({
|
|
selector: 'ion-segment-button',
|
|
template:
|
|
'<ng-content></ng-content>' +
|
|
'<div class="button-effect"></div>',
|
|
host: {
|
|
'tappable': '',
|
|
'class': 'segment-button',
|
|
'role': 'button',
|
|
'[class.segment-button-disabled]': '_disabled',
|
|
'[class.segment-activated]': 'isActive',
|
|
'[attr.aria-pressed]': 'isActive'
|
|
},
|
|
encapsulation: ViewEncapsulation.None,
|
|
})
|
|
export class SegmentButton {
|
|
|
|
isActive: boolean = false;
|
|
_disabled: boolean = false;
|
|
|
|
/**
|
|
* @input {string} the value of the segment button. Required.
|
|
*/
|
|
@Input() value: string;
|
|
|
|
/**
|
|
* @output {SegmentButton} Emitted when a segment button has been clicked.
|
|
*/
|
|
@Output() ionSelect: EventEmitter<SegmentButton> = new EventEmitter<SegmentButton>();
|
|
|
|
/**
|
|
* @input {boolean} If true, the user cannot interact with this element.
|
|
*/
|
|
@Input()
|
|
get disabled(): boolean {
|
|
return this._disabled;
|
|
}
|
|
|
|
set disabled(val: boolean) {
|
|
this._disabled = isTrueProperty(val);
|
|
}
|
|
|
|
constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
|
|
|
|
/**
|
|
* @hidden
|
|
* On click of a SegmentButton
|
|
*/
|
|
@HostListener('click')
|
|
onClick() {
|
|
console.debug('SegmentButton, select', this.value);
|
|
this.ionSelect.emit(this);
|
|
}
|
|
|
|
/**
|
|
* @hidden
|
|
*/
|
|
ngOnInit() {
|
|
if (!isPresent(this.value)) {
|
|
console.warn('<ion-segment-button> requires a "value" attribute');
|
|
}
|
|
}
|
|
|
|
}
|