Get the number of pages in iron-pages
Question
I'd like to show the number of the currently selected page and number of all pages in iron-pages (eg "page 1 of 100").
Getting the former is easy as you can look for the selected-changed event. For the latter I have no idea how to get it. I was considering getting the number of child elements in iron-pages , but that doesn't seem to be reliable.
1 answers
solution1
2 ACCPTED 2017-12-02 21:26:49
What you can do is make sure every page has a corresponding number as attribute. You can get the number of pages by evaluating child elements (ignoring the fallback page).
A working example:
<!DOCTYPE html> <html> <head> <base href="//polygit.org/components/"> <script src="webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="polymer/polymer.html"> <link rel="import" href="iron-pages/iron-pages.html"> <dom-module id="example-component"> <template> <style> :host { display: block } </style> <input value="{{pageName::input}}" placeholder="Type a page name here."> <iron-pages id="ironPages" selected="[[pageName]]" attr-for-selected="page-number" fallback-selection="fallback"> <div page-number="1">One</div> <div page-number="2">Two</div> <div page-number="3">Three</div> <div page-number="fallback"> Change pages by typing '1', '2', or '3' in the input above. </div> </iron-pages> <div id="pageNumbering">Page [[currentPage]] of [[totalPages]]</div> </template> <script> class ExampleComponent extends Polymer.Element { static get is() { return 'example-component'; } static get properties() { return { currentPage: { type: Number, value: 0, }, totalPages: { type: Number, value: 0, } }; } connectedCallback() { super.connectedCallback(); // fallback doesn't count this.totalPages = this.$.ironPages.children.length - 1; this.addEventListener('iron-select', this._onPageChanged); } _onPageChanged() { let currentPage = this.$.ironPages.selectedItem.getAttribute('page-number'); if (currentPage == "fallback") { this.$.pageNumbering.hidden = true; } if (currentPage <= this.totalPages) { currentPage = parseInt(currentPage); this.set('currentPage', currentPage); this.$.pageNumbering.hidden = false; } } } customElements.define(ExampleComponent.is, ExampleComponent); </script> </dom-module> </head> <body> <example-component></example-component> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.