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

refactor(demo): move the demo app

Browse Source
This commit is contained in:
Ken Sodemann
2017-12-05 16:38:12 -06:00
parent 05a6f17379
commit 303cd75aaa
58 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

158
packages/demos/angular/src/app/group-inputs-page/group-inputs-page.component.html Normal file
View File

@ -0,0 +1,158 @@
<div class="title">
Ionic Core Group Inputs Demo
</div>
<ion-grid>
<ion-row>
<ion-col>
<h2>Radio Buttons</h2>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<h3>Angular</h3>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<input id="stdBeef" type="radio" value="beef" [(ngModel)]="radioValue" />
<label for="stdBeef">Carne Asada</label>
<input id="stdTongue" type="radio" value="tongue" [(ngModel)]="radioValue" />
<label for="stdTongue">Lengua</label>
<input id="stdBrains" type="radio" value="brains" [(ngModel)]="radioValue" />
<label for="stdBrains">Sesos</label>
<input id="stdTripe" type="radio" value="tripe" [(ngModel)]="radioValue" />
<label for="stdTripe">Tripa</label>
<input id="stdChicken" type="radio" value="chicken" [(ngModel)]="radioValue" />
<label for="stdChicken">Pollo</label>
</ion-col>
<ion-col>
Value:
<span id="radioOutput">{{radioValue}}</span>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<h3>Ionic With Radio Group</h3>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-list>
<ion-radio-group id="radio-group" [(ngModel)]="radioValue">
<ion-item>
<ion-label>Crarne Asada</ion-label>
<ion-radio id="ion-grp-beef" value="beef"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Lengua</ion-label>
<ion-radio id="ion-grp-tongue" value="tongue"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Sesos</ion-label>
<ion-radio id="ion-grp-brains" value="brains"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Tripa</ion-label>
<ion-radio id="ion-grp-tripe" value="tripe"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Pollo</ion-label>
<ion-radio id="ion-grp-chicken" value="chicken"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
</ion-col>
<ion-col></ion-col>
</ion-row>
<ion-row>
<ion-col>
<h3>Ionic Without Radio Group</h3>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-list>
<ion-item>
<ion-label>Crarne Asada</ion-label>
<ion-radio value="beef" id="ion-beef" name="tacos" [(ngModel)]="radioValue"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Lengua</ion-label>
<ion-radio value="tongue" id="ion-tongue" name="tacos" [(ngModel)]="radioValue"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Sesos</ion-label>
<ion-radio value="brains" id="ion-brains" name="tacos" [(ngModel)]="radioValue"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Tripa</ion-label>
<ion-radio value="tripe" id="ion-tripe" name="tacos" [(ngModel)]="radioValue"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Pollo</ion-label>
<ion-radio value="chicken" id="ion-chicken" name="tacos" [(ngModel)]="radioValue"></ion-radio>
</ion-item>
</ion-list>
</ion-col>
<ion-col></ion-col>
</ion-row>
<ion-row>
<ion-col>
<h2>Ionic Segment</h2>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-segment id="segment" color="primary" [(ngModel)]="radioValue">
<ion-segment-button value="beef" id="ion-seg-beef">Carne Asada</ion-segment-button>
<ion-segment-button value="tongue" id="ion-seg-tongue">Lengua</ion-segment-button>
<ion-segment-button value="brains" id="ion-seg-brains">Sesos</ion-segment-button>
<ion-segment-button value="tripe" id="ion-seg-tripe">Tripa</ion-segment-button>
<ion-segment-button value="chicken" id="ion-seg-chicken">Pollo</ion-segment-button>
</ion-segment>
</ion-col>
<ion-col></ion-col>
</ion-row>
<ion-row>
<ion-col>
<h2>Select</h2>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<label for="stdSelect">Standard Select (for tacos)</label>
<select id="stdSelect" name="stdSelect" [(ngModel)]="selectValue">
<option value="beef">Carne Asada</option>
<option value="tongue">Lengua</option>
<option value="brains">Sesos</option>
<option value="tripe">Tripa</option>
<option value="chicken">Pollo</option>
</select>
</ion-col>
<ion-col>
Value:
<span id="selectOutput">{{selectValue}}</span>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-label>Ionic Select (for tacos)</ion-label>
<ion-select id="ionSelect" name="ionSelect" [(ngModel)]="selectValue">
<ion-select-option value="beef">Carne Asada</ion-select-option>
<ion-select-option value="tongue">Lengua</ion-select-option>
<ion-select-option value="brains">Sesos</ion-select-option>
<ion-select-option value="tripe">Tripa</ion-select-option>
<ion-select-option value="chicken">Pollo</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col>
</ion-col>
</ion-row>
</ion-grid>
<a href='home'>Home</a>

0
packages/demos/angular/src/app/group-inputs-page/group-inputs-page.component.scss Normal file
View File

31
packages/demos/angular/src/app/group-inputs-page/group-inputs-page.component.spec.ts Normal file
View File

@ -0,0 +1,31 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { GroupInputsPageComponent } from './group-inputs-page.component';
import { SharedModule } from '../shared/shared.module';
describe('GroupInputsPageComponent', () => {
let component: GroupInputsPageComponent;
let fixture: ComponentFixture<GroupInputsPageComponent>;
beforeEach(
async(() => {
TestBed.configureTestingModule({
imports: [FormsModule, SharedModule],
declarations: [GroupInputsPageComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}).compileComponents();
})
);
beforeEach(() => {
fixture = TestBed.createComponent(GroupInputsPageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

16
packages/demos/angular/src/app/group-inputs-page/group-inputs-page.component.ts Normal file
View File

@ -0,0 +1,16 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-group-inputs-page',
templateUrl: './group-inputs-page.component.html',
styleUrls: ['./group-inputs-page.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class GroupInputsPageComponent implements OnInit {
radioValue = 'tripe';
selectValue = 'brains';
constructor() {}
ngOnInit() {}
}

19
packages/demos/angular/src/app/group-inputs-page/group-inputs-page.module.ts Normal file
View File

@ -0,0 +1,19 @@
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicAngularModule } from '@ionic/angular';
import { GroupInputsPageComponent } from './group-inputs-page.component';
import { GroupInputsPageRoutingModule } from './group-inputs-page-routing.module';
@NgModule({
imports: [
CommonModule,
FormsModule,
GroupInputsPageRoutingModule,
IonicAngularModule
],
declarations: [GroupInputsPageComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class GroupInputsPageModule {}