GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → github → Tab Container Element

github / Tab Container Element

Licence: mit
An accessible tab container element with keyboard support.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

web-componentscustom-elements

Projects that are alternatives of or similar to Tab Container Element

Server Components
🔧 A simple, lightweight tool for composable HTML rendering in Node.js, based on web components.
Stars: ✭ 212 (-10.92%)
Mutual labels:  web-components, custom-elements
Elements
Lazy load Angular Elements (or any other web components / custom elements ) with ease!
Stars: ✭ 223 (-6.3%)
Mutual labels:  web-components, custom-elements
Omi
Front End Cross-Frameworks Framework - 前端跨框架跨平台框架
Stars: ✭ 12,153 (+5006.3%)
Mutual labels:  web-components, custom-elements
Preact Custom Element
Wrap your component up as a custom element
Stars: ✭ 212 (-10.92%)
Mutual labels:  web-components, custom-elements
Ajax Form
HTML forms on performance-enhancing drugs
Stars: ✭ 232 (-2.52%)
Mutual labels:  web-components, custom-elements
Ion Phaser
A web component to use Phaser Framework with Angular, React, Vue, etc 🎮
Stars: ✭ 152 (-36.13%)
Mutual labels:  web-components, custom-elements
Custom Elements
All about HTML Custom Elements
Stars: ✭ 188 (-21.01%)
Mutual labels:  web-components, custom-elements
Nutmeg
Build, test, and publish vanilla Web Components with a little spice
Stars: ✭ 111 (-53.36%)
Mutual labels:  web-components, custom-elements
Time Elements
Web component extensions to the standard <time> element.
Stars: ✭ 2,318 (+873.95%)
Mutual labels:  web-components, custom-elements
Bolt
The Bolt Design System provides robust Twig and Web Component-powered UI components, reusable visual styles, and powerful tooling to help developers, designers, and content authors build, maintain, and scale best of class digital experiences.
Stars: ✭ 186 (-21.85%)
Mutual labels:  web-components, custom-elements
Html Include Element
Easily include external HTML into your pages.
Stars: ✭ 143 (-39.92%)
Mutual labels:  web-components, custom-elements
Clipboard Copy Element
Copy element text content or input values to the clipboard.
Stars: ✭ 198 (-16.81%)
Mutual labels:  web-components, custom-elements
Elm Canvas
A canvas drawing library for Elm
Stars: ✭ 124 (-47.9%)
Mutual labels:  web-components, custom-elements
Shadow Dom In Depth
Everything you need to know about Shadow DOM
Stars: ✭ 191 (-19.75%)
Mutual labels:  web-components, custom-elements
Image Crop Element
A custom element for cropping a square image. Returns x, y, width, and height.
Stars: ✭ 115 (-51.68%)
Mutual labels:  web-components, custom-elements
Markdown Toolbar Element
Markdown formatting buttons for text inputs.
Stars: ✭ 160 (-32.77%)
Mutual labels:  web-components, custom-elements
Dataformsjs
🌟 DataFormsJS 🌟 A minimal JavaScript Framework and standalone React and Web Components for rapid development of high quality websites and single page applications.
Stars: ✭ 95 (-60.08%)
Mutual labels:  web-components, custom-elements
Vanilla Hamburger
Animated hamburger menu icons for modern web apps (1.8 KB) 🍔
Stars: ✭ 110 (-53.78%)
Mutual labels:  web-components, custom-elements
Swiss
🇨🇭Functional custom elements
Stars: ✭ 169 (-28.99%)
Mutual labels:  web-components, custom-elements
Progressive Image Element
⚡️ <progressive-image> custom element
Stars: ✭ 231 (-2.94%)
Mutual labels:  web-components, custom-elements
View All Similar Projects ➔

<tab-container> element

A accessible tab container element with keyboard support. Follows the ARIA best practices guide on tabs.

Installation

$ npm install @github/tab-container-element

Usage

import '@github/tab-container-element'

<tab-container>
  <div role="tablist">
    <button type="button" role="tab" aria-selected="true">Tab one</button>
    <button type="button" role="tab" tabindex="-1">Tab two</button>
    <button type="button" role="tab" tabindex="-1">Tab three</button>
  </div>
  <div role="tabpanel">
    Panel 1
  </div>
  <div role="tabpanel" hidden>
    Panel 2
  </div>
  <div role="tabpanel" hidden>
    Panel 3
  </div>
</tab-container>

Events

  • tab-container-change (bubbles, cancelable): fired on <tab-container> before a new tab is selected and visibility is updated. event.detail.relatedTarget is the tab panel that will be selected if the event isn't cancelled.
  • tab-container-changed (bubbles): fired on <tab-container> after a new tab is selected and visibility is updated. event.detail.relatedTarget is the newly visible tab panel.

Browser support

Browsers without native custom element support require a polyfill.

  • Chrome
  • Firefox
  • Safari
  • Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].