[Dart] Tab Panel

May 29, 2017

Tab panel implementation via Dart and CSS. The tab panel here is similar to Bootstrap tab.

The following is the source code for above demo.

HTML:

<div>

  <!-- Nav tabs -->
  <ul class="nav-tabs">
    <li><a data-target="home">Home</a></li>
    <li><a data-target="profile">Profile</a></li>
    <li><a data-target="messages">Messages</a></li>
    <li><a data-target="settings">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home">My home</div>
    <div class="tab-pane" id="profile">My profile</div>
    <div class="tab-pane" id="messages">My messages</div>
    <div class="tab-pane" id="settings">My settings</div>
  </div>

</div>

The tab has data-target attribute to indicate the id of the element with tab content.

CSS:

.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  list-style: none;
}
.nav-tabs > li {
  margin-bottom: 1px;
  margin-right: 1rem;
  line-height: 2rem;
}
.nav-tabs > li > a {
  cursor: pointer;
  text-decoration: none;
}
.tab-pane {
  padding: 1rem;
  display: none;
}
.tab-content > .active {
  display: block;
}

The first three rules use flexbox to align the tabs in one row. The last two rules hide the tab contents except the tab content with .active class.

Dart:

import 'dart:html';

void tabClick(Event e) {
  Element elm = e.target;
  var id = elm.dataset["target"];
  var pane = querySelector("#" + id);
  pane.classes.add("active");

  // remove .active class of all sibling elements
  var el = pane.nextElementSibling;
  while (el != null) {
    el.classes.remove("active");
    el = el.nextElementSibling;
  }
  el = pane.previousElementSibling;
  while (el != null) {
    el.classes.remove("active");
    el = el.previousElementSibling;
  }
}

void setupNavtab(Element navtab) {
  var tabs = navtab.querySelectorAll("*[data-target]");
  for (var tab in tabs) {
    tab.onClick.listen(tabClick);
  }
}

void main() {
  var navtabs = querySelectorAll(".nav-tabs");
  for (var navtab in navtabs) {
    setupNavtab(navtab);
  }
}

The Dart code here queries for elements with data-target attribute in element with .nav-tabs. When users click on the element with data-target attribute, add .active class to the tab pane referenced by the attribute, and remove .active class of all sibling tab panes.

Tested on: