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

chore(): update demos and segments

Browse Source
This commit is contained in:
mhartington
2018-01-10 12:46:44 -05:00
parent 3aefce179e
commit c7920b886e
15 changed files with 102 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/core/src/components.d.ts vendored
View File

@ -2425,6 +2425,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonSegmentButtonAttributes extends HTMLAttributes { export interface IonSegmentButtonAttributes extends HTMLAttributes {
activated?: boolean;
checked?: boolean; checked?: boolean;
color?: string; color?: string;
disabled?: boolean; disabled?: boolean;

32
packages/core/src/components/segment-button/readme.md
View File

@ -31,15 +31,25 @@ The child buttons of the `ion-segment` component. Each `ion-segment-button` must
## Properties ## Properties
#### activated
boolean
#### checked #### checked
boolean boolean
If true, the segment button is selected. Defaults to `false`.
#### color #### color
string string
The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
#### disabled #### disabled
@ -50,23 +60,38 @@ boolean
any any
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
#### value #### value
string string
The value of the segment button.
## Attributes ## Attributes
#### activated
boolean
#### checked #### checked
boolean boolean
If true, the segment button is selected. Defaults to `false`.
#### color #### color
string string
The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
#### disabled #### disabled
@ -77,16 +102,23 @@ boolean
any any
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
#### value #### value
string string
The value of the segment button.
## Events ## Events
#### ionClick #### ionClick
Emitted when the segment button is clicked.
---------------------------------------------- ----------------------------------------------

16
packages/core/src/components/segment-button/segment-button.tsx
View File

@ -12,38 +12,36 @@ export class SegmentButton {
@Element() private el: HTMLElement; @Element() private el: HTMLElement;
/** /**
* @output {SegmentButtonEvent} Emitted when the segment button is clicked. * Emitted when the segment button is clicked.
*/ */
@Event() ionClick: EventEmitter<SegmentButtonEventDetail>; @Event() ionClick: EventEmitter<SegmentButtonEventDetail>;
@State() activated: boolean = false; @Prop({mutable: true}) activated: boolean = false;
/** /**
* @input {string} The color to use from your Sass `$colors` map. * The color to use for the text color.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;
/** /**
* @input {string} The mode determines which platform styles to use. * The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`. * Possible values are: `"ios"` or `"md"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/ */
@Prop() mode: 'ios' | 'md'; @Prop() mode: 'ios' | 'md';
/** /**
* @input {boolean} If true, the segment button is selected. Defaults to `false`. * If true, the segment button is selected. Defaults to `false`.
*/ */
@Prop({ mutable: true }) checked: boolean = false; @Prop({ mutable: true }) checked: boolean = false;
/* /*
* @input {boolean} If true, the user cannot interact with the segment button. Default false. * If true, the user cannot interact with the segment button. Default false.
*/ */
@Prop({ mutable: true }) disabled: boolean = false; @Prop({ mutable: true }) disabled: boolean = false;
/** /**
* @input {string} the value of the segment button. * The value of the segment button.
*/ */
@Prop({ mutable: true }) value: string; @Prop({ mutable: true }) value: string;

18
packages/core/src/components/segment/readme.md
View File

@ -58,6 +58,9 @@ Segments provide functionality similar to tabs, selecting one will unselect all
string string
The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
#### disabled #### disabled
@ -68,11 +71,16 @@ boolean
any any
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
#### value #### value
string string
the value of the segment.
## Attributes ## Attributes
@ -80,6 +88,9 @@ string
string string
The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
#### disabled #### disabled
@ -90,16 +101,23 @@ boolean
any any
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
#### value #### value
string string
the value of the segment.
## Events ## Events
#### ionChange #### ionChange
Emitted when the value property has changed.
---------------------------------------------- ----------------------------------------------

13
packages/core/src/components/segment/segment.tsx
View File

@ -18,31 +18,29 @@ export class Segment {
@Element() private el: HTMLElement; @Element() private el: HTMLElement;
/** /**
* @output {Event} Emitted when the value property has changed. * Emitted when the value property has changed.
*/ */
@Event() ionChange: EventEmitter<SegmentEventDetail>; @Event() ionChange: EventEmitter<SegmentEventDetail>;
/** /**
* @input {string} The color to use from your Sass `$colors` map. * The color to use for the text color.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;
/** /**
* @input {string} The mode determines which platform styles to use. * The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`. * Possible values are: `"ios"` or `"md"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/ */
@Prop() mode: 'ios' | 'md'; @Prop() mode: 'ios' | 'md';
/* /*
* @input {boolean} If true, the user cannot interact with the segment. Default false. * If true, the user cannot interact with the segment. Default false.
*/ */
@Prop({ mutable: true }) disabled: boolean = false; @Prop({ mutable: true }) disabled: boolean = false;
/** /**
* @input {string} the value of the segment. * the value of the segment.
*/ */
@Prop({ mutable: true }) value: string; @Prop({ mutable: true }) value: string;
@ -53,7 +51,6 @@ export class Segment {
componentDidLoad() { componentDidLoad() {
this.buttons = this.el.querySelectorAll('ion-segment-button'); this.buttons = this.el.querySelectorAll('ion-segment-button');
for (var i = 0; i < this.buttons.length; i++) { for (var i = 0; i < this.buttons.length; i++) {
const button = this.buttons[i]; const button = this.buttons[i];

6
packages/core/src/components/segment/test/basic/index.html
View File

@ -49,10 +49,10 @@
<ion-icon name="book"></ion-icon> <ion-icon name="book"></ion-icon>
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="Reading List"> <ion-segment-button value="Reading List">
<ion-icon ios="ios-glasses-outline" md="md-glasses"></ion-icon> <ion-icon name="glasses"></ion-icon>
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="Shared Links"> <ion-segment-button value="Shared Links">
<ion-icon ios="ios-at-outline" md="md-at"></ion-icon> <ion-icon name="at"></ion-icon>
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
@ -119,6 +119,8 @@
console.log('event.target: ', event.target.value); console.log('event.target: ', event.target.value);
}); });
} }
</script> </script>
</ion-content> </ion-content>
</ion-page> </ion-page>

5
packages/demos/conference-app/angular/src/pages/about/about.html
View File

@ -1,13 +1,12 @@
<ion-page> <ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar color="primary">
<ion-buttons> <ion-buttons slot="start">
<ion-button menuToggle> <ion-button menuToggle>
<ion-icon slot="icon-only" name="menu"></ion-icon> <ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-title>About</ion-title> <ion-title>About</ion-title>
<ion-buttons slot="end"> <ion-buttons slot="end">
<ion-button (click)="presentPopover($event)"> <ion-button (click)="presentPopover($event)">
<ion-icon slot="icon-only" name="more"></ion-icon> <ion-icon slot="icon-only" name="more"></ion-icon>

2
packages/demos/conference-app/angular/src/pages/account/account.html
View File

@ -1,6 +1,6 @@
<ion-page> <ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar color="primary">
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-button menuToggle> <ion-button menuToggle>
<ion-icon slot="icon-only" name="menu"></ion-icon> <ion-icon slot="icon-only" name="menu"></ion-icon>

2
packages/demos/conference-app/angular/src/pages/map/map.html
View File

@ -1,6 +1,6 @@
<ion-page> <ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar color="primary">
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-button menuToggle> <ion-button menuToggle>
<ion-icon slot="icon-only" name="menu"></ion-icon> <ion-icon slot="icon-only" name="menu"></ion-icon>

2
packages/demos/conference-app/angular/src/pages/schedule/schedule.html
View File

@ -7,7 +7,7 @@
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()" ngDefaultControl color="light"> <ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()" color="light">
<ion-segment-button value="all"> <ion-segment-button value="all">
All All
</ion-segment-button> </ion-segment-button>

2
packages/demos/conference-app/angular/src/pages/session-detail/session-detail.html
View File

@ -1,6 +1,6 @@
<ion-page> <ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar color="primary">
<ion-title *ngIf="session">{{session.name}}</ion-title> <ion-title *ngIf="session">{{session.name}}</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>

2
packages/demos/conference-app/angular/src/pages/speaker-detail/speaker-detail.html
View File

@ -1,6 +1,6 @@
<ion-page> <ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar color="primary">
<ion-title>{{speaker?.name}}</ion-title> <ion-title>{{speaker?.name}}</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>

14
packages/demos/conference-app/angular/src/pages/speaker-list/speaker-list.html
View File

@ -1,6 +1,6 @@
<ion-page> <ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar color="primary">
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-button menuToggle> <ion-button menuToggle>
<ion-icon slot="icon-only" name="menu"></ion-icon> <ion-icon slot="icon-only" name="menu"></ion-icon>
@ -15,7 +15,7 @@
<ion-grid fixed> <ion-grid fixed>
<ion-row align-items-stretch> <ion-row align-items-stretch>
<ion-col col-12 col-md-6 align-self-stretch align-self-center *ngFor="let speaker of speakers" approxItemHeight="457px"> <ion-col col-12 col-md-6 align-self-stretch align-self-center *ngFor="let speaker of speakers">
<ion-card class="speaker-card"> <ion-card class="speaker-card">
<ion-card-header> <ion-card-header>
@ -27,7 +27,7 @@
</ion-item> </ion-item>
</ion-card-header> </ion-card-header>
<ion-card-content class="outer-content"> <ion-card-content>
<ion-list> <ion-list>
<ion-item *ngFor="let session of speaker.sessions" (click)="goToSessionDetail(session)"> <ion-item *ngFor="let session of speaker.sessions" (click)="goToSessionDetail(session)">
<h3>{{session.name}}</h3> <h3>{{session.name}}</h3>
@ -39,21 +39,21 @@
</ion-list> </ion-list>
</ion-card-content> </ion-card-content>
<ion-row no-padding> <ion-row no-padding justify-content-center>
<ion-col col-12 col-lg-auto text-center text-lg-left> <ion-col col-12 col-lg-auto text-center text-lg-left>
<ion-button clear small color="primary"(click)="goToSpeakerTwitter(speaker)"> <ion-button fill="clear" size="small" color="primary" (click)="goToSpeakerTwitter(speaker)">
<ion-icon name="logo-twitter" slot="start"></ion-icon> <ion-icon name="logo-twitter" slot="start"></ion-icon>
Tweet Tweet
</ion-button> </ion-button>
</ion-col> </ion-col>
<ion-col col-12 col-lg-auto text-center> <ion-col col-12 col-lg-auto text-center>
<ion-button clear small color="primary" (click)="openSpeakerShare(speaker)"> <ion-button fill="clear" size="small" color="primary" (click)="openSpeakerShare(speaker)">
<ion-icon name='share-alt' slit="start"></ion-icon> <ion-icon name='share-alt' slit="start"></ion-icon>
Share Share
</ion-button> </ion-button>
</ion-col> </ion-col>
<ion-col col-12 col-lg-auto text-center text-lg-right> <ion-col col-12 col-lg-auto text-center text-lg-right>
<ion-button clear small color="primary" (click)="openContact(speaker)"> <ion-button fill="clear" size="small" color="primary" (click)="openContact(speaker)">
<ion-icon name='chatboxes' slot="start"></ion-icon> <ion-icon name='chatboxes' slot="start"></ion-icon>
Contact Contact
</ion-button> </ion-button>

18
packages/demos/conference-app/angular/src/pages/speaker-list/speaker-list.scss
View File

@ -1,6 +1,8 @@
page-speaker-list { page-speaker-list {
.scroll-content {
background: #EDEDED; .outer-content .content-md,
.outer-content .content-ios {
background-color: #ededed;
} }
.speaker-card { .speaker-card {
@ -13,12 +15,12 @@ page-speaker-list {
} }
} }
// Todo: remove when this issue https://github.com/ionic-team/ionic/issues/11212 is fixed // // Todo: remove when this issue https://github.com/ionic-team/ionic/issues/11212 is fixed
@media(min-width: 769px) { // @media(min-width: 769px) {
.speaker-card { // .speaker-card {
height: 370px; // height: 370px;
} // }
} // }
.speaker-card ion-card-header .item { .speaker-card ion-card-header .item {
padding: 4px 16px; padding: 4px 16px;

6
packages/demos/conference-app/angular/src/pages/speaker-list/speaker-list.ts
View File

@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { Component, ViewEncapsulation } from '@angular/core';
import { import {
ActionSheetController, ActionSheetController,
@ -15,7 +15,9 @@ import { SpeakerDetailPage } from '../speaker-detail/speaker-detail';
@Component({ @Component({
selector: 'page-speaker-list', selector: 'page-speaker-list',
templateUrl: 'speaker-list.html' templateUrl: 'speaker-list.html',
styleUrls: ['./speaker-list.scss'],
encapsulation: ViewEncapsulation.None
}) })
export class SpeakerListPage { export class SpeakerListPage {
speakers: any[] = []; speakers: any[] = [];