javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(props): update stencil

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-04-10 00:12:38 +02:00
parent 22ebbce57f
commit ea24ad677d
80 changed files with 12106 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
angular/BREAKING.md
View File

@@ -596,7 +596,7 @@ The option component should not be written as a `button` with an `ion-button` di
<ion-item>
<ion-label>Item 1</ion-label>
</ion-item>
<ion-item-options side="right">
<ion-item-options side="end">
<ion-item-option expandable>
<ion-icon name="star"></ion-icon>
</ion-item-option>
@@ -1018,7 +1018,7 @@ Previously if a `menuToggle` directive was added to an Ionic `button` in a toolb
```html
<ion-toolbar>
<ion-buttons slot="left">
<ion-buttons slot="start">
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>

1
angular/src/directives/index.ts
View File

@@ -12,6 +12,7 @@ export { TabDelegate } from './navigation/tab-delegate';
export { TabsDelegate } from './navigation/tabs-delegate';
export { IonRouterOutlet } from './navigation/ion-router-outlet';
export { HrefDelegate } from './navigation/href-delegate';
export { NavParams } from './navigation/nav-params';
export { Icon } from './icon';
export { VirtualScroll } from './virtual-scroll/virtual-scroll';

11826
core/package-lock.json generated
View File

File diff suppressed because one or more lines are too long

2
core/package.json
View File

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

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

@@ -4497,7 +4497,7 @@ declare global {
/**
* The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`.
*/
'pullMax': any;
'pullMax': number;
/**
* The minimum distance the user must pull down until the refresher will go into the `refreshing` state. Defaults to `60`.
*/
@@ -4547,7 +4547,7 @@ declare global {
/**
* The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`.
*/
'pullMax'?: any;
'pullMax'?: number;
/**
* The minimum distance the user must pull down until the refresher will go into the `refreshing` state. Defaults to `60`.
*/

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

@@ -25,7 +25,7 @@ An array of buttons for the action sheet.
#### cssClass
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.
@@ -101,7 +101,7 @@ An array of buttons for the action sheet.
#### css-class
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.

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

@@ -34,7 +34,7 @@ Array of buttons to be added to the alert.
#### cssClass
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.
@@ -129,7 +129,7 @@ Array of buttons to be added to the alert.
#### css-class
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.

4
core/src/components/app/test/cordova/index.html
View File

@@ -11,7 +11,7 @@
</head>
<body onload="initialize()">
<ion-app>
<ion-menu side="left">
<ion-menu side="start">
<ion-header>
<ion-toolbar color="secondary">
@@ -35,7 +35,7 @@
</ion-menu>
<ion-menu side="right">
<ion-menu side="end">
<ion-content>

8
core/src/components/back-button/readme.md
View File

@@ -35,7 +35,7 @@ The icon name to use for the back button.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -44,7 +44,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
#### text
string
The text to display in the back button.
@@ -76,7 +76,7 @@ The icon name to use for the back button.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -85,7 +85,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
#### text
string
The text to display in the back button.

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

@@ -38,7 +38,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -58,7 +58,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

16
core/src/components/button/readme.md
View File

@@ -104,7 +104,7 @@ If true, the user cannot interact with the button. Defaults to `false`.
#### expand
string
Set to `"block"` for a full-width button or to `"full"` for a full-width button
without left and right borders.
@@ -112,7 +112,7 @@ without left and right borders.
#### fill
string
Set to `"clear"` for a transparent button, to `"outline"` for a transparent
button with a border, or to `"solid"`. The default style is `"solid"` except inside of
@@ -134,7 +134,7 @@ If this property is set, an anchor tag will be rendered.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -150,7 +150,7 @@ If true, activates a button with rounded corners.
#### size
string
The button size.
Possible values are: `"small"`, `"default"`, `"large"`.
@@ -200,7 +200,7 @@ If true, the user cannot interact with the button. Defaults to `false`.
#### expand
string
Set to `"block"` for a full-width button or to `"full"` for a full-width button
without left and right borders.
@@ -208,7 +208,7 @@ without left and right borders.
#### fill
string
Set to `"clear"` for a transparent button, to `"outline"` for a transparent
button with a border, or to `"solid"`. The default style is `"solid"` except inside of
@@ -230,7 +230,7 @@ If this property is set, an anchor tag will be rendered.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -246,7 +246,7 @@ If true, activates a button with rounded corners.
#### size
string
The button size.
Possible values are: `"small"`, `"default"`, `"large"`.

4
core/src/components/card-content/readme.md
View File

@@ -19,7 +19,7 @@ Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"wa
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -37,7 +37,7 @@ Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"wa
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

4
core/src/components/card-header/readme.md
View File

@@ -17,7 +17,7 @@ Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"wa
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -42,7 +42,7 @@ Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"wa
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

4
core/src/components/card-subtitle/readme.md
View File

@@ -17,7 +17,7 @@ Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"wa
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -35,7 +35,7 @@ Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"wa
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

4
core/src/components/card-title/readme.md
View File

@@ -18,7 +18,7 @@ Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"wa
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -36,7 +36,7 @@ Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"wa
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

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

@@ -21,7 +21,7 @@ Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"wa
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -39,7 +39,7 @@ Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"wa
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

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

@@ -69,7 +69,7 @@ If true, the user cannot interact with the checkbox. Defaults to `false`.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -115,7 +115,7 @@ If true, the user cannot interact with the checkbox. Defaults to `false`.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

4
core/src/components/chip-button/readme.md
View File

@@ -70,7 +70,7 @@ If this property is set, an anchor tag will be rendered.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -110,7 +110,7 @@ If this property is set, an anchor tag will be rendered.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

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

@@ -68,7 +68,7 @@ Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"wa
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -86,7 +86,7 @@ Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"wa
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

36
core/src/components/datetime/readme.md
View File

@@ -219,7 +219,7 @@ The text to display on the picker's cancel button. Default: `Cancel`.
#### dayNames
string
Full day of the week names. This can be used to provide
locale names for each day in the week. Defaults to English.
@@ -227,7 +227,7 @@ locale names for each day in the week. Defaults to English.
#### dayShortNames
string
Short abbreviated day of the week names. This can be used to provide
locale names for each day in the week. Defaults to English.
@@ -235,7 +235,7 @@ locale names for each day in the week. Defaults to English.
#### dayValues
string
Values used to create the list of selectable days. By default
every day is shown for the given month. However, to control exactly which days of
@@ -272,7 +272,7 @@ The text to display on the picker's "Done" button. Default: `Done`.
#### hourValues
string
Values used to create the list of selectable hours. By default
the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However,
@@ -306,7 +306,7 @@ Defaults to the beginning of the year, 100 years ago from today.
#### minuteValues
string
Values used to create the list of selectable minutes. By default
the mintues range from `0` to `59`. However, to control exactly which minutes to display,
@@ -317,7 +317,7 @@ then this input value would be `minuteValues="0,15,30,45"`.
#### monthNames
string
Full names for each month name. This can be used to provide
locale month names. Defaults to English.
@@ -325,7 +325,7 @@ locale month names. Defaults to English.
#### monthShortNames
string
Short abbreviated names for each month name. This can be used to provide
locale month names. Defaults to English.
@@ -333,7 +333,7 @@ locale month names. Defaults to English.
#### monthValues
string
Values used to create the list of selectable months. By default
the month values range from `1` to `12`. However, to control exactly which months to
@@ -380,7 +380,7 @@ the value of the datetime.
#### yearValues
string
Values used to create the list of selectable years. By default
the year values range between the `min` and `max` datetime inputs. However, to
@@ -400,7 +400,7 @@ The text to display on the picker's cancel button. Default: `Cancel`.
#### day-names
string
Full day of the week names. This can be used to provide
locale names for each day in the week. Defaults to English.
@@ -408,7 +408,7 @@ locale names for each day in the week. Defaults to English.
#### day-short-names
string
Short abbreviated day of the week names. This can be used to provide
locale names for each day in the week. Defaults to English.
@@ -416,7 +416,7 @@ locale names for each day in the week. Defaults to English.
#### day-values
string
Values used to create the list of selectable days. By default
every day is shown for the given month. However, to control exactly which days of
@@ -453,7 +453,7 @@ The text to display on the picker's "Done" button. Default: `Done`.
#### hour-values
string
Values used to create the list of selectable hours. By default
the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However,
@@ -487,7 +487,7 @@ Defaults to the beginning of the year, 100 years ago from today.
#### minute-values
string
Values used to create the list of selectable minutes. By default
the mintues range from `0` to `59`. However, to control exactly which minutes to display,
@@ -498,7 +498,7 @@ then this input value would be `minuteValues="0,15,30,45"`.
#### month-names
string
Full names for each month name. This can be used to provide
locale month names. Defaults to English.
@@ -506,7 +506,7 @@ locale month names. Defaults to English.
#### month-short-names
string
Short abbreviated names for each month name. This can be used to provide
locale month names. Defaults to English.
@@ -514,7 +514,7 @@ locale month names. Defaults to English.
#### month-values
string
Values used to create the list of selectable months. By default
the month values range from `1` to `12`. However, to control exactly which months to
@@ -561,7 +561,7 @@ the value of the datetime.
#### year-values
string
Values used to create the list of selectable years. By default
the year values range between the `min` and `max` datetime inputs. However, to

4
core/src/components/fab-button/readme.md
View File

@@ -71,7 +71,7 @@ If this property is set, an anchor tag will be rendered.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -130,7 +130,7 @@ If this property is set, an anchor tag will be rendered.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

6
core/src/components/fab-list/readme.md
View File

@@ -17,7 +17,7 @@ The `ion-fab-list` element is a container for multiple FAB buttons. This collect
<ion-fab-button>Twitter</ion-fab-button>
<ion-fab-button>Youtube</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="left">
<ion-fab-list side="start">
<ion-fab-button>Vimeo</ion-fab-button>
</ion-fab-list>
</ion-fab>
@@ -38,7 +38,7 @@ If true, the fab list will be show all fab buttons in the list. Defaults to `fal
#### side
string
The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`.
@@ -54,7 +54,7 @@ If true, the fab list will be show all fab buttons in the list. Defaults to `fal
#### side
string
The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`.

14
core/src/components/fab/readme.md
View File

@@ -70,7 +70,7 @@ The fab should have one main fab button. Fabs can also contain fab lists which c
<ion-fab-button>
<ion-icon name="settings"></ion-icon>
</ion-fab-button>
<ion-fab-list side="right">
<ion-fab-list side="end">
<ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
@@ -84,10 +84,10 @@ The fab should have one main fab button. Fabs can also contain fab lists which c
<ion-fab-list side="bottom">
<ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="left">
<ion-fab-list side="start">
<ion-fab-button><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="right">
<ion-fab-list side="end">
<ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
@@ -111,7 +111,7 @@ it is `"bottom"`. Should be used with a `fixed` slot.
#### horizontal
string
Where to align the fab horizontally in the viewport.
Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`.
@@ -119,7 +119,7 @@ Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`.
#### vertical
string
Where to align the fab vertically in the viewport.
Possible values are: `"top"`, `"center"`, `"bottom"`.
@@ -138,7 +138,7 @@ it is `"bottom"`. Should be used with a `fixed` slot.
#### horizontal
string
Where to align the fab horizontally in the viewport.
Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`.
@@ -146,7 +146,7 @@ Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`.
#### vertical
string
Where to align the fab vertically in the viewport.
Possible values are: `"top"`, `"center"`, `"bottom"`.

8
core/src/components/fab/test/basic/index.html
View File

@@ -35,7 +35,7 @@
<ion-fab vertical="bottom" horizontal="right" edge id="fab2" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button>
<ion-fab-list side="left">
<ion-fab-list side="start">
<ion-fab-button onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab2')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab2')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
@@ -45,7 +45,7 @@
<ion-fab vertical="top" horizontal="left" id="fab3" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button>
<ion-fab-list side="right">
<ion-fab-list side="end">
<ion-fab-button onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab3')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab3')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
@@ -71,10 +71,10 @@
<ion-fab-list side="bottom">
<ion-fab-button onclick="openSocial('facebook', 'fab5')" color="secondary"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="left">
<ion-fab-list side="start">
<ion-fab-button onclick="openSocial('googleplus', 'fab5')" color="light"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="right">
<ion-fab-list side="end">
<ion-fab-button onclick="openSocial('twitter', 'fab5')" color="dark"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>

