[Dart] Tab Panel

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

Run on DartPad

The following is the source code for above demo.



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

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


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


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


import 'dart:html';

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

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

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

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

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:

  • DartPad.
  • Chromium 58.0.3029.110 Built on Ubuntu 17.04 (64-bit)


[1][JavaScript] Tab Panel
[2]Synonyms - Dart, JavaScript, C#, Python | Dart
[3]Improving the DOM | webdev.dartlang.org
[4]Strings, Numbers, Booleans, Oh My! - Dart Tips, Episode 4 | Dart