{"id":15386690,"url":"https://github.com/zerodevx/zero-pages","last_synced_at":"2026-02-27T05:01:15.507Z","repository":{"id":33071856,"uuid":"36708598","full_name":"zerodevx/zero-pages","owner":"zerodevx","description":"DEPRECATED","archived":false,"fork":false,"pushed_at":"2015-07-14T09:00:50.000Z","size":148,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2026-01-31T11:52:16.220Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zerodevx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-02T04:49:16.000Z","updated_at":"2024-11-18T17:57:43.000Z","dependencies_parsed_at":"2022-08-07T19:31:04.913Z","dependency_job_id":null,"html_url":"https://github.com/zerodevx/zero-pages","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zerodevx/zero-pages","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerodevx%2Fzero-pages","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerodevx%2Fzero-pages/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerodevx%2Fzero-pages/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerodevx%2Fzero-pages/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zerodevx","download_url":"https://codeload.github.com/zerodevx/zero-pages/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerodevx%2Fzero-pages/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29885799,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-26T23:51:21.483Z","status":"online","status_checked_at":"2026-02-27T02:00:06.759Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-01T14:50:10.982Z","updated_at":"2026-02-27T05:01:15.488Z","avatar_url":"https://github.com/zerodevx.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"v0.2\n# `\u003czero-pages\u003e`\nA better pages element for Polymer 1.0 wrapping Polymer Elements' neon-animated-pages.\n\n### Right to the money\n\nExample usage:\n\n```html\n\u003czero-pages id=\"pages\" initial-selection=\"page1\" animate-initial-selection\u003e\n\n  \u003c!-- Page 1 --\u003e\n  \u003czero-page page-id=\"page1\"\u003e\n    \u003cdiv\u003eThis is Page One.\u003c/div\u003e\n  \u003c/zero-page\u003e\n\n  \u003c!-- Page 2 --\u003e\n  \u003czero-page page-id=\"page2\"\u003e\n    \u003cdiv\u003eThis is Page Two.\u003c/div\u003e\n  \u003c/zero-page\u003e\n\n\u003c/zero-pages\u003e\n```\n\nChange pages programatically with fade effect (default) by either:\n\n1. Calling `this.$.pages.changePage(\"page2\")` in the parent.\n2. Firing `this.fire(\"zero-change-page\", {pageId: \"page2\"}` event from your child page.\n\nExample usage with sugar:\n\n```html\n\u003c!-- Since initial-selection is not defined, nothing will be loaded until the first\n     \"changePage(page-id)\" is called. The animate-initial-selection attribute tells\n     \u003czero-pages\u003e to animate the first page. --\u003e\n\u003czero-pages id=\"pages\" animate-initial-selection\u003e\n\n  \u003c!-- Main Page (This gets loaded in DOM when the first \"changePage\" is called,\n       and remains in DOM throughout. Listens for a \"page-ready\" event from\n       \u003cmain-page\u003e and only performs the change when the event is received.) --\u003e\n  \u003czero-page page-id=\"main\" unveil-on-page-ready is-parent-of=\"*\"\u003e\n    \u003cpage-main custom-var=\"[[myVarThatTakesTimeToLoad]]\"\u003e\u003c/page-main\u003e\n  \u003c/zero-page\u003e\n\n  \u003c!-- Info Page (\u003cpage-info\u003e loaded into DOM when \"changePage('info')\" is called.\n       The page is unveiled immediately without waiting for a \"page-ready\" event.\n       On exit, \u003cpage-info\u003e is removed from DOM after default 500ms delay --\u003e\n  \u003czero-page page-id=\"info\"\u003e\n    \u003cpage-info\u003e\u003c/page-info\u003e\n  \u003c/zero-page\u003e\n\n  \u003c!-- Settings Page (This is dynamically loaded into DOM only when \"changePage\"\n       is called. When user leaves the page, that page is removed from DOM -\n       thereby triggering its \"detached\" callback after default 500ms delay.) --\u003e\n  \u003czero-page page-id=\"settings\" unveil-on-page-ready\u003e\n    \u003cpage-settings\u003e\u003c/page-settings\u003e\n  \u003c/zero-page\u003e\n\n  \u003c!-- Some Important Page (When changePage('impt') is called, both \"settings\" and\n       \"info\" will also be loaded into DOM. When exited, it will be removed from DOM\n       after a 2000ms delay) --\u003e\n  \u003czero-page page-if=\"impt\" is-parent-of=\"info settings\" delay-on-detach=\"2000\"\u003e\n    \u003cpage-important var1=\"[[someVarFromSettings]]\" var2=\"[[somVarFromInfo]]\"\u003e\u003c/page-important\u003e\n  \u003c/zero-page\u003e\n\n\u003c/zero-pages\u003e\n```\n\nIf you are (like me) concerned about the DOM, `\u003czero-pages\u003e` allows succinct, declarative control of what gets loaded, how it's loaded, and what's not.\n\n### Published Attributes\n\n`\u003czero-pages\u003e`\n\n| Property                  | Description                                                |\n|---------------------------|------------------------------------------------------------|\n| `initialSelection`        | *String*. Display the initial page immediately on load.    |\n| `animateInitialSelection` | *Boolean*. When true, animates the first page when shown.  |\n| `transition`              | *String*. Defines the transition between pages. ***TODO*** |\n\n`\u003czero-page\u003e`\n\n| Property            | Type    | Description                                            |\n|---------------------|---------|--------------------------------------------------------|\n| `pageId`            | String  | Compulsory to set a unique identifier for that page.   |\n| `unveilOnPageReady` | Boolean | When true, the actual page change occurs only after a `page-ready` event is received from its child page. |\n| `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. |\n| `delayOnDetach`     | Number  | Delay in ms when detaching the old page after the new page is called. Defaults to 500ms. |\n\n### Public Methods\n\n`\u003czero-pages\u003e`\n\n| Function             | Parameters           | Description                              |\n|----------------------|----------------------|------------------------------------------|\n| `changePage(pageId)` | *pageId* as *String* | Actually begin the change page process from current page to `pageId`. |\n\n### Events\n\n| Event              | Description                                                       |\n|--------------------|-------------------------------------------------------------------|\n| `zero-page-ready`  | If a `zero-page` is set to `unveilOnPageReady`, your child page must fire a `zero-page-ready` event. This notifies `\u003czero-pages\u003e` to actually change the page |\n| `zero-change-page` | On child pages, firing a `zero-change-page` event will notify `\u003czero-pages\u003e` 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`. |\n\n### Convenience Properties\n\n`\u003czero-pages\u003e`\n\n| Property    | Type   | Description                                                     |\n|-------------|--------|-----------------------------------------------------------------|\n| `_curpage`  | String | Contains `pageId` of the current page.                          |\n| `_pageList` | Array  | Contains array of valid `pageId`s that were declared.           |\n\n### To-Do\n\n1. Expose a `transition` attribute on `\u003czero-pages\u003e` allowing selection of transition type between pages.\n2. Add Demo.\n\n### Version History\n\n1. 2015-06-03: v0.1 - first commit\n2. 2015-06-18: v0.2 - renamed `page-ready` event to `zero-page-ready`, add `zero-change-page` feature, add `_pageList` convenience property.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzerodevx%2Fzero-pages","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzerodevx%2Fzero-pages","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzerodevx%2Fzero-pages/lists"}