Narcoleptic's Patch Mangler

    @visual-framework/vf-tabs

    2.1.0 • Public • Published

    Tabs component

    npm version

    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.

    Deep linking

    A tab can be activated on page load by passing it on the link #vf-tabs__section-tab_id

    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.

    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

    Help

    Install

    npm i @visual-framework/vf-tabs

    DownloadsWeekly Downloads

    640

    Version

    2.1.0

    License

    Apache 2.0

    Unpacked Size

    36.7 kB

    Total Files

    12

    Last publish

    Collaborators

    • khawkins98