Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@tabbycss/tabby

Package Overview
Dependencies
Maintainers
0
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tabbycss/tabby - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

js/tabby.min.js

10

package.json
{
"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",

65

README.md

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc