Magento 2 UI Components. Part 1: general arrangement

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





. , :





  1. XML-.





  2. JS ,   UIElement, UIClass UICollection





  3. ( ), .





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 .





. . !








All Articles