Skip to content

Latest commit

 

History

History
70 lines (44 loc) · 2.82 KB

ui-component.md

File metadata and controls

70 lines (44 loc) · 2.82 KB
layout group subgroup title landing-page menu_title menu_node version github_link redirect_from
default
UI Library
A_Overview
Overview
UI Components
Overview
parent
2.0
ui-components/ui-component.md
/guides/v2.0/ui-library/ui-library-component.html
/guides/v2.0/ui_comp_guide/bk-ui_comps.html

Overview of UI components

Magento UI components are designed for simple and flexible 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.

General structure

In Magento 2 there are basic and secondary UI components.

Basic components are:

  • Listing component
  • Form component

Secondary components are extensions of 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 in layout file

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:

<your module root dir>/<vendor>/<module>/view/<area>/ui_component/etc/definition.xml

And concrete instances of the components each in separate XML configuration file:

<your module root dir>/<vendor>/<module>/view/<area>/ui_component/<component_instance_name>.xml

Configuration

Extension developers cannot introduce new components but can customize existing ones locally.

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 component.

You can configure existing component and all filter types in the following ways:

  • Globally: using any module's view/*/ui_component/etc/definition.xml file. All settings declared in this file will be applied to all component's instances
  • Locally: using concrete component instance configuration, such as <your module root dir>/Magento/Cms/view/adminhtml/ui_component/cms_page_listing.xml