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

demos(angular): add test for badge in angular

Browse Source
This commit is contained in:
Brandy Carney
2018-01-08 14:09:51 -05:00
parent d45d8bab2e
commit 6b366d9610
5 changed files with 127 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

@ -8,6 +8,7 @@ const routes: Routes = [
{ path: 'home', loadChildren: 'app/home-page/home-page.module#HomePageModule' },
{ path: 'alert', loadChildren: 'app/alert/alert.module#AlertModule' },
{ path: 'actionSheet', loadChildren: 'app/action-sheet/action-sheet.module#ActionSheetModule' },
{ path: 'badge', loadChildren: 'app/badge/badge.module#BadgeModule' },
{ path: 'toast', loadChildren: 'app/toast/toast.module#ToastModule' },
{ path: 'loading', loadChildren: 'app/loading/loading.module#LoadingModule' },
{ path: 'nav', loadChildren: 'app/nav/nav.module#NavModule' },

94
packages/demos/angular/src/app/badge/badge-page.component.ts Normal file
View File

@ -0,0 +1,94 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-badge-page',
template: `
<ion-app>
<ion-page class="show-page">
<ion-header>
<ion-toolbar>
<ion-title>Badges</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>Badges Right</ion-list-header>
<ion-item>
<ion-badge slot="end" color="primary">99</ion-badge>
<ion-label>Default Badge</ion-label>
</ion-item>
<ion-item>
<ion-badge slot="end" color="primary">99</ion-badge>
<ion-label>Primary Badge</ion-label>
</ion-item>
<ion-item>
<ion-badge slot="end" color="secondary">99</ion-badge>
<ion-label>Secondary Badge</ion-label>
</ion-item>
<ion-item>
<ion-badge slot="end" color="danger">99</ion-badge>
<ion-label>Danger Badge</ion-label>
</ion-item>
<ion-item>
<ion-badge slot="end" color="light">99</ion-badge>
<ion-label>Light Badge</ion-label>
</ion-item>
<ion-item>
<ion-badge slot="end" color="dark">99</ion-badge>
<ion-label>Dark Badge</ion-label>
</ion-item>
<ion-item (click)="toggleColor()">
<ion-badge slot="end" [color]="dynamicColor">{{dynamicColor}}</ion-badge>
<ion-label>Dynamic Badge Color (toggle)</ion-label>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header>Badges Left</ion-list-header>
<ion-item>
<ion-badge slot="start" color="primary">99</ion-badge>
<ion-label>Default Badge</ion-label>
</ion-item>
<ion-item>
<ion-badge slot="start" color="primary">99</ion-badge>
<ion-label>Primary Badge</ion-label>
</ion-item>
<ion-item>
<ion-badge slot="start" color="secondary">99</ion-badge>
<ion-label>Secondary Badge</ion-label>
</ion-item>
<ion-item>
<ion-badge slot="start" color="danger">99</ion-badge>
<ion-label>Danger Badge</ion-label>
</ion-item>
<ion-item>
<ion-badge slot="start" color="light">99</ion-badge>
<ion-label>Light Badge</ion-label>
</ion-item>
<ion-item>
<ion-badge slot="start" color="dark">99</ion-badge>
<ion-label>Dark Badge</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-page>
</ion-app>
`
})
export class BadgePageComponent {
dynamicColor = 'primary';
constructor() {
}
toggleColor() {
if (this.dynamicColor === 'primary') {
this.dynamicColor = 'secondary';
} else if (this.dynamicColor === 'secondary') {
this.dynamicColor = 'danger';
} else {
this.dynamicColor = 'primary';
}
}
}

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

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

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

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

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

@ -12,6 +12,9 @@
<li>
<a href='alert'>Alert Page</a>
</li>
<li>
<a href='badge'>Badge Page</a>
</li>
<li>
<a href='actionSheet'>Action Sheet Page</a>
</li>