fun-tabs

An HTML custom element implementing the <fun-tabs> tag.

Setup

Installation

npm i fun-tabs

<script src="node_modules/fun-tabs/fun-tabs.js"></script>

or if you're bundling

import "fun-tabs";
// or
require("fun-tabs");

Usage

    <fun-tabs selected="0">
        <fun-tab>Tab 1</fun-tab>
        <fun-tab>Tab 2</fun-tab>
        <fun-tab>Tab 3</fun-tab>
    </fun-tabs>

Customization

You can customize the color of the fun-tabs by assigning values to css elements.

The two css elements that affect fun-tabs are --fun-tabs-color and --secondary-color.

You can set there values like so

    :root {
        --fun-tabs-color: red; /* if both are set --fun-tabs-color takes precedence */
        --secondary-color: red; 
    }