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.
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.
A tab can be activated on page load by passing it on the link
This is the default behaviour and can be deactivated when invoking vfTabs:
// vfTabs(scope, activateDeepLinkOnLoad) vfTabs(document, false);
Note: The deep linking feature is not designed with
vf-location-nearest compatibility. A
vf-location-nearest tab may not respect a deep linked hash url.
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
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.