8
core/src/components/fab/test/preview/index.html
View File

@@ -35,7 +35,7 @@
<ion-fab vertical="bottom" horizontal="right" edge id="fab2" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button>
<ion-fab-list side="left">
<ion-fab-list side="start">
<ion-fab-button onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab2')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab2')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
@@ -45,7 +45,7 @@
<ion-fab vertical="top" horizontal="left" id="fab3" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button>
<ion-fab-list side="right">
<ion-fab-list side="end">
<ion-fab-button onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab3')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab3')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
@@ -71,10 +71,10 @@
<ion-fab-list side="bottom">
<ion-fab-button onclick="openSocial('facebook', 'fab5')" color="secondary"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="left">
<ion-fab-list side="start">
<ion-fab-button onclick="openSocial('googleplus', 'fab5')" color="light"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="right">
<ion-fab-list side="end">
<ion-fab-button onclick="openSocial('twitter', 'fab5')" color="dark"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>

8
core/src/components/fab/test/standalone/index.html
View File

@@ -25,7 +25,7 @@
<ion-fab vertical="bottom" horizontal="right" id="fab2" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button>
<ion-fab-list side="left">
<ion-fab-list side="start">
<ion-fab-button onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab2')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab2')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
@@ -35,7 +35,7 @@
<ion-fab vertical="top" horizontal="left" id="fab3" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button>
<ion-fab-list side="right">
<ion-fab-list side="end">
<ion-fab-button onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab3')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab3')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
@@ -61,10 +61,10 @@
<ion-fab-list side="bottom">
<ion-fab-button onclick="openSocial('facebook', 'fab5')" color="secondary"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="left">
<ion-fab-list side="start">
<ion-fab-button onclick="openSocial('googleplus', 'fab5')" color="light"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="right">
<ion-fab-list side="end">
<ion-fab-button onclick="openSocial('twitter', 'fab5')" color="dark"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>

