{"id":15925638,"url":"https://github.com/rajasegar/ember-responsive-tabs","last_synced_at":"2025-07-27T17:10:51.126Z","repository":{"id":19939389,"uuid":"88347257","full_name":"rajasegar/ember-responsive-tabs","owner":"rajasegar","description":"Full width responsive tab component as an ember addon","archived":false,"fork":false,"pushed_at":"2023-01-12T06:13:36.000Z","size":5346,"stargazers_count":5,"open_issues_count":21,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-19T03:53:52.737Z","etag":null,"topics":["components","css","ember-addon","ember-cli-addon","emberjs","tabs"],"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/rajasegar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-15T13:02:55.000Z","updated_at":"2020-09-09T03:35:00.000Z","dependencies_parsed_at":"2023-01-14T13:01:58.489Z","dependency_job_id":null,"html_url":"https://github.com/rajasegar/ember-responsive-tabs","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fember-responsive-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fember-responsive-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fember-responsive-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fember-responsive-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rajasegar","download_url":"https://codeload.github.com/rajasegar/ember-responsive-tabs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245289733,"owners_count":20591122,"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":["components","css","ember-addon","ember-cli-addon","emberjs","tabs"],"created_at":"2024-10-06T22:03:04.335Z","updated_at":"2025-03-24T14:32:31.450Z","avatar_url":"https://github.com/rajasegar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-responsive-tabs\n\n[![Build Status](https://travis-ci.org/rajasegar/ember-responsive-tabs.svg?branch=master)](https://travis-ci.org/rajasegar/ember-responsive-tabs) \n[![npm](https://img.shields.io/npm/dm/ember-responsive-tabs.svg)](https://www.npmjs.com/package/ember-responsive-tabs)\n[![npm version](http://img.shields.io/npm/v/ember-responsive-tabs.svg?style=flat)](https://npmjs.org/package/ember-responsive-tabs \"View this project on npm\")\n[![EmberObserver](http://emberobserver.com/badges/ember-responsive-tabs.svg?branch=master)](http://emberobserver.com/addons/ember-responsive-tabs)\n\n\nResponsive full-width tab component with customizable theme options.\nIcons are provisioned by *Font-awesome* you need to add font-awesome to your project.\n\nKindly refer to the dummy app in tests.\n\nHeavily inspired by this [Codrops article](https://tympanus.net/codrops/2014/03/21/responsive-full-width-tabs/)\n\n## Demo\n\n[Demo](https://rajasegar.github.io/ember-responsive-tabs/)\n\n\n## Installation\n\n* `ember install ember-responsive-tabs`\n\n\n## Usage\n\nExample markup:\n\n```hbs\n{{#fullwidth-tabs as |tab|}}\n\n  {{#tab.pane title=\"Home\" icon=\"fa fa-home\"}}\n    \u003ch1\u003eHome\u003c/h1\u003e\n    \u003cp\u003eContent for home tab goes here\u003c/p\u003e\n  {{/tab.pane}}\n\n  {{#tab.pane title=\"Profile\" icon=\"fa fa-profile\"}}\n    \u003ch1\u003eProfile\u003c/h1\u003e\n    \u003cp\u003eContent for profile tab goes here\u003c/p\u003e\n  {{/tab.pane}}\n\n  {{#tab.pane title=\"Settings\" icon=\"fa fa-settings\"}}\n    \u003ch1\u003eHome\u003c/h1\u003e\n    \u003cp\u003eContent for settings tab goes here\u003c/p\u003e\n  {{/tab.pane}}\n\n  {{#tab.pane title=\"Message\" icon=\"fa fa-message\"}}\n    \u003ch1\u003eHome\u003c/h1\u003e\n    \u003cp\u003eContent for message tab goes here\u003c/p\u003e\n  {{/tab.pane}}\n\n{{/fullwidth-tabs}}\n```\n\n## Customization - Theming\n\nThis tab component can be themed using CSS variables to suit the color of your choice.\nKindly override these variable values in your css file.\n\nFor example:\n\n```css\n:root {\n    --tab-primary: #47a3da;  /* Active Color */\n    --tab-secondary: #becbd2; /* Normal Color and Border */\n    --tab-hover: #768e9d; /* Hover Color */\n}\n```\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` (Runs `ember try:each` to test your addon against multiple Ember versions)\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/).\nFull width responsive tab component as an ember addon\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajasegar%2Fember-responsive-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frajasegar%2Fember-responsive-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajasegar%2Fember-responsive-tabs/lists"}