Dropdown actions

[Seb33300]

Short description of what this feature will allow to do: Is there any way to create dropdown actions buttons? Maybe easier to implement now with the actions related components?

Example of how to use this feature For example, on my entity detail page, I would like to add an "Invoice" dropdown button, and when we click on it, the following actions will be available:

• Download
• Resend by email

[pfpro]

there is a new (ea) twig component ActionMenu you might want to use:

https://github.com/EasyCorp/EasyAdminBundle/blob/4.x/templates/components/ActionMenu.html.twig https://github.com/EasyCorp/EasyAdminBundle/blob/4.x/templates/components/ActionMenu/ActionList.html.twig https://github.com/EasyCorp/EasyAdminBundle/blob/4.x/templates/components/ActionMenu/ActionList/Item.html.twig ... https://github.com/EasyCorp/EasyAdminBundle/blob/4.x/templates/components/Icon.html.twig

i.e. in tihs context: https://symfony.com/bundles/EasyAdminBundle/current/actions.html#integrating-symfony-actions

{% block page_actions %}
<twig:ea:ActionMenu class="dropdown-actions">
    <twig:ea:ActionMenu:Button withoutDropdownToggleMarker>
        <twig:ea:Icon name="internal:dots-horizontal" />
    </twig:ea:ActionMenu:Button>

    <twig:ea:ActionMenu:Overlay>
        <twig:ea:ActionMenu:ActionList>

            {%
                set actions = [
                    {
                        cssClass: 'action-edit',
                        icon: 'internal:edit',
                        linkUrl: 'http://www.google.com',
                        label: 'Edit',
                        htmlAttributes: {
                            'data-action': 'edit',
                        },
                    },
                    {
                        cssClass: 'action-delete',
                        icon: 'internal:delete',
                        linkUrl: 'http://www.google.com',
                        label: 'Delete',
                        htmlAttributes: {
                            'data-action': 'delete',
                        },
                    },
                ]
            %}

            {% for action in actions %}
                <twig:ea:ActionMenu:ActionList:Item
                    class="{{ action.cssClass }}" url="{{ action.linkUrl }}"
                    icon="{{ action.icon }}" icon:class="action-icon"
                    htmlAttributes="{{ action.htmlAttributes }}"
                    label="{{ action.label|trans }}" label:class="action-label" renderLabelRaw />
            {% endfor %}

        </twig:ea:ActionMenu:ActionList>
    </twig:ea:ActionMenu:Overlay>
</twig:ea:ActionMenu>
{% endblock page_actions %}

or detached from the twig component, only by using the bootstrap5 included in easyadmin

    <span class="btn-group mx-2">
        <a href="{{ ea_url().setRoute('backend_data_history_created') }}" class="btn btn-secondary">{{ 'l.history'|trans }}</a>
        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="{{ ea_url().setRoute('backend_data_history_created') }}">{{ 'l.created'|trans }}</a></li>
            <li><a class="dropdown-item" href="{{ ea_url().setRoute('backend_data_history_updated') }}">{{ 'l.updated'|trans }}</a></li>
            <li><a class="dropdown-item" href="{{ ea_url().setRoute('backend_data_history_deleted') }}">{{ 'l.deleted'|trans }}</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="{{ ea_url().setRoute('backend_data_history_marked') }}">{{ 'l.status.marked'|trans }}</a></li>
        </ul>
    </span>

Important note: Well, in regular ea cruds and the following context, its a different situation where u might need a different approach: https://symfony.com/bundles/EasyAdminBundle/current/actions.html#adding-custom-actions