8
core/src/components/fab/test/translucent/index.html
View File

@@ -44,7 +44,7 @@
<ion-fab vertical="bottom" horizontal="right" edge id="fab2" slot="fixed">
<ion-fab-button translucent onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button>
<ion-fab-list side="left">
<ion-fab-list side="start">
<ion-fab-button translucent onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('twitter', 'fab2')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('vimeo', 'fab2')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
@@ -54,7 +54,7 @@
<ion-fab vertical="top" horizontal="left" id="fab3" slot="fixed">
<ion-fab-button translucent onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button>
<ion-fab-list side="right">
<ion-fab-list side="end">
<ion-fab-button translucent onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('twitter', 'fab3')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('vimeo', 'fab3')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
@@ -80,10 +80,10 @@
<ion-fab-list side="bottom">
<ion-fab-button translucent onclick="openSocial('facebook', 'fab5')" color="secondary"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="left">
<ion-fab-list side="start">
<ion-fab-button translucent onclick="openSocial('googleplus', 'fab5')" color="light"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="right">
<ion-fab-list side="end">
<ion-fab-button translucent onclick="openSocial('twitter', 'fab5')" color="dark"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>

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

@@ -9,7 +9,7 @@
#### attachTo
string
#### autoBlockAll
@@ -101,7 +101,7 @@ string
#### attach-to
string
#### auto-block-all

4
core/src/components/item-divider/readme.md
View File

@@ -18,7 +18,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -38,7 +38,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

2
core/src/components/item-option/item-option.tsx
View File

