@nitro-ui/component-tab
Version:
Tab component for Nitro UI.
156 lines (110 loc) • 6.01 kB
Markdown
# Nitro UI: Component > Tab
Tab component for Nitro UI.
## Getting Started
Get latest version by installing via [NPM @nitro-ui/component-tab](https://www.npmjs.com/package/@nitro-ui/component-tab):
```sh
npm install @nitro-ui/component-tab
```
Include this stylesheet code into your site:
```html
<link rel="stylesheet" href="dist/tab.min.css" />
```
## Usage:
Nitro tab is the extended version of Boostrap 4 Tab. Nitro tab uses `c-tab` class for parent and `c-tab__item` for the children. Add `data-toggle="tab"` to the c-tab__item for it to work. Active tab will added `is--active` class when it activated.
Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require `role="tablist", role="tab", role="tabpanel"`, and additional aria- attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
### Normal tab
```html
<div class="c-tab" role="tablist">
<a class="c-tab__item is--active" data-toggle="tab" href="#nav-1" role="tab" aria-selected="true" aria-controls="nav-1">
<span class="fas fa-award mr-2"></span><!-- with font awesome-->
<span>Shortlist</span>
</a>
<a class="c-tab__item" data-toggle="tab" href="#nav-2" role="tab" aria-selected="false" aria-controls="nav-2">
<span>Inbox</span>
</a>
<a class="c-tab__item" data-toggle="tab" href="#nav-3" role="tab" aria-selected="false" aria-controls="nav-3">
<!-- with svg icon-->
<svg class="icon-svg icon-svg--24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M 5 3 C 3.895 3 3 3.895 3 5 L 3 6 L 3 7 L 3 19 C 3 20.105 3.895 21 5 21 L 14.171875 21 C 14.723875 21 15.171875 20.552 15.171875 20 C 15.171875 19.448 14.724875 19 14.171875 19 L 5 19 L 5 7 L 19 7 L 18.998047 14.171875 C 18.998047 14.723875 19.446047 15.171875 19.998047 15.171875 C 20.550047 15.171875 20.998047 14.723875 20.998047 14.171875 L 20.998047 7 L 21 7 L 21 5 C 21 3.895 20.105 3 19 3 L 5 3 z M 7.5 10 C 7.224 10 7 10.224 7 10.5 L 7 11.5 C 7 11.776 7.224 12 7.5 12 L 8.5 12 C 8.776 12 9 11.776 9 11.5 L 9 10.5 C 9 10.224 8.776 10 8.5 10 L 7.5 10 z M 12 10 C 11.448 10 11 10.448 11 11 C 11 11.552 11.448 12 12 12 L 16 12 C 16.552 12 17 11.552 17 11 C 17 10.448 16.552 10 16 10 L 12 10 z M 7.5 14 C 7.224 14 7 14.224 7 14.5 L 7 15.5 C 7 15.776 7.224 16 7.5 16 L 8.5 16 C 8.776 16 9 15.776 9 15.5 L 9 14.5 C 9 14.224 8.776 14 8.5 14 L 7.5 14 z M 12 14 C 11.448 14 11 14.448 11 15 C 11 15.552 11.448 16 12 16 L 13 16 L 13 14 L 12 14 z M 15 15 L 15 17 L 20.146484 22.146484 L 22.146484 20.146484 L 17 15 L 15 15 z M 22.853516 20.853516 L 20.853516 22.853516 L 21.853516 23.853516 C 22.048516 24.048516 22.365547 24.048516 22.560547 23.853516 L 23.853516 22.560547 C 24.048516 22.364547 24.048516 22.048516 23.853516 21.853516 L 22.853516 20.853516 z" fill="#000000"/>
<span>Chat</span>
</a>
</div>
<div class="c-tab-content">
<div class="c-tab__pane is--active" id="nav-1">
<p>..Content tab..</p>
</div>
<div class="c-tab__pane" id="nav-2">
<p>..Content tab..</p>
</div>
<div class="c-tab__pane" id="nav-3">
<p>..Content tab..</p>
</div>
</div>
```
**Justified tab**
To make the tab become wide and taking full horizontal space add `c-tab--justified` to `c-tab`.
```html
<div class="c-tab c-tab--justified" role="tablist">
...
```
### Button tab
Nitro Tab also support button style. Button component already defined as tab dependencies for it to support button style. Add `c-tab--buttons` class to `c-tab`.
```html
<div class="c-tab c-tab--buttons" role="tablist">
<a data-toggle="tab" class="c-tab__item c-btn c-btn--secondary-outline" href="#sample-tab-content-2-1" role="tab" aria-controls="sample-tab-content-2-1" aria-selected="false">
<span>Shortlist</span>
</a>
<a data-toggle="tab" class="c-tab__item c-btn c-btn--secondary-outline" href="#sample-tab-content-2-2" role="tab" aria-controls="sample-tab-content-2-2" aria-selected="false">
<span>Inbox</span>
</a>
<a data-toggle="tab" class="c-tab__item is--active c-btn c-btn--secondary-outline" href="#sample-tab-content-2-3" role="tab" aria-controls="sample-tab-content-2-3" aria-selected="true">
<span>Chat</span>
</a>
</div>
<div class="c-tab-content mb-5">
<div class="c-tab__pane" id="sample-tab-content-2-1">
<p>..Content tab..</p>
</div>
<div class="c-tab__pane" id="sample-tab-content-2-2">
<p>..Content tab..</p>
</div>
<div class="c-tab__pane is--active" id="sample-tab-content-2-3">
<p>..Content tab..</p>
</div>
</div>
```
**Justified Button tab**
To make the tab buttons become wide and taking full horizontal space add `c-tab--justified` to `c-tab`.
```html
<div class="c-tab c-tab--buttons c-tab--justified" role="tablist">
...
```
## Development
To extends, develop or contribute to this component, you're required to fork our main [repository](https://github.com/icarasia/nitro-ui) and made a pull request.
### Development Requirements
Development tools required for this component are:
- [NodeJS](https://nodejs.org/en/)
- [Grunt CLI](https://gruntjs.com)
- [Ruby](https://www.ruby-lang.org/en/) (optional)
- [SASS](https://sass-lang.com) (optional)
Ruby and SASS are optional if you're fully using [node-sass](https://github.com/sass/node-sass) from npm for development.
### Development Setup
Run:
```sh
npm install
```
### Compile
Run:
```sh
grunt
```
---
# TODO
Nothing todo for now.
---
# CHANGELOG
All notable changes to this project will be documented in this file. **For now, let's keep TODO and CHANGELOG in README file. Keeping things simple.**
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [0.0.0-beta] - 2019-07-18
### Added
- Initial setup