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

docs(demos): add demo for segment

Browse Source
This commit is contained in:
Brandy Carney
2018-02-02 15:34:57 -05:00
parent cb99156c2b
commit 82cdfbd336
5 changed files with 165 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/demos/angular/src/app/app-routing.module.ts
View File

@ -16,6 +16,7 @@ const routes: Routes = [
{ path: 'no-routing-nav', loadChildren: 'app/no-routing-nav/no-routing-nav.module#NoRoutingNavModule' },
{ path: 'modal', loadChildren: 'app/modal/modal.module#ModalModule' },
{ path: 'popover', loadChildren: 'app/popover/popover.module#PopoverModule' },
{ path: 'segment', loadChildren: 'app/segment/segment.module#SegmentModule' },
{ path: 'virtual-scroll', loadChildren: 'app/virtual-scroll/virtual-scroll.module#VirtualScrollModule' },
];

3
packages/demos/angular/src/app/home-page/home-page.component.html
View File

@ -37,6 +37,9 @@
<li>
<a href='popover'>Popover Page</a>
</li>
<li>
<a href='segment'>Segment Page</a>
</li>
<li>
<a href='virtual-scroll'>Virtual Scroll Page</a>
</li>

132
packages/demos/angular/src/app/segment/segment-page.component.ts Normal file
View File

@ -0,0 +1,132 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-segment-page',
template: `
<ion-app>
<ion-page class="show-page">
<ion-header>
<ion-toolbar>
<ion-segment id="segment" [(ngModel)]="relationship" (ionChange)="onSegmentChanged($event)">
<ion-segment-button value="friends" (ionSelect)="onSegmentSelected($event)" class="e2eSegmentFriends">
Friends
</ion-segment-button>
<ion-segment-button value="enemies" (ionSelect)="onSegmentSelected($event)">
Enemies
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-end">
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<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>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h4>Model style: NgModel</h4>
<ion-segment [(ngModel)]="modelStyle" color="dark" [disabled]="isDisabledS">
<ion-segment-button value="A">
Model A
</ion-segment-button>
<ion-segment-button value="B">
Model B
</ion-segment-button>
<ion-segment-button value="C" class="e2eSegmentModelC">
Model C
</ion-segment-button>
<ion-segment-button value="D" [disabled]="isDisabledB">
Model D
</ion-segment-button>
</ion-segment>
<p>Model Style: <b>Model {{ modelStyle }}</b></p>
<ion-segment [(ngModel)]="icons">
<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>
<ion-button color="dark" (click)="toggleBDisabled()">Toggle Button Disabled</ion-button>
<ion-button color="dark" (click)="toggleSDisabled()">Toggle Segment Disabled</ion-button>
</ion-content>
<ion-footer>
<ion-toolbar color="primary">
<ion-segment [(ngModel)]="appType" color="light">
<ion-segment-button value="paid">
Primary
</ion-segment-button>
<ion-segment-button value="free">
Toolbar
</ion-segment-button>
<ion-segment-button value="top" class="e2eSegmentTopGrossing">
Light Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-segment [(ngModel)]="appType" color="danger">
<ion-segment-button value="paid">
Default
</ion-segment-button>
<ion-segment-button value="free">
Toolbar
</ion-segment-button>
<ion-segment-button value="top">
Danger Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-segment [(ngModel)]="appType" color="dark" [disabled]="isDisabledS">
<ion-segment-button value="paid">
Default
</ion-segment-button>
<ion-segment-button value="free">
Toolbar
</ion-segment-button>
<ion-segment-button value="top">
Dark Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-footer>
</ion-page>
</ion-app>
`
})
export class SegmentPageComponent {
relationship: string = 'friends';
modelStyle: string = 'B';
appType: string = 'free';
icons: string = 'camera';
isDisabledB: boolean = true;
isDisabledS: boolean = false;
toggleBDisabled() {
this.isDisabledB = !this.isDisabledB;
}
toggleSDisabled() {
this.isDisabledS = !this.isDisabledS;
}
onSegmentChanged(segmentButton: any) {
console.log('Segment changed to', segmentButton.currentTarget.value);
}
onSegmentSelected(segmentButton: any) {
console.log('Segment selected', segmentButton.currentTarget.value);
}
}

14
packages/demos/angular/src/app/segment/segment-routing.module.ts Normal file
View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SegmentPageComponent } from './segment-page.component';
const routes: Routes = [
{ path: '', component: SegmentPageComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SegmentRoutingModule { }

15
packages/demos/angular/src/app/segment/segment.module.ts Normal file
View File

@ -0,0 +1,15 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SegmentPageComponent } from './segment-page.component';
import { SegmentRoutingModule } from './segment-routing.module';
@NgModule({
imports: [
CommonModule,
SegmentRoutingModule
],
declarations: [SegmentPageComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class SegmentModule { }