Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@puppet/ivy-tabs

Package Overview
Dependencies
Maintainers
6
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@puppet/ivy-tabs

WAI-ARIA accessible tabs for Ember. Originally created by Envy Labs

  • 4.0.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
3
increased by200%
Maintainers
6
Weekly downloads
 
Created
Source

ivy-tabs

Build Status Dependabot Status Ember Observer Score

A group of Ember.js Components that interact to create a WAI-ARIA tab interface.

Special thanks to ic-tabs, which this addon is based on.

NOTE: This addon uses contextual components, which require Ember >= 2.3. For older versions of Ember, use the 1.x release series of this addon.

  • Ember.js v3.12 or above
  • Ember CLI v2.13 or above
  • Node.js v10 or above

Installation

$ ember install ivy-tabs

Usage

Templates

{{#ivy-tabs selection=selection as |tabs|}}
  {{#tabs.tablist tagName="ul" as |tablist|}}
    <li>
      {{#tablist.tab "TabA" on-select=(action (mut selection))}}Foo{{/tablist.tab}}
    </li>
    <li>
      {{#tablist.tab "TabB" on-select=(action (mut selection))}}Bar{{/tablist.tab}}
    </li>
    <li>
      {{#tablist.tab "TabC" on-select=(action (mut selection))}}Baz{{/tablist.tab}}
    </li>
  {{/tabs.tablist}}

  {{#tabs.tabpanel "TabA"}}
    <h2>Foo</h2>
  {{/tabs.tabpanel}}

  {{#tabs.tabpanel "TabB"}}
    <h2>Bar</h2>
  {{/tabs.tabpanel}}

  {{#tabs.tabpanel "TabC"}}
    <h2>Baz</h2>
  {{/tabs.tabpanel}}
{{/ivy-tabs}}

Some things to note:

  • Associations between tabs and panels are explicitly defined by the "models" (the first positional parameter) given to them. In the above example, the given tab models are "TabA", "TabB", and "TabC". This model could be any JavaScript Object that you'd like, they are not required to be strings.
  • An on-select action is sent when a tab is selected. As an argument, it receives the model defined on the tab (for example, when the Foo tab is selected, the on-select event will carry "TabA" as an argument).

Presentation

ivy-tabs does not make any assumptions about how you will present your tabs. Specifically, this means that ivy-tabs will not automatically hide unselected tab panels. Rather, you should update your application styles to reflect your needs.

In an ideal world, your application would carry a CSS rule similar to the following:

[aria-hidden="true"] {
  display: none;
}

If, for some reason, your target audience does not support CSS attribute selectors, you may also opt to instead rely on the ivy-tabs classes by defaulting all panels to being hidden and only displaying the active panel using CSS rules similar to (remember, .active will be different if you override the activeClass property of your ivy-tabs-tabpanel):

.ivy-tabs-tabpanel {
  display: none;
}

.ivy-tabs-tabpanel.active {
  display: block;
}

Contributing

Fork this repo, make a new branch, and send a pull request. Make sure your change is tested or it won't be merged.

Installation

git clone git@github.com:IvyApp/ivy-tabs.git
cd ivy-tabs
npm install

Running

ember server

Then visit your app at http://localhost:4200.

Running Tests

ember test

Or, to start a test server:

ember test --server

Linting

  • npm run lint:js
  • npm run lint:js -- --fix

Building

ember build

For more information on using ember-cli, visit http://ember-cli.com/.

Keywords

FAQs

Package last updated on 11 Jun 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc