Fluent tab with multiple tab menu customization

[jobou363]

I use the component fluenttabs with 12+ tabs and the tabs get cut at a certain width and the remaining tab get add to a custom menu but i find the UI not clear for users.

I'm wondering if there is a way to control the menu construction and set a custom menu?

Could the menu use the header content instead of the Label?

Also, when i select an item of the menu the item get selected but there is no title shown in the fluenttabs so we don't know on witch tab we are.

It could be nice to not have to repeat the title (ex: @Localization.HistoriqueRecherche) in the label and the header an have nice tab just using header.

<FluentTab Label="@Localization.HistoriqueRecherche" Id="tab-10"> <Header> <FluentIcon Value="@(new Icons.Regular.Size20.History())" Color="@Color.Success" /> <span Class="ps-1">@Localization.HistoriqueRecherche</span> </Header> </FluentTab>

If you want to reproduce similar behavior just use this code :

    `        <div class="col-3" >
                
                                   <FluentTabs @bind-ActiveTabId="@IdTab2" OnTabChange="HandleOnTabChange2" >
                   <FluentTab Label="Tab one" Icon="@(new Icons.Regular.Size24.LeafOne())" Id="tab-1">
                       Tab one content. This is for testing.
                   </FluentTab>
              
                   <FluentTab Label="Tab two" Id="tab-2" >
                       <Content>
                   
                           Tab two content. This is for testing.
                       </Content>
                   </FluentTab>
              
                   <FluentTab Label="Tab three" Id="tab-3" >
                       Content. This is for testing.
                   </FluentTab>
               
                   <FluentTab Label="Tab four" Id="tab-4" >
                       Content. This is for testing.
                   </FluentTab>
               
                   <FluentTab Label="Tab five" Id="tab-5" >
                       Content. This is for testing.
                   </FluentTab>
              
                   <FluentTab Label="Tab six" Id="tab-6" >
                       Content. This is for testing.
                   </FluentTab>
               
                   <FluentTab Label="Tab seven" Id="tab-7" >
                       Content. This is for testing.
                   </FluentTab>
              
                   <FluentTab Label="Tab eigth" Id="tab-8" >
                       Content. This is for testing.
                   </FluentTab>
               
                   <FluentTab Label="Tab nine" Id="tab-9">
                       Content. This is for testing.
                   </FluentTab>
               
                   <FluentTab Label="@Localization.HistoriqueRecherche" Id="tab-10">
                       <Header>
                           <FluentIcon Value="@(new Icons.Regular.Size20.History())" Color="@Color.Success" />
                           <span Class="ps-1">@Localization.HistoriqueRecherche</span>
                       </Header>
                   </FluentTab>
              
               </FluentTabs>
            </div>`

I'm using the following version with .net 8 and blazer web app with interactive page.

Microsoft.FluentUI.AspNetCore.Components Version="4.9.3"
Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapter" Version="4.9.3"
Microsoft.FluentUI.AspNetCore.Components.Emoji" Version="4.6.0"
Microsoft.FluentUI.AspNetCore.Components.Icons" Version="4.9.3"

[vnbaaij]

Hi,

We can't change the way this mechanism works. Unfortunately, the underlying web component does not really support any overflow, so we've had to 'hack' that in ourselves.

I don't think the way we show that there are more items is unclear but agree that the way an overflown tab is shown is not great. But that is again because of the web component.

I think you don't need to use the Header parameter. You can specify the Icon parameter on FluentTab directly and then you only use that and Label