lightning:Tabset and Tab -Graying out Tabs based off a condition

Question

I am using lightning:tabSet and lightning:tab to display 3 user forms shown in the 3 tabs.

I would like the user to fill out the form on the first tab before he clicks on other tabs. How should I gray out other tabs until the first tab is clicked.

I can use "v.selectedTabId" to set a tab but without graying out this might confuse the user. I would like to gray out a tab to clearly indicate that it cannot be clickable.

Any ideas?

Answer 1

You can't do this with lightning:tab, because there is no attribute that supports this, and even the Lightning Design System has no provision for disabled tabs. Instead, you might want to dynamically create the tabs as the user progresses, so they have the ability to go back and forth as they continue filling out the data.

Answer 2

I know this is a bit late, but you can actually. Consider the snippet below.

.THIS li.slds-tabs_default__item.disabled {
    pointer-events: none;
    text-decoration: line-through;
}

The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.

Answer 3

It is a bit late but probably this will help others.

The main requirement is "I would like to gray out a tab to clearly indicate that it cannot be clickable."

What is not clear to me is if each tab should be selected in order, or everything depends only on the first.

As @sfdcfox said: no way to gray out them.

A workaround:

1. Have one boolean per tab (default FALSE): tab1OKtoContinue, tab2OKtoContinue, ...
2. If the user clicks on any other tab but tab1 and tab1OKtoContinue == FALSE. lightning:tabset.selectedTabId = tab1 (go back to tab1), and probably a Toast message "Please finish with tab1".

A second workaround:

1. The only tab is shown is tab1 and the other tabs are surrounded by <aura:if isTrue="{! v.tab1OKtoContinue}"> (each one or all, depending on if we allow the user to work with all of them after the first or not)
2. When the user finishes with tab1, set tab1OKtoContinue to TRUE. The tab depending on tab1OKtoContinue will show now.