How I made a split button

[coderdnewbie]

This is how I made a split button, and it seems good in terms of the look. Is there anything to improve this code? How can this be made into a component, is it possible?

<FluentStack HorizontalGap="0">
   <FluentButton Appearance="Appearance.Accent" Style="border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;">Despatch</FluentButton>
   <FluentButton id="myPopoverButtonl" Style="border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;" IconEnd="@(new Icons.Regular.Size16.ChevronDown())" Appearance="Appearance.Accent" @onclick="() => _visibleL = !_visibleL" />
</FluentStack>

<FluentMenu @bind-Open="_visibleL" Style="width: 110px !important;">
   <FluentMenuItem>Item 1</FluentMenuItem>
   <FluentMenuItem>Item 2</FluentMenuItem>
   <FluentMenuItem>Item 3</FluentMenuItem>
   <FluentMenuItem>Item 4</FluentMenuItem>
   <FluentMenuItem>Item 5</FluentMenuItem>
   <FluentMenuItem>Item 6</FluentMenuItem>
</FluentMenu>

@code {
   bool _visibleL;    
}

This is what it looks like:

[dvoituron]

Hello.
What is the difference with the FluentMenuButton ?

[coderdnewbie]

The fluent menu button, wherever you press it the dropdown appears.

The split button is two buttons, when I press despatch no dropdown appears but the despatch onclick is called. When I press the down arrow, the dropdown menu shows (like the fluent menu button).

You can see an example of this behaviour on the fluentui github page where the stars and the dropdown behave like the split button. However, on the same page the code button behaves like the fluent menu button.

Another example of the split button is on this github page, the 'Close with comment' button. See screenshot below for what button I mean. I have made the code snippet above, as close to the screenshot as I could but keeping FluentUI design rules.

Does this explanation make sense to you?

[dvoituron]

In fact, this would be a good enhancement to the FluentMenuButton, with an attribute that lets you choose the "type" of menu. It would be preferable to be able to adapt the FluentMenuButton, which uses the official WebComponent, to handle the click on the button and another click on the arrow.

[coderdnewbie]

Yes, that is a good idea.

Unfortunately, I do not have time to do this as I am in the middle of automapper and bootstrap 4 hell as I try to upgrade an Dotnet 3.1 MVC site to Dotnet 8. As I am the sole developer in the company I have to dedicate all my time to this. Blazor will be the backup plan if the upgrade fails, but it will be very expensive for the company in terms of my time and the expense.