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

refactor(overlays): [title] -> [header]

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-04-02 20:22:15 +02:00
parent acd411dd6c
commit a5e5403068
40 changed files with 290 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
angular/src/directives/navigation/ion-router-outlet.ts
View File

@ -122,7 +122,6 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
this.activated = enteringView.ref;
} else {
const snapshot = (activatedRoute as any)._futureSnapshot;
const component = <any>snapshot.routeConfig !.component;
resolver = resolver || this.resolver;

17
angular/src/directives/navigation/tab-delegate.ts
View File

@ -1,4 +1,4 @@
import { ComponentFactoryResolver, Directive, ElementRef, Injector } from '@angular/core';
import { ComponentFactoryResolver, Directive, ElementRef, HostListener, Injector } from '@angular/core';
import { AngularDelegate } from '../../providers/angular-delegate';
@ -8,12 +8,23 @@ import { AngularDelegate } from '../../providers/angular-delegate';
export class TabDelegate {
constructor(
ref: ElementRef,
private elementRef: ElementRef,
cfr: ComponentFactoryResolver,
injector: Injector,
angularDelegate: AngularDelegate,
) {
ref.nativeElement.delegate = angularDelegate.create(cfr, injector);
elementRef.nativeElement.delegate = angularDelegate.create(cfr, injector);
}
@HostListener('ionNavDidChange')
async onNavChanged() {
const tab = this.elementRef.nativeElement as HTMLIonTabElement;
await tab.componentOnReady();
const tabs = tab.closest('ion-tabs');
if (tabs) {
await tabs.componentOnReady();
await tabs.select(tab);
}
}
}

13
angular/src/directives/navigation/tabs-delegate.ts
View File

@ -1,4 +1,4 @@
import { Directive, HostListener, Optional } from '@angular/core';
import { Directive, ElementRef, HostListener, Optional } from '@angular/core';
import { Router } from '@angular/router';
@Directive({
@ -8,15 +8,18 @@ export class TabsDelegate {
constructor(
@Optional() private router: Router,
) {}
elementRef: ElementRef
) {
if (router) {
elementRef.nativeElement.useRouter = true;
}
}
@HostListener('ionTabbarClick', ['$event'])
ionTabbarClick(ev: UIEvent) {
onTabbarClick(ev: UIEvent) {
const tabElm: HTMLIonTabElement = ev.detail as any;
if (this.router && tabElm && tabElm.href) {
this.router.navigateByUrl(tabElm.href);
}
}
}

21
angular/src/directives/proxies.ts
View File

@ -15,7 +15,7 @@ export function inputs(instance: any, el: ElementRef, props: string[]) {
});
}
const accept = 'accept', activated = 'activated', active = 'active', allowEmptySelection = 'allowEmptySelection', animated = 'animated', autoHide = 'autoHide', autocapitalize = 'autocapitalize', autocomplete = 'autocomplete', autocorrect = 'autocorrect', autofocus = 'autofocus', btnId = 'btnId', button = 'button', buttonType = 'buttonType', cancelButtonText = 'cancelButtonText', cancelText = 'cancelText', checked = 'checked', clearInput = 'clearInput', clearOnEdit = 'clearOnEdit', closeDuration = 'closeDuration', color = 'color', cols = 'cols', component = 'component', componentProps = 'componentProps', contentId = 'contentId', dayNames = 'dayNames', dayShortNames = 'dayShortNames', dayValues = 'dayValues', debounce = 'debounce', defaultHref = 'defaultHref', delegate = 'delegate', detail = 'detail', disabled = 'disabled', displayFormat = 'displayFormat', doneText = 'doneText', dualKnobs = 'dualKnobs', duration = 'duration', edge = 'edge', expand = 'expand', expandable = 'expandable', fill = 'fill', fixed = 'fixed', floating = 'floating', forceOverscroll = 'forceOverscroll', fullscreen = 'fullscreen', goBack = 'goBack', horizontal = 'horizontal', hourValues = 'hourValues', href = 'href', icon = 'icon', inputmode = 'inputmode', interfaceOptions = 'interfaceOptions', ionBlur = 'ionBlur', ionCancel = 'ionCancel', ionChange = 'ionChange', ionClear = 'ionClear', ionClick = 'ionClick', ionClose = 'ionClose', ionDrag = 'ionDrag', ionFocus = 'ionFocus', ionInfinite = 'ionInfinite', ionInput = 'ionInput', ionInputDidLoad = 'ionInputDidLoad', ionInputDidUnload = 'ionInputDidUnload', ionMenuChange = 'ionMenuChange', ionNavChanged = 'ionNavChanged', ionOpen = 'ionOpen', ionPull = 'ionPull', ionRadioDidLoad = 'ionRadioDidLoad', ionRadioDidUnload = 'ionRadioDidUnload', ionRefresh = 'ionRefresh', ionScroll = 'ionScroll', ionScrollEnd = 'ionScrollEnd', ionScrollStart = 'ionScrollStart', ionSelect = 'ionSelect', ionSelectOptionDidLoad = 'ionSelectOptionDidLoad', ionSelectOptionDidUnload = 'ionSelectOptionDidUnload', ionSlideDidChange = 'ionSlideDidChange', ionSlideDrag = 'ionSlideDrag', ionSlideNextEnd = 'ionSlideNextEnd', ionSlideNextStart = 'ionSlideNextStart', ionSlidePrevEnd = 'ionSlidePrevEnd', ionSlidePrevStart = 'ionSlidePrevStart', ionSlideReachEnd = 'ionSlideReachEnd', ionSlideReachStart = 'ionSlideReachStart', ionSlideTouchEnd = 'ionSlideTouchEnd', ionSlideTouchStart = 'ionSlideTouchStart', ionSlideTransitionEnd = 'ionSlideTransitionEnd', ionSlideTransitionStart = 'ionSlideTransitionStart', ionSlideWillChange = 'ionSlideWillChange', ionSplitPaneVisible = 'ionSplitPaneVisible', ionStart = 'ionStart', ionStyle = 'ionStyle', ionSwipe = 'ionSwipe', loadingSpinner = 'loadingSpinner', loadingText = 'loadingText', max = 'max', maxEdgeStart = 'maxEdgeStart', maxlength = 'maxlength', mediaQuery = 'mediaQuery', menu = 'menu', menuId = 'menuId', message = 'message', min = 'min', minlength = 'minlength', minuteValues = 'minuteValues', mode = 'mode', monthNames = 'monthNames', monthShortNames = 'monthShortNames', monthValues = 'monthValues', multiple = 'multiple', name = 'name', okText = 'okText', options = 'options', or = 'or', orientation = 'orientation', pager = 'pager', pattern = 'pattern', paused = 'paused', persistent = 'persistent', pickerFormat = 'pickerFormat', pickerOptions = 'pickerOptions', pin = 'pin', placeholder = 'placeholder', platform = 'platform', position = 'position', pullMax = 'pullMax', pullMin = 'pullMin', pullingIcon = 'pullingIcon', pullingText = 'pullingText', readonly = 'readonly', refreshingSpinner = 'refreshingSpinner', refreshingText = 'refreshingText', required = 'required', results = 'results', root = 'root', rootParams = 'rootParams', round = 'round', rows = 'rows', scrollEnabled = 'scrollEnabled', scrollEvents = 'scrollEvents', scrollable = 'scrollable', selected = 'selected', selectedText = 'selectedText', show = 'show', showCancelButton = 'showCancelButton', side = 'side', size = 'size', snapbackDuration = 'snapbackDuration', snaps = 'snaps', spellcheck = 'spellcheck', stacked = 'stacked', step = 'step', strong = 'strong', subTitle = 'subTitle', swipeBackEnabled = 'swipeBackEnabled', swipeEnabled = 'swipeEnabled', tabBadge = 'tabBadge', tabBadgeStyle = 'tabBadgeStyle', tabIcon = 'tabIcon', tabTitle = 'tabTitle', tabbarHidden = 'tabbarHidden', tabbarHighlight = 'tabbarHighlight', tabbarLayout = 'tabbarLayout', tabbarPlacement = 'tabbarPlacement', tabsHideOnSubPages = 'tabsHideOnSubPages', text = 'text', threshold = 'threshold', title = 'title', toggleActive = 'toggleActive', translucent = 'translucent', type = 'type', url = 'url', useTapClick = 'useTapClick', value = 'value', vertical = 'vertical', when = 'when', width = 'width', wrap = 'wrap', yearValues = 'yearValues';
const accept = 'accept', activated = 'activated', active = 'active', allowEmptySelection = 'allowEmptySelection', animated = 'animated', autoHide = 'autoHide', autocapitalize = 'autocapitalize', autocomplete = 'autocomplete', autocorrect = 'autocorrect', autofocus = 'autofocus', btnId = 'btnId', button = 'button', buttonType = 'buttonType', cancelButtonText = 'cancelButtonText', cancelText = 'cancelText', checked = 'checked', clearInput = 'clearInput', clearOnEdit = 'clearOnEdit', closeDuration = 'closeDuration', color = 'color', cols = 'cols', component = 'component', componentProps = 'componentProps', contentId = 'contentId', dayNames = 'dayNames', dayShortNames = 'dayShortNames', dayValues = 'dayValues', debounce = 'debounce', defaultHref = 'defaultHref', delegate = 'delegate', detail = 'detail', disabled = 'disabled', displayFormat = 'displayFormat', doneText = 'doneText', dualKnobs = 'dualKnobs', duration = 'duration', edge = 'edge', expand = 'expand', expandable = 'expandable', fill = 'fill', fixed = 'fixed', floating = 'floating', forceOverscroll = 'forceOverscroll', fullscreen = 'fullscreen', goBack = 'goBack', header = 'header', horizontal = 'horizontal', hourValues = 'hourValues', href = 'href', icon = 'icon', inputmode = 'inputmode', interfaceOptions = 'interfaceOptions', ionBlur = 'ionBlur', ionCancel = 'ionCancel', ionChange = 'ionChange', ionClear = 'ionClear', ionClick = 'ionClick', ionClose = 'ionClose', ionDrag = 'ionDrag', ionFocus = 'ionFocus', ionInfinite = 'ionInfinite', ionInput = 'ionInput', ionInputDidLoad = 'ionInputDidLoad', ionInputDidUnload = 'ionInputDidUnload', ionMenuChange = 'ionMenuChange', ionNavDidChange = 'ionNavDidChange', ionNavWillChange = 'ionNavWillChange', ionOpen = 'ionOpen', ionPull = 'ionPull', ionRadioDidLoad = 'ionRadioDidLoad', ionRadioDidUnload = 'ionRadioDidUnload', ionRefresh = 'ionRefresh', ionScroll = 'ionScroll', ionScrollEnd = 'ionScrollEnd', ionScrollStart = 'ionScrollStart', ionSelect = 'ionSelect', ionSelectOptionDidLoad = 'ionSelectOptionDidLoad', ionSelectOptionDidUnload = 'ionSelectOptionDidUnload', ionSlideDidChange = 'ionSlideDidChange', ionSlideDrag = 'ionSlideDrag', ionSlideNextEnd = 'ionSlideNextEnd', ionSlideNextStart = 'ionSlideNextStart', ionSlidePrevEnd = 'ionSlidePrevEnd', ionSlidePrevStart = 'ionSlidePrevStart', ionSlideReachEnd = 'ionSlideReachEnd', ionSlideReachStart = 'ionSlideReachStart', ionSlideTouchEnd = 'ionSlideTouchEnd', ionSlideTouchStart = 'ionSlideTouchStart', ionSlideTransitionEnd = 'ionSlideTransitionEnd', ionSlideTransitionStart = 'ionSlideTransitionStart', ionSlideWillChange = 'ionSlideWillChange', ionSplitPaneVisible = 'ionSplitPaneVisible', ionStart = 'ionStart', ionStyle = 'ionStyle', ionSwipe = 'ionSwipe', loadingSpinner = 'loadingSpinner', loadingText = 'loadingText', max = 'max', maxEdgeStart = 'maxEdgeStart', maxlength = 'maxlength', mediaQuery = 'mediaQuery', menu = 'menu', menuId = 'menuId', message = 'message', min = 'min', minlength = 'minlength', minuteValues = 'minuteValues', mode = 'mode', monthNames = 'monthNames', monthShortNames = 'monthShortNames', monthValues = 'monthValues', multiple = 'multiple', name = 'name', okText = 'okText', options = 'options', or = 'or', orientation = 'orientation', pager = 'pager', pattern = 'pattern', paused = 'paused', persistent = 'persistent', pickerFormat = 'pickerFormat', pickerOptions = 'pickerOptions', pin = 'pin', placeholder = 'placeholder', platform = 'platform', position = 'position', pullMax = 'pullMax', pullMin = 'pullMin', pullingIcon = 'pullingIcon', pullingText = 'pullingText', readonly = 'readonly', refreshingSpinner = 'refreshingSpinner', refreshingText = 'refreshingText', required = 'required', results = 'results', root = 'root', rootParams = 'rootParams', round = 'round', rows = 'rows', scrollEnabled = 'scrollEnabled', scrollEvents = 'scrollEvents', scrollable = 'scrollable', selected = 'selected', selectedText = 'selectedText', show = 'show', showCancelButton = 'showCancelButton', side = 'side', size = 'size', snapbackDuration = 'snapbackDuration', snaps = 'snaps', spellcheck = 'spellcheck', stacked = 'stacked', step = 'step', strong = 'strong', subHeader = 'subHeader', swipeBackEnabled = 'swipeBackEnabled', swipeEnabled = 'swipeEnabled', tabBadge = 'tabBadge', tabBadgeStyle = 'tabBadgeStyle', tabIcon = 'tabIcon', tabTitle = 'tabTitle', tabbarHidden = 'tabbarHidden', tabbarHighlight = 'tabbarHighlight', tabbarLayout = 'tabbarLayout', tabbarPlacement = 'tabbarPlacement', tabsHideOnSubPages = 'tabsHideOnSubPages', text = 'text', threshold = 'threshold', toggleActive = 'toggleActive', translucent = 'translucent', type = 'type', url = 'url', useRouter = 'useRouter', useTapClick = 'useTapClick', value = 'value', vertical = 'vertical', when = 'when', width = 'width', wrap = 'wrap', yearValues = 'yearValues';
@NgDirective({ selector: 'ion-app' })
export class App {
@ -868,10 +868,11 @@ export class Nav {
@NgInput() delegate: any;
@NgInput() rootParams: any;
@NgInput() root: any;
@NgOutput() ionNavChanged: NgEventEmitter<any>;
@NgOutput() ionNavWillChange: NgEventEmitter<any>;
@NgOutput() ionNavDidChange: NgEventEmitter<any>;
constructor(el: ElementRef) {
inputs(this, el, [swipeBackEnabled, animated, delegate, rootParams, root]);
outputs(this, [ionNavChanged]);
outputs(this, [ionNavWillChange, ionNavDidChange]);
}
}
@ -1316,12 +1317,12 @@ export class SelectOption {
@NgDirective({ selector: 'ion-select-popover' })
export class SelectPopover {
@NgInput() title: string;
@NgInput() subTitle: string;
@NgInput() header: string;
@NgInput() subHeader: string;
@NgInput() message: string;
@NgInput() options: any;
constructor(el: ElementRef) {
inputs(this, el, [title, subTitle, message, options]);
inputs(this, el, [header, subHeader, message, options]);
}
}
@ -1511,11 +1512,13 @@ export class Tabs {
*/
@NgInput() translucent: boolean;
@NgInput() scrollable: boolean;
@NgInput() useRouter: boolean;
@NgOutput() ionChange: NgEventEmitter<any>;
@NgOutput() ionNavChanged: NgEventEmitter<any>;
@NgOutput() ionNavWillChange: NgEventEmitter<any>;
@NgOutput() ionNavDidChange: NgEventEmitter<any>;
constructor(el: ElementRef) {
inputs(this, el, [color, name, tabbarHidden, tabbarLayout, tabbarPlacement, tabbarHighlight, translucent, scrollable]);
outputs(this, [ionChange, ionNavChanged]);
inputs(this, el, [color, name, tabbarHidden, tabbarLayout, tabbarPlacement, tabbarHighlight, translucent, scrollable, useRouter]);
outputs(this, [ionChange, ionNavWillChange, ionNavDidChange]);
}
}

2
angular/test/nav/src/app/action-sheet/action-sheet-page.component.ts
View File

@ -25,7 +25,7 @@ export class ActionSheetPageComponent {
async clickMe() {
const actionSheet = await this.actionSheetController.create({
title: 'Albums',
header: 'Albums',
buttons: [{
text: 'Delete',
role: 'destructive',

2
angular/test/nav/src/app/alert/alert-page.component.ts
View File

@ -23,7 +23,7 @@ export class AlertPageComponent {
async clickMe() {
const alert = await this.alertController.create({
title: 'ohhhh snap',
header: 'ohhhh snap',
message: 'Ive been injected via Angular keeping the old api',
buttons: [
{

14
core/package-lock.json generated
View File

@ -14,9 +14,9 @@
}
},
"@stencil/core": {
"version": "0.7.10",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-0.7.10.tgz",
"integrity": "sha512-XriVhMUuFkZwXY0fbDjG7cHmEqbGzWbR7L0A79caSzsdVL1acwxKBThsu51IxSev8VG7yPPqA6PF0AJtvAVUfQ==",
"version": "0.7.12",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-0.7.12.tgz",
"integrity": "sha512-rNIMb49b4mN0xOR9r9CLVIzMkuHVVoLLGL5J+hhvn5d1wTnlXjpWG5yF5EDyMo+xWxg1nXwP8Q9tdDK9K9Chvw==",
"dev": true,
"requires": {
"chokidar": "2.0.1",
@ -203,9 +203,9 @@
"dev": true
},
"@types/node": {
"version": "9.6.0",
"resolved": "https://registry.npmjs.org/@types/node/-/node-9.6.0.tgz",
"integrity": "sha512-h3YZbOq2+ZoDFI1z8Zx0Ck/xRWkOESVaLdgLdd/c25mMQ1Y2CAkILu9ny5A15S5f32gGcQdaUIZ2jzYr8D7IFg==",
"version": "9.6.1",
"resolved": "https://registry.npmjs.org/@types/node/-/node-9.6.1.tgz",
"integrity": "sha512-xwlHq5DXQFRpe+u6hmmNkzYk/3oxxqDp71a/AJMupOQYmxyaBetqrVMqdNlSQfbg7XTJYD8vARjf3Op06OzdtQ==",
"dev": true
},
"abab": {
@ -8872,7 +8872,7 @@
"integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
"dev": true,
"requires": {
"@types/node": "9.6.0"
"@types/node": "9.6.1"
}
},
"pascalcase": {

2
core/package.json
View File

@ -24,7 +24,7 @@
"ionicons": "4.0.0-18"
},
"devDependencies": {
"@stencil/core": "0.7.10",
"@stencil/core": "0.7.12",
"@stencil/dev-server": "latest",
"@stencil/postcss": "0.0.2",
"@stencil/sass": "0.0.3",

58
core/src/components.d.ts vendored
View File

@ -183,6 +183,10 @@ declare global {
* Animation to use when the action sheet is presented.
*/
'enterAnimation': AnimationBuilder;
/**
* Title for the action sheet.
*/
'header': string;
'keyboardClose': boolean;
/**
* Animation to use when the action sheet is dismissed.
@ -204,11 +208,7 @@ declare global {
/**
* Subtitle for the action sheet.
*/
'subTitle': string;
/**
* Title for the action sheet.
*/
'title': string;
'subHeader': string;
/**
* If true, the action sheet will be translucent. Defaults to `false`.
*/
@ -251,6 +251,10 @@ declare global {
* Animation to use when the action sheet is presented.
*/
'enterAnimation'?: AnimationBuilder;
/**
* Title for the action sheet.
*/
'header'?: string;
'keyboardClose'?: boolean;
/**
* Animation to use when the action sheet is dismissed.
@ -284,11 +288,7 @@ declare global {
/**
* Subtitle for the action sheet.
*/
'subTitle'?: string;
/**
* Title for the action sheet.
*/
'title'?: string;
'subHeader'?: string;
/**
* If true, the action sheet will be translucent. Defaults to `false`.
*/
@ -353,6 +353,10 @@ declare global {
* Animation to use when the alert is presented.
*/
'enterAnimation': AnimationBuilder;
/**
* The main title in the heading of the alert.
*/
'header': string;
/**
* Array of input to show in the alert.
*/
@ -383,11 +387,7 @@ declare global {
/**
* The subtitle in the heading of the alert. Displayed under the title.
*/
'subTitle': string;
/**
* The main title in the heading of the alert.
*/
'title': string;
'subHeader': string;
/**
* If true, the alert will be translucent. Defaults to `false`.
*/
@ -430,6 +430,10 @@ declare global {
* Animation to use when the alert is presented.
*/
'enterAnimation'?: AnimationBuilder;
/**
* The main title in the heading of the alert.
*/
'header'?: string;
/**
* Array of input to show in the alert.
*/
@ -472,11 +476,7 @@ declare global {
/**
* The subtitle in the heading of the alert. Displayed under the title.
*/
'subTitle'?: string;
/**
* The main title in the heading of the alert.
*/
'title'?: string;
'subHeader'?: string;
/**
* If true, the alert will be translucent. Defaults to `false`.
*/
@ -3556,7 +3556,8 @@ declare global {
export interface IonNavAttributes extends HTMLAttributes {
'animated'?: boolean;
'delegate'?: FrameworkDelegate|undefined;
'onIonNavChanged'?: (event: CustomEvent<void>) => void;
'onIonNavDidChange'?: (event: CustomEvent<void>) => void;
'onIonNavWillChange'?: (event: CustomEvent<void>) => void;
'root'?: NavComponent|undefined;
'rootParams'?: ComponentProps|undefined;
'swipeBackEnabled'?: boolean;
@ -4735,6 +4736,8 @@ declare global {
'animated'?: boolean;
'animationBuilder'?: AnimationBuilder;
'delegate'?: FrameworkDelegate;
'onIonNavDidChange'?: (event: CustomEvent<void>) => void;
'onIonNavWillChange'?: (event: CustomEvent<void>) => void;
}
}
}
@ -5180,10 +5183,10 @@ declare global {
declare global {
interface HTMLIonSelectPopoverElement extends HTMLStencilElement {
'header': string;
'message': string;
'options': SelectPopoverOption[];
'subTitle': string;
'title': string;
'subHeader': string;
}
var HTMLIonSelectPopoverElement: {
prototype: HTMLIonSelectPopoverElement;
@ -5202,10 +5205,10 @@ declare global {
}
namespace JSXElements {
export interface IonSelectPopoverAttributes extends HTMLAttributes {
'header'?: string;
'message'?: string;
'options'?: SelectPopoverOption[];
'subTitle'?: string;
'title'?: string;
'subHeader'?: string;
}
}
}
@ -5957,6 +5960,7 @@ declare global {
* If true, the tabs will be translucent. Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
*/
'translucent': boolean;
'useRouter': boolean;
}
var HTMLIonTabsElement: {
prototype: HTMLIonTabsElement;
@ -5987,7 +5991,8 @@ declare global {
* Emitted when the tab changes.
*/
'onIonChange'?: (event: CustomEvent) => void;
'onIonNavChanged'?: (event: CustomEvent<void>) => void;
'onIonNavDidChange'?: (event: CustomEvent<void>) => void;
'onIonNavWillChange'?: (event: CustomEvent<void>) => void;
'scrollable'?: boolean;
/**
* If true, the tabbar
@ -6009,6 +6014,7 @@ declare global {
* If true, the tabs will be translucent. Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
*/
'translucent'?: boolean;
'useRouter'?: boolean;
}
}
}

2
core/src/components/action-sheet-controller/readme.md
View File

@ -8,7 +8,7 @@ async function presentBasic() {
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
title: "Albums",
header: "Albums",
buttons: [{
text: 'Delete',
role: 'destructive',

24
core/src/components/action-sheet/action-sheet.tsx
View File

@ -60,15 +60,15 @@ export class ActionSheet implements OverlayInterface {
*/
@Prop() enableBackdropDismiss = true;
/**
* Subtitle for the action sheet.
*/
@Prop() subTitle: string;
/**
* Title for the action sheet.
*/
@Prop() title: string;
@Prop() header: string;
/**
* Subtitle for the action sheet.
*/
@Prop() subHeader: string;
/**
* If true, the action sheet will be translucent. Defaults to `false`.
@ -231,11 +231,11 @@ export class ActionSheet implements OverlayInterface {
<div class='action-sheet-wrapper' role='dialog'>
<div class='action-sheet-container'>
<div class='action-sheet-group'>
{this.title
{this.header
? <div class='action-sheet-title'>
{this.title}
{this.subTitle
? <div class='action-sheet-sub-title'>{this.subTitle}</div>
{this.header}
{this.subHeader
? <div class='action-sheet-sub-title'>{this.subHeader}</div>
: null}
</div>
: null}
@ -287,8 +287,8 @@ function buttonClass(button: ActionSheetButton): CssClassMap {
}
export interface ActionSheetOptions {
title?: string;
subTitle?: string;
header?: string;
subHeader?: string;
cssClass?: string;
buttons?: (ActionSheetButton | string)[];
enableBackdropDismiss?: boolean;

32
core/src/components/action-sheet/readme.md
View File

@ -45,6 +45,13 @@ If true, the action sheet will be dismissed when the backdrop is clicked. Defaul
Animation to use when the action sheet is presented.
#### header
string
Title for the action sheet.
#### keyboardClose
boolean
@ -62,20 +69,13 @@ Animation to use when the action sheet is dismissed.
number
#### subTitle
#### subHeader
string
Subtitle for the action sheet.
#### title
string
Title for the action sheet.
#### translucent
boolean
@ -121,6 +121,13 @@ If true, the action sheet will be dismissed when the backdrop is clicked. Defaul
Animation to use when the action sheet is presented.
#### header
string
Title for the action sheet.
#### keyboard-close
boolean
@ -138,20 +145,13 @@ Animation to use when the action sheet is dismissed.
number
#### sub-title
#### sub-header
string
Subtitle for the action sheet.
#### title
string
Title for the action sheet.
#### translucent
boolean

6
core/src/components/action-sheet/test/basic/index.html
View File

@ -42,7 +42,7 @@
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
title: "Albums",
header: "Albums",
buttons: [{
text: 'Delete',
role: 'destructive',
@ -86,7 +86,7 @@
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
title: "Albums",
header: "Albums",
buttons: [{
text: 'Delete',
role: 'destructive',
@ -343,7 +343,7 @@
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
title: "Custom Css Class",
header: "Custom Css Class",
cssClass: "my-class my-custom-class",
buttons: [
{

6
core/src/components/action-sheet/test/preview/index.html
View File

@ -42,7 +42,7 @@
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
title: "Albums",
header: "Albums",
buttons: [{
text: 'Delete',
role: 'destructive',
@ -86,7 +86,7 @@
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
title: "Albums",
header: "Albums",
buttons: [{
text: 'Delete',
role: 'destructive',
@ -343,7 +343,7 @@
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
title: "Custom Css Class",
header: "Custom Css Class",
cssClass: "my-class my-custom-class",
buttons: [
{

6
core/src/components/action-sheet/test/standalone/index.html
View File

@ -40,7 +40,7 @@
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
title: "Albums",
header: "Albums",
buttons: [{
text: 'Delete',
role: 'destructive',
@ -84,7 +84,7 @@
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
title: "Albums",
header: "Albums",
buttons: [{
text: 'Delete',
role: 'destructive',
@ -339,7 +339,7 @@
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
title: "Custom Css Class",
header: "Custom Css Class",
cssClass: "my-class my-custom-class",
buttons: [
{

2
core/src/components/action-sheet/test/translucent/index.html
View File

@ -53,7 +53,7 @@
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
title: "Albums",
header: "Albums",
buttons: [{
text: 'Delete',
role: 'destructive',

2
core/src/components/action-sheet/usage/angular.md
View File

@ -13,7 +13,7 @@ export class ActionSheetExample {
presentActionSheet() {
const actionSheet = this.actionSheetController.create({
title: "Albums",
header: "Albums",
buttons: [{
text: 'Delete',
role: 'destructive',

2
core/src/components/action-sheet/usage/javascript.md
View File

@ -4,7 +4,7 @@ async function presentActionSheet() {
await actionSheetController.componentOnReady();
const actionSheet = await actionSheetController.create({
title: "Albums",
header: "Albums",
buttons: [{
text: 'Delete',
role: 'destructive',

4
core/src/components/alert-controller/readme.md
View File

@ -9,8 +9,8 @@ async function presentAlert() {
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
subTitle: 'Subtitle',
header: 'Alert',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: ['OK']
});

20
core/src/components/alert/alert.tsx
View File

@ -56,12 +56,12 @@ export class Alert implements OverlayInterface {
/**
* The main title in the heading of the alert.
*/
@Prop() title: string;
@Prop() header: string;
/**
* The subtitle in the heading of the alert. Displayed under the title.
*/
@Prop() subTitle: string;
@Prop() subHeader: string;
/**
* The main message to be displayed in the alert.
@ -358,10 +358,10 @@ export class Alert implements OverlayInterface {
const subHdrId = `alert-${this.overlayId}-sub-hdr`;
const msgId = `alert-${this.overlayId}-msg`;
if (this.title || !this.subTitle) {
if (this.header || !this.subHeader) {
this.hdrId = hdrId;
} else if (this.subTitle) {
} else if (this.subHeader) {
this.hdrId = subHdrId;
}
@ -413,11 +413,11 @@ export class Alert implements OverlayInterface {
<ion-backdrop tappable={this.enableBackdropDismiss}/>,
<div class='alert-wrapper'>
<div class='alert-head'>
{this.title
? <h2 id={hdrId} class='alert-title'>{this.title}</h2>
{this.header
? <h2 id={hdrId} class='alert-title'>{this.header}</h2>
: null}
{this.subTitle
? <h2 id={subHdrId} class='alert-sub-title'>{this.subTitle}</h2>
{this.subHeader
? <h2 id={subHdrId} class='alert-sub-title'>{this.subHeader}</h2>
: null}
</div>
@ -452,8 +452,8 @@ function buttonClass(button: AlertButton): CssClassMap {
}
export interface AlertOptions {
title?: string;
subTitle?: string;
header?: string;
subHeader?: string;
message?: string;
cssClass?: string | string[];
mode?: string;

32
core/src/components/alert/readme.md
View File

@ -54,6 +54,13 @@ If true, the alert will be dismissed when the backdrop is clicked. Defaults to `
Animation to use when the alert is presented.
#### header
string
The main title in the heading of the alert.
#### inputs
@ -90,20 +97,13 @@ string
number
#### subTitle
#### subHeader
string
The subtitle in the heading of the alert. Displayed under the title.
#### title
string
The main title in the heading of the alert.
#### translucent
boolean
@ -149,6 +149,13 @@ If true, the alert will be dismissed when the backdrop is clicked. Defaults to `
Animation to use when the alert is presented.
#### header
string
The main title in the heading of the alert.
#### inputs
@ -185,20 +192,13 @@ string
number
#### sub-title
#### sub-header
string
The subtitle in the heading of the alert. Displayed under the title.
#### title
string
The main title in the heading of the alert.
#### translucent
boolean

24
core/src/components/alert/test/basic/index.html
View File

@ -43,8 +43,8 @@
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
subTitle: 'Subtitle',
header: 'Alert',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: ['OK']
});
@ -55,7 +55,7 @@
const alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
header: 'Alert',
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
buttons: ['Cancel', 'OK']
});
@ -66,8 +66,8 @@
const alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
subTitle: 'Subtitle',
header: 'Alert',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: ['Cancel', 'Open Modal', 'Delete']
});
@ -78,7 +78,7 @@
const alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
header: 'Alert',
buttons: ['OK']
});
return await alert.present();
@ -88,7 +88,7 @@
const alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Confirm!',
header: 'Confirm!',
message: 'Message <strong>text</strong>!!!',
buttons: [
{
@ -113,7 +113,7 @@
const alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Prompt!',
header: 'Prompt!',
inputs: [
{
placeholder: 'Placeholder 1'
@ -176,7 +176,7 @@
const alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Radio',
header: 'Radio',
inputs: [
{
type: 'radio',
@ -235,7 +235,7 @@
const alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Checkbox',
header: 'Checkbox',
inputs: [
{
type: 'checkbox',
@ -297,8 +297,8 @@
const alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
subTitle: 'Subtitle',
header: 'Alert',
subHeader: 'Subtitle',
cssClass: 'my-class my-customClass ',
message: 'This is an alert message.',
buttons: [ {

24
core/src/components/alert/test/preview/index.html
View File

@ -43,8 +43,8 @@
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
subTitle: 'Subtitle',
header: 'Alert',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: ['OK']
});
@ -55,7 +55,7 @@
const alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
header: 'Alert',
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
buttons: ['Cancel', 'OK']
});
@ -66,8 +66,8 @@
const alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
subTitle: 'Subtitle',
header: 'Alert',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: ['Cancel', 'Open Modal', 'Delete']
});
@ -78,7 +78,7 @@
const alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
header: 'Alert',
buttons: ['OK']
});
return await alert.present();
@ -88,7 +88,7 @@
const alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Confirm!',
header: 'Confirm!',
message: 'Message <strong>text</strong>!!!',
buttons: [
{
@ -113,7 +113,7 @@
const alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Prompt!',
header: 'Prompt!',
inputs: [
{
placeholder: 'Placeholder 1'
@ -176,7 +176,7 @@
const alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Radio',
header: 'Radio',
inputs: [
{
type: 'radio',
@ -235,7 +235,7 @@
const alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Checkbox',
header: 'Checkbox',
inputs: [
{
type: 'checkbox',
@ -297,8 +297,8 @@
const alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
subTitle: 'Subtitle',
header: 'Alert',
subHeader: 'Subtitle',
cssClass: 'my-class my-customClass ',
message: 'This is an alert message.',
buttons: [ {

24
core/src/components/alert/test/standalone/index.html
View File

@ -79,8 +79,8 @@
var alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
subTitle: 'Subtitle',
header: 'Alert',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: ['OK']
});
@ -91,7 +91,7 @@
var alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
header: 'Alert',
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
buttons: ['Cancel', 'OK']
});
@ -102,8 +102,8 @@
var alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
subTitle: 'Subtitle',
header: 'Alert',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: ['Cancel', 'Open Modal', 'Delete']
});
@ -114,7 +114,7 @@
var alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
header: 'Alert',
buttons: ['OK']
});
return await alert.present();
@ -124,7 +124,7 @@
var alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Confirm!',
header: 'Confirm!',
message: 'Message <strong>text</strong>!!!',
buttons: [
{
@ -149,7 +149,7 @@
var alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Prompt!',
header: 'Prompt!',
inputs: [
{
placeholder: 'Placeholder 1'
@ -212,7 +212,7 @@
var alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Radio',
header: 'Radio',
inputs: [
{
type: 'radio',
@ -271,7 +271,7 @@
var alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Checkbox',
header: 'Checkbox',
inputs: [
{
type: 'checkbox',
@ -333,8 +333,8 @@
var alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
subTitle: 'Subtitle',
header: 'Alert',
subHeader: 'Subtitle',
cssClass: 'my-class my-customClass ',
message: 'This is an alert message.',
buttons: [ {

20
core/src/components/alert/test/translucent/index.html
View File

@ -54,8 +54,8 @@
var alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
subTitle: 'Subtitle',
header: 'Alert',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: ['OK'],
translucent: true
@ -67,7 +67,7 @@
var alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
header: 'Alert',
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
buttons: ['Cancel', 'OK'],
translucent: true
@ -79,8 +79,8 @@
var alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
subTitle: 'Subtitle',
header: 'Alert',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: ['Cancel', 'Open Modal', 'Delete'],
translucent: true
@ -92,7 +92,7 @@
var alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
header: 'Alert',
buttons: ['OK'],
translucent: true
});
@ -103,7 +103,7 @@
var alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Confirm!',
header: 'Confirm!',
message: 'Message <strong>text</strong>!!!',
buttons: [
{
@ -129,7 +129,7 @@
var alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Prompt!',
header: 'Prompt!',
inputs: [
{
placeholder: 'Placeholder 1'
@ -193,7 +193,7 @@
var alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Radio',
header: 'Radio',
inputs: [
{
type: 'radio',
@ -253,7 +253,7 @@
var alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Checkbox',
header: 'Checkbox',
inputs: [
{
type: 'checkbox',

16
core/src/components/alert/usage/angular.md
View File

@ -13,8 +13,8 @@ export class AlertExample {
presentAlert() {
const alert = this.alertController.create({
title: 'Alert',
subTitle: 'Subtitle',
header: 'Alert',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: ['OK']
});
@ -24,8 +24,8 @@ export class AlertExample {
presentAlertMultipleButtons() {
const alert = this.alertController.create({
title: 'Alert',
subTitle: 'Subtitle',
header: 'Alert',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: ['Cancel', 'Open Modal', 'Delete']
});
@ -35,7 +35,7 @@ export class AlertExample {
presentAlertConfirm() {
const alert = this.alertController.create({
title: 'Confirm!',
header: 'Confirm!',
message: 'Message <strong>text</strong>!!!',
buttons: [
{
@ -59,7 +59,7 @@ export class AlertExample {
presentAlertPrompt() {
const alert = this.alertController.create({
title: 'Prompt!',
header: 'Prompt!',
inputs: [
{
placeholder: 'Placeholder 1'
@ -121,7 +121,7 @@ export class AlertExample {
presentAlertRadio() {
const alert = this.alertController.create({
title: 'Radio',
header: 'Radio',
inputs: [
{
type: 'radio',
@ -177,7 +177,7 @@ export class AlertExample {
presentAlertCheckbox() {
const alert = this.alertController.create({
title: 'Checkbox',
header: 'Checkbox',
inputs: [
{
type: 'checkbox',

16
core/src/components/alert/usage/javascript.md
View File

@ -4,8 +4,8 @@ async function presentAlert() {
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
subTitle: 'Subtitle',
header: 'Alert',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: ['OK']
});
@ -17,8 +17,8 @@ async function presentAlertMultipleButtons() {
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Alert',
subTitle: 'Subtitle',
header: 'Alert',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: ['Cancel', 'Open Modal', 'Delete']
});
@ -30,7 +30,7 @@ async function presentAlertConfirm() {
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Confirm!',
header: 'Confirm!',
message: 'Message <strong>text</strong>!!!',
buttons: [
{
@ -56,7 +56,7 @@ async function presentAlertPrompt() {
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Prompt!',
header: 'Prompt!',
inputs: [
{
placeholder: 'Placeholder 1'
@ -120,7 +120,7 @@ async function presentAlertRadio() {
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Radio',
header: 'Radio',
inputs: [
{
type: 'radio',
@ -178,7 +178,7 @@ async function presentAlertCheckbox() {
await alertController.componentOnReady();
const alert = await alertController.create({
title: 'Checkbox',
header: 'Checkbox',
inputs: [
{
type: 'checkbox',

2
core/src/components/content/content.tsx
View File

@ -38,7 +38,7 @@ export class Content {
@Prop() scrollEvents = false;
@Listen('body:ionNavChanged')
@Listen('body:ionNavDidChange')
onNavChanged() {
this.resize();
}

6
core/src/components/nav/nav.tsx
View File

@ -56,7 +56,8 @@ export class Nav implements NavOutlet {
}
}
@Event() ionNavChanged: EventEmitter<void>;
@Event() ionNavWillChange: EventEmitter<void>;
@Event() ionNavDidChange: EventEmitter<void>;
componentWillLoad() {
this.useRouter = !!document.querySelector('ion-router') && !this.el.closest('[no-router]');
@ -314,7 +315,6 @@ export class Nav implements NavOutlet {
router && router.navChanged(direction);
}
}
this.ionNavChanged.emit();
}
private failed(rejectReason: any, ti: TransitionInstruction) {
@ -358,6 +358,7 @@ export class Nav implements NavOutlet {
private async runTransition(ti: TransitionInstruction) {
try {
// set that this nav is actively transitioning
this.ionNavWillChange.emit();
this.isTransitioning = true;
this.prepareTI(ti);
@ -378,6 +379,7 @@ export class Nav implements NavOutlet {
const result = await this.transition(enteringView, leavingView, ti);
this.success(result, ti);
this.ionNavDidChange.emit();
} catch (rejectReason) {
this.failed(rejectReason, ti);
}

5
core/src/components/nav/readme.md
View File

@ -61,7 +61,10 @@ boolean
## Events
#### ionNavChanged
#### ionNavDidChange
#### ionNavWillChange
## Methods

8
core/src/components/router-outlet/readme.md
View File

@ -39,6 +39,14 @@ boolean
## Events
#### ionNavDidChange
#### ionNavWillChange
## Methods
#### commit()

11
core/src/components/router-outlet/route-outlet.tsx
View File

@ -1,4 +1,4 @@
import { Component, Element, Method, Prop } from '@stencil/core';
import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/core';
import { transition } from '../../utils';
import { NavDirection } from '../nav/nav-util';
import { AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, NavOutlet } from '../..';
@ -28,6 +28,9 @@ export class RouterOutlet implements NavOutlet {
@Prop() animationBuilder: AnimationBuilder;
@Prop() delegate: FrameworkDelegate;
@Event() ionNavWillChange: EventEmitter<void>;
@Event() ionNavDidChange: EventEmitter<void>;
componentWillLoad() {
if (this.animated === undefined) {
this.animated = this.config.getBoolean('animate', true);
@ -45,6 +48,9 @@ export class RouterOutlet implements NavOutlet {
}
this.activeComponent = component;
// emit nav will change event
this.ionNavWillChange.emit();
// attach entering view to DOM
const enteringEl = await attachComponent(this.delegate, this.el, component, ['ion-page', 'hide-page'], params);
const leavingEl = this.activeEl;
@ -56,6 +62,9 @@ export class RouterOutlet implements NavOutlet {
this.activeEl = enteringEl;
detachComponent(this.delegate, leavingEl);
// emit nav changed event
this.ionNavDidChange.emit();
return true;
}

24
core/src/components/select-popover/readme.md
View File

@ -7,6 +7,11 @@
## Properties
#### header
string
#### message
string
@ -17,18 +22,18 @@ string
#### subTitle
string
#### title
#### subHeader
string
## Attributes
#### header
string
#### message
string
@ -39,12 +44,7 @@ string
#### sub-title
string
#### title
#### sub-header
string

10
core/src/components/select-popover/select-popover.tsx
View File

@ -18,9 +18,9 @@ export interface SelectPopoverOption {
export class SelectPopover {
private mode: string;
@Prop() title: string;
@Prop() header: string;
@Prop() subTitle: string;
@Prop() subHeader: string;
@Prop() message: string;
@ -35,11 +35,11 @@ export class SelectPopover {
render() {
return (
<ion-list no-lines={this.mode === 'md'}>
{ this.title ? <ion-list-header>{this.title}</ion-list-header> : null }
{ this.subTitle || this.message
{ this.header ? <ion-list-header>{this.header}</ion-list-header> : null }
{ this.subHeader || this.message
? <ion-item>
<ion-label>
{ this.subTitle ? <h3>{this.subTitle}</h3> : null }
{ this.subHeader ? <h3>{this.subHeader}</h3> : null }
{ this.message ? <p>{this.message}</p> : null }
</ion-label>
</ion-item>

4
core/src/components/select/readme.md
View File

@ -71,8 +71,8 @@ For example, to change the `title` and `subTitle` of the overlay, pass it into `
```javascript
var customSelect = document.getElementById('customSelect');
customSelect.interfaceOptions = {
title: 'Pizza Toppings',
subTitle: 'Select your toppings'
header: 'Pizza Toppings',
subHeader: 'Select your toppings'
};
```

12
core/src/components/select/test/basic/index.html
View File

@ -253,8 +253,8 @@
var customAlertSelect = document.getElementById('customAlertSelect');
var customAlertOptions = {
title: 'Pizza Toppings',
subTitle: 'Select your toppings',
header: 'Pizza Toppings',
subHeader: 'Select your toppings',
message: '$1.00 per topping',
translucent: true
};
@ -262,16 +262,16 @@
var customPopoverSelect = document.getElementById('customPopoverSelect');
var customPopoverOptions = {
title: 'Pizza Toppings',
subTitle: 'Select your toppings',
header: 'Pizza Toppings',
subHeader: 'Select your toppings',
message: '$1.50 charge for every topping'
};
customPopoverSelect.interfaceOptions = customPopoverOptions;
var customActionSheetSelect = document.getElementById('customActionSheetSelect');
var customActionSheetOptions = {
title: 'Pizza Toppings',
subTitle: 'Select your toppings',
header: 'Pizza Toppings',
subHeader: 'Select your toppings',
message: '$1.50 charge for every topping'
};
customActionSheetSelect.interfaceOptions = customActionSheetOptions;

12
core/src/components/select/test/preview/index.html
View File

@ -253,8 +253,8 @@
var customAlertSelect = document.getElementById('customAlertSelect');
var customAlertOptions = {
title: 'Pizza Toppings',
subTitle: 'Select your toppings',
header: 'Pizza Toppings',
subHeader: 'Select your toppings',
message: '$1.00 per topping',
translucent: true
};
@ -262,16 +262,16 @@
var customPopoverSelect = document.getElementById('customPopoverSelect');
var customPopoverOptions = {
title: 'Pizza Toppings',
subTitle: 'Select your toppings',
header: 'Pizza Toppings',
subHeader: 'Select your toppings',
message: '$1.50 charge for every topping'
};
customPopoverSelect.interfaceOptions = customAlertOptions;
var customActionSheetSelect = document.getElementById('customActionSheetSelect');
var customActionSheetOptions = {
title: 'Pizza Toppings',
subTitle: 'Select your toppings',
header: 'Pizza Toppings',
subHeader: 'Select your toppings',
message: '$1.50 charge for every topping'
};
customActionSheetSelect.interfaceOptions = customAlertOptions;

1
core/src/components/tab/tab.tsx
View File

@ -95,6 +95,7 @@ export class Tab {
}
}
}
@Method()
getTabId(): string|null {
if (this.name) {

15
core/src/components/tabs/readme.md
View File

@ -149,6 +149,11 @@ attribute needs to be set on the content.
Defaults to `false`.
#### useRouter
boolean
## Attributes
#### color
@ -210,6 +215,11 @@ attribute needs to be set on the content.
Defaults to `false`.
#### use-router
boolean
## Events
#### ionChange
@ -217,7 +227,10 @@ Defaults to `false`.
Emitted when the tab changes.
#### ionNavChanged
#### ionNavDidChange
#### ionNavWillChange
## Methods

11
core/src/components/tabs/tabs.tsx
View File

@ -11,7 +11,6 @@ export class Tabs implements NavOutlet {
private ids = -1;
private transitioning = false;
private useRouter = false;
private tabsId: number = (++tabIds);
private leavingTab: HTMLIonTabElement | undefined;
@ -64,14 +63,19 @@ export class Tabs implements NavOutlet {
@Prop() scrollable = false;
@Prop({mutable: true}) useRouter: boolean;
/**
* Emitted when the tab changes.
*/
@Event() ionChange: EventEmitter;
@Event() ionNavChanged: EventEmitter<void>;
@Event() ionNavWillChange: EventEmitter<void>;
@Event() ionNavDidChange: EventEmitter<void>;
componentWillLoad() {
if (!this.useRouter) {
this.useRouter = !!document.querySelector('ion-router') && !this.el.closest('[no-router]');
}
this.loadConfig('tabsPlacement', 'bottom');
this.loadConfig('tabsLayout', 'icon-top');
@ -219,6 +223,7 @@ export class Tabs implements NavOutlet {
this.transitioning = true;
this.leavingTab = this.selectedTab;
this.selectedTab = selectedTab;
this.ionNavWillChange.emit();
return selectedTab.setActive();
}
@ -238,7 +243,7 @@ export class Tabs implements NavOutlet {
leavingTab.active = false;
}
this.ionChange.emit(selectedTab);
this.ionNavChanged.emit();
this.ionNavDidChange.emit();
}
}