mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
Merge branch 'master' into v4
# Conflicts: # package.json # src/components/badge/badge.scss # src/components/slides/slides.scss
This commit is contained in:
Adam Bradley
18
package.json
18
package.json
@ -25,17 +25,17 @@
|
||||
"link": "gulp release.prepareReleasePackage && cd dist/ionic-angular && npm link"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/common": "4.0.2",
|
||||
"@angular/compiler": "4.0.2",
|
||||
"@angular/compiler-cli": "4.0.2",
|
||||
"@angular/core": "4.0.2",
|
||||
"@angular/forms": "4.0.2",
|
||||
"@angular/http": "4.0.2",
|
||||
"@angular/platform-browser": "4.0.2",
|
||||
"@angular/platform-browser-dynamic": "4.0.2",
|
||||
"@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",
|
||||
"ionicons": "~3.0.0",
|
||||
"rxjs": "5.1.1",
|
||||
"zone.js": "^0.8.5"
|
||||
"zone.js": "^0.8.9"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ionic/app-scripts": "nightly",
|
||||
|
||||
@ -11,15 +11,15 @@ header_sub_title: Extend Ionic even further with the power of AngularJS
|
||||
searchable: false
|
||||
---
|
||||
|
||||
# Ionic 2 API Docs
|
||||
# Ionic API Docs
|
||||
|
||||
<img class="section-header" src="/img/docs/api-intro-header.png" />
|
||||
|
||||
|
||||
Ionic 2 takes everything you know and loved about Ionic 1, and builds on top of it to provide a much more flexible framework.
|
||||
Ionic takes everything you know and loved about Ionic V1, and builds on top of it to provide a much more flexible framework.
|
||||
|
||||
In the API docs, you'll find two kinds of doc pages: Component and Service APIs.
|
||||
|
||||
The Component APIs include classes like `Checkbox`, `Toggle` or `Item` and show you how to use them, in addition to listing their selectors, available properties and events.
|
||||
|
||||
The Service APIs are classes like `MenuController`, `Config` or `Platform`. These are services provided by Ionic 2 that can be injected into your classes.
|
||||
The Service APIs are classes like `MenuController`, `Config` or `Platform`. These are services provided by Ionic that can be injected into your classes.
|
||||
|
||||
@ -74,7 +74,7 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default;
|
||||
|
||||
|
||||
.action-sheet-ios {
|
||||
text-align: $action-sheet-ios-text-align;
|
||||
@include text-align($action-sheet-ios-text-align);
|
||||
}
|
||||
|
||||
.action-sheet-ios .action-sheet-container {
|
||||
@ -95,13 +95,14 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default;
|
||||
}
|
||||
|
||||
.action-sheet-ios .action-sheet-title {
|
||||
@include text-align($action-sheet-ios-text-align);
|
||||
|
||||
padding: $action-sheet-ios-title-padding;
|
||||
|
||||
border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
|
||||
border-radius: $action-sheet-ios-title-border-radius;
|
||||
font-size: $action-sheet-ios-title-font-size;
|
||||
font-weight: $action-sheet-ios-title-font-weight;
|
||||
text-align: $action-sheet-ios-text-align;
|
||||
color: $action-sheet-ios-title-color;
|
||||
}
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Text align of the action sheet
|
||||
$action-sheet-md-text-align: left !default;
|
||||
$action-sheet-md-text-align: start !default;
|
||||
|
||||
/// @prop - Background color of the action sheet
|
||||
$action-sheet-md-background: #fafafa !default;
|
||||
@ -61,14 +61,17 @@ $action-sheet-md-icon-margin: 0 32px 0 0 !default;
|
||||
}
|
||||
|
||||
.action-sheet-md .action-sheet-title {
|
||||
@include text-align($action-sheet-md-text-align);
|
||||
|
||||
padding: $action-sheet-md-title-padding;
|
||||
|
||||
font-size: $action-sheet-md-title-font-size;
|
||||
text-align: $action-sheet-md-text-align;
|
||||
color: $action-sheet-md-title-color;
|
||||
}
|
||||
|
||||
.action-sheet-md .action-sheet-button {
|
||||
@include text-align($action-sheet-md-text-align);
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@ -77,7 +80,6 @@ $action-sheet-md-icon-margin: 0 32px 0 0 !default;
|
||||
min-height: $action-sheet-md-button-min-height;
|
||||
|
||||
font-size: $action-sheet-md-button-font-size;
|
||||
text-align: $action-sheet-md-text-align;
|
||||
color: $action-sheet-md-button-text-color;
|
||||
background: $action-sheet-md-button-background;
|
||||
}
|
||||
@ -87,13 +89,14 @@ $action-sheet-md-icon-margin: 0 32px 0 0 !default;
|
||||
}
|
||||
|
||||
.action-sheet-md .action-sheet-icon {
|
||||
@include text-align($action-sheet-md-icon-text-align);
|
||||
|
||||
margin: $action-sheet-md-icon-margin;
|
||||
padding: 0;
|
||||
|
||||
width: $action-sheet-md-icon-width;
|
||||
|
||||
font-size: $action-sheet-md-icon-font-size;
|
||||
text-align: $action-sheet-md-icon-text-align;
|
||||
vertical-align: $action-sheet-md-icon-vertical-align;
|
||||
}
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Text align of the action sheet
|
||||
$action-sheet-wp-text-align: left !default;
|
||||
$action-sheet-wp-text-align: start !default;
|
||||
|
||||
/// @prop - Background color of the action sheet
|
||||
$action-sheet-wp-background: #fff !default;
|
||||
@ -69,20 +69,22 @@ $action-sheet-wp-icon-margin: 0 20px 0 0 !default;
|
||||
}
|
||||
|
||||
.action-sheet-wp .action-sheet-title {
|
||||
@include text-align($action-sheet-wp-title-text-align);
|
||||
|
||||
padding: $action-sheet-wp-title-padding;
|
||||
|
||||
font-size: $action-sheet-wp-title-font-size;
|
||||
text-align: $action-sheet-wp-title-text-align;
|
||||
color: $action-sheet-wp-title-color;
|
||||
}
|
||||
|
||||
.action-sheet-wp .action-sheet-button {
|
||||
@include text-align($action-sheet-wp-button-text-align);
|
||||
|
||||
padding: $action-sheet-wp-button-padding;
|
||||
|
||||
min-height: $action-sheet-wp-button-height;
|
||||
|
||||
font-size: $action-sheet-wp-button-font-size;
|
||||
text-align: $action-sheet-wp-button-text-align;
|
||||
color: $action-sheet-wp-button-text-color;
|
||||
background: $action-sheet-wp-button-background;
|
||||
}
|
||||
@ -92,13 +94,14 @@ $action-sheet-wp-icon-margin: 0 20px 0 0 !default;
|
||||
}
|
||||
|
||||
.action-sheet-wp .action-sheet-icon {
|
||||
@include text-align($action-sheet-wp-icon-text-align);
|
||||
|
||||
margin: $action-sheet-wp-icon-margin;
|
||||
padding: 0;
|
||||
|
||||
width: $action-sheet-wp-icon-width;
|
||||
|
||||
font-size: $action-sheet-wp-icon-font-size;
|
||||
text-align: $action-sheet-wp-icon-text-align;
|
||||
vertical-align: $action-sheet-wp-icon-vertical-align;
|
||||
}
|
||||
|
||||
|
||||
@ -128,15 +128,15 @@ import { Config } from '../../config/config';
|
||||
*
|
||||
* Alert options
|
||||
*
|
||||
* | Property | Type | Description |
|
||||
* |-----------------------|-----------|---------------------------------------------------------------------------|
|
||||
* | title | `string` | The title for the alert. |
|
||||
* | subTitle | `string` | The subtitle for the alert. |
|
||||
* | message | `string` | The message for the alert. |
|
||||
* | cssClass | `string` | Additional classes for custom styles, separated by spaces. |
|
||||
* | inputs | `array` | An array of inputs for the alert. See input options. |
|
||||
* | buttons | `array` | An array of buttons for the alert. See buttons options. |
|
||||
* | enableBackdropDismiss | `boolean` | Whether the alert should be dismissed by tapping the backdrop. |
|
||||
* | Property | Type | Description |
|
||||
* |-----------------------|-----------|------------------------------------------------------------------------------|
|
||||
* | title | `string` | The title for the alert. |
|
||||
* | subTitle | `string` | The subtitle for the alert. |
|
||||
* | message | `string` | The message for the alert. |
|
||||
* | cssClass | `string` | Additional classes for custom styles, separated by spaces. |
|
||||
* | inputs | `array` | An array of inputs for the alert. See input options. |
|
||||
* | buttons | `array` | An array of buttons for the alert. See buttons options. |
|
||||
* | enableBackdropDismiss | `boolean` | Whether the alert should be dismissed by tapping the backdrop. Default true. |
|
||||
*
|
||||
*
|
||||
* Input options
|
||||
|
||||
@ -230,9 +230,9 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default;
|
||||
// --------------------------------------------------
|
||||
|
||||
.alert-ios .alert-head {
|
||||
padding: $alert-ios-head-padding;
|
||||
@include text-align($alert-ios-head-text-align);
|
||||
|
||||
text-align: $alert-ios-head-text-align;
|
||||
padding: $alert-ios-head-padding;
|
||||
}
|
||||
|
||||
.alert-ios .alert-title {
|
||||
@ -253,10 +253,11 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default;
|
||||
|
||||
.alert-ios .alert-message,
|
||||
.alert-ios .alert-input-group {
|
||||
@include text-align($alert-ios-message-text-align);
|
||||
|
||||
padding: $alert-ios-message-padding;
|
||||
|
||||
font-size: $alert-ios-message-font-size;
|
||||
text-align: $alert-ios-message-text-align;
|
||||
color: $alert-ios-message-text-color;
|
||||
}
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ $alert-md-box-shadow: 0 16px 20px $alert-md-box-shadow-c
|
||||
$alert-md-head-padding: 24px 24px 20px 24px !default;
|
||||
|
||||
/// @prop - Text align of the alert head
|
||||
$alert-md-head-text-align: left !default;
|
||||
$alert-md-head-text-align: start !default;
|
||||
|
||||
/// @prop - Font size of the alert title
|
||||
$alert-md-title-font-size: 22px !default;
|
||||
@ -112,7 +112,7 @@ $alert-md-button-border-radius: 2px !default;
|
||||
$alert-md-button-text-transform: uppercase !default;
|
||||
|
||||
/// @prop - Text align of the alert button
|
||||
$alert-md-button-text-align: right !default;
|
||||
$alert-md-button-text-align: end !default;
|
||||
|
||||
|
||||
/// @prop - Border top of the alert list
|
||||
@ -256,9 +256,9 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
|
||||
// --------------------------------------------------
|
||||
|
||||
.alert-md .alert-head {
|
||||
padding: $alert-md-head-padding;
|
||||
@include text-align($alert-md-head-text-align);
|
||||
|
||||
text-align: $alert-md-head-text-align;
|
||||
padding: $alert-md-head-padding;
|
||||
}
|
||||
|
||||
.alert-md .alert-title {
|
||||
@ -474,6 +474,8 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
|
||||
}
|
||||
|
||||
.alert-md .alert-button {
|
||||
@include text-align($alert-md-button-text-align);
|
||||
|
||||
// necessary for ripple to work properly
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@ -483,7 +485,6 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
|
||||
|
||||
border-radius: $alert-md-button-border-radius;
|
||||
font-weight: $alert-md-button-font-weight;
|
||||
text-align: $alert-md-button-text-align;
|
||||
text-transform: $alert-md-button-text-transform;
|
||||
color: $alert-md-button-text-color;
|
||||
background-color: $alert-md-button-background-color;
|
||||
|
||||
@ -108,6 +108,7 @@ ion-alert input {
|
||||
}
|
||||
|
||||
.alert-tappable {
|
||||
@include text-align(start);
|
||||
@include appearance(none);
|
||||
|
||||
margin: 0;
|
||||
@ -117,7 +118,5 @@ ion-alert input {
|
||||
|
||||
font-size: inherit;
|
||||
line-height: initial;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@ -31,7 +31,7 @@ $alert-wp-background: #e6e6e6 !default;
|
||||
$alert-wp-head-padding: 20px 22px 5px 22px !default;
|
||||
|
||||
/// @prop - Text align of the alert head
|
||||
$alert-wp-head-text-align: left !default;
|
||||
$alert-wp-head-text-align: start !default;
|
||||
|
||||
/// @prop - Font size of the alert title
|
||||
$alert-wp-title-font-size: 20px !default;
|
||||
@ -256,9 +256,9 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default;
|
||||
// --------------------------------------------------
|
||||
|
||||
.alert-wp .alert-head {
|
||||
padding: $alert-wp-head-padding;
|
||||
@include text-align($alert-wp-head-text-align);
|
||||
|
||||
text-align: $alert-wp-head-text-align;
|
||||
padding: $alert-wp-head-padding;
|
||||
}
|
||||
|
||||
.alert-wp .alert-title {
|
||||
|
||||
@ -333,33 +333,27 @@ ion-footer {
|
||||
// Provide `[text-{bp}]` attributes for aligning the text based
|
||||
// on the breakpoint
|
||||
[text#{$infix}-center] {
|
||||
// scss-lint:disable ImportantRule
|
||||
text-align: center !important;
|
||||
@include text-align(center, !important);
|
||||
}
|
||||
|
||||
[text#{$infix}-justify] {
|
||||
// scss-lint:disable ImportantRule
|
||||
text-align: justify !important;
|
||||
@include text-align(justify, !important);
|
||||
}
|
||||
|
||||
[text#{$infix}-start] {
|
||||
// scss-lint:disable ImportantRule
|
||||
text-align: start !important;
|
||||
@include text-align(start, !important);
|
||||
}
|
||||
|
||||
[text#{$infix}-end] {
|
||||
// scss-lint:disable ImportantRule
|
||||
text-align: end !important;
|
||||
@include text-align(end, !important);
|
||||
}
|
||||
|
||||
[text#{$infix}-left] {
|
||||
// scss-lint:disable ImportantRule
|
||||
text-align: left !important;
|
||||
@include text-align(left, !important);
|
||||
}
|
||||
|
||||
[text#{$infix}-right] {
|
||||
// scss-lint:disable ImportantRule
|
||||
text-align: right !important;
|
||||
@include text-align(right, !important);
|
||||
}
|
||||
|
||||
[text#{$infix}-nowrap] {
|
||||
|
||||
@ -11,8 +11,9 @@ $badge-font-size: 1.3rem !default;
|
||||
$badge-font-weight: bold !default;
|
||||
|
||||
|
||||
ion-badge,
|
||||
:host {
|
||||
ion-badge {
|
||||
@include text-align(center);
|
||||
|
||||
display: inline-block;
|
||||
visibility: inherit !important;
|
||||
contain: content;
|
||||
@ -27,7 +28,6 @@ ion-badge,
|
||||
font-weight: $badge-font-weight;
|
||||
line-height: 1;
|
||||
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
@ -15,13 +15,13 @@ $button-round-border-radius: 64px !default;
|
||||
|
||||
|
||||
.button {
|
||||
@include text-align(center);
|
||||
@include appearance(none);
|
||||
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
display: inline-block;
|
||||
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: none;
|
||||
|
||||
|
||||
@ -52,6 +52,8 @@ ion-chip .button {
|
||||
}
|
||||
|
||||
ion-chip ion-icon {
|
||||
@include text-align($chip-icon-text-align);
|
||||
|
||||
width: $chip-icon-size;
|
||||
height: $chip-icon-size;
|
||||
|
||||
@ -59,7 +61,6 @@ ion-chip ion-icon {
|
||||
|
||||
font-size: $chip-icon-font-size;
|
||||
line-height: $chip-icon-size;
|
||||
text-align: $chip-icon-text-align;
|
||||
}
|
||||
|
||||
ion-chip ion-avatar {
|
||||
|
||||
@ -20,6 +20,7 @@ $fab-list-button-background-color: #f4f4f4 !default;
|
||||
|
||||
|
||||
.fab {
|
||||
@include text-align(center);
|
||||
@include appearance(none);
|
||||
|
||||
position: relative;
|
||||
@ -33,7 +34,6 @@ $fab-list-button-background-color: #f4f4f4 !default;
|
||||
border-radius: 50%;
|
||||
font-size: 14px;
|
||||
line-height: $fab-size;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
|
||||
@ -28,6 +28,8 @@ ion-infinite-scroll {
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-infinite-scroll-content {
|
||||
@include text-align(center);
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
@ -35,8 +37,6 @@ ion-infinite-scroll-content {
|
||||
|
||||
height: 100%;
|
||||
min-height: 84px;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.infinite-loading {
|
||||
|
||||
@ -11,9 +11,9 @@
|
||||
|
||||
.item > ion-icon:first-child,
|
||||
.item-inner > ion-icon:first-child {
|
||||
min-width: 24px;
|
||||
@include text-align(center);
|
||||
|
||||
text-align: center;
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
.item > ion-icon,
|
||||
|
||||
@ -19,6 +19,8 @@
|
||||
}
|
||||
|
||||
.item-block {
|
||||
@include text-align(initial);
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
@ -35,7 +37,6 @@
|
||||
|
||||
font-weight: normal;
|
||||
line-height: normal;
|
||||
text-align: initial;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@ -69,10 +69,9 @@ $picker-button-ios-strong-font-weight: 600 !default;
|
||||
}
|
||||
|
||||
.picker-ios .picker-toolbar-button {
|
||||
flex: 1;
|
||||
@include text-align(end);
|
||||
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.picker-ios .picker-toolbar-button:last-child .picker-button {
|
||||
@ -80,10 +79,9 @@ $picker-button-ios-strong-font-weight: 600 !default;
|
||||
}
|
||||
|
||||
.picker-ios .picker-toolbar-cancel {
|
||||
font-weight: normal;
|
||||
@include text-align(start);
|
||||
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.picker-ios .picker-button,
|
||||
|
||||
@ -87,6 +87,8 @@ ion-picker-cmp {
|
||||
}
|
||||
|
||||
.picker-prefix {
|
||||
@include text-align(end);
|
||||
|
||||
position: relative;
|
||||
|
||||
flex: 2;
|
||||
@ -94,12 +96,12 @@ ion-picker-cmp {
|
||||
min-width: 45%;
|
||||
max-width: 50%;
|
||||
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.picker-suffix {
|
||||
@include text-align(start);
|
||||
|
||||
position: relative;
|
||||
|
||||
flex: 2;
|
||||
@ -107,13 +109,13 @@ ion-picker-cmp {
|
||||
min-width: 45%;
|
||||
max-width: 50%;
|
||||
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// contain property is supported by Chrome
|
||||
.picker-opt {
|
||||
@include text-align(center);
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -122,7 +124,6 @@ ion-picker-cmp {
|
||||
|
||||
width: 100%;
|
||||
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
|
||||
@ -70,17 +70,15 @@ $picker-wp-option-selected-color: color($colors-wp, primary) !defaul
|
||||
}
|
||||
|
||||
.picker-wp .picker-toolbar-button {
|
||||
flex: 1;
|
||||
@include text-align(end);
|
||||
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.picker-wp .picker-toolbar-cancel {
|
||||
font-weight: normal;
|
||||
@include text-align(start);
|
||||
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.picker-wp .picker-button,
|
||||
|
||||
@ -34,10 +34,10 @@
|
||||
<ion-grid style="padding: 10px 0;">
|
||||
<ion-row>
|
||||
<ion-col col-6>
|
||||
<a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover left</a>
|
||||
<a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover start</a>
|
||||
</ion-col>
|
||||
<ion-col col-6 style="text-align: right;">
|
||||
<a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover right</a>
|
||||
<ion-col col-6 text-end>
|
||||
<a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover end</a>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
@ -122,6 +122,8 @@ $range-ios-pin-padding: 8px !default;
|
||||
}
|
||||
|
||||
.range-ios .range-knob-handle {
|
||||
@include text-align(center);
|
||||
|
||||
position: absolute;
|
||||
top: ($range-ios-slider-height / 2);
|
||||
left: 0%;
|
||||
@ -131,8 +133,6 @@ $range-ios-pin-padding: 8px !default;
|
||||
|
||||
width: $range-ios-hit-width;
|
||||
height: $range-ios-hit-height;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.range-ios .range-knob {
|
||||
@ -173,6 +173,8 @@ $range-ios-pin-padding: 8px !default;
|
||||
}
|
||||
|
||||
.range-ios .range-pin {
|
||||
@include text-align(center);
|
||||
|
||||
position: relative;
|
||||
top: -20px;
|
||||
display: inline-block;
|
||||
@ -185,8 +187,6 @@ $range-ios-pin-padding: 8px !default;
|
||||
|
||||
font-size: $range-ios-pin-font-size;
|
||||
|
||||
text-align: center;
|
||||
|
||||
color: $range-ios-pin-color;
|
||||
|
||||
background: $range-ios-pin-background-color;
|
||||
|
||||
@ -126,6 +126,8 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def
|
||||
}
|
||||
|
||||
.range-md .range-knob-handle {
|
||||
@include text-align(center);
|
||||
|
||||
position: absolute;
|
||||
top: ($range-md-slider-height / 2);
|
||||
left: 0%;
|
||||
@ -135,8 +137,6 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def
|
||||
|
||||
width: $range-md-hit-width;
|
||||
height: $range-md-hit-height;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.range-md .range-knob {
|
||||
@ -186,6 +186,8 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def
|
||||
}
|
||||
|
||||
.range-md .range-pin {
|
||||
@include text-align(center);
|
||||
|
||||
position: relative;
|
||||
top: -20px;
|
||||
display: inline-block;
|
||||
@ -199,8 +201,6 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def
|
||||
|
||||
font-size: $range-md-pin-font-size;
|
||||
|
||||
text-align: center;
|
||||
|
||||
color: $range-md-pin-color;
|
||||
|
||||
background: $range-md-pin-background-color;
|
||||
|
||||
@ -117,6 +117,8 @@ $range-wp-pin-padding: 8px !default;
|
||||
}
|
||||
|
||||
.range-wp .range-knob-handle {
|
||||
@include text-align(center);
|
||||
|
||||
position: absolute;
|
||||
top: ($range-wp-slider-height / 2);
|
||||
left: 0%;
|
||||
@ -126,8 +128,6 @@ $range-wp-pin-padding: 8px !default;
|
||||
|
||||
width: $range-wp-hit-width;
|
||||
height: $range-wp-hit-height;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.range-wp .range-knob {
|
||||
@ -166,6 +166,8 @@ $range-wp-pin-padding: 8px !default;
|
||||
}
|
||||
|
||||
.range-wp .range-pin {
|
||||
@include text-align(center);
|
||||
|
||||
position: relative;
|
||||
top: -24px;
|
||||
display: inline-block;
|
||||
@ -178,8 +180,6 @@ $range-wp-pin-padding: 8px !default;
|
||||
|
||||
font-size: $range-wp-pin-font-size;
|
||||
|
||||
text-align: center;
|
||||
|
||||
color: $range-wp-pin-color;
|
||||
|
||||
background: $range-wp-pin-background-color;
|
||||
|
||||
@ -69,8 +69,9 @@ ion-refresher-content {
|
||||
|
||||
.refresher-pulling-icon,
|
||||
.refresher-refreshing-icon {
|
||||
@include text-align(center);
|
||||
|
||||
font-size: $refresher-icon-font-size;
|
||||
text-align: center;
|
||||
color: $refresher-icon-color;
|
||||
transform-origin: center;
|
||||
transition: 200ms;
|
||||
@ -78,8 +79,9 @@ ion-refresher-content {
|
||||
|
||||
.refresher-pulling-text,
|
||||
.refresher-refreshing-text {
|
||||
@include text-align(center);
|
||||
|
||||
font-size: $refresher-text-font-size;
|
||||
text-align: center;
|
||||
color: $refresher-text-color;
|
||||
}
|
||||
|
||||
|
||||
@ -15,6 +15,8 @@ ion-segment {
|
||||
}
|
||||
|
||||
.segment-button {
|
||||
@include text-align(center);
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
@ -22,7 +24,6 @@ ion-segment {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
@ -158,8 +158,9 @@ ion-slides {
|
||||
|
||||
/* Pagination Styles */
|
||||
.swiper-pagination {
|
||||
@include text-align(center);
|
||||
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
transition: 300ms;
|
||||
transform: translate3d(0, 0, 0);
|
||||
z-index: 10;
|
||||
@ -423,12 +424,13 @@ button.swiper-pagination-bullet {
|
||||
}
|
||||
|
||||
.swiper-zoom-container {
|
||||
@include text-align(center);
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.swiper-zoom-container > img,
|
||||
@ -514,6 +516,20 @@ button.swiper-pagination-bullet {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ion-slides {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.slide-zoom {
|
||||
@include text-align(center);
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -528,3 +544,26 @@ button.swiper-pagination-bullet {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
@include text-align(center);
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
font-size: 18px;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.swiper-slide img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
@ -75,6 +75,7 @@
|
||||
}
|
||||
#list ol li {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
list-style: decimal;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
@ -26,6 +26,8 @@
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
@include text-align(center);
|
||||
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
@ -42,7 +44,6 @@
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
@ -98,17 +99,17 @@
|
||||
}
|
||||
|
||||
[tabsLayout=icon-left] .tab-button .tab-button-icon {
|
||||
padding-right: 8px;
|
||||
@include text-align(end);
|
||||
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
[tabsLayout=icon-right] .tab-button .tab-button-icon {
|
||||
@include text-align(start);
|
||||
|
||||
order: 10;
|
||||
|
||||
padding-left: 8px;
|
||||
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tab-hidden,
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button {
|
||||
@include text-align(center);
|
||||
@include appearance(none);
|
||||
|
||||
position: relative;
|
||||
@ -13,7 +14,6 @@
|
||||
padding: 0;
|
||||
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
|
||||
@ -97,9 +97,10 @@ $toolbar-button-ios-strong-font-weight: 600 !default;
|
||||
}
|
||||
|
||||
.toolbar-title-ios {
|
||||
@include text-align($toolbar-ios-title-text-align);
|
||||
|
||||
font-size: $toolbar-ios-title-font-size;
|
||||
font-weight: $toolbar-ios-title-font-weight;
|
||||
text-align: $toolbar-ios-title-text-align;
|
||||
color: $toolbar-ios-title-text-color;
|
||||
|
||||
pointer-events: auto;
|
||||
@ -156,15 +157,15 @@ $toolbar-button-ios-strong-font-weight: 600 !default;
|
||||
}
|
||||
|
||||
.bar-buttons-ios[end] {
|
||||
order: map-get($toolbar-order-ios, buttons-end);
|
||||
@include text-align(end);
|
||||
|
||||
text-align: right;
|
||||
order: map-get($toolbar-order-ios, buttons-end);
|
||||
}
|
||||
|
||||
.bar-buttons-ios[right] {
|
||||
order: map-get($toolbar-order-ios, buttons-right);
|
||||
@include text-align(right);
|
||||
|
||||
text-align: right;
|
||||
order: map-get($toolbar-order-ios, buttons-right);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -169,15 +169,15 @@ $toolbar-button-md-strong-font-weight: bold !default;
|
||||
}
|
||||
|
||||
.bar-buttons-md[end] {
|
||||
order: map-get($toolbar-order-md, buttons-end);
|
||||
@include text-align(end);
|
||||
|
||||
text-align: right;
|
||||
order: map-get($toolbar-order-md, buttons-end);
|
||||
}
|
||||
|
||||
.bar-buttons-md[right] {
|
||||
order: map-get($toolbar-order-md, buttons-right);
|
||||
@include text-align(right);
|
||||
|
||||
text-align: right;
|
||||
order: map-get($toolbar-order-md, buttons-right);
|
||||
}
|
||||
|
||||
|
||||
@ -346,12 +346,13 @@ $toolbar-button-md-strong-font-weight: bold !default;
|
||||
}
|
||||
|
||||
.back-button-icon-md {
|
||||
@include text-align(start);
|
||||
|
||||
margin: 0;
|
||||
padding: 0 6px;
|
||||
|
||||
font-size: 2.4rem;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -129,15 +129,15 @@ $toolbar-button-wp-strong-font-weight: bold !default;
|
||||
}
|
||||
|
||||
.bar-buttons-wp[end] {
|
||||
order: map-get($toolbar-order-wp, buttons-end);
|
||||
@include text-align(end);
|
||||
|
||||
text-align: right;
|
||||
order: map-get($toolbar-order-wp, buttons-end);
|
||||
}
|
||||
|
||||
.bar-buttons-wp[right] {
|
||||
order: map-get($toolbar-order-wp, buttons-right);
|
||||
@include text-align(right);
|
||||
|
||||
text-align: right;
|
||||
order: map-get($toolbar-order-wp, buttons-right);
|
||||
}
|
||||
|
||||
|
||||
@ -300,12 +300,13 @@ $toolbar-button-wp-strong-font-weight: bold !default;
|
||||
}
|
||||
|
||||
.back-button-icon-wp {
|
||||
@include text-align(start);
|
||||
|
||||
margin: 0;
|
||||
padding: 0 6px;
|
||||
|
||||
font-size: 2.4rem;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -291,3 +291,19 @@
|
||||
|
||||
@return $colors-list;
|
||||
}
|
||||
|
||||
// Sets correct text align with support for old browsers
|
||||
// @param {string} $direction - text direction
|
||||
// @param {string} $decorator - !important
|
||||
// ----------------------------------------------------------
|
||||
@mixin text-align($direction, $decorator: null) {
|
||||
@if $direction == start {
|
||||
text-align: left;
|
||||
text-align: start $decorator;
|
||||
} @else if $direction == end {
|
||||
text-align: right;
|
||||
text-align: end $decorator;
|
||||
} @else {
|
||||
text-align: $direction $decorator;
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,19 +12,21 @@ import { ScrollView } from '../util/scroll-view';
|
||||
* ```ts
|
||||
* import { Events } from 'ionic-angular';
|
||||
*
|
||||
* constructor(public events: Events) {}
|
||||
*
|
||||
* // first page (publish an event when a user is created)
|
||||
* function createUser(user) {
|
||||
* constructor(public events: Events) {}
|
||||
* createUser(user) {
|
||||
* console.log('User created!')
|
||||
* events.publish('user:created', user, Date.now());
|
||||
* }
|
||||
*
|
||||
* // second page (listen for the user created event)
|
||||
* events.subscribe('user:created', (user, time) => {
|
||||
* // user and time are the same arguments passed in `events.publish(user, time)`
|
||||
* console.log('Welcome', user, 'at', time);
|
||||
* });
|
||||
*
|
||||
* // second page (listen for the user created event after function is called)
|
||||
* constructor(public events: Events) {
|
||||
* events.subscribe('user:created', (user, time) => {
|
||||
* // user and time are the same arguments passed in `events.publish(user, time)`
|
||||
* console.log('Welcome', user, 'at', time);
|
||||
* });
|
||||
* }
|
||||
*
|
||||
* ```
|
||||
* @demo /docs/demos/src/events/
|
||||
|
||||
Reference in New Issue
Block a user