https://github.com/zerodevx/zero-pages
DEPRECATED
https://github.com/zerodevx/zero-pages
Last synced: 1 day ago
JSON representation
DEPRECATED
- Host: GitHub
- URL: https://github.com/zerodevx/zero-pages
- Owner: zerodevx
- Created: 2015-06-02T04:49:16.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-07-14T09:00:50.000Z (over 10 years ago)
- Last Synced: 2026-01-31T11:52:16.220Z (28 days ago)
- Language: HTML
- Homepage:
- Size: 145 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
v0.2
# ``
A better pages element for Polymer 1.0 wrapping Polymer Elements' neon-animated-pages.
### Right to the money
Example usage:
```html
This is Page One.
This is Page Two.
```
Change pages programatically with fade effect (default) by either:
1. Calling `this.$.pages.changePage("page2")` in the parent.
2. Firing `this.fire("zero-change-page", {pageId: "page2"}` event from your child page.
Example usage with sugar:
```html
```
If you are (like me) concerned about the DOM, `` allows succinct, declarative control of what gets loaded, how it's loaded, and what's not.
### Published Attributes
``
| Property | Description |
|---------------------------|------------------------------------------------------------|
| `initialSelection` | *String*. Display the initial page immediately on load. |
| `animateInitialSelection` | *Boolean*. When true, animates the first page when shown. |
| `transition` | *String*. Defines the transition between pages. ***TODO*** |
``
| Property | Type | Description |
|---------------------|---------|--------------------------------------------------------|
| `pageId` | String | Compulsory to set a unique identifier for that page. |
| `unveilOnPageReady` | Boolean | When true, the actual page change occurs only after a `page-ready` event is received from its child page. |
| `isParentOf` | String | Space delimited string of `page-id`s to ensure that this page is kept in DOM when its "children" are shown. Set to `*` if you want this page to be in DOM at all times. |
| `delayOnDetach` | Number | Delay in ms when detaching the old page after the new page is called. Defaults to 500ms. |
### Public Methods
``
| Function | Parameters | Description |
|----------------------|----------------------|------------------------------------------|
| `changePage(pageId)` | *pageId* as *String* | Actually begin the change page process from current page to `pageId`. |
### Events
| Event | Description |
|--------------------|-------------------------------------------------------------------|
| `zero-page-ready` | If a `zero-page` is set to `unveilOnPageReady`, your child page must fire a `zero-page-ready` event. This notifies `` to actually change the page |
| `zero-change-page` | On child pages, firing a `zero-change-page` event will notify `` to begin the `changePage` method on `event.detail.pageId`. For example, calling a `this.fire("zero-change-page", {pageId: "page2"});` will immediately change the current page to `page2`. |
### Convenience Properties
``
| Property | Type | Description |
|-------------|--------|-----------------------------------------------------------------|
| `_curpage` | String | Contains `pageId` of the current page. |
| `_pageList` | Array | Contains array of valid `pageId`s that were declared. |
### To-Do
1. Expose a `transition` attribute on `` allowing selection of transition type between pages.
2. Add Demo.
### Version History
1. 2015-06-03: v0.1 - first commit
2. 2015-06-18: v0.2 - renamed `page-ready` event to `zero-page-ready`, add `zero-change-page` feature, add `_pageList` convenience property.