https://github.com/knowler/kno-tabs-element

Work in progress
https://github.com/knowler/kno-tabs-element

Last synced: about 1 year ago
JSON representation

Work in progress

• Host: GitHub
• URL: https://github.com/knowler/kno-tabs-element
• Owner: knowler
• Created: 2024-06-08T01:45:35.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-09-13T20:18:22.000Z (almost 2 years ago)
• Last Synced: 2025-03-19T03:33:37.478Z (about 1 year ago)
• Language: JavaScript
• Size: 4.88 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# `` custom element

This is a **work in progress** tabs custom element that I’m building for

interest-sake. It uses manual slot assignment and so the `` and

`` elements are the API for setting tabs and their associated

panels. A goal is to avoid exposing internal ARIA attributes or

`tabindex` however that might not be possible in some browsers.

Here’s what the HTML API currently looks like:

```html

  Knocked Loose

  You Won’t Go Before You’re Supposed To

  Comeback Kid

  Heavy Steps

  Militarie Gun

  Life Under The Gun

```

The styling API is as follows:

```css

kno-tabs {

  /* Style the tabs container */

}

kno-tabs::part(tablist) {

  /* Style the tabs list */

}

kno-tab {

  /* Style the tab buttons */

}

kno-tab:state(current) {

  /* Style the current/selected tab button */

}

kno-panel {

  /* Style the tab panels */

}

kno-panel:state(current) {

  /* Style the current/selected tab panel */

}

/*

  Since light DOM order is respected you can style elements based on

  position using the `:nth-of-type()` pseudo-class selector.

*/

kno-tab:nth-of-type(2) {

  /* Style the second tab button */

}

kno-panel:nth-of-type(2) {

  /* Style the second tab panel */

}

```