npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@puppet/ivy-tabs

v4.0.4

Published

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

Downloads

26

Readme

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 [email protected]: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/.