{"id":21721657,"url":"https://github.com/polydile/dile-pages","last_synced_at":"2025-07-18T17:30:38.685Z","repository":{"id":34902771,"uuid":"188442463","full_name":"Polydile/dile-pages","owner":"Polydile","description":"Web Component to make easy the interchange of views. Based on LitElement.","archived":true,"fork":false,"pushed_at":"2025-02-19T18:09:23.000Z","size":2429,"stargazers_count":3,"open_issues_count":22,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-29T05:47:12.961Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Polydile.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-24T15:07:29.000Z","updated_at":"2025-02-19T18:10:51.000Z","dependencies_parsed_at":"2023-01-15T10:07:56.670Z","dependency_job_id":null,"html_url":"https://github.com/Polydile/dile-pages","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/Polydile/dile-pages","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-pages","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-pages/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-pages/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-pages/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Polydile","download_url":"https://codeload.github.com/Polydile/dile-pages/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-pages/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265801585,"owners_count":23830438,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-11-26T02:18:20.597Z","updated_at":"2025-07-18T17:30:38.676Z","avatar_url":"https://github.com/Polydile.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \\\u003cdile-pages\u003e\n\n\u003e **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/).\n\nEl 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.\n\n\nSimple iron-pages adaptation for LitElement. \n\nThis 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.\n\nGo to [DEMOS page](https://dile-pages.polydile.com).\n\n## Installation\n```bash\nnpm i dile-pages\n```\n\n## Usage\n```html\n\u003cscript type=\"module\"\u003e\n  import 'dile-pages/dile-pages.js';\n\u003c/script\u003e\n\n\u003cdile-pages selected=\"1\"\u003e\n  \u003cdiv\u003e View 1\u003c/div\u003e\n  \u003cdiv\u003e View 2\u003c/div\u003e\n\u003c/dile-pages\u003e\n```\n\n## Properties\n\nYou can use 2 properties to configure the current active page:\n\n- selected: A string to select the active page.\n- attrForSelected (optional): A string with the attribute name in the page elements to match with \"selected\" property.\n\nIf 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... )\n\n## Example\n\nIn the example bellow the active page will be the third: the div with the attribute name=\"page3\".\n\n```\n\u003cdile-pages selected=\"page3\" attrforselected=\"name\"\u003e\n  \u003cdiv name=\"page1\"\u003e\n    \u003ch2\u003ePage 1\u003c/h2\u003e\n    \u003cp\u003eLorem 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?\u003c/p\u003e\n  \u003c/div\u003e\n  \u003cdiv name=\"page2\"\u003e\n    \u003ch2\u003ePage 2\u003c/h2\u003e\n    \u003cul\u003e\n      \u003cli\u003eitem 1\u003c/li\u003e\n      \u003cli\u003eitem 2\u003c/li\u003e\n      \u003cli\u003eitem 3\u003c/li\u003e\n    \u003c/ul\u003e\n    \u003cp\u003eLorem 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?\u003c/p\u003e\n  \u003c/div\u003e\n  \u003cdiv name=\"page3\"\u003e\n    \u003ch2\u003ePage three\u003c/h2\u003e\n    \u003cp\u003eJust another page\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/dile-pages\u003e\n```\n\nThe next example will show the third children, the div element with the H2 heading \"Page three\". Note you can use any tag as page.\n\n```\n\u003cdile-pages selected=\"2\"\u003e\n  \u003cspan\u003e\n    \u003ch2\u003ePage 1\u003c/h2\u003e\n  \u003c/span\u003e\n  \u003carticle\u003e\n    \u003ch2\u003ePage 2\u003c/h2\u003e\n  \u003c/article\u003e\n  \u003cdiv\u003e\n    \u003ch2\u003ePage three\u003c/h2\u003e\n  \u003c/div\u003e\n\u003c/dile-pages\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolydile%2Fdile-pages","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolydile%2Fdile-pages","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolydile%2Fdile-pages/lists"}