mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-24 06:22:45 +08:00
test(header): update header markup
This commit is contained in:
Adam Bradley
@ -1,31 +1,37 @@
|
||||
<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-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 end>
|
||||
<button>
|
||||
<ion-icon name="search"></ion-icon>
|
||||
</button>
|
||||
</ion-buttons>
|
||||
<ion-segment [(ngModel)]="icons" 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-toolbar>
|
||||
<ion-buttons end>
|
||||
<button>
|
||||
<ion-icon name="search"></ion-icon>
|
||||
</button>
|
||||
</ion-buttons>
|
||||
<ion-segment [(ngModel)]="icons" 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-content padding>
|
||||
|
||||
<div>Are we friends or enemies? <b>{{ relationship }}</b></div>
|
||||
|
||||
<h4>Map mode: NgControl</h4>
|
||||
@ -91,46 +97,53 @@
|
||||
</ion-segment>
|
||||
|
||||
<button block dark (click)="toggleDisabled()">Toggle Disabled</button>
|
||||
|
||||
</ion-content>
|
||||
|
||||
<ion-toolbar position="bottom" primary>
|
||||
<ion-segment [(ngModel)]="appType" 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 position="bottom">
|
||||
<ion-segment [(ngModel)]="appType" 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-footer>
|
||||
|
||||
<ion-toolbar position="bottom">
|
||||
<ion-segment [(ngModel)]="appType" dark [disabled]="isDisabled">
|
||||
<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-toolbar primary>
|
||||
<ion-segment [(ngModel)]="appType" 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" 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" dark [disabled]="isDisabled">
|
||||
<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>
|
||||
|
||||
@ -20,14 +20,16 @@ class SegmentPage {
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<ion-navbar *navbar hideBackButton>
|
||||
<button menuToggle>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</button>
|
||||
<ion-title>
|
||||
Second Page
|
||||
</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-header>
|
||||
<ion-navbar hideBackButton>
|
||||
<button menuToggle>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</button>
|
||||
<ion-title>
|
||||
Second Page
|
||||
</ion-title>
|
||||
</ion-navbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<h1>Page 2</h1>
|
||||
|
||||
@ -1,21 +1,27 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-title>
|
||||
Segment under Navbar
|
||||
</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-toolbar>
|
||||
<ion-segment [(ngModel)]="signInType">
|
||||
<ion-segment-button value="new">
|
||||
New
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="existing" class="e2eSegmentExistingSegment">
|
||||
Existing
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="test">
|
||||
Test
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
<ion-header>
|
||||
|
||||
<ion-navbar>
|
||||
<ion-title>
|
||||
Segment under Navbar
|
||||
</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-segment [(ngModel)]="signInType">
|
||||
<ion-segment-button value="new">
|
||||
New
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="existing" class="e2eSegmentExistingSegment">
|
||||
Existing
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="test">
|
||||
Test
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ion-content padding>
|
||||
|
||||
|
||||
@ -1,21 +1,27 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-title>
|
||||
Segment Swipeable under Navbar
|
||||
</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-toolbar>
|
||||
<ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)">
|
||||
<ion-segment-button value="first">
|
||||
First
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="second">
|
||||
Second
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="third">
|
||||
Third
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
<ion-header>
|
||||
|
||||
<ion-navbar>
|
||||
<ion-title>
|
||||
Segment Swipeable under Navbar
|
||||
</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)">
|
||||
<ion-segment-button value="first">
|
||||
First
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="second">
|
||||
Second
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="third">
|
||||
Third
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ion-content padding>
|
||||
|
||||
@ -27,6 +33,7 @@
|
||||
|
||||
</ion-content>
|
||||
|
||||
|
||||
<style>
|
||||
ion-scroll {
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user