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

docs(demos): add dynamic segment button demo

Browse Source
This commit is contained in:
Brandy Carney
2018-02-06 11:32:00 -05:00
parent dac51936bc
commit 1e6e481958
1 changed files with 42 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
packages/demos/angular/src/app/segment/segment-page.component.ts
View File

@ -59,6 +59,22 @@ import { Component } from '@angular/core';
</ion-segment> </ion-segment>
<ion-button color="dark" (click)="toggleBDisabled()">Toggle Button Disabled</ion-button> <ion-button color="dark" (click)="toggleBDisabled()">Toggle Button Disabled</ion-button>
<ion-button color="dark" (click)="toggleSDisabled()">Toggle Segment Disabled</ion-button> <ion-button color="dark" (click)="toggleSDisabled()">Toggle Segment Disabled</ion-button>
<ion-item>
<ion-label>Period Days</ion-label>
<ion-select [(ngModel)]="valve.periodDays" (ionChange)="periodDaysChange(valve)">
<ion-select-option value="1">1 Day</ion-select-option>
<ion-select-option value="2">2 Days</ion-select-option>
<ion-select-option value="3">3 Days</ion-select-option>
<ion-select-option value="4">4 Days</ion-select-option>
<ion-select-option value="5">5 Days</ion-select-option>
<ion-select-option value="6">6 Days</ion-select-option>
<ion-select-option value="7">7 Days</ion-select-option>
</ion-select>
</ion-item>
<ion-segment [(ngModel)]="valve.selectDay">
<ion-segment-button *ngFor="let info of valve.daysInfo" value="{{info.day}}">{{info.day+1}}th day</ion-segment-button>
</ion-segment>
</ion-content> </ion-content>
<ion-footer> <ion-footer>
@ -114,6 +130,32 @@ export class SegmentPageComponent {
isDisabledB: boolean = true; isDisabledB: boolean = true;
isDisabledS: boolean = false; isDisabledS: boolean = false;
valve = {
daysInfo: [],
selectDay: '0',
periodDays: 3
}
constructor() {
this.periodDaysChange(this.valve);
}
periodDaysChange(valve) {
valve.periodDays = parseInt(valve.periodDays);
if (valve.daysInfo.length < valve.periodDays) {
for (let i = valve.daysInfo.length; i < valve.periodDays; ++i) {
valve.daysInfo.push({day:i, intervals:[]});
}
} else if (valve.daysInfo.length > valve.periodDays) {
valve.daysInfo = valve.daysInfo.slice(0, valve.periodDays);
}
}
addDays(valve) {
valve.periodDays += 1;
this.periodDaysChange(valve);
}
toggleBDisabled() { toggleBDisabled() {
this.isDisabledB = !this.isDisabledB; this.isDisabledB = !this.isDisabledB;
} }