javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-24 23:01:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(segment): get working with dynamic buttons

Browse Source 
combines like code and matches the stencil guide
This commit is contained in:
Brandy Carney
2018-02-02 15:19:29 -05:00
parent 7faa04ed31
commit 242960dc29
2 changed files with 40 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
packages/core/src/components/segment/segment.tsx
View File

@ -12,16 +12,8 @@ import { Component, Element, Event, EventEmitter, Listen, Prop, Watch } from '@s
} }
}) })
export class Segment { export class Segment {
// TODO typing
buttons: any;
@Element() private el: HTMLElement; @Element() private el: HTMLElement;
/**
* Emitted when the value property has changed.
*/
@Event() ionChange: EventEmitter<SegmentEventDetail>;
/** /**
* The color to use for the text color. * The color to use for the text color.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
@ -47,22 +39,17 @@ export class Segment {
@Watch('value') @Watch('value')
protected valueChanged(val: string) { protected valueChanged(val: string) {
this.selectButton(val); this.selectButton(val);
this.ionChange.emit();
} }
/**
* Emitted when the value property has changed.
*/
@Event() ionChange: EventEmitter;
componentDidLoad() { componentDidLoad() {
this.buttons = this.el.querySelectorAll('ion-segment-button'); this.selectButton(this.value);
for (let i = 0; i < this.buttons.length; i++) {
const button = this.buttons[i];
button.activated = (button.value === this.value);
// If there is no value set on the segment and a button
// is checked we should activate it
if (!this.value && button.checked) {
button.activated = button.checked;
}
}
} }
@Listen('ionClick') @Listen('ionClick')
@ -70,20 +57,22 @@ export class Segment {
const selectedButton = ev.target as HTMLIonSegmentButtonElement; const selectedButton = ev.target as HTMLIonSegmentButtonElement;
this.value = selectedButton.value; this.value = selectedButton.value;
this.selectButton(this.value);
// TODO should this move to valueChanged
this.ionChange.emit();
} }
selectButton(val: string) { selectButton(val: string) {
for (let i = 0; i < this.buttons.length; i++) { const buttons = this.el.querySelectorAll('ion-segment-button');
const button = this.buttons[i];
button.activated = (button.value === val);
}
// returning true tells the renderer to queue an update for (let i = 0; i < buttons.length; i++) {
return true; const button = buttons[i];
button.activated = (button.value === val);
// If there is no value set on the segment and a button
// is checked we should activate it
if (!val && button.checked) {
button.activated = button.checked;
}
}
} }
hostData() { hostData() {
@ -98,10 +87,3 @@ export class Segment {
return <slot></slot>; return <slot></slot>;
} }
} }
export interface SegmentEvent extends CustomEvent {
detail: SegmentEventDetail;
}
export interface SegmentEventDetail {
}

20
packages/core/src/components/segment/test/basic/index.html
View File

@ -79,6 +79,9 @@
Inactive Inactive
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
<!-- Dynamic Buttons -->
<ion-segment id="dynamicButtons" color="dark"></ion-segment>
</div> </div>
<div padding-horizontal> <div padding-horizontal>
@ -120,6 +123,23 @@
}); });
} }
var dynamicButtons = document.getElementById('dynamicButtons');
updateSegmentButtons(2);
setTimeout(function() {
updateSegmentButtons(4);
}, 4000);
function updateSegmentButtons(length) {
dynamicButtons.innerHTML = '';
for (var i = 0; i < length; i++) {
dynamicButtons.innerHTML += `
<ion-segment-button value="segment-${i}">
Btn ${i}
</ion-segment-button>`;
}
}
</script> </script>
</ion-content> </ion-content>