New Feature: Tabs with Content Box and Pages.

[erbsland-dev]

This is a new feature.

See demo: https://erbsland-dev.github.io/bulma-tab-box-demo/

Introduction

In enhancing the user experience with tabbed content, this feature aims to introduce a visually appealing and functional content box situated directly beneath the tabs in Bulma. This design allows users to quickly associate content with the selected tab, as showcased in the demo. It provides a seamless integration between tabs and their respective content, offering both static and dynamic content display options.

Proposed Feature

This pull request introduces elements for content with pages located beneath the tabs created using the tabs element. The new tabs-box, tabs-content, and tabs-page elements provide a standardized framework for adding dynamically displayed tabbed content.

• These elements are optional, enabling tabs to be used without any content.
• The elements can also be used to display static content by simply having a single page marked with is-active.
• By utilizing these predefined elements:
  • The script for toggling and presenting individual pages can be standardized and simplified.
  • Themes can style the box where the tabbed content appears.

Tradeoffs

This feature introduces a few more elements and variables to the framework. Ideally, there should be a standalone solution for paged content where only one page is visible at a time. Such a concept could then be applied to future design elements, like collapsible sections and similar UI concepts.

Testing Done

• I tested the tabs box with various styles using the default colors and encountered no issues.
• I've set up a demo page: https://erbsland-dev.github.io/bulma-tab-box-demo/

Changelog Updated?

Yes.