| layout | group | subgroup | title | landing-page | menu_title | menu_order | version | github_link | redirect_from | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
default |
UI_Components_guide |
Overview of UI components |
UI Components |
Overview of UI components |
1 |
2.1 |
ui_comp_guide/bk-ui_comps.md |
|
This document started as a week-long doc sprint in Kyiv{:target="_blank"} with core Magento developers writing documentation about the UI Components. We will add additional topics to this book as we continue our work.
In the meantime, until we have completed this new book, you can also still access the former (v2.0) UI Components docs.
Magento UI components are designed for simple and flexible user interface (UI) rendering. They allow you to configure the page manipulating the UI components.
Magento UI components are implemented as a standard module and can be found under Magento\UI namespace.
Components are responsible for rendering result page fragments and providing/supporting further interactions of JavaScript components and server.
To use UI components in your custom module, you need to add a dependency for the Magento_UI module in your component's composer.json file.
In Magento 2 there are basic and secondary UI components.
Basic components are:
- Listing component
- Form component
Secondary components are located in the basic components.
All components can be configured both for Admin and storefront.
You need to configure styles manually for components on storefront.
Using UI component is as simple as adding the following code to the appropriate layout section:
<uiСomponent name="some_ui_component_instance_name"/>
All UI components have base declaration in Magento/Ui/view/base/ui_component/etc/definition.xml.
UI components configuration reader searches through all active modules and read files:
<module root dir>/view/<area>/ui_component/etc/definition.xml
And concrete instances of the components each in separate XML configuration file:
<module root dir>/view/<area>/ui_component/<component_instance_name>.xml
Extension developers cannot introduce new components but can customize existing ones.
XSD file contains rules and limitations shared between all components (both definitions and instance configurations):
<your module root dir>/Magento/Ui/etc/ui_definition.xsd
It is possible to create custom component by setting class, component and template parameters of the Container UI component.