ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
lion/packages/tabs
History
CircleCI 7db55eda7e chore: release new versions 
- @lion/ajax@0.1.20
 - @lion/button@0.3.45
 - @lion/calendar@0.4.1
 - @lion/checkbox-group@0.3.7
 - @lion/checkbox@0.2.9
 - @lion/choice-input@0.4.7
 - @lion/dialog@0.2.1
 - @lion/field@0.6.6
 - @lion/fieldset@0.5.1
 - @lion/form-system@0.2.7
 - @lion/form@0.3.7
 - @lion/icon@0.2.10
 - @lion/input-amount@0.3.7
 - @lion/input-date@0.3.7
 - @lion/input-datepicker@0.5.1
 - @lion/input-email@0.3.7
 - @lion/input-iban@0.3.7
 - @lion/input@0.3.7
 - @lion/localize@0.7.1
 - @lion/option@0.3.7
 - @lion/overlays@0.7.1
 - @lion/popup@0.4.1
 - @lion/radio-group@0.3.7
 - @lion/radio@0.2.9
 - @lion/select-rich@0.7.1
 - @lion/select@0.3.7
 - @lion/steps@0.2.1
 - @lion/switch@0.3.8
 - @lion/tabs@0.1.3
 - @lion/textarea@0.3.7
 - @lion/tooltip@0.4.1
 - @lion/validate@0.5.1
2019-12-02 10:45:10 +00:00
..
src fix: refactor slot selection 2019-11-15 15:50:18 +01:00
stories feat(tabs): create tabs component 2019-10-31 10:50:45 +01:00
test fix: refactor slot selection 2019-11-15 15:50:18 +01:00
CHANGELOG.md chore: release new versions 2019-12-02 10:45:10 +00:00
index.js feat(tabs): create tabs component 2019-10-31 10:50:45 +01:00
lion-tabs.js feat(tabs): create tabs component 2019-10-31 10:50:45 +01:00
package.json chore: release new versions 2019-12-02 10:45:10 +00:00
README.md feat(tabs): create tabs component 2019-10-31 10:50:45 +01:00

README.md

Tabs

lion-tabs implements Tabs view to allow users to quickly move between a small number of equally important views

How to use

Installation

npm i --save @lion/tabs;

Usage

import '@lion/tabs/lion-tabs.js';

<lion-tabs>
  <button slot="tab">Info</button>
  <p slot="panel">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam sequi odit cumque, enim aut
    assumenda itaque quis voluptas est quos fugiat unde labore reiciendis saepe, iure, optio
    officiis obcaecati quibusdam.
  </p>
  <div slot="tab">About</div>
  <p slot="panel">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam sequi odit cumque, enim aut
    assumenda itaque quis voluptas est quos fugiat unde labore reiciendis saepe, iure, optio
    officiis obcaecati quibusdam.
  </p>
</lion-tabs>

Rationales:

  • No separate active/focus state when using keyboard

    We will immediately switch content as all our content comes from light dom (e.g. no latency)

    See Note at https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-19

    It is recommended that tabs activate automatically when they receive focus as long as their associated tab panels are displayed without noticeable latency. This typically requires tab panel content to be preloaded.

  • Panels are not focusable

    Focusable elements should have a means to interact with them. Tab panels themselves do not offer any interactiveness. If there is a button or a form inside the tab panel then these elements get focused directly.