New Feature: Tabs with Content Box and Pages.

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Bulma Changelog
 
+## 0.9.5
+
+### New features
+
+- **Tab pages**: elements to add dynamically displayed pages below tabs.
+  - New `tabs-box`: container for tabs and the content, adding a frame around the content.
+  - New `tabs-content`: a container for the individual pages.
+  - New `tabs-page`: a page that can made visible using `is-active`.
+  - New `$tabs-border-color`, `$tabs-border-style`, `$tabs-border-width`: defines the base border style for the tabs and its contents.
+  - New `$tabs-box-background-color`: defines the background color of the content box under the tabs.
+  - New `$tabs-box-border-color`, `$tabs-box-border-style`, `$tabs-box-border-width`: derived settings to style the border of the content box.
+
 ## 0.9.4
 
 ### New features

docs/documentation/components/tabs.html

@@ -449,4 +449,79 @@
 
 {% include elements/snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
 
+{% include elements/anchor.html name="Pages" %}
+
+<div class="content">
+  If you want display pages below the tabs inside a box, enclose them in the <code>tabs-box</code> element.
+</div>
+
+{% capture tabs_box_example %}
+<div class="tabs-box">
+    <div class="tabs">
+        <ul>
+            <li class="is-active"><a>First Tab</a></li>
+            <li><a>Second Tab</a></li>
+            <li><a>Third Tab</a></li>
+        </ul>
+    </div>
+    <div class="tabs-content">
+        <div class="tabs-page is-active">
+            <div class="content">
+                <h2>The first tabs page</h2>
+                <p>This is the content of the first tabs page.</p>
+            </div>
+        </div>
+        <div class="tabs-page">
+            <div class="content">
+                <h2>The second tabs page</h2>
+                <p>This is the content of the second tabs page.</p>
+            </div>
+        </div>
+        <div class="tabs-page">
+            <div class="content">
+                <h2>The third tabs page</h2>
+                <p>This is the content of the third tabs page.</p>
+            </div>
+        </div>
+    </div>
+</div>
+{% endcapture %}
+
+{% capture tabs_box_script_example %}
+document.addEventListener('DOMContentLoaded', () => {
+    const $tabBoxes = document.querySelectorAll(".tabs-box");
+    for (const $tabBox of $tabBoxes) {
+        const $tabs = $tabBox.querySelectorAll(".tabs a");
+        for (let i = 0; i < $tabs.length; ++i) {
+            const $tab = $tabs[i];
+            $tab.addEventListener("click", (event) => {
+                event.preventDefault();
+                for (let $eventTab of $tabs) {
+                    $eventTab.classList.remove('is-active');
+                }
+                event.target.classList.add('is-active');
+                const $pages = $tabBox.querySelectorAll(".tabs-page");
+                for (let $page of $pages) {
+                    $page.classList.remove('is-active');
+                }
+                $pages[i].classList.add('is-active');
+            });
+        }
+    }
+});
+{% endcapture %}
+
+{% include elements/snippet.html content=tabs_box_example horizontal=true more=true %}
+
+<div class="content">
+  <p>Create your <code>tabs-page</code> pages in the <code>tabs-content</code> container. Use <code>is-active</code> to select the page that is currently visible.</p>
+  <p>Use javascript as shown below to switch between the pages if a tab is clicked.</p>
+</div>
+
+{% highlight javascript %}{{ tabs_box_script_example }}{% endhighlight %}
+
 {% include components/variables.html type='component' %}
+
+<script>
+{{ tabs_box_script_example }}
+</script>

sass/components/tabs.sass

@@ -1,8 +1,15 @@
 @import "../utilities/mixins"
 
-$tabs-border-bottom-color: $border !default
-$tabs-border-bottom-style: solid !default
-$tabs-border-bottom-width: 1px !default
+$tabs-border-color: $border !default
+$tabs-border-style: solid !default
+$tabs-border-width: 1px !default
+$tabs-border-bottom-color: $tabs-border-color !default
+$tabs-border-bottom-style: $tabs-border-style !default
+$tabs-border-bottom-width: $tabs-border-width !default
+$tabs-box-background-color: $scheme-main !default
+$tabs-box-border-color: $tabs-border-color !default
+$tabs-box-border-style: $tabs-border-style !default
+$tabs-box-border-width: $tabs-border-width !default
 $tabs-link-color: $text !default
 $tabs-link-hover-border-bottom-color: $text-strong !default
 $tabs-link-hover-color: $text-strong !default
@@ -174,3 +181,23 @@ $tabs-toggle-link-active-color: $link-invert !default
     font-size: $size-medium
   &.is-large
     font-size: $size-large
+
+.tabs-box
+  @extend %block
+  display: flex
+  flex-direction: column
+  .tabs
+    margin-bottom: 0
+  .tabs-content
+    border-color: $tabs-box-border-color
+    border-style: $tabs-box-border-style
+    border-width: $tabs-box-border-width
+    border-top: none
+    background-color: $tabs-box-background-color
+    padding: 0.75em
+    margin: 0
+    border-collapse: collapse
+    .tabs-page
+      display: none
+      &.is-active
+        display: block