Twig Components =============== EasyAdmin uses `Twig Components`_ to render many parts of its interface, such as buttons, badges, icons, modal windows and dropdown menus. These components are registered under the ``ea:`` prefix and you can also use them in your own templates (e.g. when overriding backend templates or creating custom admin pages). This appendix is a practical guide to those components. It doesn't describe every option of every component; instead, it shows how to accomplish the most common tasks with each of them. All components share the same behavior for passing options ("props"): they are passed as regular HTML attributes, and boolean props are enabled by adding the attribute name without any value: .. code-block:: twig Some important message. In addition, any other attribute added to a component (``class``, ``id``, ``data-*``, etc.) is merged into the attributes of its root HTML element: .. code-block:: twig Published ActionMenu ---------- Renders a dropdown menu of related actions, like the one that displays the entity actions on the index page. Build the menu by combining its sub-components: a ``Button`` that toggles the dropdown, an ``Overlay`` that wraps the menu contents, and an ``ActionList`` with the menu items: .. code-block:: twig Items render a link and a ``GET`` request by default. For actions that modify data (like the "Delete" item above), add the ``renderAsForm`` prop to submit the item URL with a ``POST`` request instead. Use the ``Header`` sub-component to add titles to groups of items, and the ``Content`` sub-component to insert any custom markup in the menu: .. code-block:: twig Reports are rebuilt every early morning. Selectable Items ~~~~~~~~~~~~~~~~ Menus can also include selectable options, rendered with a trailing checkmark. Wrap the items with ``RadioList`` (options are mutually exclusive) or ``CheckboxList`` (multiple options can be selected at the same time) and pass the ``selected`` prop to each item: .. code-block:: twig .. note:: These components only render the selection state; updating it when the user clicks on an item is up to your own server-side or JavaScript code. Alert ----- Highlights important messages that require the user's attention. EasyAdmin uses it, for example, to render flash messages: .. code-block:: twig Your changes have been saved. Your password is about to expire. The ``variant`` prop accepts the usual Bootstrap values (``primary``, ``success``, ``warning``, ``danger``, etc.; default: ``info``). Add an optional ``icon``, a ``title`` and a dismiss button as follows: .. code-block:: twig The server is running out of disk space. If the alert requires the user to do something, add buttons or links in the ``actions`` block: .. code-block:: twig A new EasyAdmin version has been released. Read the changelog Badge ----- Renders a small colored label, commonly used for statuses, counts and tags: .. code-block:: twig Draft Published The ``variant`` prop accepts the usual Bootstrap values (``primary``, ``success``, ``danger``, etc.; default: ``secondary``) plus an ``outline`` value that renders a badge with a border and no background. Add optional leading and/or trailing icons with the ``icon`` and ``endIcon`` props, and create pill-shaped badges with ``radius="full"``: .. code-block:: twig Out of stock See all 12 Button ------ Renders a button with an optional icon, in the sizes and variants that you'd expect from Bootstrap-like buttons: .. code-block:: twig Save draft Sign in Delete Buttons render a ``