Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Feature: Tabs with Content Box and Pages. #3689

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

erbsland-dev
Copy link

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

Changelog Updated?

Yes.

- Adding the container `tabs-box` that encloses the tabs and pages.
- Adding `tabs-content` to define the area below the boxes framing the pages.
- Adding `tabs-page` to define individual pages.
- Corrections for `tabs` margin inside the box.
- Display/hide behaviour using `is-active` on `tabs-page`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant