[Feature request] Panel tabs

[noraj]

BulmaJS already supports generic tabs: https://bulmajs.tomerbe.co.uk/docs/0.10/2-core-components/tabs/

But this won't work and can't be used with panel-tabs used in panel

[VizuaaLOG]

Thank you for this @noraj will look to get something in the 0.12 release.

[noraj]

@VizuaaLOG Thanks for your awesome work 🎉

[VizuaaLOG]

Hey @noraj,

Do you have an example of the panel tabs being used outside the Bulma docs? The example provided on there are having the tabs act more like filters, this is shown by the fact by default Bulma doesn't include any tab content wrappers for each of the tabs.

Initial thoughts on this make it look like those are more filter buttons, that would not have a generic implementation, rather than being separate tabbed content.

[noraj]

I planned to use it on my website, here: https://pwn.by/noraj/publications.html

Instead of creating 2 panels I would have create 1 panel with 2 tabs.

[VizuaaLOG]

Hmmm, the content you have there would also follow the filtering style context. For example you would show a list of all of your featured articles with options at the top which via javascript would hide (via a fade out or other means) items that do not match the filter.

Given the example within the documentation theres no way to control the tab content. So to incorporate this it would need custom markup, which I try to avoid as BulmaJS should work out the box with the documentation examples.

I may have a general idea that may help. Basically providing some basic data attributes that can be used to hook up the tabs with the various elements. With some configuration to adjust the initial visibility and then clicking one of the tabs will hide any items that are not inside that filter. That wouldn't require any structural changes to the markup, just some data attributes and I believe is the intended use for the panel. It would also have a decent fallback where if the for whatever reason the JS isn't loaded, all of the items will be visible and usable, so the plugin would effectively add some extra enhancements but the panel wouldn't rely on it existing to function.

I may have explained it poorly but I will see if I can get a mockup over the next few days or weeks, might help illustrate what I believe the panel tabs component is intended for. Happy to take alternative views on it though 🙂.

edit on second thought after reading the documentation again and looking through github issues, I believe I'm looking to much into it 🙂. It should just behave like tabs, although this will need markup changes like with the main tabs, I do kinda wish Bulma accounted for it as the tab content needs a container that is shown/hidden.

[noraj]

edit on second thought after reading the documentation again and looking through github issues, I believe I'm looking to much into it 🙂. It should just behave like tabs, although this will need markup changes like with the main tabs, I do kinda wish Bulma accounted for it as the tab content needs a container that is shown/hidden.

I was going to say it: "Can't it be considered like normal tabs but inside a panel container?".

[VizuaaLOG]

0.12.0 has been launched that includes this new plugin 🎉

[noraj]

I didn't put a data-all attribute and set is-active on a data-target but by default all panel-block are displayed instead of filtering on the active data-target.

In addition to the click event listener there should be a load event listener.

BulmaJS/src/plugins/panelTabs.js

Lines 106 to 115 in 10f5c15

	* Setup the events to handle tab changing
	* @returns {void}
	*/
	setupNavEvents() {
	Bulma.each(this.navItems, (navItem) => {
	navItem.addEventListener('click', () => {
	this.setActive(navItem.getAttribute('data-target'));
	});
	});
	}

[VizuaaLOG]

Hmm thats a good spot, didn't consider con load. Would you mind opening a bug report for this please and ill take a look in the next few days 🙂

[noraj]

Here we go: #120