feat(Dropdown): when `ShowSplit="true"`, expose first(left) button click event and `IsAsync` attribute of it.

[ice6]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

now, when ShowSplit="true", as a developer, I can not add @OnClick to the first button.

Describe the solution you'd like

just like Github's top copilot component. It is two button: Chat with copilot and Open copilot, each one has its own click event.

Additional context

No response

[bb-auto]

@ice6 Thank you for contacting us. We will give feedback later.

[ice6]

I notice that there is a ButtonTemplate of the this component, if it can set as whole button, not just the innerHtml of the button, it will provide more convenience.

see this code:

<Dropdown TValue="string" ShowSplit="true" Size="Size.Medium"
          Color="Color.Secondary" OnClick="ShowChatDrawer" IsAsync="true">
    <ButtonTemplate Context="_">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-robot" viewBox="0 0 16 16">
            <path d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135" />
            <path d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5" />
        </svg>
    </ButtonTemplate>
    <ItemsTemplate>
        <div class="dropdown-item">
            <NavLink href="https://chat.x.com" target="_blank">全新对话</NavLink>
        </div>
        <Divider></Divider>

        <div class="dropdown-item">
            <NavLink href="/chat/project">聊项目</NavLink>
        </div>
        <div class="dropdown-item">
            <NavLink href="/chat/customer">聊客户</NavLink>
        </div>
        <div class="dropdown-item">
            <NavLink href="/chat/solution">聊方案</NavLink>
        </div>
    </ItemsTemplate>
</Dropdown>

the IsAsync code will not work. I have change to use Icon attribute.

Just an advice, change to use Icon is totally ok for me.