6.2.0 • Public • Published

    Published on webcomponents.org


    Live Demo ↗ | Documentation ↗ | Installation ↗

    <smart-tabs> is a Tabs Custom HTML Element that make it easy to explore and switch between different views, part of the Smart HTML Elements.

     <smart-tabs class='material'>
        <smart-tab-item label="Tab 1" selected>
        // Content goes here.
        <smart-tab-item label="Tab 2">
        // Content goes here.
        <smart-tab-item label="Tab 3">
        // Content goes here.

    Screenshot of smart-tabs, using the Material theme

    Getting Started

    Smart HTML Elements components documentation includes getting started, customization and api documentation topics.

    Getting Started Documentation | CSS Documentation | API Documentation

    The file structure for Smart HTML Elements

    • source-minified/

      Javascript files.

    • source-minified/styles/

      Component CSS Files.

    • demos/

      Demo files

    Running demos in browser

    1. Fork the Smart-HTML-Elements-Core repository and clone it locally.

    2. Make sure you have npm installed.

    3. When in the Smart-HTML-Elements-Core directory, run npm install and then bower install to install dependencies.

    4. Run a localhost or upload the demo on a web server. Then run:

    • /demos/smart-button/smart-button-overview.htm

    Following the coding style

    We are using ESLint for linting JavaScript code.

    Creating a pull request

    • Make sure your code is compliant with ESLint
    • Submit a pull request with detailed title and description
    • Wait for response from one of our team members


    Apache License 2.0


    npm i @smarthtmlelements/smart-tabs

    DownloadsWeekly Downloads





    SEE LICENSE IN https://www.htmlelements.com/license/

    Unpacked Size

    310 kB

    Total Files


    Last publish


    • bmarkov
    • smartcustomelements