@@ -42,7 +42,7 @@ export class ItemOption {
*/
@Prop() href: string;
clickedOptionButton(ev: Event): boolean {
private clickedOptionButton(ev: Event): boolean {
const el = (ev.target as HTMLElement).closest('ion-item-option');
return !!el;
}

4
core/src/components/item-option/readme.md
View File

@@ -43,7 +43,7 @@ If this property is set, an anchor tag will be rendered.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -85,7 +85,7 @@ If this property is set, an anchor tag will be rendered.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

4
core/src/components/item-options/item-options.tsx
View File

@@ -16,7 +16,7 @@ export class ItemOptions {
* The side the option button should be on. Defaults to `"right"`.
* If you have multiple `ion-item-options`, a side must be provided for each.
*/
@Prop() side: Side = 'right';
@Prop() side: Side = 'end';
/**
* Emitted when the item has been fully swiped.
@@ -25,7 +25,7 @@ export class ItemOptions {
@Method()
isRightSide() {
return isRightSide(this.side, true);
return isRightSide(this.side);
}
@Method()

6
core/src/components/item-options/readme.md
View File

@@ -9,7 +9,7 @@ You can combine the `(ionSwipe)` event plus the `expandable` directive to create
<ion-item>
Item 1
</ion-item>
<ion-item-options side="right" (ionSwipe)="saveItem(item)">
<ion-item-options side="end" (ionSwipe)="saveItem(item)">
<ion-item-option expandable (click)="saveItem(item)">
<ion-icon name="star"></ion-icon>
</ion-item-option>
@@ -25,7 +25,7 @@ You can combine the `(ionSwipe)` event plus the `expandable` directive to create
#### side
string
The side the option button should be on. Defaults to `"right"`.
If you have multiple `ion-item-options`, a side must be provided for each.
@@ -35,7 +35,7 @@ If you have multiple `ion-item-options`, a side must be provided for each.
#### side
string
The side the option button should be on. Defaults to `"right"`.
If you have multiple `ion-item-options`, a side must be provided for each.

8
core/src/components/item-sliding/readme.md
View File

@@ -8,12 +8,12 @@ A Sliding item is a component that contains an item that can be dragged to revea
<ion-item>
<ion-label>Item</ion-label>
</ion-item>
<ion-item-options side="left">
<ion-item-options side="start">
<ion-item-option onClick="favorite(item)">Favorite</ion-item-option>
<ion-item-option color="danger" onClick="share(item)">Share</ion-item-option>
</ion-item-options>
<ion-item-options side="right">
<ion-item-options side="end">
<ion-item-option onClick="unread(item)">Unread</ion-item-option>
</ion-item-options>
</ion-item-sliding>
@@ -26,14 +26,14 @@ A Sliding item is a component that contains an item that can be dragged to revea
By default, the options are revealed when the sliding item is swiped from right to left, so the buttons are placed on the right side. It's also possible to reveal them from the right side by setting the `side` attribute on the `ion-item-options` element. Up to two `ion-item-options` can be used at the same time in order to reveal two different sets of options depending on the swiping direction.
```html
<ion-item-options side="right">
<ion-item-options side="end">
<ion-item-option onClick="archive(item)">
<ion-icon name="archive"></ion-icon>
Archive
</ion-item-option>
</ion-item-options>
<ion-item-options side="left">
<ion-item-options side="start">
<ion-item-option onClick="archive(item)">
<ion-icon name="archive"></ion-icon>
Archive

16
core/src/components/item-sliding/test/basic/index.html
View File

@@ -64,12 +64,12 @@
Two options, one dynamic option and text
</ion-label>
</ion-item>
<ion-item-options side="left">
<ion-item-options side="start">
<ion-item-option color="primary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-item-option>
</ion-item-options>
<ion-item-options side="right" class="show-options">
<ion-item-options side="end" class="show-options">
<ion-item-option color="primary">
<ion-icon name="more"></ion-icon>
<span class="more-text"></span>
@@ -93,12 +93,12 @@
</ion-note>
</ion-item>
<ion-item-options side="left">
<ion-item-options side="start">
<ion-item-option onclick="noclose('item100')">
No close
</ion-item-option>
</ion-item-options>
<ion-item-options side="right">
<ion-item-options side="end">
<ion-item-option color="danger" onclick="unread('item100')">
<ion-icon slot="icon-only" name="trash"></ion-icon>
</ion-item-option>
@@ -129,7 +129,7 @@
<p>I think I figured out how to get more Mountain Dew</p>
</ion-label>
</ion-item>
<ion-item-options side="left" class="sliding-enabled">
<ion-item-options side="start" class="sliding-enabled">
<ion-item-option color="primary" onclick="archive('item1')">Archive</ion-item-option>
<ion-item-option color="danger" onclick="del('item1')">Delete</ion-item-option>
</ion-item-options>
@@ -143,13 +143,13 @@
<p>I think I figured out how to get more Mountain Dew</p>
</ion-label>
</ion-item>
<ion-item-options side="left" class="sliding-enabled">
<ion-item-options side="start" class="sliding-enabled">
<ion-item-option color="secondary" expandable onclick="unread('item2')">
<ion-icon name="ios-checkmark"></ion-icon>Unread
</ion-item-option>
</ion-item-options>
<ion-item-options side="right" class="sliding-enabled">
<ion-item-options side="end" class="sliding-enabled">
<ion-item-option color="primary" onclick="archive('item2')">
<ion-icon name="mail"></ion-icon>Archive
</ion-item-option>
@@ -166,7 +166,7 @@
<p>I think I figured out how to get more Mountain Dew</p>
</ion-label>
</ion-item>
<ion-item-options side="left" icon-start class="sliding-enabled">
<ion-item-options side="start" icon-start class="sliding-enabled">
<ion-item-option color="secondary" expandable onclick="unread('item3')">
<ion-icon name="ios-checkmark"></ion-icon>Unread
</ion-item-option>

16
core/src/components/item-sliding/test/preview/index.html
View File

@@ -64,12 +64,12 @@
Two options, one dynamic option and text
</ion-label>
</ion-item>
<ion-item-options side="left">
<ion-item-options side="start">
<ion-item-option color="primary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-item-option>
</ion-item-options>
<ion-item-options side="right" class="show-options">
<ion-item-options side="end" class="show-options">
<ion-item-option color="primary">
<ion-icon name="more"></ion-icon>
<span class="more-text"></span>
@@ -93,12 +93,12 @@
</ion-note>
</ion-item>
<ion-item-options side="left">
<ion-item-options side="start">
<ion-item-option onclick="noclose('item100')">
No close
</ion-item-option>
</ion-item-options>
<ion-item-options side="right">
<ion-item-options side="end">
<ion-item-option color="danger" onclick="unread('item100')">
<ion-icon slot="icon-only" name="trash"></ion-icon>
</ion-item-option>
@@ -129,7 +129,7 @@
<p>I think I figured out how to get more Mountain Dew</p>
</ion-label>
</ion-item>
<ion-item-options side="left" class="sliding-enabled">
<ion-item-options side="start" class="sliding-enabled">
<ion-item-option color="primary" onclick="archive('item1')">Archive</ion-item-option>
<ion-item-option color="danger" onclick="del('item1')">Delete</ion-item-option>
</ion-item-options>
@@ -143,13 +143,13 @@
<p>I think I figured out how to get more Mountain Dew</p>
</ion-label>
</ion-item>
<ion-item-options side="left" class="sliding-enabled">
<ion-item-options side="start" class="sliding-enabled">
<ion-item-option color="secondary" expandable onclick="unread('item2')">
<ion-icon name="ios-checkmark"></ion-icon>Unread
</ion-item-option>
</ion-item-options>
<ion-item-options side="right" class="sliding-enabled">
<ion-item-options side="end" class="sliding-enabled">
<ion-item-option color="primary" onclick="archive('item2')">
<ion-icon name="mail"></ion-icon>Archive
</ion-item-option>
@@ -166,7 +166,7 @@
<p>I think I figured out how to get more Mountain Dew</p>
</ion-label>
</ion-item>
<ion-item-options side="left" icon-start class="sliding-enabled">
<ion-item-options side="start" icon-start class="sliding-enabled">
<ion-item-option color="secondary" expandable onclick="unread('item3')">
<ion-icon name="ios-checkmark"></ion-icon>Unread
</ion-item-option>

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

@@ -54,7 +54,7 @@ If this property is set, an anchor tag will be rendered.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -110,7 +110,7 @@ If this property is set, an anchor tag will be rendered.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

16
core/src/components/item/test/sliding/index.html
View File

@@ -64,12 +64,12 @@
Two options, one dynamic option and text
</ion-label>
</ion-item>
<ion-item-options side="left">
<ion-item-options side="start">
<ion-item-option color="primary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-item-option>
</ion-item-options>
<ion-item-options side="right" class="show-options">
<ion-item-options side="end" class="show-options">
<ion-item-option color="primary">
<ion-icon name="more"></ion-icon>
<span class="more-text"></span>
@@ -93,12 +93,12 @@
</ion-note>
</ion-item>
<ion-item-options side="left">
<ion-item-options side="start">
<ion-item-option onclick="noclose('item100')">
No close
</ion-item-option>
</ion-item-options>
<ion-item-options side="right">
<ion-item-options side="end">
<ion-item-option color="light" onclick="unread('item100')">
<ion-icon slot="icon-only" name="trash"></ion-icon>
</ion-item-option>
@@ -129,7 +129,7 @@
<p>I think I figured out how to get more Mountain Dew</p>
</ion-label>
</ion-item>
<ion-item-options side="left" class="sliding-enabled">
<ion-item-options side="start" class="sliding-enabled">
<ion-item-option color="primary" onclick="archive('item1')">Archive</ion-item-option>
<ion-item-option color="danger" onclick="del('item1')">Delete</ion-item-option>
</ion-item-options>
@@ -143,13 +143,13 @@
<p>I think I figured out how to get more Mountain Dew</p>
</ion-label>
</ion-item>
<ion-item-options side="left" class="sliding-enabled">
<ion-item-options side="start" class="sliding-enabled">
<ion-item-option color="secondary" expandable onclick="unread('item2')">
<ion-icon name="ios-checkmark"></ion-icon>Unread
</ion-item-option>
</ion-item-options>
<ion-item-options side="right" class="sliding-enabled">
<ion-item-options side="end" class="sliding-enabled">
<ion-item-option color="primary" onclick="archive('item2')">
<ion-icon name="mail"></ion-icon>Archive
</ion-item-option>
@@ -166,7 +166,7 @@
<p>I think I figured out how to get more Mountain Dew</p>
</ion-label>
</ion-item>
<ion-item-options side="left" icon-start class="sliding-enabled">
<ion-item-options side="start" icon-start class="sliding-enabled">
<ion-item-option color="secondary" expandable onclick="unread('item3')">
<ion-icon name="ios-checkmark"></ion-icon>Unread
</ion-item-option>

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

@@ -32,7 +32,7 @@ If true, the label will float above an input when the value is empty or the inpu
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -73,7 +73,7 @@ If true, the label will float above an input when the value is empty or the inpu
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

4
core/src/components/list-header/readme.md
View File

@@ -18,7 +18,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -38,7 +38,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

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

@@ -27,7 +27,7 @@ Optional text content to display in the loading indicator.
#### cssClass
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.
@@ -118,7 +118,7 @@ Optional text content to display in the loading indicator.
#### css-class
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.

10
core/src/components/menu-controller/menu-controller.ts
View File

@@ -139,7 +139,15 @@ export class MenuController {
*/
@Method()
get(menuId?: string): HTMLIonMenuElement {
if (menuId === 'left' || menuId === 'right') {
if (menuId === 'left') {
console.error('menu.side=left is deprecated, use "start" instead');
return null;
}
if (menuId === 'right') {
console.error('menu.side=right is deprecated, use "end" instead');
return null;
}
if (menuId === 'start' || menuId === 'end' ) {
// there could be more than one menu on the same side
// so first try to get the enabled one
const menu = this.find(m => m.side === menuId && !m.disabled);

18
core/src/components/menu-toggle/test/basic/index.html
View File

@@ -10,7 +10,7 @@
<body>
<ion-app>
<ion-menu side="left" class="e2eLeftMenu">
<ion-menu side="start" class="e2eLeftMenu">
<ion-header>
<ion-toolbar color="secondary">
@@ -20,7 +20,7 @@
<ion-content>
<ion-list>
<ion-item>Open Right Menu</ion-item>
<ion-item>Open end Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
@@ -43,7 +43,7 @@
</ion-menu>
<ion-menu side="right">
<ion-menu side="end">
<ion-header>
<ion-toolbar>
<ion-title>Hola</ion-title>
@@ -75,10 +75,10 @@
<ion-button onclick="openDefault()">Menu Button Will Open Default</ion-button>
</div>
<div>
<ion-button onclick="openLeft()">Menu Button Will Open Left</ion-button>
<ion-button onclick="openStart()">Menu Button Will Open start</ion-button>
</div>
<div>
<ion-button onclick="openRight()">Menu Button Will Open Right</ion-button>
<ion-button onclick="openEnd()">Menu Button Will Open end</ion-button>
</div>
</ion-content>
@@ -94,16 +94,16 @@
menuButton.menu = null;
}
async function openLeft() {
async function openStart() {
const menuButton = document.querySelector('ion-menu-toggle');
await menuButton.componentOnReady();
menuButton.menu = 'left';
menuButton.menu = 'start';
}
async function openRight() {
async function openEnd() {
const menuButton = document.querySelector('ion-menu-toggle');
await menuButton.componentOnReady();
menuButton.menu = 'right';
menuButton.menu = 'end';
}
</script>
<style>

4
core/src/components/menu-toggle/test/button/index.html
View File

@@ -10,7 +10,7 @@
<body>
<ion-app>
<ion-menu side="left" class="e2eLeftMenu">
<ion-menu side="start" class="e2eLeftMenu">
<ion-header>
<ion-toolbar color="secondary">
@@ -20,7 +20,7 @@
<ion-content>
<ion-list>
<ion-item>Open Right Menu</ion-item>
<ion-item>Open end Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>

2
core/src/components/menu-toggle/test/list/index.html
View File

@@ -10,7 +10,7 @@
<body>
<ion-app>
<ion-menu side="left" class="e2eLeftMenu">
<ion-menu side="start" class="e2eLeftMenu">
<ion-header>
<ion-toolbar color="secondary">

18
core/src/components/menu-toggle/test/preview/index.html
View File

@@ -10,7 +10,7 @@
<body>
<ion-app>
<ion-menu side="left" class="e2eLeftMenu">
<ion-menu side="start" class="e2eLeftMenu">
<ion-header>
<ion-toolbar color="secondary">
@@ -20,7 +20,7 @@
<ion-content>
<ion-list>
<ion-item>Open Right Menu</ion-item>
<ion-item>Open end Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
@@ -43,7 +43,7 @@
</ion-menu>
<ion-menu side="right">
<ion-menu side="end">
<ion-header>
<ion-toolbar>
<ion-title>Hola</ion-title>
@@ -75,10 +75,10 @@
<ion-button onclick="openDefault()">Menu Button Will Open Default</ion-button>
</div>
<div>
<ion-button onclick="openLeft()">Menu Button Will Open Left</ion-button>
<ion-button onclick="openStart()">Menu Button Will Open start</ion-button>
</div>
<div>
<ion-button onclick="openRight()">Menu Button Will Open Right</ion-button>
<ion-button onclick="openEnd()">Menu Button Will Open end</ion-button>
</div>
</ion-content>
@@ -94,16 +94,16 @@
menuButton.menu = null;
}
async function openLeft() {
async function openStart() {
const menuButton = document.querySelector('ion-menu-toggle');
await menuButton.componentOnReady();
menuButton.menu = 'left';
menuButton.menu = 'start';
}
async function openRight() {
async function openEnd() {
const menuButton = document.querySelector('ion-menu-toggle');
await menuButton.componentOnReady();
menuButton.menu = 'right';
menuButton.menu = 'end';
}
</script>
<style>

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

@@ -88,7 +88,7 @@ export class Menu {
@Watch('side')
protected sideChanged() {
this.isRightSide = isRightSide(this.side);
this.isRightSide = isRightSide(this.side as Side);
}
/**

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

@@ -42,7 +42,7 @@ If true, the menu will persist on child pages.
#### side
string
Which side of the view the menu should be placed. Default `"start"`.
@@ -100,7 +100,7 @@ If true, the menu will persist on child pages.
#### side
string
Which side of the view the menu should be placed. Default `"start"`.

2
core/src/components/menu/test/basic/e2e.js
View File

@@ -23,7 +23,7 @@ platforms.forEach(platform => {
return page.navigate('#left');
});
register('should open left menu', driver => {
register('should Open start menu', driver => {
const page = new E2ETestPage(driver, platform);
return page.present('left');
});

36
core/src/components/menu/test/basic/index.html
View File

@@ -19,7 +19,7 @@
<body>
<ion-app>
<ion-menu side="left" class="e2eLeftMenu">
<ion-menu side="start" class="e2eLeftMenu">
<ion-header>
<ion-toolbar color="secondary">
@@ -29,7 +29,7 @@
<ion-content>
<ion-list>
<ion-item>Open Right Menu</ion-item>
<ion-item>Open end Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
@@ -52,7 +52,7 @@
</ion-menu>
<ion-menu side="right">
<ion-menu side="end">
<ion-header>
<ion-toolbar>
<ion-title>Hola</ion-title>
@@ -74,8 +74,8 @@
<ion-content padding>
<p>
<ion-button id="left" onclick="openLeft()">Open left menu</ion-button>
<ion-button onclick="openRight()">Open right menu</ion-button>
<ion-button id="left" onclick="openStart()">Open start menu</ion-button>
<ion-button onclick="openEnd()">Open end menu</ion-button>
</p>
<p>
<ion-button onclick="setPush()">Set Push</ion-button>
@@ -101,28 +101,28 @@
<script>
const menu = document.querySelector('ion-menu-controller');
function openLeft() {
console.log('Open left menu');
menu.open('left');
function openStart() {
console.log('Open start menu');
menu.open('start');
}
function openRight() {
console.log('Open right menu');
menu.open('right');
function openEnd() {
console.log('Open end menu');
menu.open('end');
}
function setPush() {
menu.get('left').type = 'push';
menu.get('right').type = 'push';
menu.get('start').type = 'push';
menu.get('end').type = 'push';
}
function setOverlay() {
menu.get('left').type = 'overlay';
menu.get('right').type = 'overlay';
menu.get('start').type = 'overlay';
menu.get('end').type = 'overlay';
}
function setReveal() {
menu.get('left').type = 'reveal';
menu.get('right').type = 'reveal';
menu.get('start').type = 'reveal';
menu.get('end').type = 'reveal';
}
function setEnabled() {
menu.get('left').swipeEnabled = false;
menu.get('start').swipeEnabled = false;
}
</script>
</body>

36
core/src/components/menu/test/preview/index.html
View File

@@ -19,7 +19,7 @@
<body>
<ion-app>
<ion-menu side="left" class="e2eLeftMenu">
<ion-menu side="start" class="e2eLeftMenu">
<ion-header>
<ion-toolbar color="secondary">
@@ -29,7 +29,7 @@
<ion-content>
<ion-list>
<ion-item>Open Right Menu</ion-item>
<ion-item>Open end Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
@@ -52,7 +52,7 @@
</ion-menu>
<ion-menu side="right">
<ion-menu side="end">
<ion-header>
<ion-toolbar>
<ion-title>Hola</ion-title>
@@ -74,8 +74,8 @@
<ion-content padding>
<p>
<ion-button id="left" onclick="openLeft()">Open left menu</ion-button>
<ion-button onclick="openRight()">Open right menu</ion-button>
<ion-button id="left" onclick="openStart()">Open start menu</ion-button>
<ion-button onclick="openEnd()">Open end menu</ion-button>
</p>
<p>
<ion-button onclick="setPush()">Set Push</ion-button>
@@ -101,28 +101,28 @@
<script>
const menu = document.querySelector('ion-menu-controller');
function openLeft() {
console.log('Open left menu');
menu.open('left');
function openStart() {
console.log('Open start menu');
menu.open('start');
}
function openRight() {
console.log('Open right menu');
menu.open('right');
function openEnd() {
console.log('Open end menu');
menu.open('end');
}
function setPush() {
menu.get('left').type = 'push';
menu.get('right').type = 'push';
menu.get('start').type = 'push';
menu.get('end').type = 'push';
}
function setOverlay() {
menu.get('left').type = 'overlay';
menu.get('right').type = 'overlay';
menu.get('start').type = 'overlay';
menu.get('end').type = 'overlay';
}
function setReveal() {
menu.get('left').type = 'reveal';
menu.get('right').type = 'reveal';
menu.get('start').type = 'reveal';
menu.get('end').type = 'reveal';
}
function setEnabled() {
menu.get('left').swipeEnabled = false;
menu.get('start').swipeEnabled = false;
}
</script>
</body>

8
core/src/components/menu/test/standalone/index.html
View File

@@ -9,7 +9,7 @@
</head>
<body>
<ion-menu side="left">
<ion-menu side="start">
<ion-header>
<ion-toolbar color="secondary">
<ion-title>Left Menu</ion-title>
@@ -18,7 +18,7 @@
<ion-content>
<ion-list>
<ion-item>Open Right Menu</ion-item>
<ion-item>Open end Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
@@ -51,8 +51,8 @@
<ion-content padding>
<p>
<button class="e2eOpenLeftMenu" onclick="openLeft()">Open left menu</button>
<button onclick="openRight()">Open right menu</button>
<button class="e2eOpenLeftMenu" onclick="openStart()">Open start menu</button>
<button onclick="openEnd()">Open end menu</button>
</p>
<p>
<button onclick="setPush()">Set Push</button>

12
core/src/components/modal/readme.md
View File

@@ -59,7 +59,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
#### component
string
The component to display inside of the modal.
@@ -73,7 +73,7 @@ The data to pass to the modal component.
#### cssClass
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.
@@ -112,7 +112,7 @@ Animation to use when the modal is dismissed.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -151,7 +151,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
#### component
string
The component to display inside of the modal.
@@ -165,7 +165,7 @@ The data to pass to the modal component.
#### css-class
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.
@@ -204,7 +204,7 @@ Animation to use when the modal is dismissed.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

4
core/src/components/nav-push/readme.md
View File

@@ -9,7 +9,7 @@
#### component
string
#### componentProps
@@ -26,7 +26,7 @@ string
#### component
string
#### component-props

4
core/src/components/nav-set-root/readme.md
View File

@@ -9,7 +9,7 @@
#### component
string
#### componentProps
@@ -26,7 +26,7 @@ string
#### component
string
#### component-props

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

@@ -19,7 +19,7 @@ boolean
#### root
string
#### rootParams
@@ -46,7 +46,7 @@ boolean
#### root
string
#### root-params

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

@@ -44,7 +44,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -64,7 +64,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

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

@@ -25,7 +25,7 @@ Array of columns to be displayed in the picker.
#### cssClass
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.
@@ -101,7 +101,7 @@ Array of columns to be displayed in the picker.
#### css-class
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.

12
core/src/components/popover/readme.md
View File

@@ -27,7 +27,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
#### component
string
The component to display inside of the popover.
@@ -41,7 +41,7 @@ The data to pass to the popover component.
#### cssClass
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.
@@ -87,7 +87,7 @@ Animation to use when the popover is dismissed.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -133,7 +133,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
#### component
string
The component to display inside of the popover.
@@ -147,7 +147,7 @@ The data to pass to the popover component.
#### css-class
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.
@@ -193,7 +193,7 @@ Animation to use when the popover is dismissed.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

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

@@ -61,7 +61,7 @@ Indicates that the user cannot interact with the control.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -109,7 +109,7 @@ Indicates that the user cannot interact with the control.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

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

@@ -93,7 +93,7 @@ Minimum integer value of the range. Defaults to `0`.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -177,7 +177,7 @@ Minimum integer value of the range. Defaults to `0`.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

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

@@ -40,7 +40,7 @@ If true, the refresher will be hidden. Defaults to `true`.
#### pullMax
any
number
The maximum distance of the pull until the refresher
will automatically go into the `refreshing` state.
@@ -80,7 +80,7 @@ If true, the refresher will be hidden. Defaults to `true`.
#### pull-max
any
number
The maximum distance of the pull until the refresher
will automatically go into the `refreshing` state.

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

@@ -58,7 +58,7 @@ export class Refresher {
* will automatically go into the `refreshing` state.
* Defaults to the result of `pullMin + 60`.
*/
@Prop() pullMax = this.pullMin + 60;
@Prop() pullMax: number = this.pullMin + 60;
// TODO: NEVER USED
/**

4
core/src/components/route-redirect/readme.md
View File

@@ -82,7 +82,7 @@ is not specified.
#### to
string
A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL.
When the defined `ion-route-redirect` rule matches, the router will redirect to the path
@@ -113,7 +113,7 @@ is not specified.
#### to
string
A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL.
When the defined `ion-route-redirect` rule matches, the router will redirect to the path

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

@@ -87,7 +87,7 @@ Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -177,7 +177,7 @@ Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

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

@@ -43,7 +43,7 @@ If this property is set, an anchor tag will be rendered.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -93,7 +93,7 @@ If this property is set, an anchor tag will be rendered.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

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

@@ -25,7 +25,7 @@ boolean
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -55,7 +55,7 @@ boolean
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

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

@@ -23,7 +23,7 @@ If true, the element is selected.
#### value
string
The text value of the option.
@@ -46,7 +46,7 @@ If true, the element is selected.
#### value
string
The text value of the option.

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

@@ -110,7 +110,7 @@ The text to display instead of the selected option's value.
#### value
string
the value of the select.
@@ -186,7 +186,7 @@ The text to display instead of the selected option's value.
#### value
string
the value of the select.

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

@@ -54,7 +54,7 @@ Duration of the spinner animation in milliseconds. The default varies based on t
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -97,7 +97,7 @@ Duration of the spinner animation in milliseconds. The default varies based on t
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

4
core/src/components/split-pane/readme.md
View File

@@ -124,7 +124,7 @@ If true, the split pane will be hidden. Defaults to `false`.
#### when
string
When the split-pane should be shown.
Can be a CSS media query expression, or a shortcut expression.
@@ -142,7 +142,7 @@ If true, the split pane will be hidden. Defaults to `false`.
#### when
string
When the split-pane should be shown.
Can be a CSS media query expression, or a shortcut expression.

10
core/src/components/split-pane/test/basic/index.html
View File

@@ -12,7 +12,7 @@
<ion-app>
<ion-split-pane id="splitPane">
<ion-menu side="left">
<ion-menu side="start">
<ion-header>
<ion-toolbar color="secondary">
@@ -22,7 +22,7 @@
<ion-content>
<ion-list>
<ion-item>Open Right Menu</ion-item>
<ion-item>Open end Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
@@ -78,9 +78,9 @@
<script>
const menuCtrl = document.querySelector('ion-menu-controller');
function openLeft() {
console.log('Open left menu');
menuCtrl.open('left');
function openStart() {
console.log('Open start menu');
menuCtrl.open('start');
}
function push() {

8
core/src/components/split-pane/test/preview/index.html
View File

@@ -12,7 +12,7 @@
<ion-app>
<ion-split-pane id="splitPane">
<ion-menu side="left">
<ion-menu side="start">
<ion-header>
<ion-toolbar color="secondary">
@@ -22,7 +22,7 @@
<ion-content>
<ion-list>
<ion-item>Open Right Menu</ion-item>
<ion-item>Open end Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
@@ -78,8 +78,8 @@
<script>
const menuCtrl = document.querySelector('ion-menu-controller');
function openLeft() {
console.log('Open left menu');
function openStart() {
console.log('Open start menu');
menuCtrl.open('left');
}

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

@@ -76,7 +76,7 @@ string
#### component
string
The component to display inside of the tab.
@@ -170,7 +170,7 @@ string
#### component
string
The component to display inside of the tab.

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

@@ -19,7 +19,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -39,7 +39,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

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

@@ -29,7 +29,7 @@ Text to display in the close button.
#### cssClass
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.
@@ -120,7 +120,7 @@ Text to display in the close button.
#### css-class
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.

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

@@ -70,7 +70,7 @@ Indicates that the user cannot interact with the control.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -118,7 +118,7 @@ Indicates that the user cannot interact with the control.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

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

@@ -37,7 +37,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
@@ -67,7 +67,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.

4
core/src/components/toolbar/test/scenarios/index.html
View File

@@ -173,7 +173,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="left">
<ion-buttons slot="start">
<ion-menu-toggle auto-hide="false">
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
@@ -195,7 +195,7 @@
</ion-button>
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<ion-buttons slot="right">
<ion-buttons slot="end">
<ion-menu-toggle auto-hide="false">
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>

12
core/src/utils/helpers.ts
View File

@@ -34,7 +34,7 @@ export function pointerCoord(ev: any): {x: number, y: number} {
}
return {x: 0, y: 0};
}
export type Side = 'left' | 'right' | 'start' | 'end';
export type Side = 'start' | 'end';
/**
* @hidden
@@ -42,16 +42,14 @@ export type Side = 'left' | 'right' | 'start' | 'end';
* based on the value of dir
* @param side the side
* @param isRTL whether the application dir is rtl
* @param defaultRight whether the default side is right
*/
export function isRightSide(side: Side, defaultRight = false): boolean {
export function isRightSide(side: Side): boolean {
const isRTL = document.dir === 'rtl';
switch (side) {
case 'right': return true;
case 'left': return false;
case 'end': return !isRTL;
case 'start': return isRTL;
default: return defaultRight ? !isRTL : isRTL;
case 'end': return !isRTL;
default:
throw new Error(`"${side}" is not a valid value for [side]. Use "start" or "end" instead.`);
}
}