Tabs component
About
The ever-useful tabs. This component works best with the included JS, but you can use the CSS styling on other tab implementations, like Bootstrap tabs.
Usage
These tabs have been made with accessibility in mind, however tabs should be avoided where content structure avoids the need to use tabs.
Nested tabs are also possible, as demonstrated in the example, however this provides further usability challenges and should be strongly avoided.
Install
This component is distributed with npm. After installing npm, you can install the vf-tabs
with this command.
$ yarn add --dev @visual-framework/vf-tabs
Sass/CSS
The source files included are written in Sass(scss
). You can point your Sass include-path
at your node_modules
directory and import it like this.
@import "@visual-framework/vf-tabs/index.scss";
Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter