mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 16:16:41 +08:00
Merge remote-tracking branch 'refs/remotes/driftyco/master'
This commit is contained in:
Sina
6
.github/ISSUE_TEMPLATE.md
vendored
6
.github/ISSUE_TEMPLATE.md
vendored
@ -1,5 +1,5 @@
|
||||
**Ionic version:** (check one with "x")
|
||||
[ ] **1.x**
|
||||
[ ] **1.x** (For Ionic 1.x issues, please use https://github.com/driftyco/ionic-v1)
|
||||
[ ] **2.x**
|
||||
[ ] **3.x**
|
||||
|
||||
@ -17,9 +17,9 @@
|
||||
**Steps to reproduce:**
|
||||
<!-- If you are able to illustrate the bug or feature request with an example, please provide steps to reproduce and if possible a demo using one of the following templates:
|
||||
|
||||
For Ionic 1 issues - http://plnkr.co/edit/Xo1QyAUx35ny1Xf9ODHx?p=preview
|
||||
For Ionic V1 issues - http://plnkr.co/edit/Xo1QyAUx35ny1Xf9ODHx?p=preview
|
||||
|
||||
For Ionic 2 issues - http://plnkr.co/edit/z0DzVL?p=preview
|
||||
For Ionic issues - http://plnkr.co/edit/z0DzVL?p=preview
|
||||
-->
|
||||
|
||||
**Related code:**
|
||||
|
||||
52
CHANGELOG.md
52
CHANGELOG.md
@ -1,3 +1,55 @@
|
||||
<a name="3.3.0"></a>
|
||||
# [3.3.0](https://github.com/driftyco/ionic/compare/v3.2.1...v3.3.0) (2017-05-24)
|
||||
|
||||
|
||||
### Steps to Upgrade
|
||||
|
||||
`ionic-angular` now supports the latest `@angular` (4.1.2), and `typescript` (2.3.3) versions. Feel free to update apps by updating the `package.json` dependencies to match below:
|
||||
|
||||
```
|
||||
"dependencies": {
|
||||
"@angular/common": "4.1.2",
|
||||
"@angular/compiler": "4.1.2",
|
||||
"@angular/compiler-cli": "4.1.2",
|
||||
"@angular/core": "4.1.2",
|
||||
"@angular/forms": "4.1.2",
|
||||
"@angular/http": "4.1.2",
|
||||
"@angular/platform-browser": "4.1.2",
|
||||
"@angular/platform-browser-dynamic": "4.1.2",
|
||||
"@ionic-native/core": "3.10.2",
|
||||
"@ionic-native/splash-screen": "3.10.2",
|
||||
"@ionic-native/status-bar": "3.10.2",
|
||||
"@ionic/storage": "2.0.1",
|
||||
"ionic-angular": "3.3.0",
|
||||
"ionicons": "3.0.0",
|
||||
"rxjs": "5.1.1",
|
||||
"sw-toolbox": "3.6.0",
|
||||
"zone.js": "0.8.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ionic/app-scripts": "1.3.7",
|
||||
"typescript": "2.3.3"
|
||||
}
|
||||
```
|
||||
|
||||
Another optional step is to remove the `src/declarations.d.ts` file. This is a legacy file introduced early with `ionic-angular` projects to improve compatibility between TypeScript and third-party libraries. Due to improvements in TypeScript, this file is no longer necessary. By removing this file, the TypeScript compiler will be able to provide more accurate error messages for `import` statements.
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **range:** update the UI when min/max change ([#11720](https://github.com/driftyco/ionic/issues/11720)) ([d86785c](https://github.com/driftyco/ionic/commit/d86785c)), closes [#11719](https://github.com/driftyco/ionic/issues/11719)
|
||||
* **searchbar:** searchbar padding should be on the left ([#11651](https://github.com/driftyco/ionic/issues/11651)) ([3443ffd](https://github.com/driftyco/ionic/commit/3443ffd))
|
||||
* **segment:** add z-index to ios back button ([#10363](https://github.com/driftyco/ionic/issues/10363)) ([bb22e4a](https://github.com/driftyco/ionic/commit/bb22e4a))
|
||||
* **select:** RTL fix for searchbar ([#11355](https://github.com/driftyco/ionic/issues/11355)) ([ca71072](https://github.com/driftyco/ionic/commit/ca71072))
|
||||
* **VirtualScroll:** initialize trackByFn reference ([#11624](https://github.com/driftyco/ionic/issues/11624)) ([892e14f](https://github.com/driftyco/ionic/commit/892e14f))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **icon:** add flip/unflip for icon on rtl ([#11634](https://github.com/driftyco/ionic/issues/11634)) ([7bdfaac](https://github.com/driftyco/ionic/commit/7bdfaac))
|
||||
* **rtl:** add rtl margin, padding, position and border-radius ([#11342](https://github.com/driftyco/ionic/issues/11342)) ([a30379b](https://github.com/driftyco/ionic/commit/a30379b))
|
||||
|
||||
|
||||
|
||||
<a name="3.2.1"></a>
|
||||
## [3.2.1](https://github.com/driftyco/ionic/compare/v3.2.0...v3.2.1) (2017-05-12)
|
||||
|
||||
|
||||
12
README.md
12
README.md
@ -3,19 +3,19 @@
|
||||
|
||||
# Ionic
|
||||
|
||||
[Ionic](http://ionicframework.com/) is the open-source mobile app development framework that makes it easy to
|
||||
[Ionic](https://ionicframework.com/) is the open-source mobile app development framework that makes it easy to
|
||||
build top quality native and progressive web apps with web technologies.
|
||||
|
||||
Ionic is based on [Angular](https://angular.io/) and comes with many significant performance, usability, and
|
||||
feature improvements over the past versions.
|
||||
|
||||
See the [Building Apps with Ionic](http://adamdbradley.github.io/building-with-ionic2) slides for a quick
|
||||
See the [Building Apps with Ionic](https://adamdbradley.github.io/building-with-ionic2) slides for a quick
|
||||
overview or watch our [Crash Course](https://youtu.be/O2WiI9QrS5s) video for a quick walkthrough on how to get
|
||||
started using Ionic.
|
||||
|
||||
### Getting Started
|
||||
|
||||
Start a new project by following our quick [Getting Started guide](http://ionicframework.com/getting-started/).
|
||||
Start a new project by following our quick [Getting Started guide](https://ionicframework.com/getting-started/).
|
||||
We would love to hear from you! If you have any feedback or run into issues using our framework, please file
|
||||
an [issue](https://github.com/driftyco/ionic/issues/new) on this repository.
|
||||
|
||||
@ -31,7 +31,7 @@ label.
|
||||
The [Ionic Conference App](https://github.com/driftyco/ionic-conference-app) is a full featured Ionic app.
|
||||
It is the perfect starting point for learning and building your own app.
|
||||
|
||||
### Ionic 1.x
|
||||
### Ionic V1
|
||||
|
||||
The source code for Ionic 1.x has been moved to [driftyco/ionic-v1](https://github.com/driftyco/ionic-v1).
|
||||
Please open any issues and pull requests related to Ionic 1.x on that repository.
|
||||
The source code for Ionic V1 has been moved to [driftyco/ionic-v1](https://github.com/driftyco/ionic-v1).
|
||||
Please open any issues and pull requests related to Ionic V1 on that repository.
|
||||
|
||||
20
package.json
20
package.json
@ -1,7 +1,7 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "ionic2",
|
||||
"version": "3.2.1",
|
||||
"version": "3.3.0",
|
||||
"description": "A powerful framework for building mobile and progressive web apps with JavaScript and Angular 2",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@ -25,14 +25,14 @@
|
||||
"link": "gulp release.prepareReleasePackage && cd dist/ionic-angular && npm link"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/common": "4.1.0",
|
||||
"@angular/compiler": "4.1.0",
|
||||
"@angular/compiler-cli": "4.1.0",
|
||||
"@angular/core": "4.1.0",
|
||||
"@angular/forms": "4.1.0",
|
||||
"@angular/http": "4.1.0",
|
||||
"@angular/platform-browser": "4.1.0",
|
||||
"@angular/platform-browser-dynamic": "4.1.0",
|
||||
"@angular/common": "4.1.2",
|
||||
"@angular/compiler": "4.1.2",
|
||||
"@angular/compiler-cli": "4.1.2",
|
||||
"@angular/core": "4.1.2",
|
||||
"@angular/forms": "4.1.2",
|
||||
"@angular/http": "4.1.2",
|
||||
"@angular/platform-browser": "4.1.2",
|
||||
"@angular/platform-browser-dynamic": "4.1.2",
|
||||
"ionicons": "~3.0.0",
|
||||
"rxjs": "5.1.1",
|
||||
"zone.js": "^0.8.10"
|
||||
@ -146,4 +146,4 @@
|
||||
"pre-push#master": [
|
||||
"test"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -203,8 +203,7 @@ export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string
|
||||
'--ionicAngularDir', ionicAngularDir,
|
||||
'--sass', sassConfigPath,
|
||||
'--copy', copyConfigPath,
|
||||
'--enableLint', 'false',
|
||||
'--bonjour'
|
||||
'--enableLint', 'false'
|
||||
];
|
||||
|
||||
if (watchConfigPath) {
|
||||
|
||||
@ -117,7 +117,7 @@ $alert-md-input-margin-bottom: 5px !default;
|
||||
// deprecated
|
||||
$alert-md-input-margin-left: 0 !default;
|
||||
/// @prop - Margin start of the alert input
|
||||
$alert-md-input-margin-start: $alert-md-input-margin-left;
|
||||
$alert-md-input-margin-start: $alert-md-input-margin-left !default;
|
||||
|
||||
/// @prop - Flex wrap of the alert button group
|
||||
$alert-md-button-group-flex-wrap: wrap-reverse !default;
|
||||
|
||||
@ -17,7 +17,7 @@ $card-ios-margin-bottom: 12px !default;
|
||||
// deprecated
|
||||
$card-ios-margin-left: 12px !default;
|
||||
/// @prop - Margin start of the card
|
||||
$card-ios-margin-start: $card-ios-margin-left;
|
||||
$card-ios-margin-start: $card-ios-margin-left !default;
|
||||
|
||||
/// @prop - Padding top of the card
|
||||
$card-ios-padding-top: 13px !default;
|
||||
@ -25,7 +25,7 @@ $card-ios-padding-top: 13px !default;
|
||||
// deprecated
|
||||
$card-ios-padding-right: 16px !default;
|
||||
/// @prop - Padding end of the card
|
||||
$card-ios-padding-end: $card-ios-padding-right;
|
||||
$card-ios-padding-end: $card-ios-padding-right !default;
|
||||
|
||||
/// @prop - Padding bottom of the card
|
||||
$card-ios-padding-bottom: 14px !default;
|
||||
@ -33,7 +33,7 @@ $card-ios-padding-bottom: 14px !default;
|
||||
// deprecated
|
||||
$card-ios-padding-left: 16px !default;
|
||||
/// @prop - Padding start of the card
|
||||
$card-ios-padding-start: $card-ios-padding-left;
|
||||
$card-ios-padding-start: $card-ios-padding-left !default;
|
||||
|
||||
/// @prop - Padding top of the media on the card
|
||||
$card-ios-padding-media-top: 10px !default;
|
||||
|
||||
@ -17,7 +17,7 @@ $card-md-margin-bottom: 10px !default;
|
||||
// deprecated
|
||||
$card-md-margin-left: 10px !default;
|
||||
/// @prop - Margin start of the card
|
||||
$card-md-margin-start: $card-md-margin-left;
|
||||
$card-md-margin-start: $card-md-margin-left !default;
|
||||
|
||||
|
||||
/// @prop - Padding top of the card
|
||||
@ -26,7 +26,7 @@ $card-md-padding-top: 13px !default;
|
||||
// deprecated
|
||||
$card-md-padding-right: 16px !default;
|
||||
/// @prop - Padding right of the card
|
||||
$card-md-padding-end: $card-md-padding-right;
|
||||
$card-md-padding-end: $card-md-padding-right !default;
|
||||
|
||||
/// @prop - Padding bottom of the card
|
||||
$card-md-padding-bottom: 13px !default;
|
||||
@ -34,7 +34,7 @@ $card-md-padding-bottom: 13px !default;
|
||||
// deprecated
|
||||
$card-md-padding-left: 16px !default;
|
||||
/// @prop - Padding start of the card
|
||||
$card-md-padding-start: $card-md-padding-left;
|
||||
$card-md-padding-start: $card-md-padding-left !default;
|
||||
|
||||
/// @prop - Padding top of the media on the card
|
||||
$card-md-padding-media-top: 10px !default;
|
||||
|
||||
@ -17,7 +17,7 @@ $card-wp-margin-bottom: 8px !default;
|
||||
// deprecated
|
||||
$card-wp-margin-left: 8px !default;
|
||||
/// @prop - Margin start of the card
|
||||
$card-wp-margin-start: $card-wp-margin-left;
|
||||
$card-wp-margin-start: $card-wp-margin-left !default;
|
||||
|
||||
/// @prop - Padding top of the card
|
||||
$card-wp-padding-top: 13px !default;
|
||||
@ -25,7 +25,7 @@ $card-wp-padding-top: 13px !default;
|
||||
// deprecated
|
||||
$card-wp-padding-right: 16px !default;
|
||||
/// @prop - Padding end of the card
|
||||
$card-wp-padding-end: $card-wp-padding-right;
|
||||
$card-wp-padding-end: $card-wp-padding-right !default;
|
||||
|
||||
/// @prop - Padding bottom of the card
|
||||
$card-wp-padding-bottom: 13px !default;
|
||||
@ -33,7 +33,7 @@ $card-wp-padding-bottom: 13px !default;
|
||||
// deprecated
|
||||
$card-wp-padding-left: 16px !default;
|
||||
/// @prop - Padding start of the card
|
||||
$card-wp-padding-start: $card-wp-padding-left;
|
||||
$card-wp-padding-start: $card-wp-padding-left !default;
|
||||
|
||||
/// @prop - Padding top of the media on the card
|
||||
$card-wp-padding-media-top: 10px !default;
|
||||
|
||||
@ -42,6 +42,34 @@ import { Item } from '../item/item';
|
||||
* </ion-list>
|
||||
* ```
|
||||
*
|
||||
* @advanced
|
||||
*
|
||||
* ```html
|
||||
*
|
||||
* <!-- Call function when state changes -->
|
||||
* <ion-list>
|
||||
*
|
||||
* <ion-item>
|
||||
* <ion-label>Cucumber</ion-label>
|
||||
* <ion-checkbox [(ngModel)]="cucumber" (ionChange)="updateCucumber()"></ion-checkbox>
|
||||
* </ion-item>
|
||||
*
|
||||
* </ion-list>
|
||||
* ```
|
||||
*
|
||||
* ```ts
|
||||
* @Component({
|
||||
* templateUrl: 'main.html'
|
||||
* })
|
||||
* class SaladPage {
|
||||
* cucumber: boolean;
|
||||
*
|
||||
* updateCucumber() {
|
||||
* console.log("Cucumbers new state:" + this.cucumber);
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* @demo /docs/demos/src/checkbox/
|
||||
* @see {@link /docs/components#checkbox Checkbox Component Docs}
|
||||
*/
|
||||
|
||||
@ -9,7 +9,7 @@ $datetime-ios-padding-top: $item-ios-padding-top !default;
|
||||
// deprecated
|
||||
$datetime-ios-padding-right: ($item-ios-padding-end / 2) !default;
|
||||
/// @prop - Padding end of the DateTime component
|
||||
$datetime-ios-padding-end: $datetime-ios-padding-right;
|
||||
$datetime-ios-padding-end: $datetime-ios-padding-right !default;
|
||||
|
||||
/// @prop - Padding bottom of the DateTime component
|
||||
$datetime-ios-padding-bottom: $item-ios-padding-bottom !default;
|
||||
@ -17,7 +17,7 @@ $datetime-ios-padding-bottom: $item-ios-padding-bottom !default;
|
||||
// deprecated
|
||||
$datetime-ios-padding-left: $item-ios-padding-start !default;
|
||||
/// @prop - Padding start of the DateTime component
|
||||
$datetime-ios-padding-start: $datetime-ios-padding-left;
|
||||
$datetime-ios-padding-start: $datetime-ios-padding-left !default;
|
||||
|
||||
/// @prop - Color of the DateTime placeholder
|
||||
$datetime-ios-placeholder-color: #999 !default;
|
||||
|
||||
@ -9,7 +9,7 @@ $datetime-md-padding-top: $item-md-padding-top !default;
|
||||
// deprecated
|
||||
$datetime-md-padding-right: ($item-md-padding-end / 2) !default;
|
||||
/// @prop - Padding end of the DateTime component
|
||||
$datetime-md-padding-end: $datetime-md-padding-right;
|
||||
$datetime-md-padding-end: $datetime-md-padding-right !default;
|
||||
|
||||
/// @prop - Padding bottom of the DateTime component
|
||||
$datetime-md-padding-bottom: $item-md-padding-bottom !default;
|
||||
@ -17,7 +17,7 @@ $datetime-md-padding-bottom: $item-md-padding-bottom !default;
|
||||
// deprecated
|
||||
$datetime-md-padding-left: $item-md-padding-start !default;
|
||||
/// @prop - Padding start of the DateTime component
|
||||
$datetime-md-padding-start: $datetime-md-padding-left;
|
||||
$datetime-md-padding-start: $datetime-md-padding-left !default;
|
||||
|
||||
/// @prop - Color of the DateTime placeholder
|
||||
$datetime-md-placeholder-color: #999 !default;
|
||||
|
||||
@ -12,7 +12,7 @@ $datetime-wp-padding-top: $item-wp-padding-top !default;
|
||||
// deprecated
|
||||
$datetime-wp-padding-right: ($item-wp-padding-end / 2) !default;
|
||||
/// @prop - Padding end of the DateTime component
|
||||
$datetime-wp-padding-end: $datetime-wp-padding-right;
|
||||
$datetime-wp-padding-end: $datetime-wp-padding-right !default;
|
||||
|
||||
/// @prop - Padding bottom of the DateTime component
|
||||
$datetime-wp-padding-bottom: $item-wp-padding-bottom !default;
|
||||
@ -20,7 +20,7 @@ $datetime-wp-padding-bottom: $item-wp-padding-bottom !default;
|
||||
// deprecated
|
||||
$datetime-wp-padding-left: $item-wp-padding-start !default;
|
||||
/// @prop - Padding start of the DateTime component
|
||||
$datetime-wp-padding-start: $datetime-wp-padding-left;
|
||||
$datetime-wp-padding-start: $datetime-wp-padding-left !default;
|
||||
|
||||
/// @prop - Border width of the DateTime component
|
||||
$datetime-wp-border-width: 2px !default;
|
||||
|
||||
@ -20,7 +20,7 @@ $text-input-ios-margin-bottom: $item-ios-padding-bottom !default;
|
||||
// deprecated
|
||||
$text-input-ios-margin-left: 0 !default;
|
||||
/// @prop - Margin start of the input
|
||||
$text-input-ios-margin-start: $text-input-ios-margin-left;
|
||||
$text-input-ios-margin-start: $text-input-ios-margin-left !default;
|
||||
|
||||
/// @prop - Width of the icon used to clear the input
|
||||
$text-input-ios-input-clear-icon-width: 30px !default;
|
||||
@ -85,12 +85,17 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid !
|
||||
@if ($text-input-ios-show-focus-highlight) {
|
||||
// In order to get a 2px border we need to add an inset
|
||||
// box-shadow 1px (this is to avoid the div resizing)
|
||||
|
||||
// TODO remove all uses of input-has-focus in v4
|
||||
// TODO remove all uses of input-has-value in v4
|
||||
.item-ios.item-input.item-input-has-focus .item-inner,
|
||||
.item-ios.item-input.input-has-focus .item-inner {
|
||||
@include ios-input-highlight($text-input-ios-highlight-color);
|
||||
}
|
||||
|
||||
// The last item in a list has a border on the item, not the
|
||||
// inner item, so add it to the item itself
|
||||
.list-ios .item-input.item-input-has-focus:last-child,
|
||||
.list-ios .item-input.input-has-focus:last-child {
|
||||
@include ios-input-highlight($text-input-ios-highlight-color);
|
||||
|
||||
@ -102,11 +107,13 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid !
|
||||
|
||||
// Show the valid highlight when it has the .ng-valid class and a value
|
||||
@if ($text-input-ios-show-valid-highlight) {
|
||||
.item-ios.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
|
||||
.item-ios.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner,
|
||||
.item-ios.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner {
|
||||
@include ios-input-highlight($text-input-ios-highlight-color-valid);
|
||||
}
|
||||
|
||||
.list-ios .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child {
|
||||
.list-ios .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child,
|
||||
.list-ios .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child {
|
||||
@include ios-input-highlight($text-input-ios-highlight-color-valid);
|
||||
|
||||
.item-inner {
|
||||
@ -117,11 +124,11 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid !
|
||||
|
||||
// Show the invalid highlight when it has the invalid class and has been touched
|
||||
@if ($text-input-ios-show-invalid-highlight) {
|
||||
.item-ios.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
|
||||
.item-ios.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner {
|
||||
@include ios-input-highlight($text-input-ios-highlight-color-invalid);
|
||||
}
|
||||
|
||||
.list-ios .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
|
||||
.list-ios .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child {
|
||||
@include ios-input-highlight($text-input-ios-highlight-color-invalid);
|
||||
|
||||
.item-inner {
|
||||
|
||||
@ -86,12 +86,16 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid
|
||||
@if ($text-input-md-show-focus-highlight) {
|
||||
// In order to get a 2px border we need to add an inset
|
||||
// box-shadow 1px (this is to avoid the div resizing)
|
||||
|
||||
// TODO remove all uses of input-has-focus in v4
|
||||
.item-md.item-input.item-input-has-focus .item-inner,
|
||||
.item-md.item-input.input-has-focus .item-inner {
|
||||
@include md-input-highlight($text-input-md-highlight-color);
|
||||
}
|
||||
|
||||
// The last item in a list has a border on the item, not the
|
||||
// inner item, so add it to the item itself
|
||||
.list-md .item-input.item-input-has-focus:last-child,
|
||||
.list-md .item-input.input-has-focus:last-child {
|
||||
@include md-input-highlight($text-input-md-highlight-color);
|
||||
|
||||
@ -103,11 +107,15 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid
|
||||
|
||||
// Show the valid highlight when it has the .ng-valid class and a value
|
||||
@if ($text-input-md-show-valid-highlight) {
|
||||
.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
|
||||
// TODO remove all uses of input-has-focus in v4
|
||||
// TODO remove all uses of input-has-value in v4
|
||||
.item-md.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner,
|
||||
.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner {
|
||||
@include md-input-highlight($text-input-md-highlight-color-valid);
|
||||
}
|
||||
|
||||
.list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child {
|
||||
.list-md .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child,
|
||||
.list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child {
|
||||
@include md-input-highlight($text-input-md-highlight-color-valid);
|
||||
|
||||
.item-inner {
|
||||
@ -118,11 +126,11 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid
|
||||
|
||||
// Show the invalid highlight when it has the invalid class and has been touched
|
||||
@if ($text-input-md-show-invalid-highlight) {
|
||||
.item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
|
||||
.item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner {
|
||||
@include md-input-highlight($text-input-md-highlight-color-invalid);
|
||||
}
|
||||
|
||||
.list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
|
||||
.list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child {
|
||||
@include md-input-highlight($text-input-md-highlight-color-invalid);
|
||||
|
||||
.item-inner {
|
||||
|
||||
@ -104,17 +104,24 @@ input.text-input:-webkit-autofill {
|
||||
// --------------------------------------------------
|
||||
// When the input has focus, then the input cover should be hidden
|
||||
|
||||
// TODO remove all uses of input-has-focus in v4
|
||||
.item-input-has-focus .input-cover,
|
||||
.input-has-focus .input-cover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item-input-has-focus,
|
||||
.input-has-focus {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.item-input-has-focus input,
|
||||
.input-has-focus input,
|
||||
.item-input-has-focus textarea,
|
||||
.input-has-focus textarea,
|
||||
.item-input-has-focus a,
|
||||
.input-has-focus a,
|
||||
.item-input-has-focus button,
|
||||
.input-has-focus button {
|
||||
pointer-events: auto;
|
||||
}
|
||||
@ -158,6 +165,9 @@ input.text-input:-webkit-autofill {
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
// TODO remove all uses of input-has-focus in v4
|
||||
// TODO remove all uses of input-has-value in v4
|
||||
.item-input-has-focus.item-input-has-value .text-input-clear-icon,
|
||||
.input-has-focus.input-has-value .text-input-clear-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -607,7 +607,9 @@ export class TextInput extends Ion implements IonicFormInput {
|
||||
checkHasValue(inputValue: any) {
|
||||
if (this._item) {
|
||||
var hasValue = (inputValue !== null && inputValue !== undefined && inputValue !== '');
|
||||
// TODO remove all uses of input-has-value in v4
|
||||
this._item.setElementClass('input-has-value', hasValue);
|
||||
this._item.setElementClass('item-input-has-value', hasValue);
|
||||
}
|
||||
}
|
||||
|
||||
@ -617,7 +619,9 @@ export class TextInput extends Ion implements IonicFormInput {
|
||||
focusChange(inputHasFocus: boolean) {
|
||||
if (this._item) {
|
||||
console.debug(`input-base, focusChange, inputHasFocus: ${inputHasFocus}, ${this._item.getNativeElement().nodeName}.${this._item.getNativeElement().className}`);
|
||||
// TODO remove input-has-focus for v4
|
||||
this._item.setElementClass('input-has-focus', inputHasFocus);
|
||||
this._item.setElementClass('item-input-has-focus', inputHasFocus);
|
||||
}
|
||||
|
||||
// If clearOnEdit is enabled and the input blurred but has a value, set a flag
|
||||
|
||||
@ -96,6 +96,9 @@ $text-input-wp-highlight-color-invalid: $text-input-highlight-color-invalid
|
||||
|
||||
// Show the focus highlight when the input has focus
|
||||
@if ($text-input-wp-show-focus-highlight) {
|
||||
// TODO remove all uses of input-has-focus in v4
|
||||
// TODO remove all uses of input-has-value in v4
|
||||
.item-wp.item-input.item-input-has-focus .text-input,
|
||||
.item-wp.item-input.input-has-focus .text-input {
|
||||
border-color: $text-input-wp-highlight-color;
|
||||
}
|
||||
@ -103,14 +106,15 @@ $text-input-wp-highlight-color-invalid: $text-input-highlight-color-invalid
|
||||
|
||||
// Show the valid highlight when it has the .ng-valid class and a value
|
||||
@if ($text-input-wp-show-valid-highlight) {
|
||||
.item-wp.item-input.ng-valid.input-has-value:not(.input-has-focus) .text-input {
|
||||
.item-wp.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .text-input,
|
||||
.item-wp.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .text-input {
|
||||
border-color: $text-input-wp-highlight-color-valid;
|
||||
}
|
||||
}
|
||||
|
||||
// Show the invalid highlight when it has the invalid class and has been touched
|
||||
@if ($text-input-wp-show-invalid-highlight) {
|
||||
.item-wp.item-input.ng-invalid.ng-touched:not(.input-has-focus) .text-input {
|
||||
.item-wp.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .text-input {
|
||||
border-color: $text-input-wp-highlight-color-invalid;
|
||||
}
|
||||
}
|
||||
|
||||
@ -77,7 +77,11 @@ $label-ios-margin-start: 0 !default;
|
||||
transform-origin: right top;
|
||||
}
|
||||
|
||||
// TODO remove all uses of input-has-focus in v4
|
||||
// TODO remove all uses of input-has-value in v4
|
||||
.item-input-has-focus .label-ios[floating],
|
||||
.input-has-focus .label-ios[floating],
|
||||
.item-input-has-value .label-ios[floating],
|
||||
.input-has-value .label-ios[floating] {
|
||||
transform: translate3d(0, 0, 0) scale(.8);
|
||||
}
|
||||
@ -90,7 +94,9 @@ $label-ios-margin-start: 0 !default;
|
||||
margin-bottom: $item-ios-padding-media-bottom - 2;
|
||||
}
|
||||
|
||||
.item-input-has-focus .label-ios[stacked],
|
||||
.input-has-focus .label-ios[stacked],
|
||||
.item-input-has-focus .label-ios[floating],
|
||||
.input-has-focus .label-ios[floating] {
|
||||
color: $label-ios-text-color-focused;
|
||||
}
|
||||
|
||||
@ -70,12 +70,18 @@ $label-md-margin-start: 0 !default;
|
||||
@include margin(null, null, 0, 0);
|
||||
}
|
||||
|
||||
// TODO remove all uses of input-has-focus in v4
|
||||
// TODO remove all uses of input-has-value in v4
|
||||
.item-input-has-focus .label-md[stacked],
|
||||
.input-has-focus .label-md[stacked],
|
||||
.item-input-has-focus .label-md[floating],
|
||||
.input-has-focus .label-md[floating] {
|
||||
color: $label-md-text-color-focused;
|
||||
}
|
||||
|
||||
.item-input-has-focus .label-md[floating],
|
||||
.input-has-focus .label-md[floating],
|
||||
.item-input-has-value .label-md[floating],
|
||||
.input-has-value .label-md[floating] {
|
||||
transform: translate3d(0, 0, 0) scale(.8);
|
||||
}
|
||||
|
||||
@ -50,12 +50,18 @@ $label-wp-text-color-focused: color($colors-wp, primary) !default;
|
||||
@include margin(null, null, 0, 0);
|
||||
}
|
||||
|
||||
// TODO remove all uses of input-has-focus in v4
|
||||
// TODO remove all uses of input-has-value in v4
|
||||
.item-input-has-focus .label-wp[stacked],
|
||||
.input-has-focus .label-wp[stacked],
|
||||
.item-input-has-focus .label-wp[floating],
|
||||
.input-has-focus .label-wp[floating] {
|
||||
color: $label-wp-text-color-focused;
|
||||
}
|
||||
|
||||
.item-input-has-focus .label-wp[floating],
|
||||
.input-has-focus .label-wp[floating],
|
||||
.item-input-has-value .label-wp[floating],
|
||||
.input-has-value .label-wp[floating] {
|
||||
transform: translate3d(0, 0, 0) scale(.8);
|
||||
}
|
||||
|
||||
@ -41,7 +41,7 @@ $list-inset-ios-border-radius: 4px !default;
|
||||
// deprecated
|
||||
$list-ios-header-padding-left: $item-ios-padding-start !default;
|
||||
/// @prop - Padding start of the header in a list
|
||||
$list-ios-header-padding-start: $list-ios-header-padding-left;
|
||||
$list-ios-header-padding-start: $list-ios-header-padding-left !default;
|
||||
|
||||
/// @prop - Border bottom of the header in a list
|
||||
$list-ios-header-border-bottom: $hairlines-width solid $list-ios-border-color !default;
|
||||
|
||||
@ -44,7 +44,7 @@ $list-md-header-margin-bottom: 13px !default;
|
||||
// deprecated
|
||||
$list-md-header-padding-left: $item-md-padding-start !default;
|
||||
/// @prop - Padding start of the header in a list
|
||||
$list-md-header-padding-start: $list-md-header-padding-left;
|
||||
$list-md-header-padding-start: $list-md-header-padding-left !default;
|
||||
|
||||
/// @prop - Minimum height of the header in a list
|
||||
$list-md-header-min-height: 4.5rem !default;
|
||||
|
||||
@ -41,7 +41,7 @@ $list-inset-wp-border-radius: 2px !default;
|
||||
// deprecated
|
||||
$list-wp-header-padding-left: $item-wp-padding-start !default;
|
||||
/// @prop - Padding start of the header in a list
|
||||
$list-wp-header-padding-start: $list-wp-header-padding-left;
|
||||
$list-wp-header-padding-start: $list-wp-header-padding-left !default;
|
||||
|
||||
/// @prop - Border bottom of the header in a list
|
||||
$list-wp-header-border-bottom: 1px solid $list-wp-border-color !default;
|
||||
|
||||
@ -5,6 +5,5 @@ export interface LoadingOptions {
|
||||
cssClass?: string;
|
||||
showBackdrop?: boolean;
|
||||
dismissOnPageChange?: boolean;
|
||||
delay?: number;
|
||||
duration?: number;
|
||||
}
|
||||
|
||||
@ -25,7 +25,7 @@ import { RootNode } from '../split-pane/split-pane';
|
||||
* will be displayed differently based on the mode, however the display type can be changed
|
||||
* to any of the available [menu types](#menu-types). The menu element should be a sibling
|
||||
* to the app's content element. There can be any number of menus attached to the content.
|
||||
* These can be controlled from the templates, or programmatically using the [MenuController](../MenuController).
|
||||
* These can be controlled from the templates, or programmatically using the [MenuController](../app/MenuController).
|
||||
*
|
||||
* @usage
|
||||
*
|
||||
@ -170,14 +170,14 @@ import { RootNode } from '../split-pane/split-pane';
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* See the [MenuController](../MenuController) API docs for all of the methods
|
||||
* See the [MenuController](../../app/MenuController) API docs for all of the methods
|
||||
* and usage information.
|
||||
*
|
||||
*
|
||||
* @demo /docs/demos/src/menu/
|
||||
*
|
||||
* @see {@link /docs/components#menus Menu Component Docs}
|
||||
* @see {@link ../MenuController MenuController API Docs}
|
||||
* @see {@link ../../app/MenuController MenuController API Docs}
|
||||
* @see {@link ../../nav/Nav Nav API Docs}
|
||||
* @see {@link ../../nav/NavController NavController API Docs}
|
||||
*/
|
||||
|
||||
@ -65,6 +65,7 @@ import { DeepLinker } from '../../navigation/deep-linker';
|
||||
* |-----------------------|------------|------------------------------------------------------------------------------------------------------------------|
|
||||
* | showBackdrop |`boolean` | Whether to show the backdrop. Default true. |
|
||||
* | enableBackdropDismiss |`boolean` | Whether the popover should be dismissed by tapping the backdrop. Default true. |
|
||||
* | cssClass |`string` | Additional classes for custom styles, separated by spaces. |
|
||||
*
|
||||
* A modal can also emit data, which is useful when it is used to add or edit
|
||||
* data. For example, a profile page could slide up in a modal, and on submit,
|
||||
|
||||
@ -146,6 +146,7 @@ export class Range extends BaseInput<any> implements AfterContentInit, ControlVa
|
||||
val = Math.round(val);
|
||||
if (!isNaN(val)) {
|
||||
this._min = val;
|
||||
this._inputUpdated();
|
||||
}
|
||||
}
|
||||
|
||||
@ -160,6 +161,7 @@ export class Range extends BaseInput<any> implements AfterContentInit, ControlVa
|
||||
val = Math.round(val);
|
||||
if (!isNaN(val)) {
|
||||
this._max = val;
|
||||
this._inputUpdated();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -92,6 +92,14 @@
|
||||
<ion-range min="1000" max="2000" step="100" pin="true" snaps="true" [(ngModel)]="singleValue4"></ion-range>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>dynamic min and max</ion-label>
|
||||
<ion-range [min]="min" [max]="max" [(ngModel)]="singeValue5">
|
||||
<ion-label range-left><input type="text" style="width: 50px;" [(ngModel)]="min" /></ion-label>
|
||||
<ion-label range-right><input type="text" style="width: 50px;" [(ngModel)]="max" /></ion-label>
|
||||
</ion-range>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>dual, pin, {{dualValue | json}}</ion-label>
|
||||
<ion-range dualKnobs="true" pin="true" [(ngModel)]="dualValue"></ion-range>
|
||||
@ -117,4 +125,4 @@
|
||||
</ion-list>
|
||||
</form>
|
||||
|
||||
</ion-content>
|
||||
</ion-content>
|
||||
|
||||
@ -10,9 +10,13 @@ export class RootPage {
|
||||
singleValue2: number = 150;
|
||||
singleValue3: number = 64;
|
||||
singleValue4: number = 1300;
|
||||
singleValue5: number = 0;
|
||||
dualValue: any;
|
||||
dualValue2 = {lower: 33, upper: 60};
|
||||
|
||||
min: number = -50;
|
||||
max: number = 50;
|
||||
|
||||
rangeCtrl = new FormControl({value: '66', disabled: true});
|
||||
dualRangeCtrl = new FormControl({value: {lower: 33, upper: 60}, disabled: true});
|
||||
|
||||
|
||||
@ -139,7 +139,7 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default;
|
||||
// -----------------------------------------
|
||||
|
||||
.searchbar-ios .searchbar-ios-cancel {
|
||||
@include padding(0, 8px, 0, 0);
|
||||
@include padding(0, 0, 0, 8px);
|
||||
@include margin-horizontal(0, null);
|
||||
|
||||
display: none;
|
||||
|
||||
@ -188,7 +188,9 @@ export class Searchbar extends BaseInput<string> {
|
||||
*/
|
||||
_inputUpdated() {
|
||||
const ele = this._searchbarInput.nativeElement;
|
||||
if (ele) {
|
||||
// It is important not to re-assign the value if it is the same, because,
|
||||
// otherwise, the caret is moved to the end of the input
|
||||
if (ele && ele.value !== this.value) {
|
||||
ele.value = this.value;
|
||||
}
|
||||
this.positionElements();
|
||||
@ -238,11 +240,19 @@ export class Searchbar extends BaseInput<string> {
|
||||
|
||||
// Set the input padding start
|
||||
var inputLeft = 'calc(50% - ' + (textWidth / 2) + 'px)';
|
||||
inputEle.style.paddingLeft = inputLeft;
|
||||
if (this._plt.isRTL) {
|
||||
inputEle.style.paddingRight = inputLeft;
|
||||
} else {
|
||||
inputEle.style.paddingLeft = inputLeft;
|
||||
}
|
||||
|
||||
// Set the icon margin start
|
||||
var iconLeft = 'calc(50% - ' + ((textWidth / 2) + 30) + 'px)';
|
||||
iconEle.style.marginLeft = iconLeft;
|
||||
if (this._plt.isRTL) {
|
||||
iconEle.style.marginRight = iconLeft;
|
||||
} else {
|
||||
iconEle.style.marginLeft = iconLeft;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -257,11 +267,19 @@ export class Searchbar extends BaseInput<string> {
|
||||
var cancelStyle = cancelStyleEle.style;
|
||||
this._isCancelVisible = showShowCancel;
|
||||
if (showShowCancel) {
|
||||
cancelStyle.marginRight = '0';
|
||||
if (this._plt.isRTL) {
|
||||
cancelStyle.marginLeft = '0';
|
||||
} else {
|
||||
cancelStyle.marginRight = '0';
|
||||
}
|
||||
} else {
|
||||
var offset = cancelStyleEle.offsetWidth;
|
||||
if (offset > 0) {
|
||||
cancelStyle.marginRight = -offset + 'px';
|
||||
if (this._plt.isRTL) {
|
||||
cancelStyle.marginLeft = -offset + 'px';
|
||||
} else {
|
||||
cancelStyle.marginRight = -offset + 'px';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,11 +31,11 @@ import { SegmentButton } from './segment-button';
|
||||
*
|
||||
* <ion-content>
|
||||
* <!-- Segment in content -->
|
||||
* <ion-segment [(ngModel)]="relationship" color="primary">
|
||||
* <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
|
||||
* <ion-segment [(ngModel)]="relationship" color="primary" (ionChange)="segmentChanged($event)">
|
||||
* <ion-segment-button value="friends">
|
||||
* Friends
|
||||
* </ion-segment-button>
|
||||
* <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
|
||||
* <ion-segment-button value="enemies">
|
||||
* Enemies
|
||||
* </ion-segment-button>
|
||||
* </ion-segment>
|
||||
|
||||
@ -9,7 +9,7 @@ $select-ios-padding-top: $item-ios-padding-top !default;
|
||||
// deprecated
|
||||
$select-ios-padding-right: ($item-ios-padding-end / 2) !default;
|
||||
/// @prop - Padding end of the select
|
||||
$select-ios-padding-end: $select-ios-padding-right;
|
||||
$select-ios-padding-end: $select-ios-padding-right !default;
|
||||
|
||||
/// @prop - Padding bottom of the select
|
||||
$select-ios-padding-bottom: $item-ios-padding-bottom !default;
|
||||
@ -17,7 +17,7 @@ $select-ios-padding-bottom: $item-ios-padding-bottom !default;
|
||||
// deprecated
|
||||
$select-ios-padding-left: $item-ios-padding-start !default;
|
||||
/// @prop - Padding start of the select
|
||||
$select-ios-padding-start: $select-ios-padding-left;
|
||||
$select-ios-padding-start: $select-ios-padding-left !default;
|
||||
|
||||
/// @prop - Color of the select icon
|
||||
$select-ios-icon-color: #999 !default;
|
||||
|
||||
@ -9,7 +9,7 @@ $select-md-padding-top: $item-md-padding-top !default;
|
||||
// deprecated
|
||||
$select-md-padding-right: ($item-md-padding-end / 2) !default;
|
||||
/// @prop - Padding end of the select
|
||||
$select-md-padding-end: $select-md-padding-right;
|
||||
$select-md-padding-end: $select-md-padding-right !default;
|
||||
|
||||
/// @prop - Padding bottom of the select
|
||||
$select-md-padding-bottom: $item-md-padding-bottom !default;
|
||||
@ -17,7 +17,7 @@ $select-md-padding-bottom: $item-md-padding-bottom !default;
|
||||
// deprecated
|
||||
$select-md-padding-left: $item-md-padding-start !default;
|
||||
/// @prop - Padding start of the select
|
||||
$select-md-padding-start: $select-md-padding-left;
|
||||
$select-md-padding-start: $select-md-padding-left !default;
|
||||
|
||||
/// @prop - Color of the select icon
|
||||
$select-md-icon-color: #999 !default;
|
||||
|
||||
@ -897,9 +897,10 @@ function cleanupStyles(s: Slides) {
|
||||
}
|
||||
|
||||
// Container
|
||||
removeClass(s.container, s._classNames);
|
||||
s.container.removeAttribute('style');
|
||||
|
||||
if (s.container) {
|
||||
removeClass(s.container, s._classNames);
|
||||
s.container.removeAttribute('style');
|
||||
}
|
||||
// Wrapper
|
||||
s._wrapper.removeAttribute('style');
|
||||
|
||||
|
||||
@ -315,6 +315,7 @@ $toolbar-button-ios-strong-font-weight: 600 !default;
|
||||
.back-button-ios {
|
||||
@include margin(0);
|
||||
|
||||
z-index: 99;
|
||||
overflow: visible;
|
||||
|
||||
order: map-get($toolbar-order-ios, back-button);
|
||||
|
||||
@ -8,7 +8,7 @@ import { ToolbarBase } from './toolbar-base';
|
||||
* @name Toolbar
|
||||
* @description
|
||||
* A Toolbar is a generic bar that is positioned above or below content.
|
||||
* Unlike a [Navbar](../../navbar/Navbar), a toolbar can be used as a subheader.
|
||||
* Unlike a [Navbar](../Navbar/), a toolbar can be used as a subheader.
|
||||
* When toolbars are placed within an `<ion-header>` or `<ion-footer>`,
|
||||
* the toolbars stay fixed in their respective location. When placed within
|
||||
* `<ion-content>`, toolbars will scroll with the content.
|
||||
@ -90,7 +90,7 @@ import { ToolbarBase } from './toolbar-base';
|
||||
* ```
|
||||
*
|
||||
* @demo /docs/demos/src/toolbar/
|
||||
* @see {@link ../../navbar/Navbar/ Navbar API Docs}
|
||||
* @see {@link ../Navbar/ Navbar API Docs}
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ion-toolbar',
|
||||
|
||||
@ -4,7 +4,7 @@ import { adjustRendered, calcDimensions, estimateHeight, initReadNodes, processR
|
||||
import { Config } from '../../config/config';
|
||||
import { Content, ScrollEvent } from '../content/content';
|
||||
import { DomController } from '../../platform/dom-controller';
|
||||
import { isBlank, isFunction, isPresent, assert } from '../../util/util';
|
||||
import { isFunction, isPresent, assert } from '../../util/util';
|
||||
import { Platform } from '../../platform/platform';
|
||||
import { ViewController } from '../../navigation/view-controller';
|
||||
import { VirtualCell, VirtualData, VirtualNode } from './virtual-util';
|
||||
@ -528,7 +528,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
|
||||
}
|
||||
|
||||
private _updateDiffer() {
|
||||
if (isBlank(this._differ) && isPresent(this._records)) {
|
||||
if (isPresent(this._records)) {
|
||||
this._differ = this._iterableDiffers.find(this._records).create(this._virtualTrackBy);
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,4 +32,19 @@ ion-icon {
|
||||
text-rendering: auto;
|
||||
text-transform: none;
|
||||
speak: none;
|
||||
|
||||
@include rtl() {
|
||||
&[aria-label^="arrow"]::before,
|
||||
&[flip-rtl]::before {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
&[unflip-rtl]::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,9 +8,9 @@
|
||||
* @usage
|
||||
* ```ts
|
||||
* export class MyClass{
|
||||
* constructor(public params: NavParams){
|
||||
* constructor(public navParams: NavParams){
|
||||
* // userParams is an object we have in our nav-parameters
|
||||
* this.params.get('userParams');
|
||||
* this.navParams.get('userParams');
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
@ -33,9 +33,9 @@ export class NavParams {
|
||||
*
|
||||
* ```ts
|
||||
* export class MyClass{
|
||||
* constructor(public params: NavParams){
|
||||
* constructor(public navParams: NavParams){
|
||||
* // userParams is an object we have in our nav-parameters
|
||||
* this.params.get('userParams');
|
||||
* this.navParams.get('userParams');
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
|
||||
@ -71,11 +71,11 @@ $item-ios-divider-color: $text-color !default;
|
||||
$item-ios-padding-top: 11px !default;
|
||||
// deprecated
|
||||
$item-ios-padding-right: 16px !default;
|
||||
$item-ios-padding-end: $item-ios-padding-right;
|
||||
$item-ios-padding-end: $item-ios-padding-right !default;
|
||||
$item-ios-padding-bottom: 11px !default;
|
||||
// deprecated
|
||||
$item-ios-padding-left: 16px !default;
|
||||
$item-ios-padding-start: $item-ios-padding-left;
|
||||
$item-ios-padding-start: $item-ios-padding-left !default;
|
||||
$item-ios-padding-media-top: 10px !default;
|
||||
$item-ios-padding-media-bottom: 10px !default;
|
||||
$item-ios-padding-icon-top: 9px !default;
|
||||
|
||||
@ -60,11 +60,11 @@ $list-md-activated-background-color: #d9d9d9 !default;
|
||||
$item-md-padding-top: 13px !default;
|
||||
// deprecated
|
||||
$item-md-padding-right: 16px !default;
|
||||
$item-md-padding-end: $item-md-padding-right;
|
||||
$item-md-padding-end: $item-md-padding-right !default;
|
||||
$item-md-padding-bottom: 13px !default;
|
||||
// deprecated
|
||||
$item-md-padding-left: 16px !default;
|
||||
$item-md-padding-start: $item-md-padding-left;
|
||||
$item-md-padding-start: $item-md-padding-left !default;
|
||||
$item-md-padding-media-top: 9px !default;
|
||||
$item-md-padding-media-bottom: 9px !default;
|
||||
$item-md-padding-icon-top: 11px !default;
|
||||
|
||||
@ -61,11 +61,11 @@ $list-wp-activated-background-color: #d9d9d9 !default;
|
||||
$item-wp-padding-top: 13px !default;
|
||||
// deprecated
|
||||
$item-wp-padding-right: 16px !default;
|
||||
$item-wp-padding-end: $item-wp-padding-right;
|
||||
$item-wp-padding-end: $item-wp-padding-right !default;
|
||||
$item-wp-padding-bottom: 13px !default;
|
||||
// deprecated
|
||||
$item-wp-padding-left: 16px !default;
|
||||
$item-wp-padding-start: $item-wp-padding-left;
|
||||
$item-wp-padding-start: $item-wp-padding-left !default;
|
||||
$item-wp-padding-media-top: 9px !default;
|
||||
$item-wp-padding-media-bottom: 9px !default;
|
||||
$item-wp-padding-icon-top: 11px !default;
|
||||
|
||||
@ -53,11 +53,11 @@ $list-ios-activated-background-color: #d9d9d9 !default;
|
||||
$item-ios-padding-top: 11px !default;
|
||||
// deprecated
|
||||
$item-ios-padding-right: 16px !default;
|
||||
$item-ios-padding-end: $item-ios-padding-right;
|
||||
$item-ios-padding-end: $item-ios-padding-right !default;
|
||||
$item-ios-padding-bottom: 11px !default;
|
||||
// deprecated
|
||||
$item-ios-padding-left: 16px !default;
|
||||
$item-ios-padding-start: $item-ios-padding-left;
|
||||
$item-ios-padding-start: $item-ios-padding-left !default;
|
||||
$item-ios-padding-media-top: 8px !default;
|
||||
$item-ios-padding-media-bottom: 8px !default;
|
||||
$item-ios-padding-icon-top: 9px !default;
|
||||
|
||||
@ -52,11 +52,11 @@ $list-md-activated-background-color: #f1f1f1 !default;
|
||||
$item-md-padding-top: 13px !default;
|
||||
// deprecated
|
||||
$item-md-padding-right: 16px !default;
|
||||
$item-md-padding-end: $item-md-padding-right;
|
||||
$item-md-padding-end: $item-md-padding-right !default;
|
||||
$item-md-padding-bottom: 13px !default;
|
||||
// deprecated
|
||||
$item-md-padding-left: 16px !default;
|
||||
$item-md-padding-start: $item-md-padding-left;
|
||||
$item-md-padding-start: $item-md-padding-left !default;
|
||||
$item-md-padding-media-top: 9px !default;
|
||||
$item-md-padding-media-bottom: 9px !default;
|
||||
$item-md-padding-icon-top: 11px !default;
|
||||
|
||||
@ -53,11 +53,11 @@ $list-wp-activated-background-color: #aaa !default;
|
||||
$item-wp-padding-top: 13px !default;
|
||||
// deprecated
|
||||
$item-wp-padding-right: 16px !default;
|
||||
$item-wp-padding-end: $item-wp-padding-right;
|
||||
$item-wp-padding-end: $item-wp-padding-right !default;
|
||||
$item-wp-padding-bottom: 13px !default;
|
||||
// deprecated
|
||||
$item-wp-padding-left: 16px !default;
|
||||
$item-wp-padding-start: $item-wp-padding-left;
|
||||
$item-wp-padding-start: $item-wp-padding-left !default;
|
||||
$item-wp-padding-media-top: 9px !default;
|
||||
$item-wp-padding-media-bottom: 9px !default;
|
||||
$item-wp-padding-icon-top: 11px !default;
|
||||
|
||||
@ -282,7 +282,9 @@ export class BaseInput<T> extends Ion implements CommonInput<T> {
|
||||
if (!this._item) {
|
||||
return;
|
||||
}
|
||||
// TODO remove all uses of input-has-value in v4
|
||||
this._item.setElementClass('input-has-value', this.hasValue());
|
||||
this._item.setElementClass('item-input-has-value', this.hasValue());
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user