README

ez-tabs

ez-tabs is a 28 line, ES2015 based tab component that comes to a grand total size of 922 bytes.

I've made this because I don't want to have to add jQuery every single time I want to use tabs, and also don't want to use some massively complex and unmaintained repo. I also wanted to make one that didn't have 500 lines of styling bundled with it as I wanted to be able to completely customize all of my own styles.

About Demo

Getting Started

To get the project installed on your system for usage or modification you can either clone the repo which can be found in the installing section of the readme.

Prerequisites

To install this there are no prerequisites as it's all in the single JS file. You can choose to simply download the repository in .zip and drop it into your project and get it working via a link to it in your HTML file, or you can install it via the Node Package Manager, this is the recommended method of installation.

Installing

To install this manually in your projects;

Scroll to the top of the page.
Find the big green button that says download.
Press it, and wait for the download to complete.
Unzip the document.
Open the ez-tabs directory, wherever you unzipped the document.
Drag the ez-tabs.js file into your project.
Open your index document (or wherever your body is located) in your favorite text editor.
Copy <script src="./ez-tabs.js"></script> into the very bottom of your <body></body>.
Done.

To install this via Node Package Manager in your project;

Make sure you have initialized a project, if not, run npm init -y.
Install the module via npm install ez-tabs or yarn add ez-tabs.

Usage

To use the ez-tabs, add the following to your JS file;

Import the module const EzTabs = require('ez-tabs');
Initialize a new instance of EzTabs; const MyTabs = new EzTabs(selector/DOMNode, params).
Done!

Also, add the following to your HTML file;

<div id="tabs" class="ez">
    <div class="tabs">
        <p class="tab" ez="1">Tab 1</p>
        <p class="tab" ez="2">Tab 2</p>
        <p class="tab" ez="3">Tab 3</p>
    </div>
    <div class="panes">
        <article class="pane" ez="1">Pane 1</article>
        <article class="pane" ez="2">Pane 2</article>
        <article class="pane" ez="3">Pane 3</article>
    </div>
</div>

Options

There are a few useful options that you can utilise should you want to modify the tabs to cater to your preferences.

const params = {
    tabSelector: (string) allows you set a custom tab wrapper class
    paneSelector: (string) allows you to set a custom pane wrapper class
    defaultActive: (int) allows you to set the initial active tabs/panes
    verticalTabs: (bool) allows you to add a ez-vertical class modifier onto your root wrapper
}

Keep in mind, by default there will not be any styles by default but the functionality will still work. You will need to style it yourself.

If you want to use the same styles as i've used in the demo, you can use this basic SCSS file I threw together. Otherwise, try this CSS file.

Built With

JavaScript - The language?
NodeJS - NPM - Dependency Management
Babel 7 - Transpiling to ES2015

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning.

Authors

Slavko Bojanic - Initial work - slavkobojanic

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Usage no npm install needed!