{"id":21721640,"url":"https://github.com/polydile/dile-hamburger","last_synced_at":"2025-10-07T11:30:41.808Z","repository":{"id":35024089,"uuid":"197784914","full_name":"Polydile/dile-hamburger","owner":"Polydile","description":"Web component to create a animated hamburger icon, based on LitElement","archived":false,"fork":false,"pushed_at":"2023-01-04T04:50:49.000Z","size":2583,"stargazers_count":1,"open_issues_count":22,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-26T02:18:09.035Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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-07-19T14:16:30.000Z","updated_at":"2020-07-10T17:40:00.000Z","dependencies_parsed_at":"2023-01-15T12:15:21.301Z","dependency_job_id":null,"html_url":"https://github.com/Polydile/dile-hamburger","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-hamburger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-hamburger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-hamburger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-hamburger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Polydile","download_url":"https://codeload.github.com/Polydile/dile-hamburger/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235621552,"owners_count":19019519,"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:12.348Z","updated_at":"2025-10-07T11:30:41.802Z","avatar_url":"https://github.com/Polydile.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Moved\n\n**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\n# \\\u003cdile-hamburger\u003e\n\nA component to show the tipical hamburger icon menu. Based on LitElement.\n\nHas two states, opended and closed, and a boolean property \"active\" to define the state. This component do not responds to any user interaction by it self. The parent component has the responsability to change the state when is desired, binding the state to the \"active\" property, or changing it programaticaly.\n\nThe hamburger component use a smooth CSS animation when changes it's state.\n\nGo to [DEMOS page](https://dile-hamburger.polydile.com/).\n\nThis webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.\n\n## Installation\n```bash\nnpm i dile-hamburger\n```\n\n## Usage\n```html\n\u003cscript type=\"module\"\u003e\n  import 'dile-hamburger/dile-hamburger.js';\n\u003c/script\u003e\n\n\u003cdile-hamburger\u003e\u003c/dile-hamburger\u003e\n```\n\n## Properties\n\n- **active**: Boolean property to set the state of the hamburger icon.\n\n## Customization\n\nYou can customize the icons using this CSS Custom properties;\n\nCustom property | Description | Default\n----------------|-------------|---------\n--dile-hamburger-color | Icon color | #000\n--dile-hamburger-active-color | Icon color | #000\n--dile-hamburger-line-size | Width of the icon lines | 3px\n--dile-hamburger-width | Width of the entire icon | 24px\n--dile-hamburger-height | Height of the entire icon | 24px\n--dile-hamburger-line-separation | Separation between lines, only in inactive state icon | -6px\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolydile%2Fdile-hamburger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolydile%2Fdile-hamburger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolydile%2Fdile-hamburger/lists"}