https://github.com/polydile/dile-pages
Web Component to make easy the interchange of views. Based on LitElement.
https://github.com/polydile/dile-pages
Last synced: 11 months ago
JSON representation
Web Component to make easy the interchange of views. Based on LitElement.
- Host: GitHub
- URL: https://github.com/polydile/dile-pages
- Owner: Polydile
- License: mit
- Archived: true
- Created: 2019-05-24T15:07:29.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2025-02-19T18:09:23.000Z (over 1 year ago)
- Last Synced: 2025-06-29T05:47:12.961Z (12 months ago)
- Language: JavaScript
- Homepage:
- Size: 2.32 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# \
> **This package has moved** and is now available at [@dile/ui](https://github.com/Polydile/dile-components). Please update your dependencies. This repository is no longer maintained. You can read the documentation at [Dile Components](https://dile-components.com/).
El cambio es solo en la parte final: "Read the docs" a "You can read the documentation" para hacerlo un poco más claro. Pero en general, tu frase es completamente comprensible y correcta.
Simple iron-pages adaptation for LitElement.
This element is used to show one of several "pages". The pages are the direct children elements of the component. In brief, this component only shows one of it's children elements, and is able to interchange the active children with a simple animation.
Go to [DEMOS page](https://dile-pages.polydile.com).
## Installation
```bash
npm i dile-pages
```
## Usage
```html
import 'dile-pages/dile-pages.js';
View 1
View 2
```
## Properties
You can use 2 properties to configure the current active page:
- selected: A string to select the active page.
- attrForSelected (optional): A string with the attribute name in the page elements to match with "selected" property.
If you don't provide a value to attrForSelected property, "selected" will be matched to the index of the children element (selected=0 corresponds to the first page, selected=1 to the second... )
## Example
In the example bellow the active page will be the third: the div with the attribute name="page3".
```
Page 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde excepturi atque, et quaerat vero saepe maiores, maxime dolore officiis earum cumque temporibus tenetur, possimus deserunt magni itaque! Reiciendis, assumenda quo?
Page 2
- item 1
- item 2
- item 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde excepturi atque, et quaerat vero saepe maiores, maxime dolore officiis earum cumque temporibus tenetur, possimus deserunt magni itaque! Reiciendis, assumenda quo?
Page three
Just another page
```
The next example will show the third children, the div element with the H2 heading "Page three". Note you can use any tag as page.
```
Page 1
Page 2
Page three
```