https://github.com/rajasegar/ember-responsive-tabs

Full width responsive tab component as an ember addon
https://github.com/rajasegar/ember-responsive-tabs

components css ember-addon ember-cli-addon emberjs tabs

Last synced: 7 months ago
JSON representation

Full width responsive tab component as an ember addon

• Host: GitHub
• URL: https://github.com/rajasegar/ember-responsive-tabs
• Owner: rajasegar
• License: mit
• Created: 2017-04-15T13:02:55.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2023-01-12T06:13:36.000Z (about 3 years ago)
• Last Synced: 2025-03-19T03:53:52.737Z (11 months ago)
• Topics: components, css, ember-addon, ember-cli-addon, emberjs, tabs
• Language: JavaScript
• Size: 5.1 MB
• Stars: 5
• Watchers: 2
• Forks: 2
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# ember-responsive-tabs

[![Build Status](https://travis-ci.org/rajasegar/ember-responsive-tabs.svg?branch=master)](https://travis-ci.org/rajasegar/ember-responsive-tabs) 

[![npm](https://img.shields.io/npm/dm/ember-responsive-tabs.svg)](https://www.npmjs.com/package/ember-responsive-tabs)

[![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")

[![EmberObserver](http://emberobserver.com/badges/ember-responsive-tabs.svg?branch=master)](http://emberobserver.com/addons/ember-responsive-tabs)

Responsive full-width tab component with customizable theme options.

Icons are provisioned by *Font-awesome* you need to add font-awesome to your project.

Kindly refer to the dummy app in tests.

Heavily inspired by this [Codrops article](https://tympanus.net/codrops/2014/03/21/responsive-full-width-tabs/)

## Demo

[Demo](https://rajasegar.github.io/ember-responsive-tabs/)

## Installation

* `ember install ember-responsive-tabs`

## Usage

Example markup:

```hbs

{{#fullwidth-tabs as |tab|}}

  {{#tab.pane title="Home" icon="fa fa-home"}}

    
Home

    
Content for home tab goes here

  {{/tab.pane}}


  {{#tab.pane title="Profile" icon="fa fa-profile"}}

    
Profile

    
Content for profile tab goes here

  {{/tab.pane}}


  {{#tab.pane title="Settings" icon="fa fa-settings"}}

    
Home

    
Content for settings tab goes here

  {{/tab.pane}}


  {{#tab.pane title="Message" icon="fa fa-message"}}

    
Home

    
Content for message tab goes here

  {{/tab.pane}}


{{/fullwidth-tabs}}

```

## Customization - Theming

This tab component can be themed using CSS variables to suit the color of your choice.

Kindly override these variable values in your css file.

For example:

```css

:root {

    --tab-primary: #47a3da;  /* Active Color */

    --tab-secondary: #becbd2; /* Normal Color and Border */

    --tab-hover: #768e9d; /* Hover Color */

}

```

## Running

* `ember serve`

* Visit your app at [http://localhost:4200](http://localhost:4200).

## Running Tests

* `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions)

* `ember test`

* `ember test --server`

## Building

* `ember build`

For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).

Full width responsive tab component as an ember addon