Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@smarthtmlelements/smart-tabs

HTMLElements41SEE LICENSE IN https://www.htmlelements.com/license/6.2.0

Smart Tabs

custom, element, tabs custom element, html tabs, tabs, web components tabs, tabs element, tabstrip, custom tabs, tabs widget, tabs ui, tabs component, tabs control, custom elements, webcomponents, tabs custom element, tabstrip, tabstrip element, tabstrip user interface, material tabs, material tabstrip

readme

Published on webcomponents.org

<smart-tabs>

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>
    <smart-tab-item label="Tab 2">
    // Content goes here.
    </smart-tab-item>
    <smart-tab-item label="Tab 3">
    // Content goes here.
    </smart-tab-item>   
 </smart-tabs>

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

License

Apache License 2.0