{"id":15022880,"url":"https://github.com/rajasegar/ember-x-tabs","last_synced_at":"2025-08-18T11:09:49.033Z","repository":{"id":19965830,"uuid":"88398669","full_name":"rajasegar/ember-x-tabs","owner":"rajasegar","description":"A Tab component in Ember with a mix of layout styles and theming options","archived":false,"fork":false,"pushed_at":"2025-03-28T06:52:25.000Z","size":8612,"stargazers_count":12,"open_issues_count":12,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-09T05:31:42.261Z","etag":null,"topics":["component","ember","ember-addon","ember-cli-addon","ember-component-addon","tabs"],"latest_commit_sha":null,"homepage":"https://rajasegar.github.io/ember-x-tabs/","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/rajasegar.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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,"zenodo":null}},"created_at":"2017-04-16T07:42:03.000Z","updated_at":"2024-05-30T03:13:20.000Z","dependencies_parsed_at":"2024-09-22T13:00:42.526Z","dependency_job_id":"8fd40724-50eb-4c86-badf-959d7942056f","html_url":"https://github.com/rajasegar/ember-x-tabs","commit_stats":{"total_commits":190,"total_committers":10,"mean_commits":19.0,"dds":0.2947368421052632,"last_synced_commit":"32e6b2fed11bd6ee7f97f75a069acad9e783d7b6"},"previous_names":[],"tags_count":40,"template":false,"template_full_name":null,"purl":"pkg:github/rajasegar/ember-x-tabs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fember-x-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fember-x-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fember-x-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fember-x-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rajasegar","download_url":"https://codeload.github.com/rajasegar/ember-x-tabs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fember-x-tabs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269699675,"owners_count":24461217,"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-08-10T02:00:08.965Z","response_time":71,"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":["component","ember","ember-addon","ember-cli-addon","ember-component-addon","tabs"],"created_at":"2024-09-24T19:58:29.081Z","updated_at":"2025-08-18T11:09:49.009Z","avatar_url":"https://github.com/rajasegar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-x-tabs\n\n![Build and Deploy](https://github.com/rajasegar/ember-x-tabs/workflows/Build%20and%20Deploy/badge.svg)\n[![Coverage Status](https://coveralls.io/repos/github/rajasegar/ember-x-tabs/badge.svg?branch=master)](https://coveralls.io/github/rajasegar/ember-x-tabs?branch=master)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![npm](https://img.shields.io/npm/dm/ember-x-tabs.svg)](https://www.npmjs.com/package/ember-x-tabs)\n[![npm version](http://img.shields.io/npm/v/ember-x-tabs.svg?style=flat)](https://npmjs.org/package/ember-x-tabs \"View this project on npm\")\n[![EmberObserver](http://emberobserver.com/badges/ember-x-tabs.svg?branch=master)](http://emberobserver.com/addons/ember-x-tabs)\n\n\nAn Ember addon for Tab component with various style options and theme customization.\n\nHeavily inspired by this [Codrops article](https://tympanus.net/codrops/2014/09/02/tab-styles-inspiration/)\n\n## Demo\n\n[Demo](https://rajasegar.github.io/ember-x-tabs/)\n\n## Installation\n\n* `ember install ember-x-tabs`\n\n## Features\n* Declarative\n* 14+ Styles to choose from\n* Fully composable\n* Customizable\n\n## Usage\n\nExample markup:\n\n### Bar style (x-tabs)\n\nA fully contextual version of the tab component is provided under the name x-tabs \n\n```hbs\n\u003cXTabs @tab-style={{@tabStyle}} as |xt|\u003e\n\n  {{!-- tab content --}}\n  \u003cxt.tabs as |tabs|\u003e\n    \u003ctabs.tab @name=\"home\"\u003e\n      \u003ci class=\"icon icon-home\"\u003e\u003c/i\u003e\n      \u003cspan\u003eHome\u003c/span\u003e\n    \u003c/tabs.tab\u003e\n    \u003ctabs.tab @name=\"archive\"\u003e\n      \u003ci class=\"icon icon-box\"\u003e\u003c/i\u003e\n      \u003cspan\u003eArchive\u003c/span\u003e\n    \u003c/tabs.tab\u003e\n    \u003ctabs.tab @name=\"analytics\"\u003e\n      \u003ci class=\"icon icon-display\"\u003e\u003c/i\u003e\n      \u003cspan\u003eAnalytics\u003c/span\u003e\n    \u003c/tabs.tab\u003e\n    \u003ctabs.tab @name=\"settings\"\u003e\n      \u003ci class=\"icon icon-tools\"\u003e\u003c/i\u003e\n      \u003cspan\u003eSettings\u003c/span\u003e\n    \u003c/tabs.tab\u003e\n    \u003ctabs.tab @name=\"upload\"\u003e\n      \u003ci class=\"icon icon-upload\"\u003e\u003c/i\u003e\n      \u003cspan\u003eUpload\u003c/span\u003e\n    \u003c/tabs.tab\u003e\n  \u003c/xt.tabs\u003e\n\n  {{!-- tab content --}}\n  \u003cxt.panes as |panes|\u003e\n    \u003cpanes.pane @name=\"home\"\u003e\n      \u003ch1\u003eHome\u003c/h1\u003e\n      \u003cp\u003eThis is home content\u003c/p\u003e\n    \u003c/panes.pane\u003e\n    \u003cpanes.pane @name=\"archive\"\u003e\n      \u003ch1\u003eArchive\u003c/h1\u003e\n      \u003cp\u003eThis is archive content\u003c/p\u003e\n    \u003c/panes.pane\u003e\n    \u003cpanes.pane @name=\"analytics\"\u003e\n      \u003ch1\u003eAnalytics\u003c/h1\u003e\n      \u003cp\u003eThis is analytics content\u003c/p\u003e\n    \u003c/panes.pane\u003e\n    \u003cpanes.pane @name=\"settings\"\u003e\n      \u003ch1\u003eSettings\u003c/h1\u003e\n      \u003cp\u003eThis is settings content\u003c/p\u003e\n    \u003c/panes.pane\u003e\n    \u003cpanes.pane @name=\"upload\"\u003e\n      \u003ch1\u003eUpload\u003c/h1\u003e\n      \u003cp\u003eThis is upload content\u003c/p\u003e\n    \u003c/panes.pane\u003e\n  \u003c/xt.panes\u003e\n\n\u003c/XTabs\u003e\n\n    \n```\n\nx-tabs can also be used as a page-control, that is a control that has several tabs each with an\nassociated data object. There is only one dataPane and as the tabs are selected, the tabs data is\nyielded to the dataPane\n\n```\n  \u003cXTabs @activeName=\"archive\" @tab-style=\"tabs-style-topline\" as | xt | \u003e\n\n    \u003cxt.tabs as | tabs |\u003e\n      \u003ctabs.tab @name=\"home\" @data=(hash name=\"Home data\")\u003e\n        \u003ci class=\"icon icon-home\"\u003e\u003c/i\u003e\n        \u003cspan\u003eHome\u003c/span\u003e\n      \u003c/tabs.tab\u003e\n      \u003ctabs.tab @name=\"archive\" @data=(hash name=\"Archive Data\")\u003e\n        \u003ci class=\"icon icon-box\"\u003e\u003c/i\u003e\n        \u003cspan\u003eArchive\u003c/span\u003e\n      \u003c/tabs.tab\u003e\n      \u003ctabs.tab @name=\"analytics\" @data=(hash name=\"Analytics Data\")\u003e\n        \u003ci class=\"icon icon-display\"\u003e\u003c/i\u003e\n        \u003cspan\u003eAnalytics\u003c/span\u003e\n      \u003c/tabs.tab\u003e\n      \u003ctabs.tab @name=\"settings\" @data=(hash name=\"Settings Data\")\u003e\n        \u003ci class=\"icon icon-tools\"\u003e\u003c/i\u003e\n        \u003cspan\u003eSettings\u003c/span\u003e\n      \u003c/tabs.tab\u003e\n      \u003ctabs.tab @name=\"upload\" @data=(hash name=\"Upload Data\")\u003e\n        \u003ci class=\"icon icon-upload\"\u003e\u003c/i\u003e\n        \u003cspan\u003eUpload\u003c/span\u003e\n      \u003c/tabs.tab\u003e\n\n    \u003c/xt.tabs\u003e\n\n    \u003cxt.dataPane as | pane |\u003e\n      \u003ch1\u003ePage Control\u003c/h1\u003e\n      \u003cp\u003eData: {{pane.data.name}}\u003c/p\u003e\n    \u003c/xt.dataPane\u003e\n  \u003c/XTabs\u003e\n\n\n```\n\n## Tab styles\n\nYou can replace the **tab-style** property of the component to any of the following styles to get \na different style variation of your tab component.\n\n* tabs-style-bar (Default)\n* tabs-style-iconbox\n* tabs-style-underline\n* tabs-style-linetriangle\n* tabs-style-topline\n* tabs-style-iconfall\n* tabs-style-linemove\n* tabs-style-line\n* tabs-style-circle\n* tabs-style-shape\n* tabs-style-linebox\n* tabs-style-flip\n* tabs-style-circlefill\n* tabs-style-tzoid\n* tabs-style-fillup\n\n## Customization - Theming\n\nThis tab component can be themed using CSS variables to suit the color of your choice. \n\nKindly override these variables in your css file.\n\nFor example:\n\n``` css\n:root {\n  --x-tab-active: #2CC185;\n\n  --x-tab-color1: #334455;\n  --x-tab-color2: #74777b;\n  --x-tab-color3: #4a4a4b;\n  --x-tab-color4: #000;\n\n  /* Background colors */\n  --x-tab-bg1: #f7f7f7;\n  --x-tab-bg2: #f0f0f0;\n  --x-tab-bg3: #fff;\n  --x-tab-bg4: #bdc2c9;\n}\n```\n\n### Custom class name\nUse the **customClass** option to add your own custom classnames.\n```hbs\n  {{#x-tab customClass=\"myTabClass\" as |tab|}}\n```\n\nWrite your own definition for the classnames\n```css\n.myTabClass nav  {\n    background: lightblue;\n}\n.myTabClass nav ul a {\n    color: lightblue;\n}\n.myTabClass nav ul a:hover {\n    color: steelblue;\n}\n.myTabClass nav ul li.tab-current {\n    background: steelblue;\n}\n.myTabClass nav ul li {\n    background: white;\n    margin: 4px 2px;\n}\n\n.myTabClass nav ul li.tab-current a {\n    color: white;\n}\n```\n\n\n## Configuring\n\nAdd a configuration for ember-x-tabs to include only the themes that you will use.\n\n```\nENV['ember-x-tabs'] = {\n  includedThemes: ['bar', 'circle', 'flip'],\n  excludedThemes: ['iconbox'],\n  excludeBaseStyles: false, // defaults to false\n  defaultTheme: 'bar',    // defaults to 'bar'\n};\n```\n\nTo exclude or not include a theme, means that it's css styles will not be bundled with your application, thus not polluting your app.\n\n    Note: including a blank array e.g. includeThemes: [] will not include any themes, leaving you to define your own theme styles. See the vendor/ember-x-tabs/themes directory for reference.\n\n    Note: you may also want to set excludeBaseStyles: true so that this addon doesn't include the styles used by all the themes.\n\n\nA big Thanks to Ilya Radchenko for making this configuration possible to have a small memory footprint of css in your app when you are using the addon.\n\n## Running\n\n* `ember serve`\n* Visit your app at [http://localhost:4200](http://localhost:4200).\n\n## Running Tests\n\n* `npm test` \n* `ember test`\n* `ember test --server`\n\n## Building\n\n* `ember build`\n\nFor more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajasegar%2Fember-x-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frajasegar%2Fember-x-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajasegar%2Fember-x-tabs/lists"}