https://github.com/opendatastudio/ember-basic-tabs

Basic tab addon for Ember.
https://github.com/opendatastudio/ember-basic-tabs

ember-addon emberjs tabs

Last synced: 3 days ago
JSON representation

Basic tab addon for Ember.

• Host: GitHub
• URL: https://github.com/opendatastudio/ember-basic-tabs
• Owner: opendatastudio
• License: mit
• Created: 2022-04-14T02:06:54.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-12-05T09:54:54.000Z (10 months ago)
• Last Synced: 2024-09-25T20:21:20.030Z (8 days ago)
• Topics: ember-addon, emberjs, tabs
• Language: JavaScript
• Homepage:
• Size: 1.56 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# ember-basic-tabs

Unopinionated, no-thrills tabs for Ember.js

## Compatibility

* Ember.js v4.4 or above

* Ember CLI v4.4 or above

* Node.js v14 or above

## Installation

```

ember install @opendatafit/ember-basic-tabs

```

## Usage

### Creating and managing tab state

```javascript

import TabState from `@opendatafit/ember-basic-tabs/utils/tab-state';

tabs = [

    {

      name: 'model',

      title: 'Model',

      icon: '',

      content: 'some content 1',

    },

    {

      name: 'params',

      title: 'Params',

      icon: '',

      content: 'some content 2',

    },

    {

      name: 'graph',

      title: 'Fit graph',

      icon: '',

      content: 'some content 3',

    },

    {

      name: 'table',

      title: 'Fit table',

      icon: '',

      content: 'some content 4',

    },

  ];

myTabState = null;

constructor() {

  super(...arguments);

  this.myTabState = new TabState(this.tabs, 0, (name = 'test'));

}

```

### Rendering tab list

```handlebars

  {{#each this.myTabState.tabs as |tab index|}}

    


      

        {{tab.title}}

      

    

  {{/each}}


```

### Rendering panels

```handlebars

  {{#each this.myTabState.tabs as |tab index|}}

    

      {{tab.content}}

    

  {{/each}}

```

## Contributing

See the [Contributing](CONTRIBUTING.md) guide for details.

## License

This project is licensed under the [MIT License](LICENSE.md).