javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 18:54:11 +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 {
export interface IonSegmentButtonAttributes extends HTMLAttributes {
activated?: boolean;
checked?: boolean;
color?: string;
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
#### activated
boolean
#### checked
boolean
If true, the segment button is selected. Defaults to `false`.
#### color
string
The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
#### disabled
@ -50,23 +60,38 @@ boolean
any
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
#### value
string
The value of the segment button.
## Attributes
#### activated
boolean
#### checked
boolean
If true, the segment button is selected. Defaults to `false`.
#### color
string
The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
#### disabled
@ -77,16 +102,23 @@ boolean
any
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
#### value
string
The value of the segment button.
## Events
#### 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;
/**
* @output {SegmentButtonEvent} Emitted when the segment button is clicked.
* Emitted when the segment button is clicked.
*/
@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"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@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"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@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;
/*
* @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;
/**
* @input {string} the value of the segment button.
* The value of the segment button.
*/
@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
The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
#### disabled
@ -68,11 +71,16 @@ boolean
any
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
#### value
string
the value of the segment.
## Attributes
@ -80,6 +88,9 @@ string
string
The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
#### disabled
@ -90,16 +101,23 @@ boolean
any
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
#### value
string
the value of the segment.
## Events
#### 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;
/**
* @output {Event} Emitted when the value property has changed.
* Emitted when the value property has changed.
*/
@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"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@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"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@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;
/**
* @input {string} the value of the segment.
* the value of the segment.
*/
@Prop({ mutable: true }) value: string;
@ -53,7 +51,6 @@ export class Segment {
componentDidLoad() {
this.buttons = this.el.querySelectorAll('ion-segment-button');
for (var i = 0; i < this.buttons.length; 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-segment-button>
<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 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>
@ -119,6 +119,8 @@
console.log('event.target: ', event.target.value);
});
}
</script>
</ion-content>
</ion-page>

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

@ -1,13 +1,12 @@
<ion-page>
<ion-header>
<ion-toolbar>
<ion-buttons>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-button menuToggle>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>About</ion-title>
<ion-buttons slot="end">
<ion-button (click)="presentPopover($event)">
<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-header>
<ion-toolbar>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-button menuToggle>
<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-header>
<ion-toolbar>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-button menuToggle>
<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-buttons>
<ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()" ngDefaultControl color="light">
<ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()" color="light">
<ion-segment-button value="all">
All
</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-header>
<ion-toolbar>
<ion-toolbar color="primary">
<ion-title *ngIf="session">{{session.name}}</ion-title>
</ion-toolbar>
</ion-header>

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

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

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

@ -1,6 +1,6 @@
<ion-page>
<ion-header>
<ion-toolbar>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-button menuToggle>
<ion-icon slot="icon-only" name="menu"></ion-icon>
@ -15,7 +15,7 @@
<ion-grid fixed>
<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-header>
@ -27,7 +27,7 @@
</ion-item>
</ion-card-header>
<ion-card-content class="outer-content">
<ion-card-content>
<ion-list>
<ion-item *ngFor="let session of speaker.sessions" (click)="goToSessionDetail(session)">
<h3>{{session.name}}</h3>
@ -39,21 +39,21 @@
</ion-list>
</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-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>
Tweet
</ion-button>
</ion-col>
<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>
Share
</ion-button>
</ion-col>
<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>
Contact
</ion-button>

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

@ -1,6 +1,8 @@
page-speaker-list {
.scroll-content {
background: #EDEDED;
.outer-content .content-md,
.outer-content .content-ios {
background-color: #ededed;
}
.speaker-card {
@ -13,12 +15,12 @@ page-speaker-list {
}
}
// Todo: remove when this issue https://github.com/ionic-team/ionic/issues/11212 is fixed
@media(min-width: 769px) {
.speaker-card {
height: 370px;
}
}
// // Todo: remove when this issue https://github.com/ionic-team/ionic/issues/11212 is fixed
// @media(min-width: 769px) {
// .speaker-card {
// height: 370px;
// }
// }
.speaker-card ion-card-header .item {
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 {
ActionSheetController,
@ -15,7 +15,9 @@ import { SpeakerDetailPage } from '../speaker-detail/speaker-detail';
@Component({
selector: 'page-speaker-list',
templateUrl: 'speaker-list.html'
templateUrl: 'speaker-list.html',
styleUrls: ['./speaker-list.scss'],
encapsulation: ViewEncapsulation.None
})
export class SpeakerListPage {
speakers: any[] = [];