Minimal Tabs Library Using Declarative Markup – declarative-tabs

Category: Javascript | May 3, 2023
Author:chousheng
Views Total:203 views
Official Page:Go to website
Last Update:May 3, 2023
License:MIT

Preview:

Minimal Tabs Library Using Declarative Markup – declarative-tabs

Description:

A minimal, clean tabs JavaScript library that simply uses HTML attributes to define tabs and content.

Tabs and content can be styled freely using CSS without impacting core functionality.

How to use it:

1. Wrap your tabbed content in the DIV and define the associated tabs using the data-tab attribute:

<div data-tab="Rust">Hello, Rust!</div>
<div data-tab="C++">Hello, C++!</div>
<div data-tab="Java">Hello, Java!</div>

2. Load the declarative-tabs’ JavaScript and CSS files in the document.

<link href="simple-tabs.css" rel="stylesheet">
<script src="simple-tabs.js"></script>

3. Initialize the declarative-tabs and done.

initSimpleTabsDeclarative();

4. Override the default CSS styles to fit your design requirements.

.simple-tabs .tab-button {
  display: inline-block;
  position: relative;
  bottom: -1px;
  padding: 5px 10px;
  cursor: pointer;
}
.simple-tabs .tab-button.active {
  border: 1px solid gray;
  border-bottom: 1px solid white;
  border-radius: 5px 5px 0 0;
}
.simple-tabs .tab-content {
  display: none;
  border: 1px solid gray;
  border-radius: 0 0 5px 5px;
  padding: 10px;
  width: 200px;
}
.simple-tabs .tab-content.active {
  display: block;
}

5. You can also implement the tabs interface by using CSS classes as follows:

<div class="simple-tabs">
  <div class="tab-button">Rust</div><div class="tab-button">Java</div><div class="tab-button">C++</div>
  <div class="tab-content">Hello, Rust!</div>
  <div class="tab-content">Hello, C++!</div>
  <div class="tab-content">Hello, Java!</div>
</div>
initSimpleTabs();

You Might Be Interested In:


Leave a Reply