@tabbycss/tabby
Advanced tools
Comparing version 0.0.3 to 0.0.4
{ | ||
"name": "@tabbycss/tabby", | ||
"version": "0.0.3", | ||
"description": "Tabby is an accessible tab library built entirely with CSS.", | ||
"version": "0.0.4", | ||
"description": "Tabby is an accessible tab library built with keyboard navigation support.", | ||
"author": "tabbycss", | ||
"main": "css/tabby.min.css", | ||
"unpkg": "css/tabby.min.css", | ||
"files": [ | ||
"css/tabby.min.css", | ||
"js/tabby.min.js" | ||
], | ||
"homepage": "https://github.com/tabbycss/tabby", | ||
@@ -9,0 +11,0 @@ "license": "MIT", |
@@ -7,3 +7,3 @@ <p align="center"> | ||
<div align="left">Tabby is an accessible tab library built entirely with CSS.</div> | ||
<div align="left">Tabby is an accessible tab library built with keyboard navigation support.</div> | ||
<div align="left"> | ||
@@ -15,18 +15,10 @@ | ||
There are 3 ways to get started with tabby.css: | ||
### Install manually | ||
[Download Tabby](https://raw.githubusercontent.com/tabbycss/tabby/refs/heads/main/css/tabby.min.css) and link `css/tabby.min.css` in the `<head>` of your website. | ||
```html | ||
<link rel="stylesheet" href="css/tabby.min.css" /> | ||
``` | ||
### Usage from CDN | ||
Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@tabbycss/tabby) to link tabby.css | ||
You can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@tabbycss/tabby) to link Tabby | ||
```html | ||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabbycss/tabby/css/tabby.min.css" /> | ||
<script src="https://cdn.jsdelivr.net/npm/@tabbycss/tabby/js/tabby.min.js"></script> | ||
``` | ||
@@ -46,38 +38,17 @@ | ||
<div role="tablist" class="tabby"> | ||
<a role="tab" class="tab" selected> | ||
<button role="tab" class="tab" selected> | ||
Movies | ||
<div class="tab-border"></div> | ||
</a> | ||
<a role="tab" class="tab"> | ||
</button> | ||
<button role="tab" class="tab"> | ||
Shows | ||
<div class="tab-border"></div> | ||
</a> | ||
<a role="tab" class="tab" disabled> | ||
Disabled | ||
</button> | ||
<button role="tab" class="tab"> | ||
Music | ||
<div class="tab-border"></div> | ||
</a> | ||
</button> | ||
</div> | ||
``` | ||
To add functionality to tabby we can add this snippet of javascript. | ||
```index.html``` | ||
```html | ||
<script> | ||
const Tabby = document.querySelectorAll('.tabby'); | ||
Tabby.forEach(container => { | ||
const Tabs = container.querySelectorAll('.tab'); | ||
Tabs.forEach(item => { | ||
item.addEventListener('click', () => { | ||
Tabs.forEach(i => i.removeAttribute('selected')); | ||
item.setAttribute('selected', ''); | ||
}); | ||
}); | ||
}); | ||
</script> | ||
``` | ||
Check out the demo on [codepen.](https://codepen.io/GreenestGoat/pen/dyxGLEQ) | ||
@@ -94,9 +65,9 @@ | ||
/* Tabby default variables */ | ||
--tabby-width: 100%; | ||
--tabby-height: 48px; | ||
--tabby-tab-width: var(--tabby-width); | ||
--tabby-tab-height: var(--tabby-height); | ||
--tabby-tab-width: 100%; | ||
--tabby-tab-height: 100%; | ||
--tabby-tab-background-color: transparent; | ||
--tabby-tab-selected-background-color: #E8F0FE; | ||
--tabby-tab-selected-background-color: #fee8e8; | ||
--tabby-tab-hover-background-color: #d6d6d64d; | ||
@@ -106,3 +77,3 @@ --tabby-tab-focus-background-color: #d6d6d64d; | ||
--tabby-tab-color: #202124; | ||
--tabby-tab-selected-color: #185ABC; | ||
--tabby-tab-selected-color: #bc1818; | ||
--tabby-tab-font-family: inherit; | ||
@@ -112,3 +83,3 @@ --tabby-tab-font-size: 14px; | ||
--tabby-tab-line-height: normal; | ||
--tabby-tab-radius: 0px; | ||
--tabby-tab-radius: 6px 6px 0px 0px; | ||
--tabby-tab-padding-left: 20px; | ||
@@ -119,3 +90,3 @@ --tabby-tab-padding-right: 20px; | ||
--tabby-tab-border-color: transparent; | ||
--tabby-tab-selected-border-color: #185ABC; | ||
--tabby-tab-selected-border-color: #bc1818; | ||
--tabby-tab-border-radius: 0px; | ||
@@ -122,0 +93,0 @@ --tabby-tab-border-width: 100%; |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Empty package
Supply chain riskPackage does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
8586
5
0
96
1