{"id":19883804,"url":"https://github.com/hyperhype/hypertabs","last_synced_at":"2025-05-02T14:34:24.262Z","repository":{"id":66001518,"uuid":"58626999","full_name":"hyperhype/hypertabs","owner":"hyperhype","description":"Create a simple tabbed interface using hyperscript","archived":false,"fork":false,"pushed_at":"2018-08-21T19:42:39.000Z","size":46,"stargazers_count":18,"open_issues_count":5,"forks_count":101,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-11T20:15:08.559Z","etag":null,"topics":["hyperscript"],"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/hyperhype.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-05-12T09:20:13.000Z","updated_at":"2024-08-30T10:58:11.000Z","dependencies_parsed_at":"2023-02-27T00:30:19.623Z","dependency_job_id":null,"html_url":"https://github.com/hyperhype/hypertabs","commit_stats":null,"previous_names":["dominictarr/hypertabs"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperhype%2Fhypertabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperhype%2Fhypertabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperhype%2Fhypertabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperhype%2Fhypertabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hyperhype","download_url":"https://codeload.github.com/hyperhype/hypertabs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224168539,"owners_count":17267271,"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":["hyperscript"],"created_at":"2024-11-12T17:23:14.664Z","updated_at":"2024-11-12T17:23:15.316Z","avatar_url":"https://github.com/hyperhype.png","language":"JavaScript","readme":"# hypertabs\n\ncreate a simple tabbed interface\n\n## Example\n\n``` js\nvar Tabs = require('hypertabs')\n\nvar tabs = Tabs()\n\ntabs.add(h('h1', 'foofoo'))\ntabs.add(h('h1', 'baz'))\n\ntabs.select(1) //change to the \"baz\" tab.\n\ndocument.body.appendChild(tabs)\n\nsetTimeout(\n  function () { tabs.select(0) },\n  2000\n)\n```\n\nWhen you call add, this creates a new tab, and it creates a page which contains the element you've provided.\nBy default hypertabs assumes that the page size will be fixed and any scrolling will be done on the element you've provided (this is important if you care about preserving scroll position jumping between tabs).\n\n## API\n\n### `Tabs(opts)`\n\nInstantiates a tabs setup. `opts` is an optional _object_ which can contain any of the following keys:\n\n- `onSelect` - a callback function that is called when a tab is selected (called with ...)\n- `onClose` - a callback function that is called when a tab is closed (called with the page element being closed)\n- `prepend` - an html element which is prepended before your tabs in the 'tab nav'\n- `append` - an html element which is appended after your tabs in the 'tab nav'\n\n### `tab#add(page)`\n\nAdds a new page and makes an associated tab for it\n\n\n### `tab#remove`\n\n### `tab#has`\n\n### `tab#get`\n\n### `tab#select`\n\n### `tab#selectRelative`\n\n### `tab#fullscreen`\n\n### `tab#isFullscreen`\n\n\n## Notifications\n\nHypertabs wraps content you give it in a `div.page`.\nIt watches for whether there is a `-notify` class on this element, and keeps this class in sync with the appropriate tab.\nIn this way, you can signal updates to a page that is not currently selected.\n\n```js\nvar welcomeTab = tabs.add(h('h1', 'Welcome!'))\nvar welcomePage = welcomeTab.page\n\nwelcomePage.classList.add('-notify')\n\nwelcomeTab.classList.contains('-notify')\n// -\u003e true\n```\n\n## Adding more to yor nav bar\n\nHypertabs takes an optional second argument which allows you to easily prepend or append node to the tabs nav-bar.\n\n```js\nvar tabs = Tabs(onSelected, { prepend: status, append: aBurger })\n```\n\n\n## Styling\n\nHypertabs follows a class pattern that is compatible with [micro-css](https://github.com/mmckegg/micro-css) where styling is super tightly specified using the direct child only `\u003e` and non-standard class prefixes to stop you from writing bad styles.\n\nYour style schema for mcss is like:\n\n```css\nHypertabs {\n  nav {\n    section.tabs {\n      div.tab {\n        -selected {\n        }\n\n        -notify{\n        }\n\n        a.link {\n        }\n\n        a.close {\n        }\n      }\n    }\n  }\n\n  section.content {\n    div.page {\n      *  // this is the element whos scroll position will be preserved\n    }\n  }\n}\n```\n\nIn classic css, use a the following schema as a template:\n\n```css\n.Hypertabs {  }\n\n.Hypertabs \u003e nav {  }\n.Hypertabs \u003e nav \u003e section.tabs {  }\n.Hypertabs \u003e nav \u003e section.tabs \u003e div.tab {  }\n.Hypertabs \u003e nav \u003e section.tabs \u003e div.tab.-selected {  }\n.Hypertabs \u003e nav \u003e section.tabs \u003e div.tab.-notify {  }\n.Hypertabs \u003e nav \u003e section.tabs \u003e div.tab \u003e a.link {  }\n.Hypertabs \u003e nav \u003e section.tabs \u003e div.tab \u003e a.close {  }\n\n.Hypertabs \u003e section.content {  }\n.Hypertabs \u003e section.content \u003e div.page {  }\n```\n\nGetting scrolling of pages working can be a bit challenging with styling. The setup from an app which implements hypertabs can be found for both hortizontal and vertical formats in `./example`.\n\n## License\n\nMIT\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperhype%2Fhypertabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyperhype%2Fhypertabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperhype%2Fhypertabs/lists"}