! Magento 2 -. M2 , 2 , β , UI (Ui Components). , , , . , . M2 Ui Components, . , Ui Components , . , , , . !
, Ui Components. , , , , , , . , , .
UiComponents , ( ) , .
(M2 2.4.2) M2 , , 2 Ui Components. M2 Ui Components , , Magento Coding Standards, .
, , , , .
, 2.
, ( ) .
, , , Ui .
JS . , , :
<script type="text/x-magento-init">
{"*": {"Magento_Ui/js/core/app": {...}}}
</script>
( ).
JSON , :
{
...
"components": {
"white_rabbit_listing": {
"children": {
"white_rabbit_listing": {
"children": {
"listing_top": {
"type": "container",
"name": "listing_top",
"children": {
"bookmarks": {...},
"columns_controls": {...},
"listing_filters": {...},
"listing_massaction": {...},
"listing_paging": {...}
β¦
}
, Ui : white_rabbit_listing Listing, bookmarks β c, Bookmarks .. , ., , HTML , , , knockout.js !
, , ( , , , .)
. , Ui .
, , . : Listing Component Form Component. , , - . .
, . , (, β Listing Form ( ) , ). ( , - M2), , , CSS.
Listing Component
Listing Component c (!)
ActionsColumn β : , .
Bookmarks β
Button β
Column β
Columns β
ColumnsControls β
ColumnsEditor β ,
ColumnsEditorRecord β ColumnsEditor, , , , ColumnsEditor Select Multiselect
ColumnsEditorView β ColumnsEditor,
ColumnsEditingBulk β ColumnsEditor
ColumnsEditingClient β ColumnsEditor
ColumnsResize β
DateColumn β
DragAndDrop β
Expandable β , ; show more. Tooltip c
ExportButton β
Filters β
FiltersChips β Filters
GridDataProvider β data provider
ImagePreview β ThumbnailColumn
InsertListing β Listing Ui
LinkColumn β ,
Masonry β Listing, ( )
MassActions β
MultiselectColumn β , MassActions
OnOffColumn β On/Off
Paging β
Range β ββ ββ. . Input, (, Date)
Search β
SelectColumn β
Sizes β ,
Sortby β ASC DESC
ThumbnailColumn β
TimelineColumns β . Magento 2 Commerce Edition
ListingToolbar β , : , .
TreeMassActions β MassActions,
UI-select β -, ( )
Form Component
Form Component (!)
ActionDelete β DynamicRows
Checkbox β
CheckboxToggleNotice β ,
Checkboxset β Checkbox
ColorPicker β
Container β
DataSource β
Date β
DynamicRows β , , . Ui
DynamicRowsDragAndDrop β DynamicRows
DynamicRowsRecord β DynamicRows
Email β Input email
FieldSet β
File β Input file
FileUploader β ( JQuery JQuery-File-Upload)
FormDataProvider β ,
Hidden β Input hidden
HtmlContent β , HTML
Input β , Input
InsertForm β Ui
Modal β ,
Multiline β , ( M2 )
Multiselect β , ctrl
Nav β Tab . Tab
Radioset β Checkboxset
Select β Select
Tab β Tab- Nav
Text β
Textarea β , textarea
UrlInput β urlInput
Wysiwyg β , TinyMCE textarea
, , 2. , , - . Decorator Adapter.
. , :
XML-.
JS , UIElement, UIClass UICollection
( ), .
XML , . Input Form:
<field name="id" formElement="input">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">white_rabbit</item>
</item>
</argument>
<settings>
<dataType>text</dataType>
<dataScope>id</dataScope>
</settings>
</field>
XML , ( ).
JS , . - , . :
HTML knockout.js.
Checkbox:
<div class="admin__field admin__field-option">
<input type="checkbox"
class="admin__control-checkbox"
simple-checked="checked"
ko-disabled="disabled"
ko-focused="focused"
ko-value="value"
attr="id: uid, name: inputName"/>
<label class="admin__field-label" text="description" attr="for: uid"/>
</div>
, (XML ), , ( ), , . , .
Ui Components. , , , , M2.=
, , XML .
. . !