@ionic/core
Version:
Base components for Ionic
95 lines (94 loc) • 2.75 kB
JavaScript
import { createColorClasses } from '../../utils/theme';
export class Segment {
constructor() {
this.disabled = false;
this.scrollable = false;
}
valueChanged(value) {
this.updateButtons();
this.ionChange.emit({ value });
}
segmentClick(ev) {
const selectedButton = ev.target;
this.value = selectedButton.value;
}
componentWillLoad() {
this.emitStyle();
}
componentDidLoad() {
if (this.value == null) {
const checked = this.getButtons().find(b => b.checked);
if (checked) {
this.value = checked.value;
}
}
this.updateButtons();
}
emitStyle() {
this.ionStyle.emit({
'segment': true
});
}
updateButtons() {
const value = this.value;
for (const button of this.getButtons()) {
button.checked = (button.value === value);
}
}
getButtons() {
return Array.from(this.el.querySelectorAll('ion-segment-button'));
}
hostData() {
return {
class: Object.assign({}, createColorClasses(this.color), { 'segment-disabled': this.disabled, 'segment-scrollable': this.scrollable })
};
}
static get is() { return "ion-segment"; }
static get encapsulation() { return "scoped"; }
static get properties() { return {
"color": {
"type": String,
"attr": "color"
},
"disabled": {
"type": Boolean,
"attr": "disabled"
},
"el": {
"elementRef": true
},
"mode": {
"type": String,
"attr": "mode"
},
"scrollable": {
"type": Boolean,
"attr": "scrollable"
},
"value": {
"type": String,
"attr": "value",
"mutable": true,
"watchCallbacks": ["valueChanged"]
}
}; }
static get events() { return [{
"name": "ionChange",
"method": "ionChange",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "ionStyle",
"method": "ionStyle",
"bubbles": true,
"cancelable": true,
"composed": true
}]; }
static get listeners() { return [{
"name": "ionSelect",
"method": "segmentClick"
}]; }
static get style() { return "/**style-placeholder:ion-segment:**/"; }
static get styleMode() { return "/**style-id-placeholder:ion-segment:**/"; }
}