mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Merge remote-tracking branch 'refs/remotes/ionic-team/master' into rtl-fix-toggle
This commit is contained in:
Sina
18
.github/CONTRIBUTING.md
vendored
18
.github/CONTRIBUTING.md
vendored
@@ -5,7 +5,7 @@ Thanks for your interest in contributing to the Ionic Framework! :tada:
|
||||
|
||||
## Contributing Etiquette
|
||||
|
||||
Please see our [Contributor Code of Conduct](https://github.com/driftyco/ionic/blob/master/CODE_OF_CONDUCT.md) for information on our rules of conduct.
|
||||
Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic/blob/master/CODE_OF_CONDUCT.md) for information on our rules of conduct.
|
||||
|
||||
|
||||
## Creating an Issue
|
||||
@@ -18,16 +18,16 @@ Please see our [Contributor Code of Conduct](https://github.com/driftyco/ionic/b
|
||||
|
||||
* Issues with no clear steps to reproduce will not be triaged. If an issue is labeled with "needs reply" and receives no further replies from the author of the issue for more than 5 days, it will be closed.
|
||||
|
||||
* If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/driftyco/ionic/issues?utf8=%E2%9C%93&q=is%3Aissue). You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution.
|
||||
* If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/ionic-team/ionic/issues?utf8=%E2%9C%93&q=is%3Aissue). You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution.
|
||||
|
||||
* Next, [create a new issue](https://github.com/driftyco/ionic/issues/new) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue.
|
||||
* Next, [create a new issue](https://github.com/ionic-team/ionic/issues/new) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue.
|
||||
|
||||
|
||||
## Creating a Pull Request
|
||||
|
||||
* We appreciate you taking the time to contribute! Before submitting a pull request, we ask that you please [create an issue](#creating-an-issue) that explains the bug or feature request and let us know that you plan on creating a pull request for it. If an issue already exists, please comment on that issue letting us know you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.
|
||||
|
||||
* Looking for an issue to fix? Make sure to look through our issues with the [help wanted](https://github.com/driftyco/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label!
|
||||
* Looking for an issue to fix? Make sure to look through our issues with the [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label!
|
||||
|
||||
### Setup
|
||||
|
||||
@@ -85,9 +85,9 @@ Please see our [Contributor Code of Conduct](https://github.com/driftyco/ionic/b
|
||||
```
|
||||
|
||||
where `@name` is the Class name, `@description` is the description displayed on the documentation page, `@see` links to any related pages, and `@demo` links to the API demo located in the `demos` folder.
|
||||
2. In order to run API documentation locally, you will need to clone the `ionic-site` repo as a sibling to the `ionic` repo and then run it: https://github.com/driftyco/ionic-site#local-build
|
||||
2. In order to run API documentation locally, you will need to clone the `ionic-site` repo as a sibling to the `ionic` repo and then run it: https://github.com/ionic-team/ionic-site#local-build
|
||||
3. Then, run `gulp docs` in the `ionic` repo every time you make a change and the site will update.
|
||||
4. If the change affects the component documentation, create an issue on the `ionic-site` repo: https://github.com/driftyco/ionic-site/issues
|
||||
4. If the change affects the component documentation, create an issue on the `ionic-site` repo: https://github.com/ionic-team/ionic-site/issues
|
||||
|
||||
|
||||
#### Adding Demos
|
||||
@@ -106,12 +106,12 @@ Please see our [Contributor Code of Conduct](https://github.com/driftyco/ionic/b
|
||||
```
|
||||
3. Run `gulp watch.demos` to watch for changes to the demo
|
||||
4. Navigate to `http://localhost:8000/dist/demos/` and then to your component's demo to view it.
|
||||
5. If the change affects the component demos, create an issue on the `ionic-site` repo: https://github.com/driftyco/ionic-site/issues
|
||||
5. If the change affects the component demos, create an issue on the `ionic-site` repo: https://github.com/ionic-team/ionic-site/issues
|
||||
|
||||
|
||||
## Commit Message Format
|
||||
|
||||
We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/driftyco/ionic/blob/master/CHANGELOG.md). (Ok you got us, it's basically Angular's commit message format).
|
||||
We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md). (Ok you got us, it's basically Angular's commit message format).
|
||||
|
||||
`type(scope): subject`
|
||||
|
||||
@@ -143,4 +143,4 @@ The subject contains succinct description of the change:
|
||||
|
||||
## License
|
||||
|
||||
By contributing your code to the driftyco/ionic GitHub Repository, you agree to license your contribution under the MIT license.
|
||||
By contributing your code to the ionic-team/ionic GitHub Repository, you agree to license your contribution under the MIT license.
|
||||
|
||||
2
.github/ISSUE_TEMPLATE.md
vendored
2
.github/ISSUE_TEMPLATE.md
vendored
@@ -1,5 +1,5 @@
|
||||
**Ionic version:** (check one with "x")
|
||||
[ ] **1.x** (For Ionic 1.x issues, please use https://github.com/driftyco/ionic-v1)
|
||||
[ ] **1.x** (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
|
||||
[ ] **2.x**
|
||||
[ ] **3.x**
|
||||
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
|
||||
# See config at https://github.com/brigade/scss-lint/blob/master/config/default.yml
|
||||
|
||||
plugin_directories: ['.scss-linters']
|
||||
|
||||
exclude:
|
||||
- 'src/components/item/item.ios.scss'
|
||||
- 'src/components/item/item.md.scss'
|
||||
@@ -19,6 +21,9 @@ linters:
|
||||
ColorVariable:
|
||||
enabled: false
|
||||
|
||||
DefaultRule:
|
||||
enabled: false
|
||||
|
||||
DuplicateProperty:
|
||||
enabled: false
|
||||
|
||||
|
||||
12
.scss-linters/default_rule.rb
Normal file
12
.scss-linters/default_rule.rb
Normal file
@@ -0,0 +1,12 @@
|
||||
module SCSSLint
|
||||
# Reports the use of !important in properties.
|
||||
class Linter::DefaultRule < Linter
|
||||
include LinterRegistry
|
||||
|
||||
def visit_variable(node)
|
||||
return if source_from_range(node.source_range).include?('!default')
|
||||
|
||||
add_lint(node, '!default should be used')
|
||||
end
|
||||
end
|
||||
end
|
||||
1490
CHANGELOG.md
1490
CHANGELOG.md
File diff suppressed because it is too large
Load Diff
12
README.md
12
README.md
@@ -1,5 +1,5 @@
|
||||
[](https://badge.fury.io/js/ionic-angular)
|
||||
[](https://circleci.com/gh/driftyco/ionic)
|
||||
[](https://circleci.com/gh/ionic-team/ionic)
|
||||
|
||||
# Ionic
|
||||
|
||||
@@ -17,21 +17,21 @@ started using Ionic.
|
||||
|
||||
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.
|
||||
an [issue](https://github.com/ionic-team/ionic/issues/new) on this repository.
|
||||
|
||||
### Contributing
|
||||
|
||||
Thanks for your interest in contributing! Read up on our guidelines for
|
||||
[contributing](https://github.com/driftyco/ionic/blob/master/.github/CONTRIBUTING.md)
|
||||
and then look through our issues with a [help wanted](https://github.com/driftyco/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
|
||||
[contributing](https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md)
|
||||
and then look through our issues with a [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
|
||||
label.
|
||||
|
||||
### Examples
|
||||
|
||||
The [Ionic Conference App](https://github.com/driftyco/ionic-conference-app) is a full featured Ionic app.
|
||||
The [Ionic Conference App](https://github.com/ionic-team/ionic-conference-app) is a full featured Ionic app.
|
||||
It is the perfect starting point for learning and building your own app.
|
||||
|
||||
### Ionic V1
|
||||
|
||||
The source code for Ionic V1 has been moved to [driftyco/ionic-v1](https://github.com/driftyco/ionic-v1).
|
||||
The source code for Ionic V1 has been moved to [ionic-team/ionic-v1](https://github.com/ionic-team/ionic-v1).
|
||||
Please open any issues and pull requests related to Ionic V1 on that repository.
|
||||
|
||||
@@ -39,12 +39,12 @@
|
||||
|
||||
<h4>Icons</h4>
|
||||
|
||||
<button ion-button icon-left color="dark">
|
||||
<button ion-button icon-start color="dark">
|
||||
<ion-icon name="star"></ion-icon>
|
||||
Left Icon
|
||||
</button>
|
||||
|
||||
<button ion-button icon-right color="dark">
|
||||
<button ion-button icon-end color="dark">
|
||||
Right Icon
|
||||
<ion-icon name="star"></ion-icon>
|
||||
</button>
|
||||
|
||||
@@ -67,7 +67,7 @@
|
||||
<ion-icon name="trash"></ion-icon>
|
||||
</button>
|
||||
</ion-item-options>
|
||||
<ion-item-options (ionSwipe)="download(item)" icon-left>
|
||||
<ion-item-options (ionSwipe)="download(item)" icon-start>
|
||||
<button ion-button color="dark" (click)="more(item)">
|
||||
<ion-icon name="volume-off"></ion-icon>
|
||||
Mute
|
||||
@@ -85,7 +85,7 @@
|
||||
</ion-content>
|
||||
|
||||
<style>
|
||||
/* TODO: spinner is dropping classes so we have to use ids: https://github.com/driftyco/ionic/issues/7087 */
|
||||
/* TODO: spinner is dropping classes so we have to use ids: https://github.com/ionic-team/ionic/issues/7087 */
|
||||
#archive-spinner,
|
||||
#download-spinner,
|
||||
.archiving .expand-hide,
|
||||
@@ -93,7 +93,7 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* TODO: spinner doesn't have a good way to do this yet: https://github.com/driftyco/ionic/issues/7087 */
|
||||
/* TODO: spinner doesn't have a good way to do this yet: https://github.com/ionic-team/ionic/issues/7087 */
|
||||
#archive-spinner.spinner-ios line,
|
||||
#archive-spinner.spinner-crescent circle {
|
||||
stroke: #fff;
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons end>
|
||||
<button ion-button icon-right (click)="goToPage2()">
|
||||
<button ion-button icon-end (click)="goToPage2()">
|
||||
Show Loading and Navigate
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</button>
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
</ion-buttons>
|
||||
<ion-title>Solid</ion-title>
|
||||
<ion-buttons end>
|
||||
<button ion-button icon-right solid color="secondary">
|
||||
<button ion-button icon-end solid color="secondary">
|
||||
Help
|
||||
<ion-icon name="help-circle"></ion-icon>
|
||||
</button>
|
||||
@@ -69,7 +69,7 @@
|
||||
</button>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<button ion-button icon-right outline color="secondary">
|
||||
<button ion-button icon-end outline color="secondary">
|
||||
Help
|
||||
<ion-icon name="help-circle"></ion-icon>
|
||||
</button>
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
|
||||
|
||||
<!-- Icons right of text -->
|
||||
<ion-tabs tabs-only tabsLayout="icon-right" selectedIndex="0" color="light">
|
||||
<ion-tabs tabs-only tabsLayout="icon-end" selectedIndex="0" color="light">
|
||||
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
|
||||
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
|
||||
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root" tabBadge="4" tabBadgeStyle="secondary"></ion-tab>
|
||||
@@ -49,7 +49,7 @@
|
||||
|
||||
|
||||
<!-- Icons left of text -->
|
||||
<ion-tabs tabs-only tabsLayout="icon-left" color="dark">
|
||||
<ion-tabs tabs-only tabsLayout="icon-start" color="dark">
|
||||
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="1" tabBadgeStyle="danger"></ion-tab>
|
||||
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
|
||||
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
</ion-buttons>
|
||||
<ion-title>Solid</ion-title>
|
||||
<ion-buttons end>
|
||||
<button ion-button icon-right solid color="secondary">
|
||||
<button ion-button icon-end solid color="secondary">
|
||||
Help
|
||||
<ion-icon name="help-circle"></ion-icon>
|
||||
</button>
|
||||
@@ -69,7 +69,7 @@
|
||||
</button>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<button ion-button icon-right outline color="secondary">
|
||||
<button ion-button icon-end outline color="secondary">
|
||||
Help
|
||||
<ion-icon name="help-circle"></ion-icon>
|
||||
</button>
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
</ion-buttons>
|
||||
<ion-title>Solid</ion-title>
|
||||
<ion-buttons end>
|
||||
<button ion-button icon-right solid color="secondary">
|
||||
<button ion-button icon-end solid color="secondary">
|
||||
Help
|
||||
<ion-icon name="help-circle"></ion-icon>
|
||||
</button>
|
||||
@@ -69,7 +69,7 @@
|
||||
</button>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<button ion-button icon-right outline color="secondary">
|
||||
<button ion-button icon-end outline color="secondary">
|
||||
Help
|
||||
<ion-icon name="help-circle"></ion-icon>
|
||||
</button>
|
||||
|
||||
28
package.json
28
package.json
@@ -2,7 +2,7 @@
|
||||
"private": true,
|
||||
"name": "ionic2",
|
||||
"version": "3.3.0",
|
||||
"description": "A powerful framework for building mobile and progressive web apps with JavaScript and Angular 2",
|
||||
"description": "A powerful framework for building mobile and progressive web apps with JavaScript and Angular",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
"framework",
|
||||
@@ -17,7 +17,7 @@
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/driftyco/ionic.git"
|
||||
"url": "https://github.com/ionic-team/ionic.git"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "gulp validate",
|
||||
@@ -25,17 +25,17 @@
|
||||
"link": "gulp release.prepareReleasePackage && cd dist/ionic-angular && npm link"
|
||||
},
|
||||
"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",
|
||||
"@angular/common": "4.1.3",
|
||||
"@angular/compiler": "4.1.3",
|
||||
"@angular/compiler-cli": "4.1.3",
|
||||
"@angular/core": "4.1.3",
|
||||
"@angular/forms": "4.1.3",
|
||||
"@angular/http": "4.1.3",
|
||||
"@angular/platform-browser": "4.1.3",
|
||||
"@angular/platform-browser-dynamic": "4.1.3",
|
||||
"ionicons": "~3.0.0",
|
||||
"rxjs": "5.1.1",
|
||||
"zone.js": "^0.8.10"
|
||||
"rxjs": "5.4.0",
|
||||
"zone.js": "0.8.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ionic/app-scripts": "1.3.7",
|
||||
@@ -131,8 +131,8 @@
|
||||
"through2": "2.0.1",
|
||||
"ts-node": "1.3.0",
|
||||
"tslint": "3.15.1",
|
||||
"tslint-ionic-rules": "0.0.7",
|
||||
"typescript": "~2.3.2",
|
||||
"tslint-ionic-rules": "0.0.8",
|
||||
"typescript": "~2.3.3",
|
||||
"vinyl": "1.2.0",
|
||||
"webpack": "^2.1.0-beta.27",
|
||||
"yargs": "5.0.0"
|
||||
|
||||
@@ -7,7 +7,7 @@ All of these commands require you to run `npm install` first. To see a full list
|
||||
|
||||
### Committing
|
||||
|
||||
Please follow the commit message format in [CONTRIBUTING.md](https://github.com/driftyco/ionic/blob/master/.github/CONTRIBUTING.md#commit-message-format).
|
||||
Please follow the commit message format in [CONTRIBUTING.md](https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md#commit-message-format).
|
||||
|
||||
|
||||
### Installing Nightly Version
|
||||
@@ -110,6 +110,12 @@ It does not work for windows, linux, or non retina macs.
|
||||
|
||||
- `--dev` runs a dev build when building the e2e tests. This build takes much less time than a production build, so it is advisable to use this when doing quick validation.
|
||||
|
||||
#### Errors
|
||||
|
||||
If you are having getting an error running snapshot such as `SessionNotCreatedError: session not created exception` or `UnknownError: Connection refused` the solution is to download the chromedriver from here: http://chromedriver.storage.googleapis.com/index.html?path=2.24/ and then move it into your `protractor/selenium` folder
|
||||
|
||||
Running `webdriver-manager help` should show you what directory the webdriver is at under the options. For example, yours may be at `/usr/local/lib/node_modules/protractor/selenium` or if you use nvm `/Users/{username}/.nvm/versions/node/v7.5.0/lib/node_modules/protractor/selenium`.
|
||||
|
||||
### Running Tests
|
||||
|
||||
1. `gulp validate`
|
||||
@@ -119,7 +125,7 @@ It does not work for windows, linux, or non retina macs.
|
||||
|
||||
**Requires Ruby. Skip this step entirely if you are unable to install Ruby.**
|
||||
|
||||
1. See the [Sass Guidelines](https://github.com/driftyco/ionic/blob/master/.github/CONTRIBUTING.md#sass-changes) for editing the Sass.
|
||||
1. See the [Sass Guidelines](https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md#sass-changes) for editing the Sass.
|
||||
2. Install the linter: `gem install scss_lint`
|
||||
3. Run `gulp lint.sass` and fix any linter errors.
|
||||
|
||||
@@ -160,13 +166,13 @@ It does not work for windows, linux, or non retina macs.
|
||||
|
||||
### Releasing Component Demos
|
||||
|
||||
Ionic Component demos are automatically compiled and deployed to the [ionic staging site](http://ionic-site-staging.herokuapp.com/) on every commit in [ionic-preview-app](https://github.com/driftyco/ionic-preview-app). No action is necessary.
|
||||
Ionic Component demos are automatically compiled and deployed to the [ionic staging site](http://ionic-site-staging.herokuapp.com/) on every commit in [ionic-preview-app](https://github.com/ionic-team/ionic-preview-app). No action is necessary.
|
||||
|
||||
If you'd like to manually update the demos, follow the steps on the preview app for [running locally on the site](https://github.com/driftyco/ionic-preview-app#running-locally-on-the-site).
|
||||
If you'd like to manually update the demos, follow the steps on the preview app for [running locally on the site](https://github.com/ionic-team/ionic-preview-app#running-locally-on-the-site).
|
||||
|
||||
|
||||
### Releasing API Demos
|
||||
|
||||
Ionic API demos are automatically compiled and deployed to the [ionic staging site](http://ionic-site-staging.herokuapp.com/) on every commit. No action is necessary.
|
||||
|
||||
If you'd like to manually update the demos, clone the [`ionic-site`](https://github.com/driftyco/ionic-site) repo as a sibling of `ionic`. From `ionic` run `gulp demos` and then `gulp docs`, and it'll compile and copy the demos to the `ionic-site` repo, ready for testing.
|
||||
If you'd like to manually update the demos, clone the [`ionic-site`](https://github.com/ionic-team/ionic-site) repo as a sibling of `ionic`. From `ionic` run `gulp demos` and then `gulp docs`, and it'll compile and copy the demos to the `ionic-site` repo, ready for testing.
|
||||
|
||||
@@ -63,10 +63,10 @@ function run {
|
||||
# if no changes, don't commit
|
||||
if [[ "$CHANGES" == "" ]]; then
|
||||
echo "-- No changes detected for the following commit, docs not updated."
|
||||
echo "https://github.com/driftyco/$CIRCLE_PROJECT_REPONAME/commit/$CIRCLE_SHA1"
|
||||
echo "https://github.com/ionic-team/$CIRCLE_PROJECT_REPONAME/commit/$CIRCLE_SHA1"
|
||||
else
|
||||
git add -A
|
||||
git commit -am "Automated build of ionic v$VERSION driftyco/$CIRCLE_PROJECT_REPONAME@$CIRCLE_SHA1"
|
||||
git commit -am "Automated build of ionic v$VERSION ionic-team/$CIRCLE_PROJECT_REPONAME@$CIRCLE_SHA1"
|
||||
# in case a different commit was pushed to ionic-site during doc/demo gen,
|
||||
# try to rebase around it before pushing
|
||||
git fetch
|
||||
|
||||
@@ -87,8 +87,8 @@ module.exports = function(gulp, flags) {
|
||||
}));
|
||||
callback();
|
||||
}).on('end', function() {
|
||||
gutil.log("Writing to file at", gutil.colors.cyan("/driftyco/ionic/" + outputFile));
|
||||
gutil.log("Place this file in", gutil.colors.cyan("/driftyco/ionic-site/" + config.v2DocsDir + "/theming/overriding-ionic-variables/"), "in order to update the docs");
|
||||
gutil.log("Writing to file at", gutil.colors.cyan("/ionic-team/ionic/" + outputFile));
|
||||
gutil.log("Place this file in", gutil.colors.cyan("/ionic-team/ionic-site/" + config.v2DocsDir + "/theming/overriding-ionic-variables/"), "in order to update the docs");
|
||||
mkdirp.sync('tmp');
|
||||
fs.writeFileSync(outputFile, JSON.stringify(variables));
|
||||
}));
|
||||
|
||||
2
scripts/docs/templates/common.template.html
vendored
2
scripts/docs/templates/common.template.html
vendored
@@ -225,7 +225,7 @@ Delegate: <$ doc.delegate $>
|
||||
|
||||
</h1>
|
||||
|
||||
<a class="improve-v2-docs" href="http://github.com/driftyco/ionic/edit/master/<$ doc.fileInfo.projectRelativePath $>#L<$ doc.location.start.line $>">
|
||||
<a class="improve-v2-docs" href="http://github.com/ionic-team/ionic/edit/master/<$ doc.fileInfo.projectRelativePath $>#L<$ doc.location.start.line $>">
|
||||
Improve this doc
|
||||
</a>
|
||||
|
||||
|
||||
@@ -31,7 +31,15 @@ $colors: (
|
||||
light: #f4f4f4,
|
||||
dark: #222,
|
||||
vibrant: rebeccapurple,
|
||||
bright: #ffc125
|
||||
bright: #ffc125,
|
||||
greyYellow: (
|
||||
base:#49606e,
|
||||
contrast:#fbb636
|
||||
),
|
||||
greyWhite: (
|
||||
base:#49606e,
|
||||
contrast:#fff
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ function run {
|
||||
git config --global user.email "hi@ionicframework.com"
|
||||
git config --global user.name "Ionitron"
|
||||
|
||||
git clone git@github.com:driftyco/$REPOSITORY.git $DIRECTORY $ARGS
|
||||
git clone git@github.com:ionic-team/$REPOSITORY.git $DIRECTORY $ARGS
|
||||
cd $DIRECTORY
|
||||
git fetch origin --tags
|
||||
cd ../
|
||||
|
||||
@@ -132,8 +132,8 @@ task('docs.sassVariables', () => {
|
||||
callback();
|
||||
}).on('end', () => {
|
||||
const config = require('../../config.json');
|
||||
console.log(`Writing to file at /driftyco/ionic/${outputFile}`);
|
||||
console.log(`Place this file in /driftyco/ionic-site/${config.v2DocsDir}/theming/overriding-ionic-variables in order to update the docs`);
|
||||
console.log(`Writing to file at /ionic-team/ionic/${outputFile}`);
|
||||
console.log(`Place this file in /ionic-team/ionic-site/${config.v2DocsDir}/theming/overriding-ionic-variables in order to update the docs`);
|
||||
mkdirp.sync('tmp');
|
||||
writeFileSync(outputFile, JSON.stringify(variables));
|
||||
}));
|
||||
|
||||
@@ -86,7 +86,7 @@ task('release.publishGithubRelease', (done: Function) => {
|
||||
})
|
||||
.pipe(obj(function(file, enc, cb){
|
||||
github.releases.createRelease({
|
||||
owner: 'driftyco',
|
||||
owner: 'ionic-team',
|
||||
repo: 'ionic',
|
||||
target_commitish: 'master',
|
||||
tag_name: 'v' + packageJSON.version,
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"keywords": [],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/driftyco/ionic.git"
|
||||
"url": "https://github.com/ionic-team/ionic.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "umd/index.js",
|
||||
|
||||
@@ -38,7 +38,7 @@ weak maps / weak sets
|
||||
|
||||
## polyfills.ng.js
|
||||
|
||||
Only the required polyfill for Angular 2. This does not come with any ES6 polyfills. Note that all polyfill files listed here included the required polyfills for Angular 2 to work correctly.
|
||||
Only the required polyfill for Angular. This does not come with any ES6 polyfills. Note that all polyfill files listed here included the required polyfills for Angular to work correctly.
|
||||
|
||||
### Targets:
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { IonicPageModule } from 'ionic-angular';
|
||||
import { IonicModule } from 'ionic-angular';
|
||||
import { $CLASSNAME } from './$FILENAME';
|
||||
|
||||
@NgModule({
|
||||
@@ -7,7 +7,7 @@ import { $CLASSNAME } from './$FILENAME';
|
||||
$CLASSNAME,
|
||||
],
|
||||
imports: [
|
||||
IonicPageModule.forChild($CLASSNAME),
|
||||
IonicModule,
|
||||
],
|
||||
exports: [
|
||||
$CLASSNAME
|
||||
|
||||
@@ -6,7 +6,7 @@ import 'rxjs/add/operator/map';
|
||||
Generated class for the $CLASSNAME provider.
|
||||
|
||||
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
|
||||
for more info on providers and Angular 2 DI.
|
||||
for more info on providers and Angular DI.
|
||||
*/
|
||||
@Injectable()
|
||||
export class $CLASSNAME {
|
||||
|
||||
@@ -22,13 +22,13 @@ import { ViewController } from '../../navigation/view-controller';
|
||||
'<div class="action-sheet-group">' +
|
||||
'<div class="action-sheet-title" id="{{hdrId}}" *ngIf="d.title">{{d.title}}</div>' +
|
||||
'<div class="action-sheet-sub-title" id="{{descId}}" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
|
||||
'<button ion-button="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [attr.icon-left]="b.icon ? \'\' : null" [ngClass]="b.cssClass">' +
|
||||
'<button ion-button="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [attr.icon-start]="b.icon ? \'\' : null" [ngClass]="b.cssClass">' +
|
||||
'<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon>' +
|
||||
'{{b.text}}' +
|
||||
'</button>' +
|
||||
'</div>' +
|
||||
'<div class="action-sheet-group" *ngIf="cancelButton">' +
|
||||
'<button ion-button="action-sheet-button" (click)="click(cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-left]="cancelButton.icon ? \'\' : null" [ngClass]="cancelButton.cssClass">' +
|
||||
'<button ion-button="action-sheet-button" (click)="click(cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-start]="cancelButton.icon ? \'\' : null" [ngClass]="cancelButton.cssClass">' +
|
||||
'<ion-icon [name]="cancelButton.icon" *ngIf="cancelButton.icon" class="action-sheet-icon"></ion-icon>' +
|
||||
'{{cancelButton.text}}' +
|
||||
'</button>' +
|
||||
|
||||
@@ -193,8 +193,10 @@ $alert-ios-radio-min-width: 30px !default;
|
||||
/// @prop - Top of the icon in the radio alert
|
||||
$alert-ios-radio-icon-top: -7px !default;
|
||||
|
||||
/// @prop - Left of the icon in the radio alert
|
||||
// deprecated
|
||||
$alert-ios-radio-icon-left: 7px !default;
|
||||
/// @prop - Start of the icon in the radio alert
|
||||
$alert-ios-radio-icon-start: $alert-ios-radio-icon-left !default;
|
||||
|
||||
/// @prop - Width of the icon in the radio alert
|
||||
$alert-ios-radio-icon-width: 6px !default;
|
||||
@@ -277,8 +279,10 @@ $alert-ios-checkbox-background-color-on: color($colors-ios, primary) !def
|
||||
/// @prop - Top of the icon in the checkbox alert
|
||||
$alert-ios-checkbox-icon-top: 4px !default;
|
||||
|
||||
/// @prop - Left of the icon in the checkbox alert
|
||||
// deprecated
|
||||
$alert-ios-checkbox-icon-left: 7px !default;
|
||||
/// @prop - Start of the icon in the checkbox alert
|
||||
$alert-ios-checkbox-icon-start: $alert-ios-checkbox-icon-left !default;
|
||||
|
||||
/// @prop - Width of the icon in the checkbox alert
|
||||
$alert-ios-checkbox-icon-width: 4px !default;
|
||||
@@ -446,7 +450,7 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default;
|
||||
// -----------------------------------------
|
||||
|
||||
.alert-ios [aria-checked=true] .alert-radio-inner {
|
||||
@include position($alert-ios-radio-icon-top, null, null, $alert-ios-radio-icon-left);
|
||||
@include position($alert-ios-radio-icon-top, null, null, $alert-ios-radio-icon-start);
|
||||
|
||||
position: absolute;
|
||||
|
||||
@@ -519,7 +523,7 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default;
|
||||
// -----------------------------------------
|
||||
|
||||
.alert-ios [aria-checked=true] .alert-checkbox-inner {
|
||||
@include position($alert-ios-checkbox-icon-top, null, null, $alert-ios-checkbox-icon-left);
|
||||
@include position($alert-ios-checkbox-icon-top, null, null, $alert-ios-checkbox-icon-start);
|
||||
|
||||
position: absolute;
|
||||
|
||||
|
||||
@@ -249,8 +249,10 @@ $alert-md-radio-border-color-on: $alert-md-button-text-color !defau
|
||||
/// @prop - Top of the icon in the alert radio
|
||||
$alert-md-radio-icon-top: 2px !default;
|
||||
|
||||
/// @prop - Left of the icon in the alert radio
|
||||
// deprecated
|
||||
$alert-md-radio-icon-left: 2px !default;
|
||||
/// @prop - Start of the icon in the radio alert
|
||||
$alert-md-radio-icon-start: $alert-md-radio-icon-left !default;
|
||||
|
||||
/// @prop - Width of the icon in the alert radio
|
||||
$alert-md-radio-icon-width: 8px !default;
|
||||
@@ -323,8 +325,10 @@ $alert-md-checkbox-border-color-on: $alert-md-button-text-color !defau
|
||||
/// @prop - Top of the icon in the checkbox alert
|
||||
$alert-md-checkbox-icon-top: 0 !default;
|
||||
|
||||
/// @prop - Left of the icon in the checkbox alert
|
||||
// deprecated
|
||||
$alert-md-checkbox-icon-left: 3px !default;
|
||||
/// @prop - Start of the icon in the checkbox alert
|
||||
$alert-md-checkbox-icon-start: $alert-md-checkbox-icon-left !default;
|
||||
|
||||
/// @prop - Width of the icon in the checkbox alert
|
||||
$alert-md-checkbox-icon-width: 6px !default;
|
||||
@@ -481,7 +485,7 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
|
||||
// ---------------------------------------------------
|
||||
|
||||
.alert-md .alert-radio-inner {
|
||||
@include position($alert-md-radio-icon-top, null, null, $alert-md-radio-icon-left);
|
||||
@include position($alert-md-radio-icon-top, null, null, $alert-md-radio-icon-start);
|
||||
@include border-radius($alert-md-radio-icon-border-radius);
|
||||
|
||||
position: absolute;
|
||||
@@ -559,7 +563,7 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
|
||||
}
|
||||
|
||||
.alert-md [aria-checked=true] .alert-checkbox-inner {
|
||||
@include position($alert-md-checkbox-icon-top, null, null, $alert-md-checkbox-icon-left);
|
||||
@include position($alert-md-checkbox-icon-top, null, null, $alert-md-checkbox-icon-start);
|
||||
|
||||
position: absolute;
|
||||
|
||||
|
||||
@@ -262,8 +262,10 @@ $alert-wp-radio-border-color: $input-wp-border-color !default;
|
||||
/// @prop - Top of the icon in the radio alert
|
||||
$alert-wp-radio-icon-top: 2px !default;
|
||||
|
||||
/// @prop - Left of the icon in the radio alert
|
||||
// deprecated
|
||||
$alert-wp-radio-icon-left: 2px !default;
|
||||
/// @prop - Start of the icon in the radio alert
|
||||
$alert-wp-radio-icon-start: $alert-wp-radio-icon-left !default;
|
||||
|
||||
/// @prop - Width of the icon in the radio alert
|
||||
$alert-wp-radio-icon-width: 8px !default;
|
||||
@@ -328,8 +330,10 @@ $alert-wp-checkbox-background-on: color($colors-wp, primary) !defau
|
||||
/// @prop - Top of the icon in the checkbox alert
|
||||
$alert-wp-checkbox-icon-top: -2px !default;
|
||||
|
||||
/// @prop - Left of the icon in the checkbox alert
|
||||
// deprecated
|
||||
$alert-wp-checkbox-icon-left: 3px !default;
|
||||
/// @prop - Start of the icon in the checkbox alert
|
||||
$alert-wp-checkbox-icon-start: $alert-wp-checkbox-icon-left !default;
|
||||
|
||||
/// @prop - Width of the icon in the checkbox alert
|
||||
$alert-wp-checkbox-icon-width: 6px !default;
|
||||
@@ -495,7 +499,7 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default;
|
||||
// ---------------------------------------------------
|
||||
|
||||
.alert-wp .alert-radio-inner {
|
||||
@include position($alert-wp-radio-icon-top, null, null, $alert-wp-radio-icon-left);
|
||||
@include position($alert-wp-radio-icon-top, null, null, $alert-wp-radio-icon-start);
|
||||
@include border-radius($alert-wp-radio-icon-border-radius);
|
||||
|
||||
position: absolute;
|
||||
@@ -575,7 +579,7 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default;
|
||||
// --------------------------------------------------
|
||||
|
||||
.alert-wp [aria-checked=true] .alert-checkbox-inner {
|
||||
@include position($alert-wp-checkbox-icon-top, null, null, $alert-wp-checkbox-icon-left);
|
||||
@include position($alert-wp-checkbox-icon-top, null, null, $alert-wp-checkbox-icon-start);
|
||||
|
||||
position: absolute;
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ import { removeArrayItem, assert } from '../../util/util';
|
||||
/**
|
||||
* @name MenuController
|
||||
* @description
|
||||
* The MenuController is a provider which makes it easy to control a [Menu](../Menu).
|
||||
* The MenuController is a provider which makes it easy to control a [Menu](../../Menu/Menu/).
|
||||
* Its methods can be used to display the menu, enable the menu, toggle the menu, and more.
|
||||
* The controller will grab a reference to the menu by the `side`, `id`, or, if neither
|
||||
* of these are passed to it, it will grab the first menu it finds.
|
||||
@@ -14,7 +14,7 @@ import { removeArrayItem, assert } from '../../util/util';
|
||||
*
|
||||
* @usage
|
||||
*
|
||||
* Add a basic menu component to start with. See the [Menu](../Menu) API docs
|
||||
* Add a basic menu component to start with. See the [Menu](../../Menu/Menu/) API docs
|
||||
* for more information on adding menu components.
|
||||
*
|
||||
* ```html
|
||||
|
||||
@@ -11,13 +11,15 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[icon-left] ion-icon {
|
||||
[icon-left] ion-icon, // deprecated
|
||||
[icon-start] ion-icon {
|
||||
@include button-icon;
|
||||
|
||||
@include padding-horizontal(null, .3em);
|
||||
}
|
||||
|
||||
[icon-right] ion-icon {
|
||||
[icon-right] ion-icon, // deprecated
|
||||
[icon-end] ion-icon {
|
||||
@include button-icon;
|
||||
|
||||
@include padding-horizontal(.4em, null);
|
||||
|
||||
@@ -42,12 +42,12 @@ import { isTrueProperty } from '../../util/util';
|
||||
* <button ion-button round outline>Outline + Round</button>
|
||||
*
|
||||
* <!-- Icons -->
|
||||
* <button ion-button icon-left>
|
||||
* <button ion-button icon-start>
|
||||
* <ion-icon name="star"></ion-icon>
|
||||
* Left Icon
|
||||
* </button>
|
||||
*
|
||||
* <button ion-button icon-right>
|
||||
* <button ion-button icon-end>
|
||||
* Right Icon
|
||||
* <ion-icon name="star"></ion-icon>
|
||||
* </button>
|
||||
|
||||
@@ -15,8 +15,8 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a ion-button block href="#" icon-left><ion-icon name="help-circle"></ion-icon> a[ion-button][block] icon</a>
|
||||
<button ion-button block icon-left><ion-icon name="help-circle"></ion-icon> button[ion-button][block] icon</button>
|
||||
<a ion-button block href="#" icon-start><ion-icon name="help-circle"></ion-icon> a[ion-button][block] icon</a>
|
||||
<button ion-button block icon-start><ion-icon name="help-circle"></ion-icon> button[ion-button][block] icon</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
||||
@@ -15,11 +15,11 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a ion-button full href="#" icon-left>
|
||||
<a ion-button full href="#" icon-start>
|
||||
<ion-icon name="help-circle"></ion-icon>
|
||||
a[ion-button][full] + icon
|
||||
</a>
|
||||
<button ion-button full icon-left>
|
||||
<button ion-button full icon-start>
|
||||
<ion-icon name="help-circle"></ion-icon>
|
||||
button[ion-button][full] + icon
|
||||
</button>
|
||||
|
||||
@@ -10,22 +10,22 @@
|
||||
<ion-content padding>
|
||||
|
||||
<div>
|
||||
<button ion-button icon-left>
|
||||
<button ion-button icon-start>
|
||||
<ion-icon name="home"></ion-icon>
|
||||
Left Icon
|
||||
</button>
|
||||
<a ion-button icon-left>
|
||||
<a ion-button icon-start>
|
||||
<ion-icon name="home"></ion-icon>
|
||||
Left Icon
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button ion-button icon-right>
|
||||
<button ion-button icon-end>
|
||||
Right Icon
|
||||
<ion-icon name="star"></ion-icon>
|
||||
</button>
|
||||
<a ion-button icon-right>
|
||||
<a ion-button icon-end>
|
||||
Right Icon
|
||||
<ion-icon name="star"></ion-icon>
|
||||
</a>
|
||||
@@ -41,22 +41,22 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button ion-button large icon-left>
|
||||
<button ion-button large icon-start>
|
||||
<ion-icon name="help-circle"></ion-icon>
|
||||
Left, Large
|
||||
</button>
|
||||
<a ion-button large icon-left>
|
||||
<a ion-button large icon-start>
|
||||
<ion-icon name="help-circle"></ion-icon>
|
||||
Left, Large
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button ion-button large icon-right>
|
||||
<button ion-button large icon-end>
|
||||
Right, Large
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</button>
|
||||
<a ion-button large icon-right>
|
||||
<a ion-button large icon-end>
|
||||
Right, Large
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</a>
|
||||
@@ -72,22 +72,22 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button ion-button small icon-left>
|
||||
<button ion-button small icon-start>
|
||||
<ion-icon name="checkmark"></ion-icon>
|
||||
Left, Small
|
||||
</button>
|
||||
<a ion-button small icon-left>
|
||||
<a ion-button small icon-start>
|
||||
<ion-icon name="checkmark"></ion-icon>
|
||||
Left, Small
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button ion-button small icon-right>
|
||||
<button ion-button small icon-end>
|
||||
Right, Small
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</button>
|
||||
<a ion-button small icon-right>
|
||||
<a ion-button small icon-end>
|
||||
Right, Small
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</a>
|
||||
|
||||
@@ -28,13 +28,13 @@
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col no-padding>
|
||||
<button ion-button icon-left clear small>
|
||||
<button ion-button icon-start clear small>
|
||||
<ion-icon name="star"></ion-icon>
|
||||
Star
|
||||
</button>
|
||||
</ion-col>
|
||||
<ion-col no-padding text-right>
|
||||
<button ion-button icon-left clear small class="activated">
|
||||
<button ion-button icon-start clear small class="activated">
|
||||
<ion-icon name="share"></ion-icon>
|
||||
Activated
|
||||
</button>
|
||||
@@ -66,13 +66,13 @@
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col no-padding>
|
||||
<button ion-button icon-left clear small>
|
||||
<button ion-button icon-start clear small>
|
||||
<ion-icon name="star"></ion-icon>
|
||||
Favorite
|
||||
</button>
|
||||
</ion-col>
|
||||
<ion-col no-padding text-center>
|
||||
<button ion-button icon-left clear small>
|
||||
<button ion-button icon-start clear small>
|
||||
<ion-icon name="musical-notes"></ion-icon>
|
||||
Listen
|
||||
</button>
|
||||
@@ -99,20 +99,20 @@
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col no-padding>
|
||||
<button ion-button icon-left clear small dark>
|
||||
<button ion-button icon-start clear small dark>
|
||||
<ion-icon name="star"></ion-icon>
|
||||
Favorite
|
||||
</button>
|
||||
</ion-col>
|
||||
|
||||
<ion-col no-padding text-center>
|
||||
<button ion-button icon-left clear small dark>
|
||||
<button ion-button icon-start clear small dark>
|
||||
<ion-icon name="musical-notes"></ion-icon>
|
||||
Listen
|
||||
</button>
|
||||
</ion-col>
|
||||
<ion-col no-padding text-right>
|
||||
<button ion-button icon-left clear small dark>
|
||||
<button ion-button icon-start clear small dark>
|
||||
<ion-icon name="share-alt"></ion-icon>
|
||||
Share
|
||||
</button>
|
||||
|
||||
@@ -71,13 +71,13 @@
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col no-padding>
|
||||
<button ion-button icon-left clear small color="danger">
|
||||
<button ion-button icon-start clear small color="danger">
|
||||
<ion-icon name="star"></ion-icon>
|
||||
Danger
|
||||
</button>
|
||||
</ion-col>
|
||||
<ion-col no-padding text-right>
|
||||
<button ion-button icon-left clear small color="dark">
|
||||
<button ion-button icon-start clear small color="dark">
|
||||
<ion-icon name="share"></ion-icon>
|
||||
Dark
|
||||
</button>
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
<ion-item>
|
||||
<span item-start>18 min</span>
|
||||
<span item-start>(2.6 mi)</span>
|
||||
<button ion-button icon-left primary clear item-end>
|
||||
<button ion-button icon-start primary clear item-end>
|
||||
<ion-icon name="navigate"></ion-icon>
|
||||
Start
|
||||
</button>
|
||||
@@ -61,7 +61,7 @@
|
||||
<ion-item>
|
||||
<span item-start>3 hr</span>
|
||||
<span item-start>(4.8 mi)</span>
|
||||
<button ion-button icon-left danger clear item-end>
|
||||
<button ion-button icon-start danger clear item-end>
|
||||
<ion-icon name="navigate"></ion-icon>
|
||||
Start
|
||||
</button>
|
||||
@@ -91,7 +91,7 @@
|
||||
<ion-item>
|
||||
<span item-start secondary>26 min</span>
|
||||
<span item-start>(8.1 mi)</span>
|
||||
<button ion-button icon-left secondary clear item-end>
|
||||
<button ion-button icon-start secondary clear item-end>
|
||||
<ion-icon name="navigate"></ion-icon>
|
||||
Start
|
||||
</button>
|
||||
|
||||
@@ -26,11 +26,11 @@
|
||||
</ion-card-content>
|
||||
|
||||
<ion-item>
|
||||
<button ion-button icon-left primary clear item-start>
|
||||
<button ion-button icon-start primary clear item-start>
|
||||
<ion-icon name="thumbs-up"></ion-icon>
|
||||
<div>12 Likes</div>
|
||||
</button>
|
||||
<button ion-button icon-left primary clear item-start>
|
||||
<button ion-button icon-start primary clear item-start>
|
||||
<ion-icon name="text"></ion-icon>
|
||||
<div>4 Comments</div>
|
||||
</button>
|
||||
@@ -59,11 +59,11 @@
|
||||
</ion-card-content>
|
||||
|
||||
<ion-item>
|
||||
<button ion-button icon-left primary clear item-start>
|
||||
<button ion-button icon-start primary clear item-start>
|
||||
<ion-icon name="thumbs-up"></ion-icon>
|
||||
<div>30 Likes</div>
|
||||
</button>
|
||||
<button ion-button icon-left primary clear item-start>
|
||||
<button ion-button icon-start primary clear item-start>
|
||||
<ion-icon name="text"></ion-icon>
|
||||
<div>64 Comments</div>
|
||||
</button>
|
||||
@@ -91,11 +91,11 @@
|
||||
</ion-card-content>
|
||||
|
||||
<ion-item>
|
||||
<button ion-button icon-left primary clear item-start>
|
||||
<button ion-button icon-start primary clear item-start>
|
||||
<ion-icon name="thumbs-up"></ion-icon>
|
||||
<div>46 Likes</div>
|
||||
</button>
|
||||
<button ion-button icon-left primary clear item-start>
|
||||
<button ion-button icon-start primary clear item-start>
|
||||
<ion-icon name="text"></ion-icon>
|
||||
<div>66 Comments</div>
|
||||
</button>
|
||||
|
||||
@@ -15,7 +15,7 @@ import { Item } from '../item/item';
|
||||
* 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)
|
||||
* See the [Angular Docs](https://angular.io/docs/ts/latest/guide/forms.html)
|
||||
* for more info on forms and inputs.
|
||||
*
|
||||
*
|
||||
@@ -65,7 +65,7 @@ import { Item } from '../item/item';
|
||||
* cucumber: boolean;
|
||||
*
|
||||
* updateCucumber() {
|
||||
* console.log("Cucumbers new state:" + this.cucumber);
|
||||
* console.log('Cucumbers new state:' + this.cucumber);
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
|
||||
@@ -41,7 +41,7 @@ import { Ion } from '../ion';
|
||||
*
|
||||
* <ion-chip>
|
||||
* <ion-avatar>
|
||||
* <img src="img/my-img.png">
|
||||
* <img src="assets/img/my-img.png">
|
||||
* </ion-avatar>
|
||||
* <ion-label>Default</ion-label>
|
||||
* </ion-chip>
|
||||
|
||||
@@ -58,6 +58,10 @@ ion-content.js-scroll > .scroll-content {
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
ion-content.has-refresher > .scroll-content {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
|
||||
// Fixed Content (ion-fixed and ion-fab)
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<ion-navbar style="opacity: 0.8">
|
||||
<ion-title>Page 4</ion-title>
|
||||
<ion-buttons right>
|
||||
<button ion-button icon-right [navPush]="tabsPage">
|
||||
<button ion-button icon-end [navPush]="tabsPage">
|
||||
Next
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</button>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<ion-navbar style="opacity: 0.8">
|
||||
<ion-title>Page 3</ion-title>
|
||||
<ion-buttons right>
|
||||
<button ion-button icon-right [navPush]="page4">
|
||||
<button ion-button icon-end [navPush]="page4">
|
||||
Next
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</button>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<ion-navbar style="opacity: 0.8">
|
||||
<ion-title>Main</ion-title>
|
||||
<ion-buttons right>
|
||||
<button ion-button icon-right [navPush]="page1">
|
||||
<button ion-button icon-end [navPush]="page1">
|
||||
Next
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</button>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<ion-navbar style="opacity: 0.8">
|
||||
<ion-title>Page 2</ion-title>
|
||||
<ion-buttons right>
|
||||
<button ion-button icon-right [navPush]="page3">
|
||||
<button ion-button icon-end [navPush]="page3">
|
||||
Next
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</button>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<ion-navbar style="opacity: 0.8">
|
||||
<ion-title>Page 4</ion-title>
|
||||
<ion-buttons right>
|
||||
<button ion-button icon-right [navPush]="tabsPage">
|
||||
<button ion-button icon-end [navPush]="tabsPage">
|
||||
Next
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</button>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<ion-navbar style="opacity: 0.8">
|
||||
<ion-title>Page 3</ion-title>
|
||||
<ion-buttons right>
|
||||
<button ion-button icon-right [navPush]="page4">
|
||||
<button ion-button icon-end [navPush]="page4">
|
||||
Next
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</button>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<ion-navbar style="opacity: 0.8">
|
||||
<ion-title>Main</ion-title>
|
||||
<ion-buttons right>
|
||||
<button ion-button icon-right [navPush]="page1">
|
||||
<button ion-button icon-end [navPush]="page1">
|
||||
Next
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</button>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<ion-navbar style="opacity: 0.8">
|
||||
<ion-title>Page 2</ion-title>
|
||||
<ion-buttons right>
|
||||
<button ion-button icon-right [navPush]="page3">
|
||||
<button ion-button icon-end [navPush]="page3">
|
||||
Next
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</button>
|
||||
|
||||
@@ -119,7 +119,7 @@
|
||||
</ion-list>
|
||||
|
||||
<p>
|
||||
<button ion-button icon-left (click)="updateIcon()">
|
||||
<button ion-button icon-start (click)="updateIcon()">
|
||||
<ion-icon [name]="btnIcon"></ion-icon>
|
||||
Update icon
|
||||
</button>
|
||||
|
||||
@@ -119,7 +119,7 @@
|
||||
</ion-list>
|
||||
|
||||
<p>
|
||||
<button ion-button icon-left (click)="updateIcon()">
|
||||
<button ion-button icon-start (click)="updateIcon()">
|
||||
<ion-icon [name]="btnIcon"></ion-icon>
|
||||
Update icon
|
||||
</button>
|
||||
|
||||
@@ -51,7 +51,8 @@ ion-item-options .button {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
ion-item-options:not([icon-left]) .button:not([icon-only]) {
|
||||
ion-item-options:not([icon-left]) .button:not([icon-only]), // deprecated
|
||||
ion-item-options:not([icon-start]) .button:not([icon-only]) {
|
||||
.button-inner {
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -80,12 +81,7 @@ ion-item-sliding.active-slide {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.active-options-left ion-item-options[side=left] {
|
||||
width: 100%;
|
||||
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&.active-options-left ion-item-options[side=left],
|
||||
&.active-options-right ion-item-options:not([side=left]) {
|
||||
width: 100%;
|
||||
|
||||
|
||||
@@ -91,11 +91,11 @@ const enum SlidingState {
|
||||
* ### Button Layout
|
||||
* If an icon is placed with text in the option button, by default it will
|
||||
* display the icon on top of the text. This can be changed to display the icon
|
||||
* to the left of the text by setting `icon-left` as an attribute on the
|
||||
* to the left of the text by setting `icon-start` as an attribute on the
|
||||
* `<ion-item-options>` element.
|
||||
*
|
||||
* ```html
|
||||
* <ion-item-options icon-left>
|
||||
* <ion-item-options icon-start>
|
||||
* <button ion-button (click)="archive(item)">
|
||||
* <ion-icon name="archive"></ion-icon>
|
||||
* Archive
|
||||
|
||||
@@ -40,24 +40,24 @@
|
||||
</ion-item>
|
||||
|
||||
<button ion-item disabled>
|
||||
<button ion-button item-start icon-left (click)="testClick($event)">
|
||||
<button ion-button item-start icon-start (click)="testClick($event)">
|
||||
<ion-icon name="home"></ion-icon>
|
||||
Left Icon
|
||||
</button>
|
||||
disabled left icon buttons
|
||||
<button ion-button outline item-end icon-left (click)="testClick($event)">
|
||||
<button ion-button outline item-end icon-start (click)="testClick($event)">
|
||||
<ion-icon name="star"></ion-icon>
|
||||
Left Icon
|
||||
</button>
|
||||
</button>
|
||||
|
||||
<ion-item>
|
||||
<button ion-button item-start icon-right (click)="testClick($event)">
|
||||
<button ion-button item-start icon-end (click)="testClick($event)">
|
||||
Right Icon
|
||||
<ion-icon name="home"></ion-icon>
|
||||
</button>
|
||||
right icon buttons
|
||||
<button ion-button outline item-end icon-right (click)="testClick($event)">
|
||||
<button ion-button outline item-end icon-end (click)="testClick($event)">
|
||||
Right Icon
|
||||
<ion-icon name="star"></ion-icon>
|
||||
</button>
|
||||
@@ -75,14 +75,14 @@
|
||||
|
||||
<a ion-item disabled>
|
||||
a ion-item disabled right icon/text button large
|
||||
<button ion-button item-end large icon-left (click)="testClick($event)">
|
||||
<button ion-button item-end large icon-start (click)="testClick($event)">
|
||||
<ion-icon name="refresh"></ion-icon>
|
||||
Refresh
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<ion-item>
|
||||
<button ion-button clear item-start small icon-left (click)="testClick($event)">
|
||||
<button ion-button clear item-start small icon-start (click)="testClick($event)">
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
Settings
|
||||
</button>
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
</ion-item>
|
||||
|
||||
<button ion-item color="dark">
|
||||
<button ion-button item-start icon-left>
|
||||
<button ion-button item-start icon-start>
|
||||
<ion-icon name="home"></ion-icon>
|
||||
Left Icon
|
||||
</button>
|
||||
@@ -53,7 +53,7 @@
|
||||
</button>
|
||||
|
||||
<button ion-item disabled color="dark">
|
||||
<button ion-button item-start icon-left>
|
||||
<button ion-button item-start icon-start>
|
||||
<ion-icon name="home"></ion-icon>
|
||||
Left Icon
|
||||
</button>
|
||||
@@ -62,12 +62,12 @@
|
||||
</button>
|
||||
|
||||
<ion-item color="light">
|
||||
<button ion-button item-start icon-right>
|
||||
<button ion-button item-start icon-end>
|
||||
Right Icon
|
||||
<ion-icon name="home"></ion-icon>
|
||||
</button>
|
||||
right icon buttons
|
||||
<button ion-button outline item-end icon-right>
|
||||
<button ion-button outline item-end icon-end>
|
||||
Right Icon
|
||||
<ion-icon name="star"></ion-icon>
|
||||
</button>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<button ion-item (click)="clickedButton(item)">
|
||||
<h2>Sliding item {{item}}</h2>
|
||||
</button>
|
||||
<ion-item-options side="right" icon-left>
|
||||
<ion-item-options side="right" icon-start>
|
||||
<button ion-button color='danger'>
|
||||
<ion-icon name="trash"></ion-icon>
|
||||
Remove
|
||||
|
||||
@@ -139,13 +139,13 @@
|
||||
<h2>RIGHT/LEFT side - icons (item-start)</h2>
|
||||
<p>I think I figured out how to get more Mountain Dew</p>
|
||||
</ion-item>
|
||||
<ion-item-options side="left" icon-left (ionSwipe)="unread($event)" *ngIf="slidingEnabled">
|
||||
<ion-item-options side="left" icon-start (ionSwipe)="unread($event)" *ngIf="slidingEnabled">
|
||||
<button ion-button color="secondary" expandable (click)="unread(item3)">
|
||||
<ion-icon name="ios-checkmark"></ion-icon>Unread
|
||||
</button>
|
||||
</ion-item-options>
|
||||
|
||||
<ion-item-options icon-left (ionSwipe)="del(item3)">
|
||||
<ion-item-options icon-start (ionSwipe)="del(item3)">
|
||||
<button ion-button color="primary" (click)="archive(item3)">
|
||||
<ion-icon name="mail"></ion-icon>Archive
|
||||
</button>
|
||||
@@ -161,7 +161,7 @@
|
||||
<ion-icon name="mail" item-start></ion-icon>
|
||||
One Line w/ Icon, div only text
|
||||
</ion-item>
|
||||
<ion-item-options icon-left (ionSwipe)="archive($event)">
|
||||
<ion-item-options icon-start (ionSwipe)="archive($event)">
|
||||
<button ion-button color="primary" (click)="archive(item4)" expandable *ngIf="slidingEnabled">
|
||||
<ion-icon name="archive"></ion-icon>Archive
|
||||
</button>
|
||||
@@ -192,9 +192,9 @@
|
||||
|
||||
<ion-item-sliding #item7>
|
||||
<ion-item>
|
||||
One Line, dynamic icon-left option
|
||||
One Line, dynamic icon-start option
|
||||
</ion-item>
|
||||
<ion-item-options icon-left>
|
||||
<ion-item-options icon-start>
|
||||
<button ion-button color="primary">
|
||||
<ion-icon name="more"></ion-icon>
|
||||
{{ moreText }}
|
||||
|
||||
@@ -30,24 +30,24 @@
|
||||
</ion-list-header>
|
||||
|
||||
<ion-list-header disabled>
|
||||
<button ion-button icon-left item-start (click)="testClick($event)">
|
||||
<button ion-button icon-start item-start (click)="testClick($event)">
|
||||
<ion-icon name="home"></ion-icon>
|
||||
Left Icon
|
||||
</button>
|
||||
disabled left icon buttons
|
||||
<button ion-button icon-left outline item-end (click)="testClick($event)">
|
||||
<button ion-button icon-start outline item-end (click)="testClick($event)">
|
||||
<ion-icon name="star"></ion-icon>
|
||||
Left Icon
|
||||
</button>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-list-header color="dark">
|
||||
<button ion-button icon-right item-start (click)="testClick($event)">
|
||||
<button ion-button icon-end item-start (click)="testClick($event)">
|
||||
Right Icon
|
||||
<ion-icon name="home"></ion-icon>
|
||||
</button>
|
||||
Dark right icon buttons
|
||||
<button ion-button icon-right outline item-end (click)="testClick($event)">
|
||||
<button ion-button icon-end outline item-end (click)="testClick($event)">
|
||||
Right Icon
|
||||
<ion-icon name="star"></ion-icon>
|
||||
</button>
|
||||
@@ -65,14 +65,14 @@
|
||||
|
||||
<ion-list-header>
|
||||
ion-list-header right icon/text button large
|
||||
<button ion-button item-end icon-left large (click)="testClick($event)">
|
||||
<button ion-button item-end icon-start large (click)="testClick($event)">
|
||||
<ion-icon name="refresh"></ion-icon>
|
||||
Refresh
|
||||
</button>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-list-header>
|
||||
<button ion-button clear item-start icon-left small (click)="testClick($event)">
|
||||
<button ion-button clear item-start icon-start small (click)="testClick($event)">
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
Settings
|
||||
</button>
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons end>
|
||||
<button ion-button icon-right (click)="goToPage2()">
|
||||
<button ion-button icon-end (click)="goToPage2()">
|
||||
Navigate
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</button>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-buttons end>
|
||||
<button ion-button icon-right (click)="goToPage3()">
|
||||
<button ion-button icon-end (click)="goToPage3()">
|
||||
Navigate
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</button>
|
||||
|
||||
@@ -72,7 +72,7 @@ export class Searchbar extends BaseInput<string> {
|
||||
@Input() cancelButtonText: string = 'Cancel';
|
||||
|
||||
/**
|
||||
* @input {boolean} If true, show the cancel button.
|
||||
* @input {boolean} If true, show the cancel button. Default `false`.
|
||||
*/
|
||||
@Input()
|
||||
get showCancelButton(): boolean {
|
||||
@@ -129,7 +129,7 @@ export class Searchbar extends BaseInput<string> {
|
||||
@Input() type: string = 'search';
|
||||
|
||||
/**
|
||||
* @input {boolean} If true, enable searchbar animation.
|
||||
* @input {boolean} If true, enable searchbar animation. Default `false`.
|
||||
*/
|
||||
@Input()
|
||||
get animated(): boolean {
|
||||
@@ -331,7 +331,7 @@ export class Searchbar extends BaseInput<string> {
|
||||
clearInput(ev: UIEvent) {
|
||||
this.ionClear.emit(ev);
|
||||
|
||||
// setTimeout() fixes https://github.com/driftyco/ionic/issues/7527
|
||||
// setTimeout() fixes https://github.com/ionic-team/ionic/issues/7527
|
||||
// wait for 4 frames
|
||||
setTimeout(() => {
|
||||
let value = this._value;
|
||||
|
||||
@@ -11,7 +11,7 @@ import { SegmentButton } from './segment-button';
|
||||
* @description
|
||||
* A Segment is a group of buttons, sometimes known as Segmented Controls, that allow the user to interact with a compact group of a number of controls.
|
||||
* Segments provide functionality similar to tabs, selecting one will unselect all others. You should use a tab bar instead of a segmented control when you want to let the user move back and forth between distinct pages in your app.
|
||||
* You could use Angular 2's `ngModel` or `FormBuilder` API. For an overview on how `FormBuilder` works, checkout [Angular 2 Forms](http://learnangular2.com/forms/), or [Angular FormBuilder](https://angular.io/docs/ts/latest/api/forms/index/FormBuilder-class.html)
|
||||
* You could use Angular's `ngModel` or `FormBuilder` API. For an overview on how `FormBuilder` works, checkout [Angular Forms](http://learnangular2.com/forms/), or [Angular FormBuilder](https://angular.io/docs/ts/latest/api/forms/index/FormBuilder-class.html)
|
||||
*
|
||||
*
|
||||
* ```html
|
||||
@@ -60,7 +60,7 @@ import { SegmentButton } from './segment-button';
|
||||
*
|
||||
* @demo /docs/demos/src/segment/
|
||||
* @see {@link /docs/components#segment Segment Component Docs}
|
||||
* @see [Angular 2 Forms](http://learnangular2.com/forms/)
|
||||
* @see [Angular Forms](http://learnangular2.com/forms/)
|
||||
*/
|
||||
@Directive({
|
||||
selector: 'ion-segment',
|
||||
|
||||
@@ -306,10 +306,15 @@ export class Select extends BaseInput<any> implements OnDestroy {
|
||||
}
|
||||
}));
|
||||
|
||||
var popoverCssClass = 'select-popover';
|
||||
|
||||
// If the user passed a cssClass for the select, add it
|
||||
popoverCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : '';
|
||||
|
||||
overlay = new Popover(this._app, SelectPopover, {
|
||||
options: popoverOptions
|
||||
}, {
|
||||
cssClass: 'select-popover'
|
||||
cssClass: popoverCssClass
|
||||
}, this.config, this.deepLinker);
|
||||
|
||||
// ev.target is readonly.
|
||||
|
||||
@@ -92,7 +92,7 @@ import { ViewController } from '../../navigation/view-controller';
|
||||
*
|
||||
* slideChanged() {
|
||||
* let currentIndex = this.slides.getActiveIndex();
|
||||
* console.log("Current index is", currentIndex);
|
||||
* console.log('Current index is', currentIndex);
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
@@ -119,7 +119,7 @@ import { ViewController } from '../../navigation/view-controller';
|
||||
* ```
|
||||
*
|
||||
* To see all of the available options, take a look at the
|
||||
* [source for slides](https://github.com/driftyco/ionic/blob/master/src/components/slides/slides.ts).
|
||||
* [source for slides](https://github.com/ionic-team/ionic/blob/master/src/components/slides/slides.ts).
|
||||
*
|
||||
* @demo /docs/demos/src/slides/
|
||||
* @see {@link /docs/components#slides Slides Component Docs}
|
||||
@@ -365,10 +365,22 @@ export class Slides extends Ion {
|
||||
return this._slidesPerView;
|
||||
}
|
||||
set slidesPerView(val: any) {
|
||||
this._slidesPerView = val === 'auto' ? 'auto' : parseInt(val, 10);
|
||||
this._slidesPerView = val === 'auto' ? 'auto' : parseFloat(val);
|
||||
}
|
||||
private _slidesPerView: number|string = 1;
|
||||
|
||||
/**
|
||||
* @input {boolean} Center a slide in the middle of the screen.
|
||||
*/
|
||||
@Input()
|
||||
get centeredSlides() {
|
||||
return this._centeredSlides;
|
||||
}
|
||||
set centeredSlides(val: boolean) {
|
||||
this._centeredSlides = isTrueProperty(val);
|
||||
}
|
||||
private _centeredSlides: boolean = false;
|
||||
|
||||
/**
|
||||
* @hidden
|
||||
*/
|
||||
@@ -381,10 +393,6 @@ export class Slides extends Ion {
|
||||
* @hidden
|
||||
*/
|
||||
slidesPerGroup = 1;
|
||||
/**
|
||||
* @hidden
|
||||
*/
|
||||
centeredSlides = false;
|
||||
/**
|
||||
* @hidden
|
||||
*/
|
||||
@@ -1035,7 +1043,7 @@ export class Slides extends Ion {
|
||||
|
||||
/**
|
||||
* Lock or unlock the ability to slide to the next slides.
|
||||
* @param {boolean} shouldLockSwipeToNext If set to true the user will not be able to swipe to the next slide.
|
||||
* @param {boolean} shouldLockSwipeToNext If set to true the user will not be able to swipe to the next slide.
|
||||
* Set to false to unlock this behaviour.
|
||||
*/
|
||||
lockSwipeToNext(shouldLockSwipeToNext: boolean) {
|
||||
@@ -1053,7 +1061,7 @@ export class Slides extends Ion {
|
||||
|
||||
/**
|
||||
* Lock or unlock the ability to slide to change slides.
|
||||
* @param {boolean} shouldLockSwipes If set to true user can not swipe in either direction on slide.
|
||||
* @param {boolean} shouldLockSwipes If set to true user can not swipe in either direction on slide.
|
||||
* False allows swiping in both directions.
|
||||
*/
|
||||
lockSwipes(shouldLockSwipes: boolean) {
|
||||
|
||||
@@ -5,7 +5,8 @@
|
||||
(ionSlideDrag)="onSlideDrag($event)"
|
||||
pager="true"
|
||||
effect="slide"
|
||||
slidesPerView="2"
|
||||
slidesPerView="2.1"
|
||||
centeredSlides="true"
|
||||
spaceBetween="40">
|
||||
|
||||
<ion-slide style="background: red; color: white;">
|
||||
|
||||
11
src/components/snapshot/test/basic/app/app.component.ts
Normal file
11
src/components/snapshot/test/basic/app/app.component.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {ComponentsPage} from '../pages/components/components';
|
||||
import {AssistiveTouchProvider} from "../providers/assistive-touch/assistive-touch";
|
||||
|
||||
@Component({
|
||||
template: `<assistive-touch></assistive-touch>
|
||||
<ion-nav [root]="root"></ion-nav>`
|
||||
})
|
||||
export class AppComponent {
|
||||
root = ComponentsPage;
|
||||
}
|
||||
21
src/components/snapshot/test/basic/app/app.module.ts
Normal file
21
src/components/snapshot/test/basic/app/app.module.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { IonicApp, IonicModule } from '../../../../../';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { ComponentsModule } from '../pages/components/components.module';
|
||||
import {AssistiveTouchComponentModule} from '../components/assistive-touch/assistive-touch.module';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
IonicModule.forRoot(AppComponent, {}),
|
||||
ComponentsModule,
|
||||
AssistiveTouchComponentModule
|
||||
],
|
||||
bootstrap: [IonicApp]
|
||||
})
|
||||
export class AppModule {}
|
||||
5
src/components/snapshot/test/basic/app/main.ts
Normal file
5
src/components/snapshot/test/basic/app/main.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app.module';
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
@@ -0,0 +1 @@
|
||||
<ion-icon name="radio-button-on"></ion-icon>
|
||||
@@ -0,0 +1,21 @@
|
||||
import {NgModule} from '@angular/core';
|
||||
import {AssistiveTouchComponent} from './assistive-touch';
|
||||
import {IonicPageModule} from '../../../../../../module';
|
||||
import {AssistiveTouchProvider} from '../../providers/assistive-touch/assistive-touch';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AssistiveTouchComponent,
|
||||
],
|
||||
imports: [
|
||||
IonicPageModule.forChild(AssistiveTouchComponent),
|
||||
],
|
||||
exports: [
|
||||
AssistiveTouchComponent
|
||||
],
|
||||
providers: [
|
||||
AssistiveTouchProvider
|
||||
]
|
||||
})
|
||||
export class AssistiveTouchComponentModule {
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
.app-root {
|
||||
contain: none !important;
|
||||
position: initial !important;
|
||||
}
|
||||
|
||||
assistive-touch {
|
||||
@include padding(10px);
|
||||
@include border-radius(15px);
|
||||
|
||||
z-index: 9999999;
|
||||
|
||||
position: absolute;
|
||||
|
||||
display: block;
|
||||
contain: strict;
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
text-align: center;
|
||||
font-size: 34px;
|
||||
color: white;
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import {AfterViewInit, Component, ElementRef, Renderer2} from '@angular/core';
|
||||
import {DomController} from '../../../../../../platform/dom-controller';
|
||||
import {AssistiveTouchProvider} from '../../providers/assistive-touch/assistive-touch';
|
||||
|
||||
@Component({
|
||||
selector: 'assistive-touch',
|
||||
templateUrl: 'assistive-touch.html',
|
||||
host: {
|
||||
'(click)': 'openControl()'
|
||||
}
|
||||
})
|
||||
export class AssistiveTouchComponent implements AfterViewInit {
|
||||
private sideX = 'right';
|
||||
private sideY = 'bottom';
|
||||
private currentX: number = 2;
|
||||
private currentY: number = 150;
|
||||
|
||||
private elemWidthOffset: number;
|
||||
private elemHeightOffset: number;
|
||||
|
||||
constructor(private assistive: AssistiveTouchProvider, public element: ElementRef, public renderer: Renderer2, public domCtrl: DomController) {
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
const hammer = new (<any>(window))['Hammer'](this.element.nativeElement);
|
||||
hammer.get('pan').set({direction: (<any>(window))['Hammer'].DIRECTION_ALL});
|
||||
|
||||
hammer.on('panmove', this.handlePan.bind(this));
|
||||
hammer.on('panend', this.panEnd.bind(this));
|
||||
|
||||
const rect = this.element.nativeElement.getBoundingClientRect();
|
||||
this.elemWidthOffset = rect.width / 2;
|
||||
this.elemHeightOffset = rect.height / 2;
|
||||
|
||||
this.updatePosition();
|
||||
}
|
||||
|
||||
private handlePan(ev: {center: {x: number, y: number}}) {
|
||||
let newX = ev.center.x;
|
||||
let newY = ev.center.y;
|
||||
|
||||
this.sideX = (newX < window.innerWidth / 2) ? 'left' : 'right';
|
||||
this.sideY = (newY < window.innerHeight / 2) ? 'top' : 'bottom';
|
||||
|
||||
if (this.sideX === 'right')
|
||||
newX = window.innerWidth - newX;
|
||||
newX -= this.elemWidthOffset;
|
||||
|
||||
if (this.sideY === 'bottom')
|
||||
newY = window.innerHeight - newY;
|
||||
newY -= this.elemHeightOffset;
|
||||
|
||||
this.currentX = newX > 2 ? newX : 2;
|
||||
this.currentY = newY > 2 ? newY : 2;
|
||||
|
||||
this.updatePosition();
|
||||
}
|
||||
|
||||
private panEnd() {
|
||||
if (this.currentX > this.currentY) {
|
||||
this.currentY = 2;
|
||||
} else {
|
||||
this.currentX = 2;
|
||||
}
|
||||
|
||||
this.updatePosition();
|
||||
}
|
||||
|
||||
private updatePosition() {
|
||||
this.domCtrl.write(() => {
|
||||
this.renderer.setStyle(this.element.nativeElement, this.sideX === 'left' ? 'right' : 'left', 'auto');
|
||||
this.renderer.setStyle(this.element.nativeElement, this.sideX, this.currentX + 'px');
|
||||
|
||||
this.renderer.setStyle(this.element.nativeElement, this.sideY === 'top' ? 'bottom' : 'top', 'auto');
|
||||
this.renderer.setStyle(this.element.nativeElement, this.sideY, this.currentY + 'px');
|
||||
});
|
||||
}
|
||||
|
||||
openControl() {
|
||||
// TODO when custom alerts are out, this should open a custom alert
|
||||
// Allow setting direction, close, whatever
|
||||
this.assistive.closeButton.emit();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<ion-header>
|
||||
<ion-navbar>
|
||||
<ion-title>Components</ion-title>
|
||||
</ion-navbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item-group *ngFor="let componentItem of components">
|
||||
<ion-item-divider>{{componentItem.name}}</ion-item-divider>
|
||||
<button ion-item *ngFor="let component of componentItem.components" (click)="open(component.component)">
|
||||
<ion-label>{{component.name}}</ion-label>
|
||||
</button>
|
||||
</ion-item-group>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
@@ -0,0 +1,417 @@
|
||||
import {NgModule} from '@angular/core';
|
||||
import {IonicPageModule} from '../../../../../../';
|
||||
|
||||
import {ComponentsPage} from './components';
|
||||
|
||||
import {AppModule as ActionSheetBasic} from '../../../../../action-sheet/test/basic/app/app.module';
|
||||
|
||||
import {AppModule as AlertBasic} from '../../../../../alert/test/basic/app/app.module';
|
||||
import {AppModule as AlertDismiss} from '../../../../../alert/test/dismiss/app.module';
|
||||
|
||||
import {AppModule as AppAnimations} from '../../../../../app/test/animations/app.module';
|
||||
import {AppModule as AppCordova} from '../../../../../app/test/cordova/app/app.module';
|
||||
import {AppModule as AppGestureCollision} from '../../../../../app/test/gesture-collision/app/app.module';
|
||||
import {AppModule as AppGestures} from '../../../../../app/test/gestures/app.module';
|
||||
import {AppModule as AppTypography} from '../../../../../app/test/typography/app/app.module';
|
||||
import {AppModule as AppUtilities} from '../../../../../app/test/utilities/app/app.module';
|
||||
|
||||
import {AppModule as BadgeBasic} from '../../../../../badge/test/basic/app/app.module';
|
||||
|
||||
import {AppModule as ButtonAnchors} from '../../../../../button/test/anchors/app/app.module';
|
||||
import {AppModule as ButtonAttributes} from '../../../../../button/test/attributes/app/app.module';
|
||||
import {AppModule as ButtonBasic} from '../../../../../button/test/basic/app/app.module';
|
||||
import {AppModule as ButtonBlock} from '../../../../../button/test/block/app/app.module';
|
||||
import {AppModule as ButtonClear} from '../../../../../button/test/clear/app/app.module';
|
||||
import {AppModule as ButtonDecorator} from '../../../../../button/test/decorator/app/app.module';
|
||||
import {AppModule as ButtonDynamic} from '../../../../../button/test/dynamic/app/app.module';
|
||||
import {AppModule as ButtonFull} from '../../../../../button/test/full/app/app.module';
|
||||
import {AppModule as ButtonIcons} from '../../../../../button/test/icons/app/app.module';
|
||||
import {AppModule as ButtonOutline} from '../../../../../button/test/outline/app/app.module';
|
||||
import {AppModule as ButtonRaised} from '../../../../../button/test/raised/app.module';
|
||||
import {AppModule as ButtonRound} from '../../../../../button/test/round/app/app.module';
|
||||
import {AppModule as ButtonSizes} from '../../../../../button/test/sizes/app/app.module';
|
||||
|
||||
import {AppModule as CardAdvanced} from '../../../../../card/test/advanced/app/app.module';
|
||||
import {AppModule as CardBasic} from '../../../../../card/test/basic/app/app.module';
|
||||
import {AppModule as CardColors} from '../../../../../card/test/colors/app/app.module';
|
||||
import {AppModule as CardImages} from '../../../../../card/test/images/app/app.module';
|
||||
import {AppModule as CardList} from '../../../../../card/test/list/app/app.module';
|
||||
import {AppModule as CardMap} from '../../../../../card/test/map/app.module';
|
||||
import {AppModule as CardSocial} from '../../../../../card/test/social/app.module';
|
||||
|
||||
import {AppModule as CheckboxBasic} from '../../../../../checkbox/test/basic/app/app.module';
|
||||
|
||||
import {AppModule as ChipBasic} from '../../../../../chip/test/basic/app/app.module';
|
||||
|
||||
import {AppModule as ContentBasic} from '../../../../../content/test/basic/app/app.module';
|
||||
import {AppModule as ContentFullscreen} from '../../../../../content/test/fullscreen/app/app.module';
|
||||
import {AppModule as ContentHeaderScroll} from '../../../../../content/test/header-scroll/app.module';
|
||||
import {AppModule as ContentNoBounce} from '../../../../../content/test/no-bounce/app/app.module';
|
||||
import {AppModule as ContentScrollDownOnLoad} from '../../../../../content/test/scroll-down-on-load/app/app.module';
|
||||
|
||||
import {AppModule as DatetimeBasic} from '../../../../../datetime/test/basic/app/app.module';
|
||||
import {AppModule as DatetimeForm} from '../../../../../datetime/test/form/app.module';
|
||||
import {AppModule as DatetimeIssues} from '../../../../../datetime/test/issues/app/app.module';
|
||||
import {AppModule as DatetimeLabels} from '../../../../../datetime/test/labels/app/app.module';
|
||||
|
||||
import {AppModule as FabBasic} from '../../../../../fab/test/basic/app/app.module';
|
||||
|
||||
import {AppModule as GridAlignment} from '../../../../../grid/test/alignment/app.module';
|
||||
import {AppModule as GridBasic} from '../../../../../grid/test/basic/app/app.module';
|
||||
import {AppModule as GridCard} from '../../../../../grid/test/card/app.module';
|
||||
import {AppModule as GridFull} from '../../../../../grid/test/full/app.module';
|
||||
import {AppModule as GridResponsive} from '../../../../../grid/test/responsive/app.module';
|
||||
|
||||
import {AppModule as IconBasic} from '../../../../../icon/test/basic/app/app.module';
|
||||
|
||||
import {AppModule as ImgBasic} from '../../../../../img/test/basic/app/app.module';
|
||||
import {AppModule as ImgCards} from '../../../../../img/test/cards/app.module';
|
||||
import {AppModule as ImgLazyLoad} from '../../../../../img/test/lazy-load/app.module';
|
||||
import {AppModule as ImgList} from '../../../../../img/test/list/app.module';
|
||||
|
||||
import {AppModule as InfiniteScrollBasic} from '../../../../../infinite-scroll/test/basic/app.module';
|
||||
import {AppModule as InfiniteScrollPositionTop} from '../../../../../infinite-scroll/test/position-top/app/app.module';
|
||||
import {AppModule as InfiniteScrollShortList} from '../../../../../infinite-scroll/test/short-list/app.module';
|
||||
|
||||
import {AppModule as InputBasicForm} from '../../../../../input/test/basic-form/app/app.module';
|
||||
import {AppModule as InputClearAfterEdit} from '../../../../../input/test/clear-after-edit/app/app.module';
|
||||
import {AppModule as InputClearInput} from '../../../../../input/test/clear-input/app/app.module';
|
||||
import {AppModule as InputEvents} from '../../../../../input/test/events/app/app.module';
|
||||
import {AppModule as InputFixedInlineLabels} from '../../../../../input/test/fixed-inline-labels/app/app.module';
|
||||
import {AppModule as InputFloatingLabels} from '../../../../../input/test/floating-labels/app/app.module';
|
||||
import {AppModule as InputFooterInputs} from '../../../../../input/test/footer-inputs/app/app.module';
|
||||
import {AppModule as InputFormInputs} from '../../../../../input/test/form-inputs/app/app.module';
|
||||
import {AppModule as InputHighlight} from '../../../../../input/test/highlight/app/app.module';
|
||||
import {AppModule as InputInlineLabels} from '../../../../../input/test/inline-labels/app/app.module';
|
||||
import {AppModule as InputInputFocus} from '../../../../../input/test/input-focus/app/app.module';
|
||||
import {AppModule as InputInsetInputs} from '../../../../../input/test/inset-inputs/app/app.module';
|
||||
import {AppModule as InputPlaceholderLabels} from '../../../../../input/test/placeholder-labels/app/app.module';
|
||||
import {AppModule as InputStackedLabels} from '../../../../../input/test/stacked-labels/app/app.module';
|
||||
|
||||
import {AppModule as ItemButtons} from '../../../../../item/test/buttons/app/app.module';
|
||||
import {AppModule as ItemColors} from '../../../../../item/test/colors/app/app.module';
|
||||
import {AppModule as ItemDividers} from '../../../../../item/test/dividers/app/app.module';
|
||||
import {AppModule as ItemGroups} from '../../../../../item/test/groups/app/app.module';
|
||||
import {AppModule as ItemIcons} from '../../../../../item/test/icons/app/app.module';
|
||||
import {AppModule as ItemImages} from '../../../../../item/test/images/app/app.module';
|
||||
import {AppModule as ItemInputs} from '../../../../../item/test/inputs/app/app.module';
|
||||
import {AppModule as ItemMedia} from '../../../../../item/test/media/app/app.module';
|
||||
import {AppModule as ItemReorder} from '../../../../../item/test/reorder/app/app.module';
|
||||
import {AppModule as ItemSliding} from '../../../../../item/test/sliding/app/app.module';
|
||||
import {AppModule as ItemText} from '../../../../../item/test/text/app/app.module';
|
||||
|
||||
import {AppModule as ListChatList} from '../../../../../list/test/chat-list/app.module';
|
||||
import {AppModule as ListHeaderScenarios} from '../../../../../list/test/header-scenarios/app/app.module';
|
||||
import {AppModule as ListHeaders} from '../../../../../list/test/headers/app/app.module';
|
||||
import {AppModule as ListInset} from '../../../../../list/test/inset/app/app.module';
|
||||
import {AppModule as ListNoLines} from '../../../../../list/test/no-lines/app/app.module';
|
||||
import {AppModule as ListRepeatHeaders} from '../../../../../list/test/repeat-headers/app.module';
|
||||
import {AppModule as ListSticky} from '../../../../../list/test/sticky/app.module';
|
||||
|
||||
import {AppModule as LoadingBasic} from '../../../../../loading/test/basic/app/app.module';
|
||||
import {AppModule as LoadingTabs} from '../../../../../tabs/test/basic/app/app.module';
|
||||
|
||||
import {AppModule as MenuBasic} from '../../../../../menu/test/basic/app/app.module';
|
||||
// import {AppModule as MenuDisableSwipe} from '../../../../../menu/test/disable-swipe/app.module'; TODO
|
||||
// import {AppModule as MenuEnableDisable} from '../../../../../menu/test/enable-disable/app.module'; TODO
|
||||
import {AppModule as MenuMultiple} from '../../../../../menu/test/multiple/app/app.module';
|
||||
import {AppModule as MenuOverlay} from '../../../../../menu/test/overlay/app.module';
|
||||
import {AppModule as MenuPush} from '../../../../../menu/test/push/app.module';
|
||||
import {AppModule as MenuReveal} from '../../../../../menu/test/reveal/app.module';
|
||||
|
||||
import {AppModule as ModalBasic} from '../../../../../modal/test/basic/app/app.module';
|
||||
|
||||
import {AppModule as NavBasic} from '../../../../../nav/test/basic/app/app.module';
|
||||
import {AppModule as NavChildNavs} from '../../../../../nav/test/child-navs/app/app.module';
|
||||
import {AppModule as NavInitAsync} from '../../../../../nav/test/init-async/app.module';
|
||||
import {AppModule as NavInsertViews} from '../../../../../nav/test/insert-views/app.module';
|
||||
import {AppModule as NavMemory} from '../../../../../nav/test/memory/app.module';
|
||||
import {AppModule as NavNavPushPop} from '../../../../../nav/test/nav-push-pop/app.module';
|
||||
import {AppModule as NavWorstCase} from '../../../../../nav/test/worst-case/app.module';
|
||||
|
||||
import {AppModule as PickerBasic} from '../../../../../picker/test/basic/app/app.module';
|
||||
|
||||
import {AppModule as PopoverBasic} from '../../../../../popover/test/basic/app/app.module';
|
||||
|
||||
import {AppModule as RadioBasic} from '../../../../../radio/test/basic/app/app.module';
|
||||
|
||||
import {AppModule as RangeBasic} from '../../../../../range/test/basic/app/app.module';
|
||||
|
||||
import {AppModule as RefresherBasic} from '../../../../../refresher/test/basic/app.module';
|
||||
// import {AppModule as RefresherNavigation} from '../../../../../refresher/test/navigation/app.module'; TODO
|
||||
|
||||
import {AppModule as ScrollBasic} from '../../../../../scroll/test/basic/app.module';
|
||||
|
||||
import {AppModule as SearchbarBasic} from '../../../../../searchbar/test/basic/app/app.module';
|
||||
import {AppModule as SearchbarNav} from '../../../../../searchbar/test/nav/app/app.module';
|
||||
import {AppModule as SearchbarToolbar} from '../../../../../searchbar/test/toolbar/app/app.module';
|
||||
|
||||
import {AppModule as SegmentBasic} from '../../../../../segment/test/basic/app/app.module';
|
||||
import {AppModule as SegmentNav} from '../../../../../segment/test/nav/app/app.module';
|
||||
import {AppModule as SegmentSwipe} from '../../../../../segment/test/swipe/app/app.module';
|
||||
|
||||
import {AppModule as SelectMultipleValue} from '../../../../../select/test/multiple-value/app/app.module';
|
||||
import {AppModule as SelectSingleValue} from '../../../../../select/test/single-value/app/app.module';
|
||||
|
||||
import {AppModule as ShowHideWhenBasic} from '../../../../../show-hide-when/test/basic/app.module';
|
||||
|
||||
import {AppModule as SlidesBasic} from '../../../../../slides/test/basic/app.module';
|
||||
import {AppModule as SlidesControl} from '../../../../../slides/test/control/app.module';
|
||||
import {AppModule as SlidesController} from '../../../../../slides/test/controller/app.module';
|
||||
import {AppModule as SlidesImages} from '../../../../../slides/test/images/app.module';
|
||||
import {AppModule as SlidesIntro} from '../../../../../slides/test/intro/app.module';
|
||||
import {AppModule as SlidesLoop} from '../../../../../slides/test/loop/app.module';
|
||||
import {AppModule as SlidesOptions} from '../../../../../slides/test/options/app.module';
|
||||
import {AppModule as SlidesRTL} from '../../../../../slides/test/rtl/app.module';
|
||||
import {AppModule as SlidesScroll} from '../../../../../slides/test/scroll/app.module';
|
||||
|
||||
import {AppModule as SpinnerBasic} from '../../../../../spinner/test/basic/app.module';
|
||||
import {AppModule as SpinnerColors} from '../../../../../spinner/test/colors/app.module';
|
||||
|
||||
import {AppModule as SplitPaneBasic} from '../../../../../split-pane/test/basic/app/app.module';
|
||||
import {AppModule as SplitPaneMenus} from '../../../../../split-pane/test/menus/app/app.module';
|
||||
import {AppModule as SplitPaneNested} from '../../../../../split-pane/test/nested/app/app.module';
|
||||
import {AppModule as SplitPaneTabs} from '../../../../../split-pane/test/tabs/app/app.module';
|
||||
|
||||
import {AppModule as TabsAdvanced} from '../../../../../tabs/test/advanced/app/app.module';
|
||||
import {AppModule as TabsBadges} from '../../../../../tabs/test/badges/app/app.module';
|
||||
import {AppModule as TabsBasic} from '../../../../../tabs/test/basic/app/app.module';
|
||||
import {AppModule as TabsColors} from '../../../../../tabs/test/colors/app/app.module';
|
||||
import {AppModule as TabsEvents} from '../../../../../tabs/test/events/app.module';
|
||||
import {AppModule as TabsGhost} from '../../../../../tabs/test/ghost/app.module';
|
||||
import {AppModule as TabsLifecycle} from '../../../../../tabs/test/lifecyles/app.module';
|
||||
import {AppModule as TabsTabBarScenarios} from '../../../../../tabs/test/tab-bar-scenarios/app/app.module';
|
||||
import {AppModule as TabsTop} from '../../../../../tabs/test/top/app.module';
|
||||
|
||||
import {AppModule as ToastBasic} from '../../../../../toast/test/basic/app/app.module';
|
||||
|
||||
import {AppModule as ToggleBasic} from '../../../../../toggle/test/basic/app/app.module';
|
||||
|
||||
import {AppModule as ToolbarBasic} from '../../../../../toolbar/test/basic/app/app.module';
|
||||
import {AppModule as ToolbarColors} from '../../../../../toolbar/test/colors/app/app.module';
|
||||
import {AppModule as ToolbarScenarios} from '../../../../../toolbar/test/scenarios/app/app.module';
|
||||
|
||||
import {AppModule as TypographyBasic} from '../../../../../typography/test/basic/app/app.module';
|
||||
|
||||
import {AppModule as VirtualScrollBasic} from '../../../../../virtual-scroll/test/basic/app.module';
|
||||
import {AppModule as VirtualScrollCards} from '../../../../../virtual-scroll/test/cards/app.module';
|
||||
import {AppModule as VirtualScrollImageGallery} from '../../../../../virtual-scroll/test/image-gallery/app.module';
|
||||
import {AppModule as VirtualScrollInfiniteScroll} from '../../../../../virtual-scroll/test/infinite-scroll/app.module';
|
||||
import {AppModule as VirtualScrollList} from '../../../../../virtual-scroll/test/list/app.module';
|
||||
import {AppModule as VirtualScrollMedia} from '../../../../../virtual-scroll/test/media/app/app.module';
|
||||
import {AppModule as VirtualScrollSlidingItem} from '../../../../../virtual-scroll/test/sliding-item/app.module';
|
||||
import {AppModule as VirtualScrollVariableSize} from '../../../../../virtual-scroll/test/variable-size/app.module';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
ComponentsPage
|
||||
],
|
||||
imports: [
|
||||
IonicPageModule.forChild(ComponentsPage),
|
||||
|
||||
ActionSheetBasic,
|
||||
|
||||
AlertBasic,
|
||||
AlertDismiss,
|
||||
|
||||
AppAnimations,
|
||||
AppCordova,
|
||||
AppGestureCollision,
|
||||
AppGestures,
|
||||
AppTypography,
|
||||
AppUtilities,
|
||||
|
||||
BadgeBasic,
|
||||
|
||||
ButtonAnchors,
|
||||
ButtonAttributes,
|
||||
ButtonBasic,
|
||||
ButtonBlock,
|
||||
ButtonClear,
|
||||
ButtonDecorator,
|
||||
ButtonDynamic,
|
||||
ButtonFull,
|
||||
ButtonIcons,
|
||||
ButtonOutline,
|
||||
ButtonRaised,
|
||||
ButtonRound,
|
||||
ButtonSizes,
|
||||
|
||||
CardAdvanced,
|
||||
CardBasic,
|
||||
CardColors,
|
||||
CardImages,
|
||||
CardList,
|
||||
CardMap,
|
||||
CardSocial,
|
||||
|
||||
CheckboxBasic,
|
||||
|
||||
ChipBasic,
|
||||
|
||||
ContentBasic,
|
||||
ContentFullscreen,
|
||||
ContentHeaderScroll,
|
||||
ContentNoBounce,
|
||||
ContentScrollDownOnLoad,
|
||||
|
||||
DatetimeBasic,
|
||||
DatetimeForm,
|
||||
DatetimeIssues,
|
||||
DatetimeLabels,
|
||||
|
||||
FabBasic,
|
||||
|
||||
GridAlignment,
|
||||
GridBasic,
|
||||
GridCard,
|
||||
GridFull,
|
||||
GridResponsive,
|
||||
|
||||
IconBasic,
|
||||
|
||||
ImgBasic,
|
||||
ImgCards,
|
||||
ImgLazyLoad,
|
||||
ImgList,
|
||||
|
||||
InfiniteScrollBasic,
|
||||
InfiniteScrollPositionTop,
|
||||
InfiniteScrollShortList,
|
||||
|
||||
InputBasicForm,
|
||||
InputClearAfterEdit,
|
||||
InputClearInput,
|
||||
InputEvents,
|
||||
InputFixedInlineLabels,
|
||||
InputFloatingLabels,
|
||||
InputFooterInputs,
|
||||
InputFormInputs,
|
||||
InputHighlight,
|
||||
InputInlineLabels,
|
||||
InputInputFocus,
|
||||
InputInsetInputs,
|
||||
InputPlaceholderLabels,
|
||||
InputStackedLabels,
|
||||
|
||||
ItemButtons,
|
||||
ItemColors,
|
||||
ItemDividers,
|
||||
ItemGroups,
|
||||
ItemIcons,
|
||||
ItemImages,
|
||||
ItemInputs,
|
||||
ItemMedia,
|
||||
ItemReorder,
|
||||
ItemSliding,
|
||||
ItemText,
|
||||
|
||||
ListChatList,
|
||||
ListHeaderScenarios,
|
||||
ListHeaders,
|
||||
ListInset,
|
||||
ListNoLines,
|
||||
ListRepeatHeaders,
|
||||
ListSticky,
|
||||
|
||||
LoadingBasic,
|
||||
LoadingTabs,
|
||||
|
||||
MenuBasic,
|
||||
// MenuDisableSwipe, TODO
|
||||
// MenuEnableDisable, TODO
|
||||
MenuMultiple,
|
||||
MenuOverlay,
|
||||
MenuPush,
|
||||
MenuReveal,
|
||||
|
||||
ModalBasic,
|
||||
|
||||
NavBasic,
|
||||
NavChildNavs,
|
||||
NavInitAsync,
|
||||
NavInsertViews,
|
||||
NavMemory,
|
||||
NavNavPushPop,
|
||||
NavWorstCase,
|
||||
|
||||
PickerBasic,
|
||||
|
||||
PopoverBasic,
|
||||
|
||||
RadioBasic,
|
||||
|
||||
RangeBasic,
|
||||
|
||||
RefresherBasic,
|
||||
// RefresherNavigation, TODO
|
||||
|
||||
ScrollBasic,
|
||||
|
||||
SearchbarBasic,
|
||||
SearchbarNav,
|
||||
SearchbarToolbar,
|
||||
|
||||
SegmentBasic,
|
||||
SegmentNav,
|
||||
SegmentSwipe,
|
||||
|
||||
SelectMultipleValue,
|
||||
SelectSingleValue,
|
||||
|
||||
ShowHideWhenBasic,
|
||||
|
||||
SlidesBasic,
|
||||
SlidesControl,
|
||||
SlidesController,
|
||||
SlidesImages,
|
||||
SlidesIntro,
|
||||
SlidesLoop,
|
||||
SlidesOptions,
|
||||
SlidesRTL,
|
||||
SlidesScroll,
|
||||
|
||||
SpinnerBasic,
|
||||
SpinnerColors,
|
||||
|
||||
SplitPaneBasic,
|
||||
SplitPaneMenus,
|
||||
SplitPaneNested,
|
||||
SplitPaneTabs,
|
||||
|
||||
TabsAdvanced,
|
||||
TabsBadges,
|
||||
TabsBasic,
|
||||
TabsColors,
|
||||
TabsEvents,
|
||||
TabsGhost,
|
||||
TabsLifecycle,
|
||||
TabsTabBarScenarios,
|
||||
TabsTop,
|
||||
|
||||
ToastBasic,
|
||||
|
||||
ToggleBasic,
|
||||
|
||||
ToolbarBasic,
|
||||
ToolbarColors,
|
||||
ToolbarScenarios,
|
||||
|
||||
TypographyBasic,
|
||||
|
||||
VirtualScrollBasic,
|
||||
VirtualScrollCards,
|
||||
VirtualScrollImageGallery,
|
||||
VirtualScrollInfiniteScroll,
|
||||
VirtualScrollList,
|
||||
VirtualScrollMedia,
|
||||
VirtualScrollSlidingItem,
|
||||
VirtualScrollVariableSize,
|
||||
],
|
||||
entryComponents: [
|
||||
ComponentsPage
|
||||
]
|
||||
})
|
||||
export class ComponentsModule {
|
||||
}
|
||||
@@ -0,0 +1,574 @@
|
||||
import {Component} from '@angular/core';
|
||||
import {IonicPage} from '../../../../../../';
|
||||
|
||||
import {AssistiveTouchProvider} from '../../providers/assistive-touch/assistive-touch';
|
||||
import {NavController} from '../../../../../../navigation/nav-controller';
|
||||
|
||||
import {AppComponent as ActionSheetBasic} from '../../../../../action-sheet/test/basic/app/app.component';
|
||||
|
||||
import {AppComponent as AlertBasic} from '../../../../../alert/test/basic/app/app.component';
|
||||
import {AppComponent as AlertDismiss} from '../../../../../alert/test/dismiss/app.module';
|
||||
|
||||
import {AppComponent as AppAnimations} from '../../../../../app/test/animations/app.module';
|
||||
import {AppComponent as AppCordova} from '../../../../../app/test/cordova/app/app.component';
|
||||
import {AppComponent as AppGestureCollision} from '../../../../../app/test/gesture-collision/app/app.component';
|
||||
import {AppComponent as AppGestures} from '../../../../../app/test/gestures/app.module';
|
||||
import {AppComponent as AppTypography} from '../../../../../app/test/typography/app/app.component';
|
||||
import {AppComponent as AppUtilities} from '../../../../../app/test/utilities/app/app.component';
|
||||
|
||||
import {AppComponent as BadgeBasic} from '../../../../../badge/test/basic/app/app.component';
|
||||
|
||||
import {AppComponent as ButtonAnchors} from '../../../../../button/test/anchors/app/app.component';
|
||||
import {AppComponent as ButtonAttributes} from '../../../../../button/test/attributes/app/app.component';
|
||||
import {AppComponent as ButtonBasic} from '../../../../../button/test/basic/app/app.component';
|
||||
import {AppComponent as ButtonBlock} from '../../../../../button/test/block/app/app.component';
|
||||
import {AppComponent as ButtonClear} from '../../../../../button/test/clear/app/app.component';
|
||||
import {AppComponent as ButtonDecorator} from '../../../../../button/test/decorator/app/app.component';
|
||||
import {AppComponent as ButtonDynamic} from '../../../../../button/test/dynamic/app/app.component';
|
||||
import {AppComponent as ButtonFull} from '../../../../../button/test/full/app/app.component';
|
||||
import {AppComponent as ButtonIcons} from '../../../../../button/test/icons/app/app.component';
|
||||
import {AppComponent as ButtonOutline} from '../../../../../button/test/outline/app/app.component';
|
||||
import {AppComponent as ButtonRaised} from '../../../../../button/test/raised/app.module';
|
||||
import {AppComponent as ButtonRound} from '../../../../../button/test/round/app/app.component';
|
||||
import {AppComponent as ButtonSizes} from '../../../../../button/test/sizes/app/app.component';
|
||||
|
||||
import {AppComponent as CardAdvanced} from '../../../../../card/test/advanced/app/app.component';
|
||||
import {AppComponent as CardBasic} from '../../../../../card/test/basic/app/app.component';
|
||||
import {AppComponent as CardColors} from '../../../../../card/test/colors/app/app.component';
|
||||
import {AppComponent as CardImages} from '../../../../../card/test/images/app/app.component';
|
||||
import {AppComponent as CardList} from '../../../../../card/test/list/app/app.component';
|
||||
import {AppComponent as CardMap} from '../../../../../card/test/map/app.module';
|
||||
import {AppComponent as CardSocial} from '../../../../../card/test/social/app.module';
|
||||
|
||||
import {AppComponent as CheckboxBasic} from '../../../../../checkbox/test/basic/app/app.component';
|
||||
|
||||
import {AppComponent as ChipBasic} from '../../../../../chip/test/basic/app/app.component';
|
||||
|
||||
import {AppComponent as ContentBasic} from '../../../../../content/test/basic/app/app.component';
|
||||
import {AppComponent as ContentFullscreen} from '../../../../../content/test/fullscreen/app/app.component';
|
||||
import {AppComponent as ContentHeaderScroll} from '../../../../../content/test/header-scroll/app.module';
|
||||
import {AppComponent as ContentNoBounce} from '../../../../../content/test/no-bounce/app/app.component';
|
||||
import {AppComponent as ContentScrollDownOnLoad} from '../../../../../content/test/scroll-down-on-load/app/app.component';
|
||||
|
||||
import {AppComponent as DatetimeBasic} from '../../../../../datetime/test/basic/app/app.component';
|
||||
import {AppComponent as DatetimeForm} from '../../../../../datetime/test/form/app.module';
|
||||
import {AppComponent as DatetimeIssues} from '../../../../../datetime/test/issues/app/app.component';
|
||||
import {AppComponent as DatetimeLabels} from '../../../../../datetime/test/labels/app/app.component';
|
||||
|
||||
import {AppComponent as FabBasic} from '../../../../../fab/test/basic/app/app.component';
|
||||
|
||||
import {AppComponent as GridAlignment} from '../../../../../grid/test/alignment/app.module';
|
||||
import {AppComponent as GridBasic} from '../../../../../grid/test/basic/app/app.component';
|
||||
import {AppComponent as GridCard} from '../../../../../grid/test/card/app.module';
|
||||
import {AppComponent as GridFull} from '../../../../../grid/test/full/app.module';
|
||||
import {AppComponent as GridResponsive} from '../../../../../grid/test/responsive/app.module';
|
||||
|
||||
import {AppComponent as IconBasic} from '../../../../../icon/test/basic/app/app.component';
|
||||
|
||||
import {AppComponent as ImgBasic} from '../../../../../img/test/basic/app/app.component';
|
||||
import {AppComponent as ImgCards} from '../../../../../img/test/cards/app.module';
|
||||
import {AppComponent as ImgLazyLoad} from '../../../../../img/test/lazy-load/app.module';
|
||||
import {AppComponent as ImgList} from '../../../../../img/test/list/app.module';
|
||||
|
||||
import {AppComponent as InfiniteScrollBasic} from '../../../../../infinite-scroll/test/basic/app.module';
|
||||
import {AppComponent as InfiniteScrollPositionTop} from '../../../../../infinite-scroll/test/position-top/app/app.component';
|
||||
import {AppComponent as InfiniteScrollShortList} from '../../../../../infinite-scroll/test/short-list/app.module';
|
||||
|
||||
import {AppComponent as InputBasicForm} from '../../../../../input/test/basic-form/app/app.component';
|
||||
import {AppComponent as InputClearAfterEdit} from '../../../../../input/test/clear-after-edit/app/app.component';
|
||||
import {AppComponent as InputClearInput} from '../../../../../input/test/clear-input/app/app.component';
|
||||
import {AppComponent as InputEvents} from '../../../../../input/test/events/app/app.component';
|
||||
import {AppComponent as InputFixedInlineLabels} from '../../../../../input/test/fixed-inline-labels/app/app.component';
|
||||
import {AppComponent as InputFloatingLabels} from '../../../../../input/test/floating-labels/app/app.component';
|
||||
import {AppComponent as InputFooterInputs} from '../../../../../input/test/footer-inputs/app/app.component';
|
||||
import {AppComponent as InputFormInputs} from '../../../../../input/test/form-inputs/app/app.component';
|
||||
import {AppComponent as InputHighlight} from '../../../../../input/test/highlight/app/app.component';
|
||||
import {AppComponent as InputInlineLabels} from '../../../../../input/test/inline-labels/app/app.component';
|
||||
import {AppComponent as InputInputFocus} from '../../../../../input/test/input-focus/app/app.module';
|
||||
import {AppComponent as InputInsetInputs} from '../../../../../input/test/inset-inputs/app/app.component';
|
||||
import {AppComponent as InputPlaceholderLabels} from '../../../../../input/test/placeholder-labels/app/app.component';
|
||||
import {AppComponent as InputStackedLabels} from '../../../../../input/test/stacked-labels/app/app.component';
|
||||
|
||||
import {AppComponent as ItemButtons} from '../../../../../item/test/buttons/app/app.component';
|
||||
import {AppComponent as ItemColors} from '../../../../../item/test/colors/app/app.component';
|
||||
import {AppComponent as ItemDividers} from '../../../../../item/test/dividers/app/app.component';
|
||||
import {AppComponent as ItemGroups} from '../../../../../item/test/groups/app/app.component';
|
||||
import {AppComponent as ItemIcons} from '../../../../../item/test/icons/app/app.component';
|
||||
import {AppComponent as ItemImages} from '../../../../../item/test/images/app/app.component';
|
||||
import {AppComponent as ItemInputs} from '../../../../../item/test/inputs/app/app.component';
|
||||
import {AppComponent as ItemMedia} from '../../../../../item/test/media/app/app.component';
|
||||
import {AppComponent as ItemReorder} from '../../../../../item/test/reorder/app/app.module';
|
||||
import {AppComponent as ItemSliding} from '../../../../../item/test/sliding/app/app.component';
|
||||
import {AppComponent as ItemText} from '../../../../../item/test/text/app/app.component';
|
||||
|
||||
import {AppComponent as ListChatList} from '../../../../../list/test/chat-list/app.module';
|
||||
import {AppComponent as ListHeaderScenarios} from '../../../../../list/test/header-scenarios/app/app.component';
|
||||
import {AppComponent as ListHeaders} from '../../../../../list/test/headers/app/app.component';
|
||||
import {AppComponent as ListInset} from '../../../../../list/test/inset/app/app.component';
|
||||
import {AppComponent as ListNoLines} from '../../../../../list/test/no-lines/app/app.component';
|
||||
import {AppComponent as ListRepeatHeaders} from '../../../../../list/test/repeat-headers/app.module';
|
||||
import {AppComponent as ListSticky} from '../../../../../list/test/sticky/app.module';
|
||||
|
||||
import {AppComponent as LoadingBasic} from '../../../../../loading/test/basic/app/app.component';
|
||||
import {AppComponent as LoadingTabs} from '../../../../../tabs/test/basic/app/app.component';
|
||||
|
||||
import {AppComponent as MenuBasic} from '../../../../../menu/test/basic/app/app.component';
|
||||
// import {AppComponent as MenuDisableSwipe} from '../../../../../menu/test/disable-swipe/app.module';
|
||||
// import {AppComponent as MenuEnableDisable} from '../../../../../menu/test/enable-disable/app.module';
|
||||
import {AppComponent as MenuMultiple} from '../../../../../menu/test/multiple/app/app.component';
|
||||
import {AppComponent as MenuOverlay} from '../../../../../menu/test/overlay/app.module';
|
||||
import {AppComponent as MenuPush} from '../../../../../menu/test/push/app.module';
|
||||
import {AppComponent as MenuReveal} from '../../../../../menu/test/reveal/app.module';
|
||||
|
||||
import {AppComponent as ModalBasic} from '../../../../../modal/test/basic/app/app.component';
|
||||
|
||||
import {AppComponent as NavBasic} from '../../../../../nav/test/basic/app/app.component';
|
||||
import {AppComponent as NavChildNavs} from '../../../../../nav/test/child-navs/app/app.component';
|
||||
import {AppComponent as NavInitAsync} from '../../../../../nav/test/init-async/app.module';
|
||||
import {AppComponent as NavInsertViews} from '../../../../../nav/test/insert-views/app.module';
|
||||
import {AppComponent as NavMemory} from '../../../../../nav/test/memory/app.module';
|
||||
import {AppComponent as NavNavPushPop} from '../../../../../nav/test/nav-push-pop/app.module';
|
||||
import {AppComponent as NavWorstCase} from '../../../../../nav/test/worst-case/app.module';
|
||||
|
||||
import {AppComponent as PickerBasic} from '../../../../../picker/test/basic/app/app.component';
|
||||
|
||||
import {AppComponent as PopoverBasic} from '../../../../../popover/test/basic/app/app.component';
|
||||
|
||||
import {AppComponent as RadioBasic} from '../../../../../radio/test/basic/app/app.component';
|
||||
|
||||
import {AppComponent as RangeBasic} from '../../../../../range/test/basic/app/app.component';
|
||||
|
||||
import {AppComponent as RefresherBasic} from '../../../../../refresher/test/basic/app.module';
|
||||
// import {AppComponent as RefresherNavigation} from '../../../../../refresher/test/navigation/app.module';
|
||||
|
||||
import {AppComponent as ScrollBasic} from '../../../../../scroll/test/basic/app.module';
|
||||
|
||||
import {AppComponent as SearchbarBasic} from '../../../../../searchbar/test/basic/app/app.component';
|
||||
import {AppComponent as SearchbarNav} from '../../../../../searchbar/test/nav/app/app.component';
|
||||
import {AppComponent as SearchbarToolbar} from '../../../../../searchbar/test/toolbar/app/app.component';
|
||||
|
||||
import {AppComponent as SegmentBasic} from '../../../../../segment/test/basic/app/app.component';
|
||||
import {AppComponent as SegmentNav} from '../../../../../segment/test/nav/app/app.component';
|
||||
import {AppComponent as SegmentSwipe} from '../../../../../segment/test/swipe/app/app.component';
|
||||
|
||||
import {AppComponent as SelectMultipleValue} from '../../../../../select/test/multiple-value/app/app.component';
|
||||
import {AppComponent as SelectSingleValue} from '../../../../../select/test/single-value/app/app.component';
|
||||
|
||||
import {AppComponent as ShowHideWhenBasic} from '../../../../../show-hide-when/test/basic/app.module';
|
||||
|
||||
import {AppComponent as SlidesBasic} from '../../../../../slides/test/basic/app.module';
|
||||
import {AppComponent as SlidesControl} from '../../../../../slides/test/control/app.module';
|
||||
import {AppComponent as SlidesController} from '../../../../../slides/test/controller/app.module';
|
||||
import {AppComponent as SlidesImages} from '../../../../../slides/test/images/app.module';
|
||||
import {AppComponent as SlidesIntro} from '../../../../../slides/test/intro/app.module';
|
||||
import {AppComponent as SlidesLoop} from '../../../../../slides/test/loop/app.module';
|
||||
import {AppComponent as SlidesOptions} from '../../../../../slides/test/options/app.module';
|
||||
import {E2EApp as SlidesRTL} from '../../../../../slides/test/rtl/app.module';
|
||||
import {AppComponent as SlidesScroll} from '../../../../../slides/test/scroll/app.module';
|
||||
|
||||
import {AppComponent as SpinnerBasic} from '../../../../../spinner/test/basic/app.module';
|
||||
import {AppComponent as SpinnerColors} from '../../../../../spinner/test/colors/app.module';
|
||||
|
||||
import {AppComponent as SplitPaneBasic} from '../../../../../split-pane/test/basic/app/app.component';
|
||||
import {AppComponent as SplitPaneMenus} from '../../../../../split-pane/test/menus/app/app.component';
|
||||
import {AppComponent as SplitPaneNested} from '../../../../../split-pane/test/nested/app/app.component';
|
||||
import {AppComponent as SplitPaneTabs} from '../../../../../split-pane/test/tabs/app/app.component';
|
||||
|
||||
import {AppComponent as TabsAdvanced} from '../../../../../tabs/test/advanced/app/app.component';
|
||||
import {AppComponent as TabsBadges} from '../../../../../tabs/test/badges/app/app.component';
|
||||
import {AppComponent as TabsBasic} from '../../../../../tabs/test/basic/app/app.component';
|
||||
import {AppComponent as TabsColors} from '../../../../../tabs/test/colors/app/app.component';
|
||||
import {AppComponent as TabsEvents} from '../../../../../tabs/test/events/app.module';
|
||||
import {TabsPage as TabsGhost} from '../../../../../tabs/test/ghost/app.module';
|
||||
import {AppComponent as TabsLifecycle} from '../../../../../tabs/test/lifecyles/app.module';
|
||||
import {AppComponent as TabsTabBarScenarios} from '../../../../../tabs/test/tab-bar-scenarios/app/app.component';
|
||||
import {AppComponent as TabsTop} from '../../../../../tabs/test/top/app.module';
|
||||
|
||||
import {AppComponent as ToastBasic} from '../../../../../toast/test/basic/app/app.component';
|
||||
|
||||
import {AppComponent as ToggleBasic} from '../../../../../toggle/test/basic/app/app.component';
|
||||
|
||||
import {AppComponent as ToolbarBasic} from '../../../../../toolbar/test/basic/app/app.component';
|
||||
import {AppComponent as ToolbarColors} from '../../../../../toolbar/test/colors/app/app.component';
|
||||
import {AppComponent as ToolbarScenarios} from '../../../../../toolbar/test/scenarios/app/app.component';
|
||||
|
||||
import {AppComponent as TypographyBasic} from '../../../../../typography/test/basic/app/app.component';
|
||||
|
||||
import {AppComponent as VirtualScrollBasic} from '../../../../../virtual-scroll/test/basic/app.module';
|
||||
import {AppComponent as VirtualScrollCards} from '../../../../../virtual-scroll/test/cards/app.module';
|
||||
import {AppComponent as VirtualScrollImageGallery} from '../../../../../virtual-scroll/test/image-gallery/app.module';
|
||||
import {E2EApp as VirtualScrollInfiniteScroll} from '../../../../../virtual-scroll/test/infinite-scroll/app.module';
|
||||
import {AppComponent as VirtualScrollList} from '../../../../../virtual-scroll/test/list/app.module';
|
||||
import {AppComponent as VirtualScrollMedia} from '../../../../../virtual-scroll/test/media/app/app.component';
|
||||
import {AppComponent as VirtualScrollSlidingItem} from '../../../../../virtual-scroll/test/sliding-item/app.module';
|
||||
import {AppComponent as VirtualScrollVariableSize} from '../../../../../virtual-scroll/test/variable-size/app.module';
|
||||
|
||||
|
||||
export type ComponentsGroup = { name: string, components: Array<{ name: string, component: any }> };
|
||||
|
||||
@IonicPage()
|
||||
@Component({
|
||||
templateUrl: 'components.html'
|
||||
})
|
||||
export class ComponentsPage {
|
||||
components: Array<ComponentsGroup> = [
|
||||
{
|
||||
name: 'Action Sheet',
|
||||
components: [
|
||||
{name: 'basic', component: ActionSheetBasic}
|
||||
]
|
||||
}, {
|
||||
name: 'Alert',
|
||||
components: [
|
||||
{name: 'basic', component: AlertBasic},
|
||||
{name: 'dismiss', component: AlertDismiss}
|
||||
]
|
||||
}, {
|
||||
name: 'App',
|
||||
components: [
|
||||
{name: 'animations', component: AppAnimations},
|
||||
{name: 'cordova', component: AppCordova},
|
||||
{name: 'gesture-collision', component: AppGestureCollision},
|
||||
{name: 'gestures', component: AppGestures},
|
||||
{name: 'typography', component: AppTypography},
|
||||
{name: 'utilities', component: AppUtilities}
|
||||
]
|
||||
}, {
|
||||
name: 'Avatar',
|
||||
components: []
|
||||
}, {
|
||||
name: 'Backdrop',
|
||||
components: []
|
||||
}, {
|
||||
name: 'Badge',
|
||||
components: [
|
||||
{name: 'basic', component: BadgeBasic}
|
||||
]
|
||||
}, {
|
||||
name: 'Button',
|
||||
components: [
|
||||
{name: 'anchors', component: ButtonAnchors},
|
||||
{name: 'attributes', component: ButtonAttributes},
|
||||
{name: 'basic', component: ButtonBasic},
|
||||
{name: 'block', component: ButtonBlock},
|
||||
{name: 'clear', component: ButtonClear},
|
||||
{name: 'decorator', component: ButtonDecorator},
|
||||
{name: 'dynamic', component: ButtonDynamic},
|
||||
{name: 'full', component: ButtonFull},
|
||||
{name: 'icons', component: ButtonIcons},
|
||||
{name: 'outline', component: ButtonOutline},
|
||||
{name: 'raised', component: ButtonRaised},
|
||||
{name: 'round', component: ButtonRound},
|
||||
{name: 'sizes', component: ButtonSizes}
|
||||
]
|
||||
}, {
|
||||
name: 'Card',
|
||||
components: [
|
||||
{name: 'advanced', component: CardAdvanced},
|
||||
{name: 'basic', component: CardBasic},
|
||||
{name: 'colors', component: CardColors},
|
||||
{name: 'images', component: CardImages},
|
||||
{name: 'list', component: CardList},
|
||||
{name: 'map', component: CardMap},
|
||||
{name: 'social', component: CardSocial}
|
||||
]
|
||||
}, {
|
||||
name: 'Checkbox',
|
||||
components: [
|
||||
{name: 'basic', component: CheckboxBasic}
|
||||
]
|
||||
}, {
|
||||
name: 'Chip',
|
||||
components: [
|
||||
{name: 'basic', component: ChipBasic}
|
||||
]
|
||||
}, {
|
||||
name: 'Content',
|
||||
components: [
|
||||
{name: 'basic', component: ContentBasic},
|
||||
{name: 'fullscreen', component: ContentFullscreen},
|
||||
{name: 'header-scroll', component: ContentHeaderScroll},
|
||||
{name: 'no-bounce', component: ContentNoBounce},
|
||||
{name: 'scroll-down-on-load', component: ContentScrollDownOnLoad}
|
||||
]
|
||||
}, {
|
||||
name: 'Datetime',
|
||||
components: [
|
||||
{name: 'basic', component: DatetimeBasic},
|
||||
{name: 'form', component: DatetimeForm},
|
||||
{name: 'issues', component: DatetimeIssues},
|
||||
{name: 'labels', component: DatetimeLabels}
|
||||
]
|
||||
}, {
|
||||
name: 'Fab',
|
||||
components: [
|
||||
{name: 'basic', component: FabBasic}
|
||||
]
|
||||
}, {
|
||||
name: 'Grid',
|
||||
components: [
|
||||
{name: 'alignment', component: GridAlignment},
|
||||
{name: 'basic', component: GridBasic},
|
||||
{name: 'card', component: GridCard},
|
||||
{name: 'full', component: GridFull},
|
||||
{name: 'responsive', component: GridResponsive}
|
||||
]
|
||||
}, {
|
||||
name: 'Icon',
|
||||
components: [
|
||||
{name: 'basic', component: IconBasic}
|
||||
]
|
||||
}, {
|
||||
name: 'Img',
|
||||
components: [
|
||||
{name: 'basic', component: ImgBasic},
|
||||
{name: 'cards', component: ImgCards},
|
||||
{name: 'lazy-load', component: ImgLazyLoad},
|
||||
{name: 'list', component: ImgList}
|
||||
]
|
||||
}, {
|
||||
name: 'Infinite Scroll',
|
||||
components: [
|
||||
{name: 'basic', component: InfiniteScrollBasic},
|
||||
{name: 'position-top', component: InfiniteScrollPositionTop},
|
||||
{name: 'short-list', component: InfiniteScrollShortList}
|
||||
]
|
||||
}, {
|
||||
name: 'Inputs',
|
||||
components: [
|
||||
{name: 'basic-form', component: InputBasicForm},
|
||||
{name: 'clear-after-edit', component: InputClearAfterEdit},
|
||||
{name: 'clear-input', component: InputClearInput},
|
||||
{name: 'events', component: InputEvents},
|
||||
{name: 'fixed-inline-labels', component: InputFixedInlineLabels},
|
||||
{name: 'floating-labels', component: InputFloatingLabels},
|
||||
{name: 'footer-inputs', component: InputFooterInputs},
|
||||
{name: 'form-inputs', component: InputFormInputs},
|
||||
{name: 'highlight', component: InputHighlight},
|
||||
{name: 'inline-labels', component: InputInlineLabels},
|
||||
{name: 'input-focus', component: InputInputFocus},
|
||||
{name: 'inset-inputs', component: InputInsetInputs},
|
||||
{name: 'placeholder-labels', component: InputPlaceholderLabels},
|
||||
{name: 'stacked-labels', component: InputStackedLabels}
|
||||
]
|
||||
}, {
|
||||
name: 'Item',
|
||||
components: [
|
||||
{name: 'buttons', component: ItemButtons},
|
||||
{name: 'colors', component: ItemColors},
|
||||
{name: 'dividers', component: ItemDividers},
|
||||
{name: 'groups', component: ItemGroups},
|
||||
{name: 'icons', component: ItemIcons},
|
||||
{name: 'images', component: ItemImages},
|
||||
{name: 'inputs', component: ItemInputs},
|
||||
{name: 'media', component: ItemMedia},
|
||||
{name: 'reorder', component: ItemReorder},
|
||||
{name: 'sliding', component: ItemSliding},
|
||||
{name: 'text', component: ItemText}
|
||||
]
|
||||
}, {
|
||||
name: 'Label',
|
||||
components: []
|
||||
}, {
|
||||
name: 'List',
|
||||
components: [
|
||||
{name: 'chat-list', component: ListChatList},
|
||||
{name: 'header-scenarios', component: ListHeaderScenarios},
|
||||
{name: 'headers', component: ListHeaders},
|
||||
{name: 'inset', component: ListInset},
|
||||
{name: 'no-lines', component: ListNoLines},
|
||||
{name: 'repeat-headers', component: ListRepeatHeaders},
|
||||
{name: 'sticky', component: ListSticky},
|
||||
]
|
||||
}, {
|
||||
name: 'Loading',
|
||||
components: [
|
||||
{name: 'basic', component: LoadingBasic},
|
||||
{name: 'tabs', component: LoadingTabs}
|
||||
]
|
||||
}, {
|
||||
name: 'Menu',
|
||||
components: [
|
||||
{name: 'basic', component: MenuBasic},
|
||||
// {name: 'disable-swipe', component: MenuDisableSwipe},
|
||||
// {name: 'enable-disable', component: MenuEnableDisable},
|
||||
{name: 'multiple', component: MenuMultiple},
|
||||
{name: 'overlay', component: MenuOverlay},
|
||||
{name: 'push', component: MenuPush},
|
||||
{name: 'reveal', component: MenuReveal},
|
||||
]
|
||||
}, {
|
||||
name: 'Modal',
|
||||
components: [
|
||||
{name: 'basic', component: ModalBasic}
|
||||
]
|
||||
}, {
|
||||
name: 'Nav',
|
||||
components: [
|
||||
{name: 'basic', component: NavBasic},
|
||||
{name: 'child-navs', component: NavChildNavs},
|
||||
{name: 'init-async', component: NavInitAsync},
|
||||
{name: 'insert-views', component: NavInsertViews},
|
||||
{name: 'memory', component: NavMemory},
|
||||
{name: 'nav-push-pop', component: NavNavPushPop},
|
||||
{name: 'worst-case', component: NavWorstCase}
|
||||
]
|
||||
}, {
|
||||
name: 'Note',
|
||||
components: []
|
||||
}, {
|
||||
name: 'Option',
|
||||
components: []
|
||||
}, {
|
||||
name: 'Picker',
|
||||
components: [
|
||||
{name: 'basic', component: PickerBasic}
|
||||
]
|
||||
}, {
|
||||
name: 'Popover',
|
||||
components: [
|
||||
{name: 'basic', component: PopoverBasic}
|
||||
]
|
||||
}, {
|
||||
name: 'Radio',
|
||||
components: [
|
||||
{name: 'basic', component: RadioBasic}
|
||||
]
|
||||
}, {
|
||||
name: 'Range',
|
||||
components: [
|
||||
{name: 'basic', component: RangeBasic}
|
||||
]
|
||||
}, {
|
||||
name: 'Refresher',
|
||||
components: [
|
||||
{name: 'basic', component: RefresherBasic},
|
||||
// {name: 'navigation', component: RefresherNavigation}
|
||||
]
|
||||
}, {
|
||||
name: 'Scroll',
|
||||
components: [
|
||||
{name: 'basic', component: ScrollBasic}
|
||||
]
|
||||
}, {
|
||||
name: 'Searchbar',
|
||||
components: [
|
||||
{name: 'basic', component: SearchbarBasic},
|
||||
{name: 'nav', component: SearchbarNav},
|
||||
{name: 'toolbar', component: SearchbarToolbar},
|
||||
]
|
||||
}, {
|
||||
name: 'Segment',
|
||||
components: [
|
||||
{name: 'basic', component: SegmentBasic},
|
||||
{name: 'nav', component: SegmentNav},
|
||||
{name: 'swipe', component: SegmentSwipe},
|
||||
]
|
||||
}, {
|
||||
name: 'Select',
|
||||
components: [
|
||||
{name: 'multiple-value', component: SelectMultipleValue},
|
||||
{name: 'single-value', component: SelectSingleValue}
|
||||
]
|
||||
}, {
|
||||
name: 'Show-hide-when',
|
||||
components: [
|
||||
{name: 'basic', component: ShowHideWhenBasic}
|
||||
]
|
||||
}, {
|
||||
name: 'Show-hide-when',
|
||||
components: [
|
||||
{name: 'basic', component: SlidesBasic},
|
||||
{name: 'control', component: SlidesControl},
|
||||
{name: 'controller', component: SlidesController},
|
||||
{name: 'images', component: SlidesImages},
|
||||
{name: 'intro', component: SlidesIntro},
|
||||
{name: 'loop', component: SlidesLoop},
|
||||
{name: 'options', component: SlidesOptions},
|
||||
{name: 'rtl', component: SlidesRTL},
|
||||
{name: 'scroll', component: SlidesScroll},
|
||||
]
|
||||
}, {
|
||||
name: 'Spinner',
|
||||
components: [
|
||||
{name: 'basic', component: SpinnerBasic},
|
||||
{name: 'colors', component: SpinnerColors}
|
||||
]
|
||||
}, {
|
||||
name: 'Split-pane',
|
||||
components: [
|
||||
{name: 'basic', component: SplitPaneBasic},
|
||||
{name: 'menus', component: SplitPaneMenus},
|
||||
{name: 'nested', component: SplitPaneNested},
|
||||
{name: 'tabs', component: SplitPaneTabs}
|
||||
]
|
||||
}, {
|
||||
name: 'Tabs',
|
||||
components: [
|
||||
{name: 'advanced', component: TabsAdvanced},
|
||||
{name: 'badges', component: TabsBadges},
|
||||
{name: 'basic', component: TabsBasic},
|
||||
{name: 'colors', component: TabsColors},
|
||||
{name: 'events', component: TabsEvents},
|
||||
{name: 'ghost', component: TabsGhost},
|
||||
{name: 'lifecyles', component: TabsLifecycle},
|
||||
{name: 'tab-bar-scenarios', component: TabsTabBarScenarios},
|
||||
{name: 'top', component: TabsTop}
|
||||
]
|
||||
}, {
|
||||
name: 'Thumbnail',
|
||||
components: []
|
||||
}, {
|
||||
name: 'Toast',
|
||||
components: [
|
||||
{name: 'basic', component: ToastBasic}
|
||||
]
|
||||
}, {
|
||||
name: 'Toggle',
|
||||
components: [
|
||||
{name: 'basic', component: ToastBasic}
|
||||
]
|
||||
}, {
|
||||
name: 'Toggle',
|
||||
components: [
|
||||
{name: 'basic', component: ToggleBasic}
|
||||
]
|
||||
}, {
|
||||
name: 'Toolbar',
|
||||
components: [
|
||||
{name: 'basic', component: ToolbarBasic},
|
||||
{name: 'colors', component: ToolbarColors},
|
||||
{name: 'scenarios', component: ToolbarScenarios}
|
||||
]
|
||||
}, {
|
||||
name: 'Typography',
|
||||
components: [
|
||||
{name: 'basic', component: TypographyBasic}
|
||||
]
|
||||
}, {
|
||||
name: 'Virtual-scroll',
|
||||
components: [
|
||||
{name: 'basic', component: VirtualScrollBasic},
|
||||
{name: 'cards', component: VirtualScrollCards},
|
||||
{name: 'image-gallery', component: VirtualScrollImageGallery},
|
||||
{name: 'infinite-scroll', component: VirtualScrollInfiniteScroll},
|
||||
{name: 'list', component: VirtualScrollList},
|
||||
{name: 'media', component: VirtualScrollMedia},
|
||||
{name: 'sliding-item', component: VirtualScrollSlidingItem},
|
||||
{name: 'variable-size', component: VirtualScrollVariableSize},
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
constructor(private navCtrl: NavController, private assistive: AssistiveTouchProvider) {
|
||||
assistive.closeButton.subscribe(this.close.bind(this));
|
||||
}
|
||||
|
||||
open(component: any) {
|
||||
this.navCtrl.push(component);
|
||||
}
|
||||
|
||||
close() {
|
||||
this.navCtrl.popToRoot();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import {EventEmitter, Injectable} from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class AssistiveTouchProvider {
|
||||
public closeButton: EventEmitter<any> = new EventEmitter<any>();
|
||||
}
|
||||
@@ -71,8 +71,8 @@ import { ViewController } from '../../navigation/view-controller';
|
||||
*
|
||||
* // set some user information on chatParams
|
||||
* chatParams = {
|
||||
* user1: "admin",
|
||||
* user2: "ionic"
|
||||
* user1: 'admin',
|
||||
* user2: 'ionic'
|
||||
* };
|
||||
*
|
||||
* constructor() {
|
||||
@@ -86,7 +86,7 @@ import { ViewController } from '../../navigation/view-controller';
|
||||
* ```ts
|
||||
* export class ChatPage {
|
||||
* constructor(navParams: NavParams) {
|
||||
* console.log("Passed params", navParams.data);
|
||||
* console.log('Passed params', navParams.data);
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
|
||||
@@ -106,14 +106,18 @@ $tabs-ios-tab-icon-size: 30px !default;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.tabs-ios[tabsLayout=icon-right] .tab-button .tab-button-text,
|
||||
.tabs-ios[tabsLayout=icon-left] .tab-button .tab-button-text {
|
||||
.tabs-ios[tabsLayout=icon-right] .tab-button .tab-button-text, // deprecated
|
||||
.tabs-ios[tabsLayout=icon-left] .tab-button .tab-button-text, // deprecated
|
||||
.tabs-ios[tabsLayout=icon-end] .tab-button .tab-button-text,
|
||||
.tabs-ios[tabsLayout=icon-start] .tab-button .tab-button-text {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.tabs-ios[tabsLayout=icon-right] .tab-button ion-icon,
|
||||
.tabs-ios[tabsLayout=icon-left] .tab-button ion-icon {
|
||||
.tabs-ios[tabsLayout=icon-right] .tab-button ion-icon, // deprecated
|
||||
.tabs-ios[tabsLayout=icon-left] .tab-button ion-icon, // deprecated
|
||||
.tabs-ios[tabsLayout=icon-end] .tab-button ion-icon,
|
||||
.tabs-ios[tabsLayout=icon-start] .tab-button ion-icon {
|
||||
min-width: 24px;
|
||||
height: 26px;
|
||||
|
||||
|
||||
@@ -90,14 +90,18 @@ $tabs-md-tab-text-transition: transform .3s ease-in-out !default
|
||||
/// @prop - Transform for the active tab button icon when the layout is icon-top, icon-only, or title-only
|
||||
$tabs-md-tab-icon-transform-active: translate3d(0, -2px, 0) !default;
|
||||
|
||||
/// @prop - Transform for the active tab button icon when the layout is icon-right
|
||||
// deprecated
|
||||
$tabs-md-tab-icon-right-transform-active: translate3d(2px, 0, 0) !default;
|
||||
/// @prop - Transform for the active tab button icon when the layout is icon-end
|
||||
$tabs-md-tab-icon-end-transform-active: $tabs-md-tab-icon-right-transform-active !default;
|
||||
|
||||
/// @prop - Transform for the active tab button icon when the layout is icon-bottom
|
||||
$tabs-md-tab-icon-bottom-transform-active: translate3d(0, 2px, 0) !default;
|
||||
|
||||
/// @prop - Transform for the active tab button icon when the layout is icon-left
|
||||
// deprecated
|
||||
$tabs-md-tab-icon-left-transform-active: translate3d(-2px, 0, 0) !default;
|
||||
/// @prop - Transform for the active tab button icon when the layout is icon-start
|
||||
$tabs-md-tab-icon-start-transform-active: $tabs-md-tab-icon-left-transform-active !default;
|
||||
|
||||
/// @prop - Transform origin for the tab button text
|
||||
$tabs-md-tab-icon-transform-origin: 50% 150% !default;
|
||||
@@ -190,9 +194,10 @@ $tabs-md-tab-icon-size: 2.4rem !default;
|
||||
transform: $tabs-md-tab-icon-transform-active;
|
||||
}
|
||||
|
||||
// Tab layout: icon-right
|
||||
.tabs-md[tabsLayout=icon-right] .tab-button[aria-selected=true] .tab-button-icon {
|
||||
transform: $tabs-md-tab-icon-right-transform-active;
|
||||
// Tab layout: icon-end
|
||||
.tabs-md[tabsLayout=icon-right] .tab-button[aria-selected=true] .tab-button-icon, // deprecated
|
||||
.tabs-md[tabsLayout=icon-end] .tab-button[aria-selected=true] .tab-button-icon {
|
||||
transform: $tabs-md-tab-icon-end-transform-active;
|
||||
}
|
||||
|
||||
// Tab layout: icon-bottom
|
||||
@@ -200,9 +205,10 @@ $tabs-md-tab-icon-size: 2.4rem !default;
|
||||
transform: $tabs-md-tab-icon-bottom-transform-active;
|
||||
}
|
||||
|
||||
// Tab layout: icon-left
|
||||
.tabs-md[tabsLayout=icon-left] .tab-button[aria-selected=true] .tab-button-icon {
|
||||
transform: $tabs-md-tab-icon-left-transform-active;
|
||||
// Tab layout: icon-start
|
||||
.tabs-md[tabsLayout=icon-left] .tab-button[aria-selected=true] .tab-button-icon, // deprecated
|
||||
.tabs-md[tabsLayout=icon-start] .tab-button[aria-selected=true] .tab-button-icon {
|
||||
transform: $tabs-md-tab-icon-start-transform-active;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -93,17 +93,21 @@
|
||||
order: 10;
|
||||
}
|
||||
|
||||
[tabsLayout=icon-left] .tab-button,
|
||||
[tabsLayout=icon-right] .tab-button {
|
||||
[tabsLayout=icon-left] .tab-button, // deprecated
|
||||
[tabsLayout=icon-right] .tab-button, // deprecated
|
||||
[tabsLayout=icon-start] .tab-button,
|
||||
[tabsLayout=icon-end] .tab-button {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
[tabsLayout=icon-left] .tab-button .tab-button-icon {
|
||||
[tabsLayout=icon-left] .tab-button .tab-button-icon, // deprecated
|
||||
[tabsLayout=icon-start] .tab-button .tab-button-icon {
|
||||
@include padding-horizontal(null, 8px);
|
||||
@include text-align(end);
|
||||
}
|
||||
|
||||
[tabsLayout=icon-right] .tab-button .tab-button-icon {
|
||||
[tabsLayout=icon-right] .tab-button .tab-button-icon, // deprecated
|
||||
[tabsLayout=icon-end] .tab-button .tab-button-icon {
|
||||
@include padding-horizontal(8px, null);
|
||||
@include text-align(start);
|
||||
|
||||
@@ -138,7 +142,9 @@
|
||||
}
|
||||
|
||||
[tabsLayout=icon-bottom] .tab-badge,
|
||||
[tabsLayout=icon-left] .tab-badge,
|
||||
[tabsLayout=icon-right] .tab-badge {
|
||||
[tabsLayout=icon-left] .tab-badge, // deprecated
|
||||
[tabsLayout=icon-right] .tab-badge, // deprecated
|
||||
[tabsLayout=icon-start] .tab-badge,
|
||||
[tabsLayout=icon-end] .tab-badge {
|
||||
@include position(null, calc(50% - 50px), null, null);
|
||||
}
|
||||
|
||||
@@ -184,7 +184,7 @@ export class Tabs extends Ion implements AfterViewInit, RootNode, ITabs {
|
||||
@Input() selectedIndex: number;
|
||||
|
||||
/**
|
||||
* @input {string} Set the tabbar layout: `icon-top`, `icon-left`, `icon-right`, `icon-bottom`, `icon-hide`, `title-hide`.
|
||||
* @input {string} Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
|
||||
*/
|
||||
@Input() tabsLayout: string;
|
||||
|
||||
|
||||
@@ -123,13 +123,17 @@ $tabs-wp-tab-icon-size: 2.4rem !default;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.tabs-wp[tabsLayout=icon-right] .tab-button,
|
||||
.tabs-wp[tabsLayout=icon-left] .tab-button {
|
||||
.tabs-wp[tabsLayout=icon-right] .tab-button, // deprecated
|
||||
.tabs-wp[tabsLayout=icon-left] .tab-button, // deprecated
|
||||
.tabs-wp[tabsLayout=icon-end] .tab-button,
|
||||
.tabs-wp[tabsLayout=icon-start] .tab-button {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.tabs-wp[tabsLayout=icon-right] .tab-button ion-icon,
|
||||
.tabs-wp[tabsLayout=icon-left] .tab-button ion-icon {
|
||||
.tabs-wp[tabsLayout=icon-right] .tab-button ion-icon, // deprecated
|
||||
.tabs-wp[tabsLayout=icon-left] .tab-button ion-icon, // deprecated
|
||||
.tabs-wp[tabsLayout=icon-end] .tab-button ion-icon,
|
||||
.tabs-wp[tabsLayout=icon-start] .tab-button ion-icon {
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
|
||||
@@ -33,14 +33,14 @@
|
||||
|
||||
|
||||
<!-- Icons right of text -->
|
||||
<ion-tabs tabsLayout="icon-right" primary no-navbar>
|
||||
<ion-tabs tabsLayout="icon-end" primary no-navbar>
|
||||
<ion-tab [root]="root" tabTitle="Recents" tabIcon="call"></ion-tab>
|
||||
<ion-tab [root]="root" tabTitle="Favorites" tabIcon="heart"></ion-tab>
|
||||
<ion-tab [root]="root" tabTitle="Settings" tabIcon="settings" tabBadge="1030" tabBadgeStyle="light"></ion-tab>
|
||||
</ion-tabs>
|
||||
|
||||
<!-- Icons left of text -->
|
||||
<ion-tabs tabsLayout="icon-left" no-navbar>
|
||||
<ion-tabs tabsLayout="icon-start" no-navbar>
|
||||
<ion-tab [root]="root" tabTitle="Recents" tabIcon="call" tabBadge="32" tabBadgeStyle="danger"></ion-tab>
|
||||
<ion-tab [root]="root" tabTitle="Favorites" tabIcon="heart"></ion-tab>
|
||||
<ion-tab [root]="root" tabTitle="Settings" tabIcon="settings"></ion-tab>
|
||||
@@ -62,7 +62,7 @@
|
||||
</ion-tabs>
|
||||
|
||||
<!-- Dynamic Badge -->
|
||||
<ion-tabs tabsLayout="icon-left" no-navbar>
|
||||
<ion-tabs tabsLayout="icon-start" no-navbar>
|
||||
<ion-tab [root]="root" tabTitle="Recents" tabIcon="call"></ion-tab>
|
||||
<ion-tab [root]="root" tabTitle="Favorites" tabIcon="heart"></ion-tab>
|
||||
<ion-tab [root]="root" tabTitle="Settings" tabIcon="settings" [tabBadge]="myBadge" tabBadgeStyle="primary"></ion-tab>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
|
||||
|
||||
<!-- Icons right of text -->
|
||||
<ion-tabs tabsLayout="icon-right" no-navbar selectedIndex="0" color="danger">
|
||||
<ion-tabs tabsLayout="icon-end" no-navbar selectedIndex="0" color="danger">
|
||||
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
|
||||
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
|
||||
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
|
||||
@@ -41,7 +41,7 @@
|
||||
|
||||
|
||||
<!-- Icons left of text -->
|
||||
<ion-tabs tabsLayout="icon-left" no-navbar color="light">
|
||||
<ion-tabs tabsLayout="icon-start" no-navbar color="light">
|
||||
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
|
||||
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
|
||||
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
|
||||
|
||||
<!-- Icons right of text -->
|
||||
<ion-tabs tabsLayout="icon-right" no-navbar selectedIndex="0">
|
||||
<ion-tabs tabsLayout="icon-end" no-navbar selectedIndex="0">
|
||||
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
|
||||
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
|
||||
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
|
||||
@@ -41,7 +41,7 @@
|
||||
|
||||
|
||||
<!-- Icons left of text -->
|
||||
<ion-tabs tabsLayout="icon-left" no-navbar>
|
||||
<ion-tabs tabsLayout="icon-start" no-navbar>
|
||||
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
|
||||
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
|
||||
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
|
||||
|
||||
@@ -21,7 +21,7 @@ import { ToggleGesture } from './toggle-gesture';
|
||||
* Toggles can also have colors assigned to them, by adding any color
|
||||
* attribute.
|
||||
*
|
||||
* See the [Angular 2 Docs](https://angular.io/docs/ts/latest/guide/forms.html)
|
||||
* See the [Angular Docs](https://angular.io/docs/ts/latest/guide/forms.html)
|
||||
* for more info on forms and inputs.
|
||||
*
|
||||
* @usage
|
||||
|
||||
@@ -63,14 +63,14 @@
|
||||
<button ion-button icon-only color="primary">
|
||||
<ion-icon name="contact"></ion-icon>
|
||||
</button>
|
||||
<button ion-button icon-left solid>
|
||||
<button ion-button icon-start solid>
|
||||
<ion-icon name="contact"></ion-icon>
|
||||
Solid
|
||||
</button>
|
||||
</ion-buttons>
|
||||
<ion-title>Secondary</ion-title>
|
||||
<ion-buttons end>
|
||||
<button ion-button icon-right solid color="danger">
|
||||
<button ion-button icon-end solid color="danger">
|
||||
Help
|
||||
<ion-icon name="help-circle"></ion-icon>
|
||||
</button>
|
||||
@@ -82,14 +82,14 @@
|
||||
<button ion-button icon-only color="primary" class="activated">
|
||||
<ion-icon name="contact"></ion-icon>
|
||||
</button>
|
||||
<button ion-button icon-left solid class="activated">
|
||||
<button ion-button icon-start solid class="activated">
|
||||
<ion-icon name="contact"></ion-icon>
|
||||
Solid
|
||||
</button>
|
||||
</ion-buttons>
|
||||
<ion-title>Secondary Activated</ion-title>
|
||||
<ion-buttons end>
|
||||
<button ion-button icon-right solid color="danger" class="activated">
|
||||
<button ion-button icon-end solid color="danger" class="activated">
|
||||
Help
|
||||
<ion-icon name="help-circle"></ion-icon>
|
||||
</button>
|
||||
@@ -101,7 +101,7 @@
|
||||
<button ion-button icon-only outline>
|
||||
<ion-icon name="contact"></ion-icon>
|
||||
</button>
|
||||
<button ion-button icon-left outline>
|
||||
<button ion-button icon-start outline>
|
||||
<ion-icon name="star"></ion-icon>
|
||||
Star
|
||||
</button>
|
||||
@@ -119,7 +119,7 @@
|
||||
<button ion-button outline icon-only class="activated">
|
||||
<ion-icon name="contact"></ion-icon>
|
||||
</button>
|
||||
<button ion-button outline icon-left class="activated">
|
||||
<button ion-button outline icon-start class="activated">
|
||||
<ion-icon name="star"></ion-icon>
|
||||
Star
|
||||
</button>
|
||||
@@ -134,13 +134,13 @@
|
||||
|
||||
<ion-toolbar color="danger">
|
||||
<ion-buttons start>
|
||||
<button ion-button icon-left>
|
||||
<button ion-button icon-start>
|
||||
<ion-icon name="contact"></ion-icon>
|
||||
Clear
|
||||
</button>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<button ion-button icon-right>
|
||||
<button ion-button icon-end>
|
||||
Edit
|
||||
<ion-icon name="create"></ion-icon>
|
||||
</button>
|
||||
@@ -162,13 +162,13 @@
|
||||
|
||||
<ion-toolbar color="light">
|
||||
<ion-buttons start>
|
||||
<button ion-button icon-left>
|
||||
<button ion-button icon-start>
|
||||
<ion-icon name="contact"></ion-icon>
|
||||
Clear
|
||||
</button>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<button ion-button icon-right>
|
||||
<button ion-button icon-end>
|
||||
Edit
|
||||
<ion-icon name="create"></ion-icon>
|
||||
</button>
|
||||
@@ -199,4 +199,11 @@
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</button>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="greyYellow">
|
||||
<ion-title>Grey Yellow</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="greyWhite">
|
||||
<ion-title>Grey White</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-content>
|
||||
|
||||
@@ -64,14 +64,14 @@
|
||||
<button ion-button icon-only solid>
|
||||
<ion-icon name="contact"></ion-icon>
|
||||
</button>
|
||||
<button ion-button icon-left solid>
|
||||
<button ion-button icon-start solid>
|
||||
<ion-icon name="contact"></ion-icon>
|
||||
Solid
|
||||
</button>
|
||||
</ion-buttons>
|
||||
<ion-title>Solid</ion-title>
|
||||
<ion-buttons end>
|
||||
<button ion-button icon-right solid color="secondary">
|
||||
<button ion-button icon-end solid color="secondary">
|
||||
Help
|
||||
<ion-icon name="help-circle"></ion-icon>
|
||||
</button>
|
||||
@@ -83,14 +83,14 @@
|
||||
<a ion-button icon-only solid class="activated">
|
||||
<ion-icon name="contact"></ion-icon>
|
||||
</a>
|
||||
<button ion-button icon-left solid class="activated">
|
||||
<button ion-button icon-start solid class="activated">
|
||||
<ion-icon name="contact"></ion-icon>
|
||||
Solid
|
||||
</button>
|
||||
</ion-buttons>
|
||||
<ion-title>Solid Activated</ion-title>
|
||||
<ion-buttons end>
|
||||
<button ion-button icon-right solid color="secondary" class="activated">
|
||||
<button ion-button icon-end solid color="secondary" class="activated">
|
||||
Help
|
||||
<ion-icon name="help-circle"></ion-icon>
|
||||
</button>
|
||||
@@ -102,7 +102,7 @@
|
||||
<button ion-button icon-only outline>
|
||||
<ion-icon name="contact"></ion-icon>
|
||||
</button>
|
||||
<button ion-button icon-left outline>
|
||||
<button ion-button icon-start outline>
|
||||
<ion-icon name="star"></ion-icon>
|
||||
Star
|
||||
</button>
|
||||
@@ -120,7 +120,7 @@
|
||||
<button ion-button icon-only outline class="activated">
|
||||
<ion-icon name="contact"></ion-icon>
|
||||
</button>
|
||||
<button ion-button icon-left outline class="activated">
|
||||
<button ion-button icon-start outline class="activated">
|
||||
<ion-icon name="star"></ion-icon>
|
||||
Star
|
||||
</button>
|
||||
@@ -135,13 +135,13 @@
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons start>
|
||||
<button ion-button icon-left>
|
||||
<button ion-button icon-start>
|
||||
<ion-icon name="contact"></ion-icon>
|
||||
Clear
|
||||
</button>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<a ion-button icon-right href="#">
|
||||
<a ion-button icon-end href="#">
|
||||
Edit
|
||||
<ion-icon name="create"></ion-icon>
|
||||
</a>
|
||||
|
||||
@@ -275,7 +275,7 @@ $toolbar-button-ios-strong-font-weight: 600 !default;
|
||||
// iOS Toolbar Button Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button-ios.bar-button-icon-left ion-icon {
|
||||
.bar-button-ios.bar-button-icon-start ion-icon {
|
||||
@include padding-horizontal(null, .3em);
|
||||
|
||||
font-size: 1.4em;
|
||||
@@ -284,7 +284,7 @@ $toolbar-button-ios-strong-font-weight: 600 !default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bar-button-ios.bar-button-icon-right ion-icon {
|
||||
.bar-button-ios.bar-button-icon-end ion-icon {
|
||||
@include padding-horizontal(.4em, null);
|
||||
|
||||
font-size: 1.4em;
|
||||
|
||||
@@ -116,7 +116,6 @@ $toolbar-button-md-strong-font-weight: bold !default;
|
||||
|
||||
@mixin md-toolbar-theme($color-name, $color-base, $color-contrast) {
|
||||
.toolbar-md-#{$color-name} {
|
||||
$fg-color: color-contrast($colors-md, $color-base, md);
|
||||
|
||||
.toolbar-background-md {
|
||||
background: $color-base;
|
||||
@@ -126,22 +125,22 @@ $toolbar-button-md-strong-font-weight: bold !default;
|
||||
.bar-button-default-md,
|
||||
.bar-button-outline-md,
|
||||
.toolbar-title-md {
|
||||
color: $fg-color;
|
||||
color: $color-contrast;
|
||||
}
|
||||
|
||||
.bar-button-clear-md,
|
||||
.bar-button-default-md,
|
||||
.bar-button-outline-md {
|
||||
.button-effect {
|
||||
background-color: $fg-color;
|
||||
background-color: $color-contrast;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-button-outline-md {
|
||||
border-color: $fg-color;
|
||||
border-color: $color-contrast;
|
||||
}
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md, md) {
|
||||
@include md-bar-button-default($color-name, $color-base, $color-contrast);
|
||||
@include md-bar-button-outline($color-name, $color-base, $color-contrast);
|
||||
@include md-bar-button-solid($color-name, $color-base, $color-contrast);
|
||||
@@ -296,7 +295,7 @@ $toolbar-button-md-strong-font-weight: bold !default;
|
||||
// Material Design Toolbar Button Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button-md.bar-button-icon-left ion-icon {
|
||||
.bar-button-md.bar-button-icon-start ion-icon {
|
||||
@include padding-horizontal(null, .3em);
|
||||
|
||||
font-size: 1.4em;
|
||||
@@ -305,7 +304,7 @@ $toolbar-button-md-strong-font-weight: bold !default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bar-button-md.bar-button-icon-right ion-icon {
|
||||
.bar-button-md.bar-button-icon-end ion-icon {
|
||||
@include padding-horizontal(.4em, null);
|
||||
|
||||
font-size: 1.4em;
|
||||
@@ -385,7 +384,7 @@ $toolbar-button-md-strong-font-weight: bold !default;
|
||||
@include md-bar-button-default(default, $toolbar-md-button-color, color-contrast($colors-md, $toolbar-md-button-color, md));
|
||||
@include md-bar-button-default(clear, $toolbar-md-button-color, color-contrast($colors-md, $toolbar-md-button-color, md));
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md, md) {
|
||||
@include md-toolbar-theme($color-name, $color-base, $color-contrast);
|
||||
@include md-bar-button-default($color-name, $color-base, $color-contrast);
|
||||
@include md-bar-button-outline($color-name, $color-base, $color-contrast);
|
||||
|
||||
@@ -265,7 +265,7 @@ $toolbar-button-wp-strong-font-weight: bold !default;
|
||||
// Windows Toolbar Button Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button-wp.bar-button-icon-left ion-icon {
|
||||
.bar-button-wp.bar-button-icon-start ion-icon {
|
||||
@include padding-horizontal(null, .3em);
|
||||
|
||||
font-size: 1.4em;
|
||||
@@ -274,7 +274,7 @@ $toolbar-button-wp-strong-font-weight: bold !default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bar-button-wp.bar-button-icon-right ion-icon {
|
||||
.bar-button-wp.bar-button-icon-end ion-icon {
|
||||
@include padding-horizontal(.4em, null);
|
||||
|
||||
font-size: 1.4em;
|
||||
|
||||
@@ -120,7 +120,7 @@ import { isObject, isDefined, isFunction, isArray } from '../util/util';
|
||||
* | `spinner` | `string` | The default spinner to use when a name is not defined. |
|
||||
* | `swipeBackEnabled` | `boolean` | Whether native iOS swipe to go back functionality is enabled. |
|
||||
* | `tabsHighlight` | `boolean` | Whether to show a highlight line under the tab when it is selected. |
|
||||
* | `tabsLayout` | `string` | The layout to use for all tabs. Available options: `"icon-top"`, `"icon-left"`, `"icon-right"`, `"icon-bottom"`, `"icon-hide"`, `"title-hide"`. |
|
||||
* | `tabsLayout` | `string` | The layout to use for all tabs. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"title-hide"`. |
|
||||
* | `tabsPlacement` | `string` | The position of the tabs relative to the content. Available options: `"top"`, `"bottom"` |
|
||||
* | `tabsHideOnSubPages` | `boolean` | Whether to hide the tabs on child pages or not. If `true` it will not show the tabs on child pages. |
|
||||
* | `toastEnter` | `string` | The name of the transition to use while a toast is presented. |
|
||||
|
||||
@@ -66,17 +66,17 @@ export class SlideGesture extends PanGesture {
|
||||
let coord = <any>pointerCoord(ev);
|
||||
let newPos = coord[this.direction];
|
||||
let newTimestamp = Date.now();
|
||||
let velocity = (newPos - slide.pos) / (newTimestamp - slide.timestamp);
|
||||
let velocity = (this.plt.isRTL ? (slide.pos - newPos) : (newPos - slide.pos)) / (newTimestamp - slide.timestamp);
|
||||
|
||||
slide.pos = newPos;
|
||||
slide.timestamp = newTimestamp;
|
||||
slide.distance = clamp(
|
||||
slide.min,
|
||||
newPos - slide.pointerStartPos + slide.elementStartPos,
|
||||
(this.plt.isRTL ? slide.pointerStartPos - newPos : newPos - slide.pointerStartPos) + slide.elementStartPos,
|
||||
slide.max
|
||||
);
|
||||
slide.velocity = velocity;
|
||||
slide.delta = newPos - slide.pointerStartPos;
|
||||
slide.delta = (this.plt.isRTL ? slide.pointerStartPos - newPos : newPos - slide.pointerStartPos);
|
||||
this.onSlide(slide, ev);
|
||||
}
|
||||
|
||||
|
||||
@@ -92,7 +92,7 @@ import { ViewController } from './view-controller';
|
||||
* })
|
||||
* export class MyApp {
|
||||
* @ViewChild('myNav') nav: NavController
|
||||
* public rootPage = TabsPage;
|
||||
* public rootPage: any = TabsPage;
|
||||
*
|
||||
* // Wait for the components in MyApp's template to be initialized
|
||||
* // In this case, we are waiting for the Nav with reference variable of "#myNav"
|
||||
@@ -270,7 +270,7 @@ import { ViewController } from './view-controller';
|
||||
* ## Nav Guards
|
||||
*
|
||||
* In some cases, a developer should be able to control views leaving and entering. To allow for this, NavController has the `ionViewCanEnter` and `ionViewCanLeave` methods.
|
||||
* Similar to Angular 2 route guards, but are more integrated with NavController. For example, if you wanted to prevent a user from leaving a view:
|
||||
* Similar to Angular route guards, but are more integrated with NavController. For example, if you wanted to prevent a user from leaving a view:
|
||||
*
|
||||
* ```ts
|
||||
* export class MyClass{
|
||||
|
||||
@@ -36,7 +36,7 @@ export class Keyboard {
|
||||
this._tmr = _plt.timeout(() => {
|
||||
// this custom cordova plugin event fires when the keyboard will hide
|
||||
// useful when the virtual keyboard is closed natively
|
||||
// https://github.com/driftyco/ionic-plugin-keyboard
|
||||
// https://github.com/ionic-team/ionic-plugin-keyboard
|
||||
if (this.isOpen()) {
|
||||
this._plt.focusOutActiveElement();
|
||||
}
|
||||
|
||||
@@ -147,7 +147,7 @@ export class Platform {
|
||||
* constructor(public plt: Platform) {
|
||||
* if (this.plt.is('ios')) {
|
||||
* // This will only print when on iOS
|
||||
* console.log("I'm an iOS device!");
|
||||
* console.log('I am an iOS device!');
|
||||
* }
|
||||
* }
|
||||
* }
|
||||
|
||||
@@ -271,7 +271,7 @@
|
||||
// @param {Map} $colors - colors map
|
||||
// @return {List} $color-name, $color-base, $color-contrast
|
||||
// ----------------------------------------------------------
|
||||
@function get-colors($colors) {
|
||||
@function get-colors($colors, $custom-contrast-mode: null) {
|
||||
$colors-list: ();
|
||||
|
||||
@each $color-name, $color-value in $colors {
|
||||
@@ -283,7 +283,7 @@
|
||||
$color-contrast: map-get($color-value, contrast);
|
||||
} @else {
|
||||
$color-base: $color-value;
|
||||
$color-contrast: color-inverse($color-value);
|
||||
$color-contrast: color-contrast($colors, $color-value, $custom-contrast-mode);
|
||||
}
|
||||
|
||||
$colors-list: append($colors-list, ($color-name, $color-base, $color-contrast), comma);
|
||||
@@ -291,3 +291,4 @@
|
||||
|
||||
@return $colors-list;
|
||||
}
|
||||
|
||||
|
||||
@@ -7,8 +7,6 @@ const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
|
||||
const OPACITY = 'opacity';
|
||||
const TRANSFORM = 'transform';
|
||||
const TRANSLATEX = 'translateX';
|
||||
const OFF_RIGHT = '99.5%';
|
||||
const OFF_LEFT = '-33%';
|
||||
const CENTER = '0%';
|
||||
const OFF_OPACITY = 0.8;
|
||||
const SHOW_BACK_BTN_CSS = 'show-back-button';
|
||||
@@ -20,6 +18,8 @@ export class IOSTransition extends PageTransition {
|
||||
super.init();
|
||||
|
||||
const plt = this.plt;
|
||||
const OFF_RIGHT = plt.isRTL ? '-99.5%' : '99.5%';
|
||||
const OFF_LEFT = plt.isRTL ? '33%' : '-33%';
|
||||
const enteringView = this.enteringView;
|
||||
const leavingView = this.leavingView;
|
||||
const opts = this.opts;
|
||||
@@ -100,7 +100,7 @@ export class IOSTransition extends PageTransition {
|
||||
.fromTo(OPACITY, 0.01, 1, true);
|
||||
|
||||
const enteringBackBtnText = new Animation(plt, enteringNavbarEle.querySelector('.back-button-text'));
|
||||
enteringBackBtnText.fromTo(TRANSLATEX, '100px', '0px');
|
||||
enteringBackBtnText.fromTo(TRANSLATEX, (plt.isRTL ? '-100px' : '100px'), '0px');
|
||||
enteringNavBar.add(enteringBackBtnText);
|
||||
|
||||
} else {
|
||||
@@ -123,7 +123,7 @@ export class IOSTransition extends PageTransition {
|
||||
// leaving content, back direction
|
||||
leavingContent
|
||||
.beforeClearStyles([OPACITY])
|
||||
.fromTo(TRANSLATEX, CENTER, '100%');
|
||||
.fromTo(TRANSLATEX, CENTER, (plt.isRTL ? '-100%' : '100%'));
|
||||
|
||||
} else {
|
||||
// leaving content, forward direction
|
||||
@@ -157,16 +157,16 @@ export class IOSTransition extends PageTransition {
|
||||
|
||||
if (backDirection) {
|
||||
// leaving navbar, back direction
|
||||
leavingTitle.fromTo(TRANSLATEX, CENTER, '100%');
|
||||
leavingTitle.fromTo(TRANSLATEX, CENTER, (plt.isRTL ? '-100%' : '100%'));
|
||||
|
||||
// leaving navbar, back direction, and there's no entering navbar
|
||||
// should just slide out, no fading out
|
||||
leavingNavbarBg
|
||||
.beforeClearStyles([OPACITY])
|
||||
.fromTo(TRANSLATEX, CENTER, '100%');
|
||||
.fromTo(TRANSLATEX, CENTER, (plt.isRTL ? '-100%' : '100%'));
|
||||
|
||||
let leavingBackBtnText = new Animation(plt, leavingNavbarEle.querySelector('.back-button-text'));
|
||||
leavingBackBtnText.fromTo(TRANSLATEX, CENTER, (300) + 'px');
|
||||
leavingBackBtnText.fromTo(TRANSLATEX, CENTER, (plt.isRTL ? -300 : 300) + 'px');
|
||||
leavingNavBar.add(leavingBackBtnText);
|
||||
|
||||
} else {
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user