# webts-animated-tabs
> An Tab Library with css and Javascript for styling tabs and make them interactive via an inkBar and animations.
Latest version **1.0.0** (published 2018-04-13) · ISC license · 0 weekly downloads
## Install
```sh
npm install webts-animated-tabs
pnpm add webts-animated-tabs
yarn add webts-animated-tabs
bun add webts-animated-tabs
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-04-13 |
| First published | 2018-04-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 54 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Tobias Schramek |
| Maintainers | webtsofficial |
| Keywords | tabs, animated, webts, inkBar, ink-bar, slide |
## Links
- npm: https://www.npmjs.com/package/webts-animated-tabs
- Repository: https://github.com/webtsofficial/Animated-Tabs-Javascript-Framework
- Homepage: https://github.com/webtsofficial/Animated-Tabs-Javascript-Framework#readme
- Issues: https://github.com/webtsofficial/Animated-Tabs-Javascript-Framework/issues
- npm.io page: https://npm.io/package/webts-animated-tabs
## Alternatives
- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads
## Recent versions
- 1.0.0 (latest) — 2018-04-13
## README
#webts-animated-tabs v1.0.0
##Installation
###npm
```
npm install webts-animated-tabs --save
```
> Till now webts-animated-tabs can only be installed via npm - more coming soon
###HTML
```html
```
##Usage
As soon as you have mported all the scripts you are ready to strat. Only add the CSS classes in the following way to achieve incredible tabs.
```html
Content 1
Content 2
Content 3
Content 4
```
##Customization
You can customize the tabs via the scss variables inside the src/styles/scss/main.scss file. Whatch out to make this in the node modules folder, because when updating packages the changes get overwritten.
```scss
$color-tab-bg: #fff;
$color-tab-active-bg: #f1f1f1;
$color-tab-hover-bg: #f9f9f9;
$color-ink-bar: #ff696d;
$color-swapper-bg: rgba(220,220,220,0.75);
$color-swapper-hover-bg:rgba(220,220,220,0.3);
$color-swapper-text: #333;
$transition-time-slow: 1s;
$transition-time-medium: 0.7s;
$transition-time-fast: 0.3s;
```
>I'm working on making the customization via javascript and a options parameter in for the Tab-Class
---
_Source: https://npm.io/package/webts-animated-tabs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._