mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
Merge branch '2.0' into windows-mode
This commit is contained in:
Brandy Carney
98
CHANGELOG.md
98
CHANGELOG.md
@ -1,3 +1,101 @@
|
||||
<a name="2.0.0-beta.2"></a>
|
||||
# [2.0.0-beta.2](https://github.com/driftyco/ionic/compare/v2.0.0-beta.1...v2.0.0-beta.2) (2016-03-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** add max height to alert body so it will overflow ([9c0eebd](https://github.com/driftyco/ionic/commit/9c0eebd)), closes [#5316](https://github.com/driftyco/ionic/issues/5316)
|
||||
* **animation:** ensure final inline styles applied when fallback runs ([4524e5a](https://github.com/driftyco/ionic/commit/4524e5a)), closes [#5484](https://github.com/driftyco/ionic/issues/5484)
|
||||
* **generate:** output correct Sass import for pages ([3784f47](https://github.com/driftyco/ionic/commit/3784f47)), closes [#5641](https://github.com/driftyco/ionic/issues/5641)
|
||||
* **menu:** fix enabled check ([8564d79](https://github.com/driftyco/ionic/commit/8564d79))
|
||||
* **nav:** immediately stop if view removed before trans finished ([4fabade](https://github.com/driftyco/ionic/commit/4fabade))
|
||||
* **overlay:** do not dom cache views before overlays ([4cae151](https://github.com/driftyco/ionic/commit/4cae151)), closes [#5483](https://github.com/driftyco/ionic/issues/5483)
|
||||
* **refresher:** get scrollTop from the scroll element to prevent refreshing when dragging up ([ea884de](https://github.com/driftyco/ionic/commit/ea884de)), closes [#5207](https://github.com/driftyco/ionic/issues/5207)
|
||||
* **sass:** rename brightness/inverse sass functions ([892b007](https://github.com/driftyco/ionic/commit/892b007)), closes [#5542](https://github.com/driftyco/ionic/issues/5542)
|
||||
* **tabs:** pop tab page to parent nav ([b9eec24](https://github.com/driftyco/ionic/commit/b9eec24)), closes [#5196](https://github.com/driftyco/ionic/issues/5196)
|
||||
* **toolbar:** add a min-width to the toolbar content so that it won't overlap buttons ([5fb1e08](https://github.com/driftyco/ionic/commit/5fb1e08)), closes [#5657](https://github.com/driftyco/ionic/issues/5657)
|
||||
|
||||
### Features
|
||||
|
||||
* **checkbox:** add change event ([2596731](https://github.com/driftyco/ionic/commit/2596731))
|
||||
* **infiniteScroll:** add infinite scroll ([0480fa3](https://github.com/driftyco/ionic/commit/0480fa3)), closes [#5415](https://github.com/driftyco/ionic/issues/5415)
|
||||
* **input:** default autocomplete/autocorrect=off, fix autofocus ([b53d707](https://github.com/driftyco/ionic/commit/b53d707))
|
||||
* **menu:** grab the menu by side only if it is enabled ([a2b7a21](https://github.com/driftyco/ionic/commit/a2b7a21))
|
||||
* **NavController:** prevent other lifecycle events from firing ([6b9e59d](https://github.com/driftyco/ionic/commit/6b9e59d)), closes [#5516](https://github.com/driftyco/ionic/issues/5516)
|
||||
* **prodMode:** set isProd() when prodMode set in @App config ([3c8daa0](https://github.com/driftyco/ionic/commit/3c8daa0))
|
||||
* **spinner:** SVG spinners ([6c73446](https://github.com/driftyco/ionic/commit/6c73446))
|
||||
* **toggle:** add change event ([730cccd](https://github.com/driftyco/ionic/commit/730cccd))
|
||||
|
||||
### Refactor
|
||||
|
||||
* **alert:** remove tabbarIcons and add tabbarLayout which accepts different values ([8cfebe1](https://github.com/driftyco/ionic/commit/8cfebe1)), closes [#5625](https://github.com/driftyco/ionic/issues/5625)
|
||||
* **menu:** improve menu get lookup ([004e635](https://github.com/driftyco/ionic/commit/004e635)), closes [#5535](https://github.com/driftyco/ionic/issues/5535)
|
||||
* **tabs:** remove duplicated styles from imports ([d5ebf3f](https://github.com/driftyco/ionic/commit/d5ebf3f)), closes [#5624](https://github.com/driftyco/ionic/issues/5624)
|
||||
* **searchbar:** add class to searchbar when hideCancel is passed ([a0f0004](https://github.com/driftyco/ionic/commit/a0f0004))
|
||||
|
||||
### Breaking Changes
|
||||
|
||||
#### New npm module
|
||||
|
||||
The npm module has been renamed from `ionic-framework` to `ionic-angular`.
|
||||
|
||||
Update package.json to reflect this:
|
||||
|
||||
```
|
||||
"ionic-angular": "2.0.0-beta.2",
|
||||
```
|
||||
|
||||
imports from the framework were:
|
||||
|
||||
```js
|
||||
import {Platform} from 'ionic-framework/ionic';
|
||||
```
|
||||
|
||||
and are now:
|
||||
|
||||
```js
|
||||
import {Platform} from 'ionic-angular';
|
||||
```
|
||||
|
||||
#### Infinite Scroll
|
||||
|
||||
Infinite Scroll has been added: [docs](http://ionicframework.com/docs/v2/api/components/infinite-scroll/InfiniteScroll/)
|
||||
|
||||
#### Refresher:
|
||||
|
||||
- `<ion-refresher>` now takes a child `<ion-refresher-content>`
|
||||
component.
|
||||
- Custom refresh content components can now be replaced for Ionic's
|
||||
default refresher content.
|
||||
- Properties `pullingIcon`, `pullingText` and `refreshingText` have
|
||||
been moved to the `<ion-refresher-content>` component.
|
||||
- `spinner` property has been renamed to `refreshingSpinner` and now
|
||||
goes on the `<ion-refresher-content>` component.
|
||||
- `refreshingIcon` property is no longer an input, but instead
|
||||
`refreshingSpinner` should be used.
|
||||
|
||||
Was:
|
||||
|
||||
```
|
||||
<ion-refresher (refresh)="doRefresh($event)"
|
||||
pullingIcon="arrow-dropdown">
|
||||
</ion-refresher>
|
||||
```
|
||||
|
||||
Now:
|
||||
|
||||
```
|
||||
<ion-refresher (refresh)="doRefresh($event)">
|
||||
<ion-refresher-content
|
||||
pullingIcon="arrow-dropdown"></ion-refresher-content>
|
||||
</ion-refresher>
|
||||
```
|
||||
|
||||
#### Tabs
|
||||
|
||||
Input property `tabbarIcons` has been replaced by `tabbarLayout` and accepts the following values: `icon-top`, `icon-left`, `icon-right`, `icon-bottom`, `icon-hide`, `title-hide`.
|
||||
|
||||
|
||||
<a name="2.0.0-beta.1"></a>
|
||||
# [2.0.0-beta.1](https://github.com/driftyco/ionic/compare/v2.0.0-beta.0...v2.0.0-beta.1) (2016-02-18)
|
||||
|
||||
|
||||
@ -25,6 +25,14 @@ export class InitialPage {
|
||||
var androidSheet = {
|
||||
title: 'Albums',
|
||||
buttons: [
|
||||
{
|
||||
text: 'Delete',
|
||||
style: 'destructive',
|
||||
icon: 'md-trash',
|
||||
handler: () => {
|
||||
console.log('Destructive clicked');
|
||||
}
|
||||
},
|
||||
{ text: 'Share',
|
||||
icon: 'share',
|
||||
handler: () => {
|
||||
@ -43,14 +51,6 @@ export class InitialPage {
|
||||
console.log('Favorite clicked');
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Delete',
|
||||
style: 'destructive',
|
||||
icon: 'md-trash',
|
||||
handler: () => {
|
||||
console.log('Destructive clicked');
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Cancel',
|
||||
style: 'cancel',
|
||||
@ -65,6 +65,13 @@ export class InitialPage {
|
||||
|
||||
let actionSheet = ActionSheet.create( androidSheet || {
|
||||
buttons: [
|
||||
{
|
||||
text: 'Delete',
|
||||
style: 'destructive',
|
||||
handler: () => {
|
||||
console.log('Destructive clicked');
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Share',
|
||||
handler: () => {
|
||||
@ -83,13 +90,6 @@ export class InitialPage {
|
||||
console.log('Favorite clicked');
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Delete',
|
||||
style: 'destructive',
|
||||
handler: () => {
|
||||
console.log('Destructive clicked');
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Cancel',
|
||||
style: 'cancel',
|
||||
|
||||
@ -671,12 +671,13 @@ function buildDemoSass(isProductionMode) {
|
||||
*/
|
||||
require('./scripts/snapshot/snapshot.task')(gulp, argv, buildConfig);
|
||||
|
||||
// requires bundle.system to be run once
|
||||
gulp.task('karma', ['tests'], function() {
|
||||
var karma = require('karma').server;
|
||||
return karma.start({ configFile: __dirname + '/scripts/karma/karma.conf.js' })
|
||||
});
|
||||
|
||||
gulp.task('karma-watch', function() {
|
||||
gulp.task('karma-watch', ['tests'], function() {
|
||||
var karma = require('karma').server;
|
||||
return karma.start({ configFile: __dirname + '/scripts/karma/karma-watch.conf.js' })
|
||||
});
|
||||
|
||||
@ -4,85 +4,91 @@
|
||||
// iOS Action Sheet
|
||||
// --------------------------------------------------
|
||||
|
||||
$action-sheet-ios-group-margin: 10px !default;
|
||||
$action-sheet-ios-background-color: #f9f9f9 !default;
|
||||
$action-sheet-ios-text-align: center !default;
|
||||
$action-sheet-ios-padding: 0 10px !default;
|
||||
$action-sheet-ios-group-margin-bottom: 10px !default;
|
||||
$action-sheet-ios-background: #f9f9f9 !default;
|
||||
|
||||
$action-sheet-ios-border-color: #d6d6da !default;
|
||||
$action-sheet-ios-border-radius: 13px !default;
|
||||
|
||||
$action-sheet-ios-title-padding: 1.5rem !default;
|
||||
$action-sheet-ios-title-color: #8f8f8f !default;
|
||||
$action-sheet-ios-title-font-size: 1.3rem !default;
|
||||
$action-sheet-ios-title-font-weight: 400 !default;
|
||||
$action-sheet-ios-title-border-radius: 0 !default;
|
||||
|
||||
$action-sheet-ios-button-height: 5.6rem !default;
|
||||
$action-sheet-ios-button-min-height: 5.6rem !default;
|
||||
$action-sheet-ios-button-padding: 18px !default;
|
||||
$action-sheet-ios-button-text-color: #007aff !default;
|
||||
$action-sheet-ios-button-font-size: 2rem !default;
|
||||
$action-sheet-ios-button-border-width: 1px !default;
|
||||
$action-sheet-ios-button-border-style: solid !default;
|
||||
$action-sheet-ios-button-border-color: #d1d3d6 !default;
|
||||
$action-sheet-ios-button-background-active-color: #ebebeb !default;
|
||||
$action-sheet-ios-button-background: transparent !default;
|
||||
$action-sheet-ios-button-background-activated: #ebebeb !default;
|
||||
|
||||
$action-sheet-ios-destructive-button-text-color: #f53d3d !default;
|
||||
$action-sheet-ios-cancel-button-background-color: #fff !default;
|
||||
$action-sheet-ios-button-destructive-text-color: #f53d3d !default;
|
||||
$action-sheet-ios-button-cancel-background: #fff !default;
|
||||
$action-sheet-ios-button-cancel-font-weight: 600 !default;
|
||||
|
||||
|
||||
ion-action-sheet {
|
||||
text-align: center;
|
||||
text-align: $action-sheet-ios-text-align;
|
||||
}
|
||||
|
||||
.action-sheet-container {
|
||||
padding: 0 $action-sheet-ios-group-margin;
|
||||
padding: $action-sheet-ios-padding;
|
||||
}
|
||||
|
||||
.action-sheet-group {
|
||||
overflow: hidden;
|
||||
margin-bottom: $action-sheet-ios-group-margin - 2;
|
||||
margin-bottom: $action-sheet-ios-group-margin-bottom - 2;
|
||||
border-radius: $action-sheet-ios-border-radius;
|
||||
background: $action-sheet-ios-background-color;
|
||||
background: $action-sheet-ios-background;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: $action-sheet-ios-group-margin;
|
||||
margin-bottom: $action-sheet-ios-group-margin-bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.action-sheet-title {
|
||||
padding: 1.5rem;
|
||||
padding: $action-sheet-ios-title-padding;
|
||||
font-size: $action-sheet-ios-title-font-size;
|
||||
font-weight: 400;
|
||||
color: $action-sheet-ios-title-color;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-sheet-title {
|
||||
border-bottom: 1px solid $action-sheet-ios-border-color;
|
||||
font-weight: $action-sheet-ios-title-font-weight;
|
||||
border-radius: $action-sheet-ios-title-border-radius;
|
||||
text-align: $action-sheet-ios-text-align;
|
||||
border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
|
||||
}
|
||||
|
||||
.action-sheet-button {
|
||||
padding: $action-sheet-ios-button-padding;
|
||||
min-height: $action-sheet-ios-button-height;
|
||||
border-bottom: 1px solid $action-sheet-ios-border-color;
|
||||
min-height: $action-sheet-ios-button-min-height;
|
||||
border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
|
||||
font-size: $action-sheet-ios-button-font-size;
|
||||
color: $action-sheet-ios-button-text-color;
|
||||
background: transparent;
|
||||
background: $action-sheet-ios-button-background;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
margin-top:-1px;
|
||||
background: $action-sheet-ios-button-background-active-color;
|
||||
border-bottom-color: $action-sheet-ios-button-background-active-color;
|
||||
border-top:1px solid $action-sheet-ios-button-background-active-color;
|
||||
margin-top: -$action-sheet-ios-button-border-width;
|
||||
background: $action-sheet-ios-button-background-activated;
|
||||
border-bottom-color: $action-sheet-ios-button-background-activated;
|
||||
border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated;
|
||||
}
|
||||
}
|
||||
|
||||
.action-sheet-destructive {
|
||||
color: $action-sheet-ios-destructive-button-text-color;
|
||||
color: $action-sheet-ios-button-destructive-text-color;
|
||||
}
|
||||
|
||||
.action-sheet-cancel {
|
||||
font-weight: 600;
|
||||
background: $action-sheet-ios-cancel-button-background-color;
|
||||
font-weight: $action-sheet-ios-button-cancel-font-weight;
|
||||
background: $action-sheet-ios-button-cancel-background;
|
||||
}
|
||||
|
||||
&.hairlines {
|
||||
|
||||
@ -4,19 +4,25 @@
|
||||
// Material Design Action Sheet
|
||||
// --------------------------------------------------
|
||||
|
||||
$action-sheet-md-background-color: #fafafa !default;
|
||||
$action-sheet-md-text-align: left !default;
|
||||
$action-sheet-md-background: #fafafa !default;
|
||||
$action-sheet-md-group-margin-bottom: 8px !default;
|
||||
|
||||
$action-sheet-md-title-color: #757575 !default;
|
||||
$action-sheet-md-title-font-size: 1.6rem !default;
|
||||
$action-sheet-md-title-padding: 19px 16px 17px !default;
|
||||
|
||||
$action-sheet-md-button-height: 4.8rem !default;
|
||||
$action-sheet-md-button-min-height: 4.8rem !default;
|
||||
$action-sheet-md-button-text-color: #222 !default;
|
||||
$action-sheet-md-button-font-size: 1.6rem !default;
|
||||
$action-sheet-md-button-padding: 0 16px !default;
|
||||
$action-sheet-md-button-background-active-color: #f1f1f1 !default;
|
||||
$action-sheet-md-button-background: transparent !default;
|
||||
$action-sheet-md-button-background-activated: #f1f1f1 !default;
|
||||
|
||||
$action-sheet-md-icon-font-size: 2.4rem !default;
|
||||
$action-sheet-md-icon-min-width: 24px !default;
|
||||
$action-sheet-md-icon-text-align: center !default;
|
||||
$action-sheet-md-icon-vertical-align: middle !default;
|
||||
$action-sheet-md-icon-margin: 0 28px 0 0 !default;
|
||||
|
||||
|
||||
@ -24,48 +30,35 @@ $action-sheet-md-icon-margin: 0 28px 0 0 !default;
|
||||
padding: $action-sheet-md-title-padding;
|
||||
font-size: $action-sheet-md-title-font-size;
|
||||
color: $action-sheet-md-title-color;
|
||||
text-align: left;
|
||||
text-align: $action-sheet-md-text-align;
|
||||
}
|
||||
|
||||
.action-sheet-button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: $action-sheet-md-button-padding;
|
||||
min-height: $action-sheet-md-button-height;
|
||||
min-height: $action-sheet-md-button-min-height;
|
||||
font-size: $action-sheet-md-button-font-size;
|
||||
font-weight: normal;
|
||||
color: $action-sheet-md-button-text-color;
|
||||
background-color: transparent;
|
||||
text-align: left;
|
||||
background: $action-sheet-md-button-background;
|
||||
text-align: $action-sheet-md-text-align;
|
||||
|
||||
&.activated {
|
||||
background: $action-sheet-md-button-background-active-color;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background: $action-sheet-md-button-background-activated;
|
||||
}
|
||||
}
|
||||
|
||||
.action-sheet-icon {
|
||||
display: inline-block;
|
||||
margin: $action-sheet-md-icon-margin;
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
min-width: $action-sheet-md-icon-min-width;
|
||||
text-align: $action-sheet-md-icon-text-align;
|
||||
vertical-align: $action-sheet-md-icon-vertical-align;
|
||||
font-size: $action-sheet-md-icon-font-size;
|
||||
}
|
||||
|
||||
.action-sheet-group {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
background-color: $action-sheet-md-background-color;
|
||||
background: $action-sheet-md-background;
|
||||
|
||||
&:last-child .action-sheet-button {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: $action-sheet-md-group-margin-bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.action-sheet-cancel {
|
||||
background-color: $action-sheet-md-background-color;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@ -4,45 +4,33 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
$action-sheet-width: 100% !default;
|
||||
$action-sheet-max-width: 520px !default;
|
||||
$action-sheet-max-width: 500px !default;
|
||||
|
||||
|
||||
ion-action-sheet {
|
||||
position: absolute;
|
||||
width: $action-sheet-width;
|
||||
height: $action-sheet-width;
|
||||
z-index: $z-index-overlay;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
z-index: $z-index-overlay;
|
||||
}
|
||||
|
||||
.action-sheet-wrapper {
|
||||
position: absolute;
|
||||
width: $action-sheet-width;
|
||||
max-width: $action-sheet-max-width;
|
||||
z-index: $z-index-overlay-wrapper;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
display: block;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
.action-sheet-container {
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.action-sheet-button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
|
||||
&.activated {
|
||||
box-shadow: none;
|
||||
}
|
||||
width: $action-sheet-width;
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@ import {ViewController} from '../nav/view-controller';
|
||||
* An Action Sheet is a dialog that lets the user choose from a set of
|
||||
* options. It appears on top of the app's content, and must be manually
|
||||
* dismissed by the user before they can resume interaction with the app.
|
||||
* Dangerous (destructive) options are made obvious. There are easy
|
||||
* Dangerous (destructive) options are made obvious in `ios` mode. There are easy
|
||||
* ways to cancel out of the action sheet, such as tapping the backdrop or
|
||||
* hitting the escape key on desktop.
|
||||
*
|
||||
@ -26,16 +26,16 @@ import {ViewController} from '../nav/view-controller';
|
||||
* action sheet can also optionally have a `title` and a `subTitle`.
|
||||
*
|
||||
* A button's `role` property can either be `destructive` or `cancel`. Buttons
|
||||
* without a role property will have a default look for its platform. Buttons
|
||||
* without a role property will have the default look for the platform. Buttons
|
||||
* with the `cancel` role will always load as the bottom button, no matter where
|
||||
* it shows up in the array. All other buttons will show up in the order they
|
||||
* they are in the array. All other buttons will be displayed in the order they
|
||||
* have been added to the `buttons` array. Note: We recommend that `destructive`
|
||||
* buttons show be the first button in the array, making it the button on top.
|
||||
* buttons are always the first button in the array, making them the top button.
|
||||
* Additionally, if the action sheet is dismissed by tapping the backdrop, then
|
||||
* it will fire the handler from the button with the cancel role.
|
||||
*
|
||||
* Its shorthand is to add all the action sheet's options from within the
|
||||
* `ActionSheet.create(opts)` first argument. Otherwise the action sheet's
|
||||
* You can pass all of the action sheet's options in the first argument of
|
||||
* the create method: `ActionSheet.create(opts)`. Otherwise the action sheet's
|
||||
* instance has methods to add options, like `setTitle()` or `addButton()`.
|
||||
*
|
||||
* @usage
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {App, Page, ActionSheet, Modal, NavController, ViewController} from 'ionic-angular';
|
||||
import {App, Page, ActionSheet, Modal, NavController, ViewController, Platform} from 'ionic-angular';
|
||||
|
||||
|
||||
@Page({
|
||||
@ -7,31 +7,34 @@ import {App, Page, ActionSheet, Modal, NavController, ViewController} from 'ioni
|
||||
class E2EPage {
|
||||
result: string = '';
|
||||
|
||||
constructor(private nav: NavController) {}
|
||||
constructor(private nav: NavController, private platform: Platform) {}
|
||||
|
||||
presentActionSheet1() {
|
||||
this.result = '';
|
||||
|
||||
let actionSheet = ActionSheet.create({
|
||||
title: 'Modify your album',
|
||||
title: 'Albums',
|
||||
buttons: [
|
||||
{
|
||||
text: 'Destructive',
|
||||
text: 'Delete',
|
||||
role: 'destructive',
|
||||
icon: this.platform.is('android') ? 'trash' : null,
|
||||
handler: () => {
|
||||
console.log('Destructive clicked');
|
||||
this.result = 'Destructive';
|
||||
console.log('Delete clicked');
|
||||
this.result = 'Deleted';
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Archive',
|
||||
text: 'Share',
|
||||
icon: this.platform.is('android') ? 'share' : null,
|
||||
handler: () => {
|
||||
console.log('Archive clicked');
|
||||
this.result = 'Archived';
|
||||
console.log('Share clicked');
|
||||
this.result = 'Shared';
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Open Modal',
|
||||
text: 'Play',
|
||||
icon: this.platform.is('android') ? 'arrow-dropright-circle' : null,
|
||||
handler: () => {
|
||||
let modal = Modal.create(ModalPage);
|
||||
this.nav.present(modal);
|
||||
@ -40,9 +43,18 @@ class E2EPage {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Favorite',
|
||||
icon: this.platform.is('android') ? 'heart' : null,
|
||||
handler: () => {
|
||||
console.log('Favorite clicked');
|
||||
this.result = 'Favorited';
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Cancel',
|
||||
role: 'cancel', // will always sort to be on the bottom
|
||||
icon: this.platform.is('android') ? 'close' : null,
|
||||
handler: () => {
|
||||
console.log('Cancel clicked');
|
||||
this.result = 'Canceled';
|
||||
@ -94,7 +106,7 @@ class E2EPage {
|
||||
@Page({
|
||||
template: `
|
||||
<ion-toolbar>
|
||||
<ion-buttons>
|
||||
<ion-buttons start>
|
||||
<button (click)="dismiss()">Close</button>
|
||||
</ion-buttons>
|
||||
<ion-title>Modal</ion-title>
|
||||
|
||||
@ -5,12 +5,12 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
$alert-ios-max-width: 270px !default;
|
||||
$alert-ios-background: rgba(0,0,0,0) !default;
|
||||
$alert-ios-border-radius: 13px !default;
|
||||
$alert-ios-background-color: #f8f8f8 !default;
|
||||
$alert-ios-background: #f8f8f8 !default;
|
||||
$alert-ios-box-shadow: none !default;
|
||||
|
||||
$alert-ios-head-padding: 12px 16px 7px !default;
|
||||
$alert-ios-head-text-align: center !default;
|
||||
$alert-ios-head-padding: 12px 16px 7px !default;
|
||||
|
||||
$alert-ios-title-margin-top: 8px !default;
|
||||
$alert-ios-title-font-weight: 600 !default;
|
||||
@ -22,6 +22,9 @@ $alert-ios-message-padding: 0px 16px 21px !default;
|
||||
$alert-ios-message-text-color: inherit !default;
|
||||
$alert-ios-message-text-align: center !default;
|
||||
$alert-ios-message-font-size: 13px !default;
|
||||
$alert-ios-message-padding-empty: 0 0 12px 0 !default;
|
||||
|
||||
$alert-ios-content-max-height: 240px !default;
|
||||
|
||||
$alert-ios-input-padding: 6px !default;
|
||||
$alert-ios-input-margin-top: 10px !default;
|
||||
@ -29,35 +32,46 @@ $alert-ios-input-background-color: #fff !default;
|
||||
$alert-ios-input-border: 1px solid #ccc !default;
|
||||
$alert-ios-input-border-radius: 4px !default;
|
||||
|
||||
$alert-ios-button-group-flex-wrap: wrap !default;
|
||||
|
||||
$alert-ios-button-margin: 0 !default;
|
||||
$alert-ios-button-flex: 1 1 auto !default;
|
||||
$alert-ios-button-min-height: 44px !default;
|
||||
$alert-ios-button-min-width: 50% !default;
|
||||
$alert-ios-button-font-size: 17px !default;
|
||||
$alert-ios-button-text-color: map-get($colors-ios, primary) !default;
|
||||
$alert-ios-button-background-color: transparent !default;
|
||||
$alert-ios-button-background-color-activated: #e9e9e9 !default;
|
||||
|
||||
$alert-ios-button-border-radius: 0 !default;
|
||||
$alert-ios-button-border-width: 1px !default;
|
||||
$alert-ios-button-border-style: solid !default;
|
||||
$alert-ios-button-border-color: #dbdbdf !default;
|
||||
$alert-ios-button-activated-background-color: #e9e9e9 !default;
|
||||
|
||||
$alert-checkbox-ios-icon-size: 21px !default;
|
||||
$alert-checkbox-ios-icon-border-radius: 50% !default;
|
||||
$alert-checkbox-ios-icon-border-width: 1px !default;
|
||||
$alert-checkbox-ios-icon-border-style: solid !default;
|
||||
$alert-checkbox-ios-icon-border-color-off: $list-ios-border-color !default;
|
||||
$alert-checkbox-ios-icon-border-color-on: map-get($colors-ios, primary) !default;
|
||||
$alert-checkbox-ios-background-color-off: $list-ios-background-color !default;
|
||||
$alert-checkbox-ios-background-color-on: map-get($colors-ios, primary) !default;
|
||||
$alert-checkbox-ios-icon-checkmark-width: $alert-checkbox-ios-icon-border-width !default;
|
||||
$alert-checkbox-ios-icon-checkmark-style: $alert-checkbox-ios-icon-border-style !default;
|
||||
$alert-checkbox-ios-icon-checkmark-color: $background-ios-color !default;
|
||||
$alert-ios-button-main-font-weight: bold !default;
|
||||
|
||||
$alert-ios-radio-label-padding: 13px !default;
|
||||
$alert-ios-radio-icon-min-width: 30px !default;
|
||||
|
||||
$alert-ios-checkbox-icon-size: 21px !default;
|
||||
$alert-ios-checkbox-icon-border-radius: 50% !default;
|
||||
$alert-ios-checkbox-icon-border-width: 1px !default;
|
||||
$alert-ios-checkbox-icon-border-style: solid !default;
|
||||
$alert-ios-checkbox-icon-border-color-off: $list-ios-border-color !default;
|
||||
$alert-ios-checkbox-icon-border-color-on: map-get($colors-ios, primary) !default;
|
||||
$alert-ios-checkbox-background-color-off: $list-ios-background-color !default;
|
||||
$alert-ios-checkbox-background-color-on: map-get($colors-ios, primary) !default;
|
||||
$alert-ios-checkbox-icon-checkmark-width: $alert-ios-checkbox-icon-border-width !default;
|
||||
$alert-ios-checkbox-icon-checkmark-style: $alert-ios-checkbox-icon-border-style !default;
|
||||
$alert-ios-checkbox-icon-checkmark-color: $background-ios-color !default;
|
||||
|
||||
ion-alert {
|
||||
background: $alert-ios-background;
|
||||
}
|
||||
|
||||
.alert-wrapper {
|
||||
border-radius: $alert-ios-border-radius;
|
||||
background-color: $alert-ios-background-color;
|
||||
max-width: $alert-ios-max-width;
|
||||
border-radius: $alert-ios-border-radius;
|
||||
background-color: $alert-ios-background;
|
||||
|
||||
box-shadow: $alert-ios-box-shadow;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -66,8 +80,8 @@ ion-alert {
|
||||
// --------------------------------------------------
|
||||
|
||||
.alert-head {
|
||||
padding: $alert-ios-head-padding;
|
||||
text-align: $alert-ios-head-text-align;
|
||||
padding: $alert-ios-head-padding;
|
||||
}
|
||||
|
||||
.alert-title {
|
||||
@ -94,10 +108,10 @@ ion-alert {
|
||||
}
|
||||
|
||||
.alert-message {
|
||||
max-height: 240px;
|
||||
max-height: $alert-ios-content-max-height;
|
||||
|
||||
&:empty {
|
||||
padding: 0 0 12px 0;
|
||||
padding: $alert-ios-message-padding-empty;
|
||||
}
|
||||
}
|
||||
|
||||
@ -120,8 +134,8 @@ ion-alert {
|
||||
|
||||
.alert-radio-group,
|
||||
.alert-checkbox-group {
|
||||
max-height: 240px;
|
||||
border-top: 1px solid $alert-ios-button-border-color;
|
||||
max-height: $alert-ios-content-max-height;
|
||||
border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
@ -138,8 +152,7 @@ ion-alert {
|
||||
.alert-radio-label {
|
||||
flex: 1;
|
||||
order: 0;
|
||||
padding: 13px;
|
||||
text-align: auto;
|
||||
padding: $alert-ios-radio-label-padding;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
@ -148,7 +161,7 @@ ion-alert {
|
||||
.alert-radio-icon {
|
||||
position: relative;
|
||||
order: 1;
|
||||
min-width: 30px;
|
||||
min-width: $alert-ios-radio-icon-min-width;
|
||||
}
|
||||
|
||||
.alert-radio[aria-checked=true] {
|
||||
@ -187,24 +200,24 @@ ion-alert {
|
||||
.alert-checkbox-icon {
|
||||
margin: 10px 6px 10px 16px;
|
||||
position: relative;
|
||||
width: $alert-checkbox-ios-icon-size;
|
||||
height: $alert-checkbox-ios-icon-size;
|
||||
border-radius: $alert-checkbox-ios-icon-border-radius;
|
||||
border-width: $alert-checkbox-ios-icon-border-width;
|
||||
border-style: $alert-checkbox-ios-icon-border-style;
|
||||
border-color: $alert-checkbox-ios-icon-border-color-off;
|
||||
background-color: $alert-checkbox-ios-background-color-off;
|
||||
width: $alert-ios-checkbox-icon-size;
|
||||
height: $alert-ios-checkbox-icon-size;
|
||||
border-radius: $alert-ios-checkbox-icon-border-radius;
|
||||
border-width: $alert-ios-checkbox-icon-border-width;
|
||||
border-style: $alert-ios-checkbox-icon-border-style;
|
||||
border-color: $alert-ios-checkbox-icon-border-color-off;
|
||||
background-color: $alert-ios-checkbox-background-color-off;
|
||||
}
|
||||
|
||||
.alert-checkbox[aria-checked=true] .alert-checkbox-icon {
|
||||
background-color: $alert-checkbox-ios-background-color-on;
|
||||
border-color: $alert-checkbox-ios-icon-border-color-on;
|
||||
background-color: $alert-ios-checkbox-background-color-on;
|
||||
border-color: $alert-ios-checkbox-icon-border-color-on;
|
||||
|
||||
.alert-checkbox-inner {
|
||||
position: absolute;
|
||||
border-width: $alert-checkbox-ios-icon-checkmark-width;
|
||||
border-style: $alert-checkbox-ios-icon-checkmark-style;
|
||||
border-color: $alert-checkbox-ios-icon-checkmark-color;
|
||||
border-width: $alert-ios-checkbox-icon-checkmark-width;
|
||||
border-style: $alert-ios-checkbox-icon-checkmark-style;
|
||||
border-color: $alert-ios-checkbox-icon-checkmark-color;
|
||||
top: 4px;
|
||||
left: 7px;
|
||||
width: 4px;
|
||||
@ -220,34 +233,30 @@ ion-alert {
|
||||
// --------------------------------------------------
|
||||
|
||||
.alert-button-group {
|
||||
flex-wrap: wrap;
|
||||
margin-right: -1px;
|
||||
flex-wrap: $alert-ios-button-group-flex-wrap;
|
||||
margin-right: -$alert-ios-button-border-width;
|
||||
}
|
||||
|
||||
.alert-button {
|
||||
margin: 0;
|
||||
flex: 1 1 auto;
|
||||
min-width: 50%;
|
||||
margin: $alert-ios-button-margin;
|
||||
flex: $alert-ios-button-flex;
|
||||
min-width: $alert-ios-button-min-width;
|
||||
font-size: $alert-ios-button-font-size;
|
||||
height: $alert-ios-button-min-height;
|
||||
border-radius: $alert-ios-button-border-radius;
|
||||
border-top: 1px solid $alert-ios-button-border-color;
|
||||
border-right: 1px solid $alert-ios-button-border-color;
|
||||
border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
|
||||
border-right: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
|
||||
color: $alert-ios-button-text-color;
|
||||
background-color: $alert-ios-button-background-color;
|
||||
overflow: hidden;
|
||||
|
||||
&:last-child {
|
||||
font-weight: bold;
|
||||
font-weight: $alert-ios-button-main-font-weight;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
background-color: $alert-ios-button-activated-background-color;
|
||||
}
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
opacity: 1;
|
||||
background-color: $alert-ios-button-background-color-activated;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -18,19 +18,36 @@ $alert-md-sub-title-font-size: 16px !default;
|
||||
$alert-md-message-font-size: 15px !default;
|
||||
$alert-md-message-padding: 0 24px 24px 24px !default;
|
||||
$alert-md-message-text-color: rgba(0,0,0,.5) !default;
|
||||
$alert-md-message-padding-empty: 0 !default;
|
||||
|
||||
$alert-md-content-max-height: 240px !default;
|
||||
|
||||
$alert-md-input-border-width: 1px !default;
|
||||
$alert-md-input-border-style: solid !default;
|
||||
$alert-md-input-border-color: #dedede !default;
|
||||
$alert-md-input-text-color: #000000 !default;
|
||||
$alert-md-input-highlight-color: map-get($colors-md, primary) !default;
|
||||
$alert-md-input-margin-top: 5px !default;
|
||||
$alert-md-input-margin-bottom: 5px !default;
|
||||
|
||||
$alert-md-input-border-width-focused: 2px !default;
|
||||
$alert-md-input-border-style-focused: $alert-md-input-border-style !default;
|
||||
$alert-md-input-border-color-focused: map-get($colors-md, primary) !default;
|
||||
|
||||
$alert-md-input-margin-top: 5px !default;
|
||||
$alert-md-input-margin-right: 0 !default;
|
||||
$alert-md-input-margin-bottom: 5px !default;
|
||||
$alert-md-input-margin-left: 0 !default;
|
||||
|
||||
$alert-md-button-group-flex-wrap: wrap-reverse !default;
|
||||
$alert-md-button-group-padding: 8px 8px 8px 24px !default;
|
||||
$alert-md-button-group-justify-content: flex-end !default;
|
||||
|
||||
$alert-md-button-padding: 10px !default;
|
||||
$alert-md-button-font-weight: 500 !default;
|
||||
$alert-md-button-text-color: map-get($colors-md, primary) !default;
|
||||
$alert-md-button-background-color: transparent !default;
|
||||
$alert-md-button-background-color-activated: rgba(158, 158, 158, 0.2) !default;
|
||||
$alert-md-button-border-radius: 2px !default;
|
||||
$alert-md-buttons-padding: 8px 8px 8px 24px !default;
|
||||
$alert-md-buttons-justify-content: flex-end !default;
|
||||
$alert-md-button-text-transform: uppercase !default;
|
||||
$alert-md-button-text-align: right !default;
|
||||
|
||||
|
||||
.alert-wrapper {
|
||||
@ -69,10 +86,10 @@ $alert-md-buttons-justify-content: flex-end !default;
|
||||
|
||||
.alert-message {
|
||||
font-size: $alert-md-message-font-size;
|
||||
max-height: 240px;
|
||||
max-height: $alert-md-content-max-height;
|
||||
|
||||
&:empty {
|
||||
padding: 0;
|
||||
padding: $alert-md-message-padding-empty;
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,12 +98,12 @@ $alert-md-buttons-justify-content: flex-end !default;
|
||||
// --------------------------------------------------
|
||||
|
||||
.alert-input {
|
||||
border-bottom: 1px solid $alert-md-input-border-color;
|
||||
border-bottom: $alert-md-input-border-width $alert-md-input-border-style $alert-md-input-border-color;
|
||||
color: $alert-md-input-text-color;
|
||||
margin: $alert-md-input-margin-top 0 $alert-md-input-margin-bottom 0;
|
||||
margin: $alert-md-input-margin-top $alert-md-input-margin-right $alert-md-input-margin-bottom $alert-md-input-margin-left;
|
||||
|
||||
&:focus {
|
||||
border-bottom: 2px solid $alert-md-input-highlight-color;
|
||||
border-bottom: $alert-md-input-border-width-focused $alert-md-input-border-style-focused $alert-md-input-border-color-focused;
|
||||
margin-bottom: $alert-md-input-margin-bottom - 1;
|
||||
}
|
||||
}
|
||||
@ -100,7 +117,7 @@ $alert-md-buttons-justify-content: flex-end !default;
|
||||
position: relative;
|
||||
border-top: 1px solid $alert-md-input-border-color;
|
||||
border-bottom: 1px solid $alert-md-input-border-color;
|
||||
max-height: 240px;
|
||||
max-height: $alert-md-content-max-height;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@ -215,24 +232,25 @@ $alert-md-buttons-justify-content: flex-end !default;
|
||||
// --------------------------------------------------
|
||||
|
||||
.alert-button-group {
|
||||
padding: $alert-md-buttons-padding;
|
||||
justify-content: $alert-md-buttons-justify-content;
|
||||
flex-wrap: wrap-reverse;
|
||||
padding: $alert-md-button-group-padding;
|
||||
justify-content: $alert-md-button-group-justify-content;
|
||||
flex-wrap: $alert-md-button-group-flex-wrap;
|
||||
}
|
||||
|
||||
.alert-button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
font-weight: 500;
|
||||
padding: $alert-md-button-padding;
|
||||
font-weight: $alert-md-button-font-weight;
|
||||
color: $alert-md-button-text-color;
|
||||
background-color: $alert-md-button-background-color;
|
||||
border-radius: $alert-md-button-border-radius;
|
||||
text-transform: uppercase;
|
||||
text-align: right;
|
||||
text-transform: $alert-md-button-text-transform;
|
||||
text-align: $alert-md-button-text-align;
|
||||
|
||||
// necessary for ripple to work properly
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&.activated {
|
||||
background-color: $alert-md-button-background-color-activated;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,8 +12,8 @@ import {ViewController} from '../nav/view-controller';
|
||||
/**
|
||||
* @name Alert
|
||||
* @description
|
||||
* An Alert is a dialog that presents users with either information, or used
|
||||
* to receive information from the user using inputs. An alert appears on top
|
||||
* An Alert is a dialog that presents users with information or collects
|
||||
* information from the user using inputs. An alert appears on top
|
||||
* of the app's content, and must be manually dismissed by the user before
|
||||
* they can resume interaction with the app.
|
||||
*
|
||||
@ -31,11 +31,11 @@ import {ViewController} from '../nav/view-controller';
|
||||
* by tapping the backdrop, then it will fire the handler from the button
|
||||
* with a cancel role.
|
||||
*
|
||||
* Alerts can also include inputs whos data can be passed back to the app.
|
||||
* Alerts can also include inputs whose data can be passed back to the app.
|
||||
* Inputs can be used to prompt users for information.
|
||||
*
|
||||
* Its shorthand is to add all the alert's options from within the
|
||||
* `Alert.create(opts)` first argument. Otherwise the alert's instance
|
||||
* You can pass all of the alert's options in the first argument of
|
||||
* the create method: `Alert.create(opts)`. Otherwise the alert's instance
|
||||
* has methods to add options, such as `setTitle()` or `addButton()`.
|
||||
*
|
||||
* @usage
|
||||
|
||||
76
ionic/components/alert/test/basic/e2e.ts
Normal file
76
ionic/components/alert/test/basic/e2e.ts
Normal file
@ -0,0 +1,76 @@
|
||||
|
||||
it('should open basic alert', function() {
|
||||
element(by.css('.e2eOpenAlert')).click();
|
||||
});
|
||||
|
||||
it('should close with button click', function() {
|
||||
element(by.css('.alert-button:last-child')).click();
|
||||
});
|
||||
|
||||
it('should open alert long message', function() {
|
||||
element(by.css('.e2eOpenAlertLongMessage')).click();
|
||||
});
|
||||
|
||||
it('should close with button click', function() {
|
||||
element(by.css('.alert-button:last-child')).click();
|
||||
});
|
||||
|
||||
it('should open alert multiple buttons', function() {
|
||||
element(by.css('.e2eOpenMultipleButtons')).click();
|
||||
});
|
||||
|
||||
it('should close with button click', function() {
|
||||
element(by.css('.alert-button:last-child')).click();
|
||||
});
|
||||
|
||||
it('should open alert no message', function() {
|
||||
element(by.css('.e2eOpenAlertNoMessage')).click();
|
||||
});
|
||||
|
||||
it('should close with button click', function() {
|
||||
element(by.css('.alert-button:last-child')).click();
|
||||
});
|
||||
|
||||
it('should open confirm alert', function() {
|
||||
element(by.css('.e2eOpenConfirm')).click();
|
||||
});
|
||||
|
||||
it('should close with button click', function() {
|
||||
element(by.css('.alert-button:last-child')).click();
|
||||
});
|
||||
|
||||
it('should open prompt alert', function() {
|
||||
element(by.css('.e2eOpenPrompt')).click();
|
||||
});
|
||||
|
||||
it('should close with button click', function() {
|
||||
element(by.css('.alert-button:last-child')).click();
|
||||
});
|
||||
|
||||
it('should open radio alert', function() {
|
||||
element(by.css('.e2eOpenRadio')).click();
|
||||
});
|
||||
|
||||
it('should close with button click', function() {
|
||||
element(by.css('.alert-button:last-child')).click();
|
||||
});
|
||||
|
||||
it('should open checkbox alert', function() {
|
||||
element(by.css('.e2eOpenCheckbox')).click();
|
||||
});
|
||||
|
||||
it('should close with button click', function() {
|
||||
element(by.css('.alert-button:last-child')).click();
|
||||
});
|
||||
|
||||
it('should open and close fast close alert', function() {
|
||||
element(by.css('.e2eFastClose')).click();
|
||||
});
|
||||
|
||||
it('should open disabled backdrop alert', function() {
|
||||
element(by.css('.e2eDisabledBackdrop')).click();
|
||||
});
|
||||
|
||||
it('should close with button click', function() {
|
||||
element(by.css('.alert-button:last-child')).click();
|
||||
});
|
||||
@ -5,9 +5,9 @@ import {IonicApp} from './app';
|
||||
/**
|
||||
* @name Id
|
||||
* @description
|
||||
* IdRef is an easy way to identify unique components in an app and access them
|
||||
* The `id` attribute is an easy way to identify unique components in an app and access them
|
||||
* no matter where in the UI hierarchy you are. For example, this makes toggling
|
||||
* a global side menu feasible from any place in the application.
|
||||
* a global side menu possible from any place in the application.
|
||||
*
|
||||
* See the [Menu section](http://ionicframework.com/docs/v2/components/#menus) of
|
||||
* the Component docs for an example of how Menus rely on ID's.
|
||||
|
||||
@ -55,15 +55,15 @@ $button-ios-small-icon-font-size: 1.3em !default;
|
||||
@mixin ios-button-default($color-name, $color-value) {
|
||||
|
||||
.button-#{$color-name} {
|
||||
$bg-color: $color-value;
|
||||
$bg-color-activated: color-shade($bg-color);
|
||||
$fg-color: color-inverse($bg-color);
|
||||
$background-color: $color-value;
|
||||
$background-color-activated: color-shade($background-color);
|
||||
$fg-color: color-inverse($background-color);
|
||||
|
||||
color: $fg-color;
|
||||
background-color: $bg-color;
|
||||
background-color: $background-color;
|
||||
|
||||
&.activated {
|
||||
background-color: $bg-color-activated;
|
||||
background-color: $background-color-activated;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -78,20 +78,20 @@ $button-md-small-icon-font-size: 1.4em !default;
|
||||
@mixin md-button-default($color-name, $color-value) {
|
||||
|
||||
.button-#{$color-name} {
|
||||
$bg-color: $color-value;
|
||||
$bg-color-activated: color-shade($bg-color);
|
||||
$fg-color: color-inverse($bg-color);
|
||||
$background-color: $color-value;
|
||||
$background-color-activated: color-shade($background-color);
|
||||
$fg-color: color-inverse($background-color);
|
||||
|
||||
color: $fg-color;
|
||||
background-color: $bg-color;
|
||||
background-color: $background-color;
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
background-color: $bg-color;
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
background-color: $bg-color-activated;
|
||||
background-color: $background-color-activated;
|
||||
}
|
||||
|
||||
ion-button-effect {
|
||||
|
||||
@ -7,26 +7,29 @@ import {Toolbar} from '../toolbar/toolbar';
|
||||
/**
|
||||
* @name Button
|
||||
* @module ionic
|
||||
* @property [outline] - for an unfilled outline button
|
||||
* @property [clear] - for a transparent button that only shows text and icons
|
||||
* @property [round] - for a button with rounded corners
|
||||
* @property [block] - for a block button that fills it's parent container
|
||||
* @property [full] - for a full width button
|
||||
* @property [small] - sets button size to small
|
||||
* @property [large] - sets button size to large
|
||||
* @property [disabled] - disables the button
|
||||
* @property [fab] - for a floating action button
|
||||
* @property [fab-left] - position a fab button to the left
|
||||
* @property [fab-right] - position a fab button to the right
|
||||
* @property [fab-center] - position a fab button towards the center
|
||||
* @property [fab-top] - position a fab button towards the top
|
||||
* @property [fab-bottom] - position a fab button towards the bottom
|
||||
* @property [color] - Dynamically set which color attribute this button should use.
|
||||
*
|
||||
* @description
|
||||
* Buttons are simple components in Ionic, can consist of text, an icon, or both, and can be enhanced with a wide range of attributes.
|
||||
* Buttons are simple components in Ionic. They can consist of text and icons
|
||||
* and be enhanced by a wide range of attributes.
|
||||
*
|
||||
* @property [outline] - A transparent button with a border.
|
||||
* @property [clear] - A transparent button without a border.
|
||||
* @property [round] - A button with rounded corners.
|
||||
* @property [block] - A button that fills its parent container with a border-radius.
|
||||
* @property [full] - A button that fills its parent container without a border-radius or borders on the left/right.
|
||||
* @property [small] - A button with size small.
|
||||
* @property [large] - A button with size large.
|
||||
* @property [disabled] - A disabled button.
|
||||
* @property [fab] - A floating action button.
|
||||
* @property [fab-left] - Position a fab button to the left.
|
||||
* @property [fab-right] - Position a fab button to the right.
|
||||
* @property [fab-center] - Position a fab button towards the center.
|
||||
* @property [fab-top] - Position a fab button towards the top.
|
||||
* @property [fab-bottom] - Position a fab button towards the bottom.
|
||||
* @property [color] - Dynamically set which color attribute this button should use.
|
||||
*
|
||||
* @demo /docs/v2/demos/button/
|
||||
* @see {@link /docs/v2/components#buttons Button Component Docs}
|
||||
|
||||
*/
|
||||
@Component({
|
||||
selector: 'button:not([ion-item]),[button]',
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {Button, Config} from 'ionic-angular';
|
||||
import {Button, Config} from '../../../../ionic';
|
||||
|
||||
export function run() {
|
||||
|
||||
|
||||
@ -10,9 +10,12 @@ const CHECKBOX_VALUE_ACCESSOR = new Provider(
|
||||
|
||||
|
||||
/**
|
||||
* The checkbox is no different than the HTML checkbox input, except
|
||||
* it's styled accordingly to the the platform and design mode, such
|
||||
* as iOS or Material Design.
|
||||
* @name Checkbox
|
||||
* @module ionic
|
||||
*
|
||||
* @description
|
||||
* The Checkbox is a simple component styled based on the mode. It can be
|
||||
* placed in an `ion-item` or used as a stand-alone checkbox.
|
||||
*
|
||||
* See the [Angular 2 Docs](https://angular.io/docs/ts/latest/guide/forms.html)
|
||||
* for more info on forms and inputs.
|
||||
@ -40,6 +43,7 @@ const CHECKBOX_VALUE_ACCESSOR = new Provider(
|
||||
*
|
||||
* </ion-list>
|
||||
* ```
|
||||
*
|
||||
* @demo /docs/v2/demos/checkbox/
|
||||
* @see {@link /docs/v2/components#checkbox Checkbox Component Docs}
|
||||
*/
|
||||
|
||||
@ -98,7 +98,7 @@ export class Content extends Ion {
|
||||
* ngAfterViewInit() {
|
||||
* // Here 'my-content' is the ID of my ion-content
|
||||
* this.content = this.app.getComponent('my-content');
|
||||
* this.content.addScrollEventListener(this.myScroll);
|
||||
* this.content.addScrollListener(this.myScroll);
|
||||
* }
|
||||
* myScroll() {
|
||||
* console.info('They see me scrolling...');
|
||||
|
||||
@ -10,12 +10,12 @@ import {Config} from '../../config/config';
|
||||
* For a full list of available icons, check out the
|
||||
* [Ionicons resource docs](../../../../resources/ionicons).
|
||||
*
|
||||
* One feature of Ionicons is that when icon names are set, the actual icon
|
||||
* One feature of Ionicons in Ionic is when icon names are set, the actual icon
|
||||
* which is rendered can change slightly depending on the mode the app is
|
||||
* running from. For example, by setting the icon name of `alarm`, on iOS the
|
||||
* icon will automatically apply `ios-alarm`, and on Material Design it will
|
||||
* automatically apply `md-alarm`. This allow the developer to write the
|
||||
* markup once, and let Ionic automatically apply the appropriate icon.
|
||||
* automatically apply `md-alarm`. This allows the developer to write the
|
||||
* markup once while Ionic applies the appropriate icon based on the mode.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {InfiniteScroll, Content, Config} from 'ionic-angular';
|
||||
import {InfiniteScroll, Content, Config} from '../../../../ionic';
|
||||
|
||||
export function run() {
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {TextInput} from 'ionic-angular';
|
||||
import {TextInput} from '../../../../ionic';
|
||||
|
||||
export function run() {
|
||||
|
||||
|
||||
@ -4,10 +4,8 @@ import {Directive, ElementRef, Renderer, Input, Optional, Attribute} from 'angul
|
||||
/**
|
||||
* @name Label
|
||||
* @description
|
||||
* Labels describe the data that the user should enter in to an input
|
||||
* element. You can give `ion-label` attributes to tell it how to
|
||||
* handle its display type, which is especially useful for an
|
||||
* `ion-item` which contains a text input.
|
||||
* Labels are placed inside of an `ion-item` element and can be used
|
||||
* to describe an `ion-input`, `ion-toggle`, `ion-checkbox`, and more.
|
||||
*
|
||||
* @property [fixed] - a persistant label that sits next the the input
|
||||
* @property [floating] - a label that will float about the input if the input is empty of looses focus
|
||||
@ -22,7 +20,7 @@ import {Directive, ElementRef, Renderer, Input, Optional, Attribute} from 'angul
|
||||
* </ion-item>
|
||||
*
|
||||
* <ion-item>
|
||||
* <ion-labe fixed>Website</ion-label>
|
||||
* <ion-label fixed>Website</ion-label>
|
||||
* <ion-input type="url"></ion-input>
|
||||
* </ion-item>
|
||||
*
|
||||
@ -36,6 +34,15 @@ import {Directive, ElementRef, Renderer, Input, Optional, Attribute} from 'angul
|
||||
* <ion-input type="tel"></ion-input>
|
||||
* </ion-item>
|
||||
*
|
||||
* <ion-item>
|
||||
* <ion-label>Toggle</ion-label>
|
||||
* <ion-toggle></ion-toggle>
|
||||
* </ion-item>
|
||||
*
|
||||
* <ion-item>
|
||||
* <ion-label>Checkbox</ion-label>
|
||||
* <ion-checkbox></ion-checkbox>
|
||||
* </ion-item>
|
||||
* ```
|
||||
*
|
||||
* @demo /docs/v2/demos/label/
|
||||
|
||||
@ -8,7 +8,7 @@ import {MenuType} from './menu-types';
|
||||
* _For basic Menu usage, see the [Menu section](../../../../components/#menus)
|
||||
* of the Component docs._
|
||||
*
|
||||
* Menu is a side-menu interface that can be dragged out or toggled to open or closed.
|
||||
* Menu is a side-menu interface that can be dragged and toggled to open or close.
|
||||
* An Ionic app can have numerous menus, all of which can be controlled within
|
||||
* template HTML, or programmatically.
|
||||
*
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {MenuController, Menu} from 'ionic-angular';
|
||||
import {MenuController, Menu} from '../../../../ionic';
|
||||
|
||||
export function run() {
|
||||
describe('MenuController', () => {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {NavController, Tabs, NavOptions, Config, ViewController} from 'ionic-angular';
|
||||
import {NavController, Tabs, NavOptions, Config, ViewController} from '../../../../ionic';
|
||||
|
||||
export function run() {
|
||||
describe('NavController', () => {
|
||||
|
||||
@ -63,17 +63,14 @@ class ToolbarBackground {
|
||||
* @name Navbar
|
||||
* @description
|
||||
* Navbar is a global level toolbar that gets updated every time a page gets
|
||||
* loaded. You can pass the navbar a `ion-title` or any number of buttons.
|
||||
* loaded. You can pass the navbar an `ion-title`, any number of buttons, a segment, or a searchbar.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-navbar *navbar>
|
||||
*
|
||||
* <ion-buttons start>
|
||||
* <button (click)="toggleItems()">
|
||||
* toggle
|
||||
* <button menuToggle>
|
||||
* <ion-icon name="menu"></ion-icon>
|
||||
* </button>
|
||||
* </ion-buttons>
|
||||
*
|
||||
* <ion-title>
|
||||
* Page Title
|
||||
@ -81,7 +78,7 @@ class ToolbarBackground {
|
||||
*
|
||||
* <ion-buttons end>
|
||||
* <button (click)="openModal()">
|
||||
* Modal
|
||||
* <ion-icon name="options"></ion-icon>
|
||||
* </button>
|
||||
* </ion-buttons>
|
||||
* </ion-navbar>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {Refresher, Content, Config, Ion} from 'ionic-angular';
|
||||
import {Refresher, Content, Config, Ion} from '../../../../ionic';
|
||||
|
||||
export function run() {
|
||||
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
// iOS Segment
|
||||
// --------------------------------------------------
|
||||
|
||||
$segment-button-ios-bg-color: transparent !default;
|
||||
$segment-button-ios-bg-color-activated: $toolbar-ios-active-color !default;
|
||||
$segment-button-ios-background-color: transparent !default;
|
||||
$segment-button-ios-background-color-activated: $toolbar-ios-active-color !default;
|
||||
|
||||
$segment-button-ios-text-color: color-inverse($segment-button-ios-bg-color-activated) !default;
|
||||
$segment-button-ios-text-color: color-inverse($segment-button-ios-background-color-activated) !default;
|
||||
$segment-button-ios-activated-transition: 100ms all linear !default;
|
||||
$segment-button-ios-hover-transition: 100ms all linear !default;
|
||||
$segment-button-ios-active-transition: 100ms all linear !default;
|
||||
@ -37,10 +37,10 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default;
|
||||
|
||||
border-width: $segment-button-ios-border-width;
|
||||
border-style: solid;
|
||||
border-color: $segment-button-ios-bg-color-activated;
|
||||
border-color: $segment-button-ios-background-color-activated;
|
||||
|
||||
color: $segment-button-ios-bg-color-activated;
|
||||
background-color: $segment-button-ios-bg-color;
|
||||
color: $segment-button-ios-background-color-activated;
|
||||
background-color: $segment-button-ios-background-color;
|
||||
|
||||
flex: 1;
|
||||
width: 0;
|
||||
@ -53,17 +53,17 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default;
|
||||
&.segment-activated {
|
||||
opacity: 1;
|
||||
color: $segment-button-ios-text-color;
|
||||
background-color: $segment-button-ios-bg-color-activated;
|
||||
background-color: $segment-button-ios-background-color-activated;
|
||||
transition: $segment-button-ios-activated-transition;
|
||||
}
|
||||
|
||||
&:hover:not(.segment-activated) {
|
||||
background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-hover-opacity);
|
||||
background-color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-hover-opacity);
|
||||
transition: $segment-button-ios-hover-transition;
|
||||
}
|
||||
|
||||
&:active:not(.segment-activated) {
|
||||
background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-active-opacity);
|
||||
background-color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-active-opacity);
|
||||
transition: $segment-button-ios-active-transition;
|
||||
}
|
||||
|
||||
|
||||
@ -65,7 +65,25 @@ export class DisplayWhen {
|
||||
* Complements the [hideWhen attribute](../HideWhen).
|
||||
* @usage
|
||||
* ```html
|
||||
* <div showWhen="ios">I am only visible on iOS!</div>
|
||||
* <div showWhen="android">
|
||||
* I am visible on Android!
|
||||
* </div>
|
||||
*
|
||||
* <div showWhen="ios">
|
||||
* I am visible on iOS!
|
||||
* </div>
|
||||
*
|
||||
* <div showWhen="android,ios">
|
||||
* I am visible on Android and iOS!
|
||||
* </div>
|
||||
*
|
||||
* <div showWhen="portrait">
|
||||
* I am visible on Portrait!
|
||||
* </div>
|
||||
*
|
||||
* <div showWhen="landscape">
|
||||
* I am visible on Landscape!
|
||||
* </div>
|
||||
* ```
|
||||
* @demo /docs/v2/demos/show-when/
|
||||
* @see {@link ../HideWhen HideWhen API Docs}
|
||||
@ -103,8 +121,27 @@ export class ShowWhen extends DisplayWhen {
|
||||
* Complements the [showWhen attribute](../ShowWhen).
|
||||
* @usage
|
||||
* ```html
|
||||
* <div hideWhen="android">I am hidden on Android!</div>
|
||||
* <div hideWhen="android">
|
||||
* I am hidden on Android!
|
||||
* </div>
|
||||
*
|
||||
* <div hideWhen="ios">
|
||||
* I am hidden on iOS!
|
||||
* </div>
|
||||
*
|
||||
* <div hideWhen="android,ios">
|
||||
* I am hidden on Android and iOS!
|
||||
* </div>
|
||||
*
|
||||
* <div hideWhen="portrait">
|
||||
* I am hidden on Portrait!
|
||||
* </div>
|
||||
*
|
||||
* <div hideWhen="landscape">
|
||||
* I am hidden on Landscape!
|
||||
* </div>
|
||||
* ```
|
||||
*
|
||||
* @demo /docs/v2/demos/hide-when/
|
||||
* @see {@link ../ShowWhen ShowWhen API Docs}
|
||||
*/
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import * as tapClick from 'ionic-angular';
|
||||
import * as tapClick from '../../../../ionic';
|
||||
|
||||
export function run() {
|
||||
|
||||
|
||||
@ -13,7 +13,8 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
|
||||
* @name Config
|
||||
* @demo /docs/v2/demos/config/
|
||||
* @description
|
||||
* Config lets you change multiple or a single value in an apps mode configuration. Things such as tab placement, icon changes, and view animations can be set here.
|
||||
* The Config lets you configure your entire app or specific platforms.
|
||||
* You can set the tab placement, icon mode, animations, and more here.
|
||||
*
|
||||
* ```ts
|
||||
* @App({
|
||||
@ -29,7 +30,7 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
|
||||
* })
|
||||
* ```
|
||||
*
|
||||
* Or change the whole mode
|
||||
* To change the mode to always use Material Design (md).
|
||||
*
|
||||
* ```ts
|
||||
* @App({
|
||||
@ -40,7 +41,7 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
|
||||
* })
|
||||
* ```
|
||||
*
|
||||
* Config can be overwritting at multiple levels, allowing deeper configuration. Taking the example from earlier, we can override any setting we want based on a platform.
|
||||
* Config can be overwritten at multiple levels allowing for more configuration. Taking the example from earlier, we can override any setting we want based on a platform.
|
||||
* ```ts
|
||||
* @App({
|
||||
* template: `<ion-nav [root]="root"></ion-nav>`
|
||||
@ -63,8 +64,6 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
|
||||
* </ion-tabs>
|
||||
* ```
|
||||
*
|
||||
* The property will override anything else set in the apps.
|
||||
*
|
||||
* The last way we could configure is through URL query strings. This is useful for testing while in the browser.
|
||||
* Simply add `?ionic<PROPERTYNAME>=<value>` to the url.
|
||||
*
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {Config, Platform, ionicProviders} from 'ionic-angular';
|
||||
import {Config, Platform, ionicProviders} from '../../../ionic';
|
||||
|
||||
export function run() {
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {Platform} from 'ionic-angular';
|
||||
import {Platform} from '../../../ionic';
|
||||
|
||||
export function run() {
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
/**
|
||||
* @name Events
|
||||
* @description
|
||||
* Events is a pub/sub style event system for sending and responding to application-level
|
||||
* Events is a publish-subscribe style event system for sending and responding to application-level
|
||||
* events across your app.
|
||||
*
|
||||
* @usage
|
||||
* ```ts
|
||||
* // first page (publish an event when a user is created)
|
||||
|
||||
@ -7,7 +7,7 @@ import {hasFocusedTextInput, raf, rafFrames} from './dom';
|
||||
/**
|
||||
* @name Keyboard
|
||||
* @description
|
||||
* The `Keyboard` class allows you to work with the keyboard events provide by the Ionic keyboard plugin.
|
||||
* The `Keyboard` class allows you to work with the keyboard events provided by the Ionic keyboard plugin.
|
||||
*
|
||||
* @usage
|
||||
* ```ts
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import * as util from 'ionic-angular/util';
|
||||
import * as util from '../../../ionic/util';
|
||||
|
||||
export function run() {
|
||||
describe('extend', function() {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"private": "true",
|
||||
"name": "ionic2",
|
||||
"version": "2.0.0-beta.1",
|
||||
"version": "2.0.0-beta.2",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -58,6 +58,7 @@
|
||||
"html-entities": "^1.1.3",
|
||||
"htmlparser2": "^3.8.3",
|
||||
"ionic-cz-conventional-changelog": "^1.0.0",
|
||||
"jasmine-core": "^2.4.1",
|
||||
"jasmine-node": "^1.14.5",
|
||||
"js-yaml": "^3.4.2",
|
||||
"karma": "^0.12.31",
|
||||
|
||||
@ -37,10 +37,10 @@ From `ionic` directory:
|
||||
|
||||
From your app directory:
|
||||
|
||||
1. `npm link ionic-framework`
|
||||
1. `npm link ionic-angular`
|
||||
2. `ionic serve` or `ionic run` or `ionic emulate`
|
||||
|
||||
To remove the linked version of `ionic-framework` do `npm rm ionic-framework`, and then reinstall using `npm install ionic-framework`.
|
||||
To remove the linked version of `ionic-angular` do `npm rm ionic-angular`, and then reinstall using `npm install ionic-angular`.
|
||||
|
||||
|
||||
### Running Snapshot
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
var buildConfig = require('../build/config');
|
||||
|
||||
|
||||
|
||||
module.exports = function(config) {
|
||||
config.set({
|
||||
singleRun: true,
|
||||
@ -8,7 +10,8 @@ module.exports = function(config) {
|
||||
frameworks: ['jasmine'],
|
||||
|
||||
files: [
|
||||
'node_modules/systemjs/node_modules/es6-module-loader/dist/es6-module-loader.js',
|
||||
'node_modules/systemjs/node_modules/es6-module-loader/dist/es6-module-loader.js', //npm2
|
||||
'node_modules/es6-module-loader/dist/es6-module-loader.src.js', //npm3
|
||||
'node_modules/systemjs/dist/system.js',
|
||||
'scripts/karma/system.config.js',
|
||||
'node_modules/angular2/bundles/angular2-polyfills.min.js',
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
System.config({
|
||||
map: {
|
||||
'angular2': '/base/angular2'
|
||||
'angular2': '/base/angular2',
|
||||
'ionic-angular': '/base/ionic'
|
||||
},
|
||||
packages: {
|
||||
'ionic-angular': {
|
||||
|
||||
@ -11,7 +11,7 @@ In the root of the package are ES5 sources in the CommonJS module format, their
|
||||
Usually, the only Javascript file required by the user is `ionic.js`, as everything from Ionic can be imported from this file:
|
||||
|
||||
```
|
||||
import {App, Page} from 'ionic-framework/ionic';
|
||||
import {App, Page} from 'ionic-angular';
|
||||
```
|
||||
|
||||
### Bundles
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import {Page, NavController} from 'ionic-angular';
|
||||
import {Inject} from 'angular2/core';
|
||||
|
||||
/*
|
||||
Generated class for the <%= jsClassName %> page.
|
||||
@ -11,7 +10,11 @@ import {Inject} from 'angular2/core';
|
||||
templateUrl: 'build/<%= directory %>/<%= fileName %>/<%= fileName %>.html',
|
||||
})
|
||||
export class <%= jsClassName %> {
|
||||
constructor(@Inject(NavController) nav) {
|
||||
static get parameters() {
|
||||
return [[NavController]];
|
||||
}
|
||||
|
||||
constructor(nav) {
|
||||
this.nav = nav;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import {NavController, Page} from 'ionic-angular';
|
||||
import {Inject} from 'angular2/core';
|
||||
<% _.forEach(tabs, function(tab) { %>import {<%= tab.jsClassName %>} from '../<%= tab.fileName %>/<%= tab.fileName %>';
|
||||
<% }); %>
|
||||
|
||||
@ -7,7 +6,11 @@ import {Inject} from 'angular2/core';
|
||||
templateUrl: 'build/<%= directory %>/<%= fileName %>/<%= fileName %>.html'
|
||||
})
|
||||
export class <%= jsClassName %> {
|
||||
constructor(@Inject(NavController) nav) {
|
||||
static get parameters() {
|
||||
return [[NavController]];
|
||||
}
|
||||
|
||||
constructor(nav) {
|
||||
// set the root pages for each tab
|
||||
<% _.forEach(tabs, function(tab, i) { %>this.tab<%= ++i %>Root = <%= tab.jsClassName %>;
|
||||
<% }); %>
|
||||
|
||||
@ -7,8 +7,10 @@
|
||||
"declaration": true,
|
||||
"outDir": "dist"
|
||||
},
|
||||
"files": [
|
||||
"ionic/index.ts",
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"scripts",
|
||||
"typings/main",
|
||||
"typings/main.d.ts"
|
||||
],
|
||||
"compileOnSave" : false,
|
||||
|
||||
Reference in New Issue
Block a user