Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oom-components/tab
Yet another tab panel component
https://github.com/oom-components/tab
Last synced: about 1 month ago
JSON representation
Yet another tab panel component
- Host: GitHub
- URL: https://github.com/oom-components/tab
- Owner: oom-components
- License: mit
- Created: 2018-09-13T12:39:23.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-02-14T14:49:17.000Z (11 months ago)
- Last Synced: 2024-11-09T09:37:56.260Z (about 2 months ago)
- Language: JavaScript
- Size: 23.4 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @oom/tab
Tab panel component with the following features:
- No dependencies
- Light: Aprox 200 lines of code (including comments and spaces)
- Follows the **progressive enhancement strategy:**
- Works with just `html`
- Works better with `html` and `css`
- Works much better with `html`, `css` and `js`
- Works much much better when `js` polyfills are not needed
- No styles or themes are provided with this package. You decide how the tabs
must look.
- Support for touch devices
- Support for keyboard
- Fully accessible
- Build with modern javascript, using ES6 modules and custom elements
## Install
Requirements:
- NPM or Yarn to install [the package](https://www.npmjs.com/package/@oom/tab)
- For browsers
[not supporting custom elements](https://caniuse.com/#feat=custom-elementsv1),
[you can use this polyfill](https://github.com/webcomponents/custom-elements)
```sh
npm install @oom/tab
npm install @webcomponents/custom-elements
```
## Usage
### HTML
Let's start with the following html code:
```html
Content section 1
Content section 2
Content section 3
```
### CSS
Use css to define the tab panel appearance:
```css
/* This makes the tabs works without javascript */
section:not(:target) {
display: none;
}
[role="tablist"] {
display: flex;
list-style: none;
padding: 0;
}
```
### JS
And finally use javascript for a complete experience:
```js
import Tab from "./tab/tab.js";
//Register the custom element
customElements.define("my-tabs", Tab);
```
## API
This is a custom element that extends `HtmlElement`, so it innerit the same api
of a standard html element with the following additions:
```js
//Select the element
const element = document.querySelector("my-tabs");
//Change the tab state
element.setState("#section2");
//Get the currently selected tabpanel element
console.log(element.panel);
//Get the currently selected tab element
console.log(element.tab);
```
## Demo and tests
- Demo: https://oom-components.github.io/tab/demo/
- Tests: https://oom-components.github.io/tab/tests/
To run the demo locally, just clone this repository, enter in the directory and
execute:
```sh
npm install
npm start
```
You should see something in the following urls:
- Demo: `http://localhost:8080/demo`
- Test: `http://localhost:8080/tests`