{"id":19097195,"url":"https://github.com/atmajs/compo-tabs","last_synced_at":"2025-10-07T15:51:53.779Z","repository":{"id":20751194,"uuid":"24035685","full_name":"atmajs/compo-tabs","owner":"atmajs","description":"Tabs UI Component","archived":false,"fork":false,"pushed_at":"2016-03-17T11:54:33.000Z","size":29,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-22T15:20:10.572Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atmajs.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-09-14T23:06:44.000Z","updated_at":"2016-03-17T11:46:39.000Z","dependencies_parsed_at":"2022-07-21T08:00:25.625Z","dependency_job_id":null,"html_url":"https://github.com/atmajs/compo-tabs","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/atmajs/compo-tabs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atmajs%2Fcompo-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atmajs%2Fcompo-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atmajs%2Fcompo-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atmajs%2Fcompo-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atmajs","download_url":"https://codeload.github.com/atmajs/compo-tabs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atmajs%2Fcompo-tabs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278802800,"owners_count":26048566,"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","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-09T03:39:22.846Z","updated_at":"2025-10-07T15:51:53.762Z","avatar_url":"https://github.com/atmajs.png","language":"JavaScript","readme":"### Component: Tabs\n[![Build Status](https://travis-ci.org/atmajs/compo-tabs.png?branch=master)](https://travis-ci.org/atmajs/compo-tabs)\n[![Bower version](https://badge.fury.io/bo/compo-tabs.svg)](http://badge.fury.io/bo/compo-tabs)\n\n```mask\nTabs\n\tx-visible = 'foo' // optional, name of the current visible tab \n\tx-route = '/baz'  // optional, listens hashchange or history API changes \n\tx-anchors = true  // all panels are visible and it behaves like a scrollspy\n\t\n\t{ /*Template*/ }\n```\n\n- Best works with [RutaJS](https://github.com/atmajs/ruta) and [Mask.Animation](https://github.com/atmajs/mask-animation)\n- Renders the Bootstraps HTML and the class structure.\n_Tired always to write extra html code?[Boostrap Tabs](http://getbootstrap.com/javascript/#tabs-usage)_\n\n##### Templates\n- Headers And Panels\n\n\t```mask\n\tTabs x-visibile = baz {\n\t\t@tab name = foo {\n\t\t\t@head \u003e 'FooHeader'\n\t\t\t@body \u003e 'FooContent' \n\t\t}\n\t\t@tab name = baz {\n\t\t\t@head \u003e 'BazHeader'\n\t\t\t@body \u003e 'BazContent' \n\t\t}\n\t}\n\t```\n\t\n- Panels only\n\n\t```mask\n\tTabs {\n\t\t@panel name=foo \u003e\n\t\t\tspan.foo \u003e 'Foo'\n\t\t\n\t\t@panel name=baz \u003e\n\t\t\tspan.baz \u003e 'Baz'\n\t}\n\t```\n\t\n- Animations\n\n\t```mask\n\tTabs {\n\t\t// Tabs Template\n\t\t// ...\n\t\t\n\t\t// Animations\n\t\t@show {\n\t\t\t@model \u003e 'transform | scale(0) translate3d(100%, 100%, 0) \u003e scale(1) translate3d(0, 0, 0) | 2s linear'\n\t\t}\n\t\t@hide {\n\t\t\t@model \u003e 'transform | scale(1) \u003e scale(0)| 2s linear'\n\t\t}\n\t}\n\t```\n\t\n#### API\n\n- **`setActive = function(String)`** \u003ca name='setActive'\u003e#\u003c/a\u003e\n\t\n\tShow the tab by name.\n\t\n- **`getActiveName = function(): String`** \u003ca name='getActiveName'\u003e#\u003c/a\u003e\n\t\n\tGet current active name.\n\n- **`getList = function(): [String]`** \u003ca name='getList'\u003e#\u003c/a\u003e\n\n\tGet all names.\n\t\n- **`has = function(String): Boolean`** \u003ca name='has'\u003e#\u003c/a\u003e\n\n\tCheck if the component contains the tab name.\n\n\n###### Api Example\n_template_\n```mask\n\tsection \u003e\n\t\tTabs #tabs-example {\n\t\t\t@tab name = foo {\n\t\t\t\t@head \u003e 'FooHeader'\n\t\t\t\t@body \u003e 'FooContent' \n\t\t\t}\n\t\t\t@tab name = baz {\n\t\t\t\t@head \u003e 'BazHeader'\n\t\t\t\t@body \u003e 'BazContent' \n\t\t\t}\n\t\t}\n```\n_javascript_\n```javascript\nvar App = Compo({ template: template })\nvar app = mask.Compo.initialize(App);\nvar tab = app.find('#tabs-example');\n\ntab.getList() //\u003e foo, baz\ntab.getActiveName() //\u003e foo\ntab.setActive('baz');\n```\n\n### Examples\n\n- [/examples](/examples)\n\n```bash\n# install atma toolkit\nnpm install atma\n# run server\natma server\n\n# navigate `http://localhost:5777/examples/simple.html`\n```\n\n### Test\n```bash\nnpm test\n```\n\n:copyright: MIT - Atma.js Project","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatmajs%2Fcompo-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatmajs%2Fcompo-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatmajs%2Fcompo-tabs/lists"}