{"id":320901,"date":"2021-04-05T15:01:17","date_gmt":"2021-04-05T15:01:17","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=320901"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=320901","title":{"rendered":"Magento 2 UI Components. \u0427\u0430\u0441\u0442\u044c 1: \u043e\u0431\u0449\u0435\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e"},"content":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/01e\/d07\/409\/01ed07409c452eec902eea82ddd106d8.png\" width=\"1600\" height=\"578\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041f\u0430\u0432\u0435\u043b \u0438 \u044f Magento 2 \u0431\u044d\u043a\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a. \u0415\u0441\u043b\u0438 \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0443 \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0443\u044e\u0449\u0435\u0433\u043e M2 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u043a\u0430\u043a\u0438\u0435 \u0430\u0441\u043f\u0435\u043a\u0442\u044b \u041c2 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0441\u0438\u043b\u044c\u043d\u0443\u044e \u0431\u043e\u043b\u044c, \u2014 \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043e\u0442\u0440\u044b\u0432\u043e\u043c \u0431\u0443\u0434\u0443\u0442 \u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c UI \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b (Ui Components). \u042d\u0442\u043e \u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439, \u043a\u043e\u0433\u0434\u0430 \u0438\u0445 \u0432\u0441\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442, \u043d\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u0438\u0435 \u0437\u043d\u0430\u044e\u0442, \u043a\u0430\u043a \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043e\u043d\u0438 \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u0438 \u043a\u0430\u043a \u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442. \u0421\u043b\u043e\u0436\u0438\u0432\u0448\u0430\u044f\u0441\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u043e\u0442\u0447\u0430\u0441\u0442\u0438 \u0432\u044b\u0437\u0432\u0430\u043d\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043a\u0443\u0434\u043d\u044b\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u043f\u0440\u0438\u043d\u044f\u0442\u044c \u0432\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0435\u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u044c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u043d\u0430\u0447\u043d\u0435\u043c \u0446\u0438\u043a\u043b \u0441\u0442\u0430\u0442\u0435\u0439 \u043f\u0440\u043e M2 Ui Components, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u0434\u0430\u043d\u043d\u0443\u044e \u0442\u0435\u043c\u0443. \u0425\u043e\u0442\u044f \u043d\u0430 \u0445\u0430\u0431\u0440\u0435 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043f\u0440\u0435\u0432\u043e\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0441\u0442\u0430\u0442\u044c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u044e\u0442 \u0442\u0435\u043c\u0443 Ui Components \u0441 \u0442\u043e\u0433\u043e \u0438\u043b\u0438 \u0438\u043d\u043e\u0433\u043e \u0440\u0430\u043a\u0443\u0440\u0441\u0430, \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e \u0435\u0435 \u043d\u0430 \u0425\u0430\u0431\u0440\u0435 \u043d\u0435 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u043b \u0435\u0449\u0435 \u043d\u0438\u043a\u0442\u043e. \u0412 \u043e\u0431\u0449\u0435\u043c, \u0438\u0434\u0438 \u0437\u0430 \u043c\u043d\u043e\u0439 \u041d\u0435\u043e, \u0438 \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u0442\u0435\u0431\u0435, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0433\u043b\u0443\u0431\u043e\u043a\u0430 \u043a\u0440\u043e\u043b\u0438\u0447\u044c\u044f \u043d\u043e\u0440\u0430. \u041f\u043e\u0433\u043d\u0430\u043b\u0438!<\/p>\n<h3>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Ui Components. \u0415\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u0432 \u043e\u0431\u0449\u0435\u043c, \u0442\u043e \u044d\u0442\u043e \u043d\u0430\u0431\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0445 \u043d\u043e\u0432\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u0443\u043d\u0438\u0432\u0435\u0441\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0445 \u043b\u043e\u0433\u0438\u043a\u0443, \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434, \u043e\u0431\u043b\u0430\u0434\u0430\u044e\u0449\u0438\u0445 \u0448\u0438\u0440\u043e\u043a\u0438\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u0437\u0432\u0430\u043d\u044b \u0443\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u0438 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u043a \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0442\u0430\u043a \u0438 \u0438\u0445 \u043d\u0430\u0431\u043e\u0440\u043e\u0432.<\/p>\n<p>UiComponents \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0438\u0441\u044c, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c (\u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u043b\u0438 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e) \u043f\u0440\u0435\u0436\u043d\u0438\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0431\u043b\u043e\u043a\u0430\u0445 \u0438 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u0432 \u043b\u0435\u0439\u0430\u0443\u0442\u0430\u0445.<\/p>\n<p>\u041d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 (M2 \u0432\u0435\u0440\u0441\u0438\u0438 2.4.2) \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u043e \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 M2 \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u0441\u0435 \u0435\u0449\u0435 \u043d\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043e, \u043e\u0434\u043d\u0430\u043a\u043e \u0440\u0430\u0431\u043e\u0442\u0430 \u0438\u0434\u0435\u0442, \u0438 \u043c\u043d\u043e\u0433\u0438\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u044b \u0430\u0434\u043c\u0438\u043d\u043a\u0438 \u041c2 \u0443\u0436\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Ui Components. \u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f M2 \u043f\u0440\u044f\u043c\u043e <a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/bk-ui_comps.html\"><u>\u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442<\/u><\/a> \u043d\u0430 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Ui Components \u0432\u043c\u0435\u0441\u0442\u043e \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u044e\u0442 <a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/coding-standards\/bk-coding-standards.html\"><u>Magento Coding Standards<\/u><\/a>, \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u043e\u0432\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439.&nbsp;<\/p>\n<p>\u041f\u043e \u0437\u0430\u0434\u0443\u043c\u043a\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u0441\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432, \u043e\u0434\u043d\u0430\u043a\u043e \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u044d\u0442\u043e \u043b\u0438\u0448\u044c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0441\u043f\u043e\u0441\u043e\u0431, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u0432\u0441\u044e \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u043a\u043e\u0434\u043e\u0432\u0443\u044e \u0431\u0430\u0437\u0443 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0439, \u0438 \u0434\u043e \u0443\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0435\u0449\u0435 \u0434\u0430\u043b\u0435\u043a\u043e.<\/p>\n<p>\u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0432 \u0447\u0438\u0441\u043b\u043e \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u041c2.<\/p>\n<p>\u041d\u0430\u0431\u043e\u0440 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 <strong>\u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d<\/strong> \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043c\u0438 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438, \u043e\u0434\u043d\u0430\u043a\u043e \u0438\u043c\u0435\u044e\u0449\u0438\u0435\u0441\u044f \u0432 \u043d\u0430\u0431\u043e\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b (\u043e \u043d\u0438\u0445 \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043d\u0438\u0436\u0435) \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043f\u043e\u0434 \u043d\u0443\u0436\u0434\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430.<\/p>\n<h3>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f<\/h3>\n<p>\u0427\u0442\u043e \u0436, \u0441 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c, \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432 \u0441\u0430\u043c\u044b\u0445 \u043e\u0431\u0449\u0438\u0445 \u0447\u0435\u0440\u0442\u0430\u0445, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 Ui \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<p>\u041f\u043e \u0441\u0432\u043e\u0435\u0439 \u043f\u0440\u0438\u0440\u043e\u0434\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u043e\u0441\u043e\u0431\u043b\u0435\u043d\u043d\u044b\u043c JS \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u043c. \u0415\u0441\u043b\u0438 \u0437\u0430\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043c\u044b \u043d\u0430\u0439\u0434\u0435\u043c \u0442\u0430\u043c \u0432\u044b\u0437\u043e\u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u0438\u0434\u0430:<\/p>\n<pre><code class=\"xml\">&lt;script type=\"text\/x-magento-init\"&gt; &nbsp;&nbsp;&nbsp;&nbsp;{\"*\": {\"Magento_Ui\/js\/core\/app\": {...}}} &lt;\/script&gt;<\/code><\/pre>\n<p>\u0422\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435).<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c JSON \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443:<\/p>\n<pre><code class=\"json\">{ ... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"components\": { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"white_rabbit_listing\": { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"children\": { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"white_rabbit_listing\": { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"children\": { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"listing_top\": { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"type\": \"container\", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"name\": \"listing_top\", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"children\": { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"bookmarks\": {...}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"columns_controls\": {...}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"listing_filters\": {...}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"listing_massaction\": {...}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"listing_paging\": {...} \u2026 }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c Ui \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c: white_rabbit_listing \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Listing, bookmarks \u2014 c\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Bookmarks \u0438 \u0442.\u0434. \u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u044d\u0442\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u0433\u0438\u0431\u043a\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0438 \u043f\u0440., \u043f\u0440\u0438\u0447\u0435\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043b\u0438\u0448\u0435\u043d\u044b \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 HTML \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u043c \u0432\u0438\u0434\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0430\u043b\u0435\u0442\u0443, \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f knockout.js \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438!<\/p>\n<p>\u0421\u0442\u043e\u0438\u0442 \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u0433\u0434\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u0435\u0434\u043a\u043e\u0432 \u0438 \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u0430\u044e\u0442 \u0441\u0432\u043e\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 (\u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0431\u044b\u043b \u043f\u043e\u0437\u0430\u0438\u043c\u0441\u0442\u0432\u043e\u0432\u0430\u043d \u0438\u0437 \u041e\u041e\u041f, \u0438, \u043a\u0430\u043a \u043c\u044b \u0434\u0430\u043b\u0435\u0435 \u0443\u0432\u0438\u0434\u0438\u043c, \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0438 \u043a\u043e\u0440\u043d\u0438 \u0432 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435 \u0441\u0430\u043c\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.)<\/p>\n<h3>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h3>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0431\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0435 \u043c\u043e\u0436\u0435\u043c, \u0437\u043d\u0430\u0442\u044c \u043e \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 Ui \u0432\u0434\u0432\u043e\u0439\u043d\u0435 \u0432\u0430\u0436\u043d\u043e.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u043a\u0430\u043a \u043c\u044b \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u0440\u0430\u043d\u0435\u0435, \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443. \u041d\u0430 \u0432\u0435\u0440\u0448\u0438\u043d\u0435 \u044d\u0442\u043e\u0439 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430: Listing Component \u0438 Form Component. \u041a\u0430\u043a \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e \u0434\u043e\u0433\u0430\u0434\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439, \u043f\u0435\u0440\u0432\u044b\u0439 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u043f\u0438\u0441\u043a\u0438, \u0432\u0442\u043e\u0440\u043e\u0439 &#8212; \u0437\u0430 \u0444\u043e\u0440\u043c\u044b. \u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c\u0438 \u043f\u043e \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044e \u043a \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c \u0434\u0432\u0443\u043c.&nbsp;<\/p>\n<p>\u041f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0438\u043c \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0434\u043b\u044f \u0434\u0432\u0443\u0445 \u0431\u0430\u0437\u043e\u0432\u044b\u0445. \u0420\u044f\u0434\u043e\u043c \u044f \u0431\u0443\u0434\u0443 \u0434\u0430\u0432\u0430\u0442\u044c \u043a\u0440\u0430\u0442\u043a\u0438\u0435 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 (\u043a\u0441\u0442\u0430\u0442\u0438, \u0431\u0443\u0434\u044c\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u044b \u2014 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Listing \u0438 Form \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 (\u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438) \u0434\u0430\u043d\u044b <strong>\u043d\u0435\u043f\u043e\u043b\u043d\u044b\u0435<\/strong> \u0441\u043f\u0438\u0441\u043a\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u0440\u0438\u0447\u0435\u043c \u043f\u0440\u043e\u043f\u0443\u0449\u0435\u043d\u0430 \u0447\u0443\u0442\u044c \u043b\u0438 \u043d\u0435 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430). \u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u044f \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044e \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u0432 \u0442\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043c\u0435\u0435\u0442 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u0432 \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435 M2), \u043e\u0434\u043d\u0430\u043a\u043e \u0441\u0442\u043e\u0438\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u0441\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0430\u0434\u043c\u0438\u043d\u043a\u0438, \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u044d\u043d\u0434\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0443\u0436\u043d\u043e \u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 CSS.<\/p>\n<h4>Listing Component<\/h4>\n<details class=\"spoiler\">\n<summary>\u041d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u0438 Listing Component c \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f\u043c\u0438 \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c  (\u0442\u0440\u0430\u0444\u0438\u043a!)<\/summary>\n<div class=\"spoiler__content\">\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-actionscolumn.html\"><strong><u>ActionsColumn<\/u><\/strong><\/a> \u2014 \u043a\u043e\u043b\u043e\u043d\u043a\u0430 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u043d\u0430\u0434 \u0441\u0442\u0440\u043e\u043a\u043e\u0439: \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0438 \u043f\u0440.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/75c\/e2b\/9b3\/75ce2b9b32032408cf6f4f61057a2af1.png\" width=\"127\" height=\"194\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-bookmarks.html\"><strong><u>Bookmarks<\/u><\/strong><\/a> \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0433\u0440\u0438\u0434\u0430 \u0438 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u043d\u0435\u043c\u0443<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/302\/ebb\/306\/302ebb306a9b721569d4dbd9fdff55e6.png\" width=\"252\" height=\"161\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-button.html\"><strong><u>Button<\/u><\/strong><\/a> \u2014 \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f59\/e16\/172\/f59e16172f20b74915dbfc6a1a299152.png\" width=\"600\" height=\"94\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-column.html\"><strong><u>Column<\/u><\/strong><\/a> \u2014 \u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0438<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cf1\/536\/d0c\/cf1536d0ccc332471c0c6c459db702da.png\" width=\"250\" height=\"266\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-columns.html\"><strong><u>Columns<\/u><\/strong><\/a> \u2014 \u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u0433\u0440\u0438\u0434\u0430<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e8a\/184\/774\/e8a184774335ce98157121e4dd40d590.png\" width=\"1078\" height=\"366\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-columnscontrols.html\"><strong><u>ColumnsControls<\/u><\/strong><\/a> \u2014 \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u044b\u0445 \u0432 \u0433\u0440\u0438\u0434\u0435 \u043a\u043e\u043b\u043e\u043d\u043e\u043a<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/621\/77a\/ab9\/62177aab9421bc13a5b69dc7db79a7f5.png\" width=\"565\" height=\"271\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-columns-editor.html\"><strong><u>ColumnsEditor<\/u><\/strong><\/a> \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u044f\u043c\u043e \u0432 \u0433\u0440\u0438\u0434\u0435, \u043d\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044f \u043d\u0430 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/307\/690\/3d5\/3076903d56d49ee413fba4e36b3d98a1.png\" width=\"1600\" height=\"188\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-columns-editor-record.html\"><strong><u>ColumnsEditorRecord<\/u><\/strong><\/a>&nbsp;\u2014 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 ColumnsEditor, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430, \u043d\u0443\u0436\u043d\u043e, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0434\u043b\u044f ColumnsEditor \u0441 \u043f\u043e\u043b\u0435\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0438\u043f\u0430 Select \u0438\u043b\u0438 Multiselect<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/aae\/29b\/b2d\/aae29bb2d42d4562c6007f3eb5dc0234.png\" width=\"1600\" height=\"333\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-columns-editor-view.html\"><strong><u>ColumnsEditorView<\/u><\/strong><\/a> \u2014 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 ColumnsEditor, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/caf\/51d\/0b4\/caf51d0b43f71b04f8542b93b21f30ae.png\" width=\"1600\" height=\"223\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-columns-editing-bulk.html\"><strong><u>ColumnsEditingBulk<\/u><\/strong><\/a> \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043f\u0430\u043a\u0435\u0442\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u043b\u044f ColumnsEditor<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/788\/317\/329\/7883173294afb16ecc84be04e06d9f43.png\" width=\"1600\" height=\"348\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-columns-editing-client.html\"><strong><u>ColumnsEditingClient<\/u><\/strong><\/a> \u2014 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 ColumnsEditor \u0437\u0430\u043f\u0438\u0441\u0438<\/p>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-columns-resize.html\"><strong><u>ColumnsResize<\/u><\/strong><\/a> \u2014 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0448\u0438\u0440\u0438\u043d\u044b \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0432 \u0433\u0440\u0438\u0434\u0435<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6bc\/c45\/1ad\/6bcc451adc1ea9e9d404e18ed876ae8a.gif\" width=\"320\" height=\"134\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-datecolumn.html\"><strong><u>DateColumn<\/u><\/strong><\/a> \u2014 \u041a\u043e\u043b\u043e\u043d\u043a\u0430 \u0441 \u0434\u0430\u0442\u043e\u0439<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/090\/a6c\/c07\/090a6cc07f7993d2237a01bb4fb1b472.png\" width=\"500\" height=\"171\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-draganddrop.html\"><strong><u>DragAndDrop<\/u><\/strong><\/a> \u2014 \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0443 \u0441\u0442\u0440\u043e\u043a \u0432 \u0433\u0440\u0438\u0434\u0435 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0435\u043c<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/330\/df8\/b91\/330df8b91a387b102b212fa710b1f52f.png\" width=\"452\" height=\"336\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-expandable-column.html\"><strong><u>Expandable<\/u><\/strong><\/a> \u2014 \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0432 \u044f\u0447\u0435\u0439\u043a\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u043a\u0430\u043a\u0438\u043c \u043b\u0438\u0431\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u043c; \u0447\u0430\u0441\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0441\u043a\u0440\u044b\u0442\u0430 \u043f\u043e\u0434 \u0441\u0441\u044b\u043b\u043a\u043e\u0439 show more. \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0443 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Tooltip c \u043f\u043e\u043b\u043d\u044b\u043c \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8d7\/9f4\/d00\/8d79f4d008c641e7edc37f4ba4d49cc2.png\" width=\"808\" height=\"502\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-exportbutton.html\"><strong><u>ExportButton<\/u><\/strong><\/a> \u2014 \u041a\u043d\u043e\u043f\u043a\u0430 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u0433\u0440\u0438\u0434\u0430 \u0432 \u0444\u0430\u0439\u043b<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fe9\/4dc\/0a5\/fe94dc0a59e7fc70cdb002aeea61e937.png\" width=\"285\" height=\"260\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-filters.html\"><strong><u>Filters<\/u><\/strong><\/a> \u2014 \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u0433\u0440\u0438\u0434\u0430<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/917\/89b\/773\/91789b7736fe7020bb63f69d89edc175.png\" width=\"1248\" height=\"468\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-filterschips.html\"><strong><u>FiltersChips<\/u><\/strong><\/a> \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Filters<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/bdf\/578\/dff\/bdf578dff3157581b8598d83d2533930.png\" width=\"1600\" height=\"78\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-grid-data-provider.html\"><strong><u>GridDataProvider<\/u><\/strong><\/a> \u2014 data provider \u0434\u043b\u044f \u0433\u0440\u0438\u0434\u0430<\/p>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-image-preview.html\"><strong><u>ImagePreview<\/u><\/strong><\/a> \u2014 \u041f\u0440\u0435\u0432\u044c\u044e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 ThumbnailColumn<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7e1\/43d\/9cf\/7e143d9cf5091f72cacc6d03d5804a06.png\" width=\"946\" height=\"497\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-insertlisting.html\"><strong><u>InsertListing<\/u><\/strong><\/a> \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0442\u0430\u043b\u044f\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Listing \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 Ui \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/p>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-linkcolumn.html\"><strong><u>LinkColumn<\/u><\/strong><\/a> \u2014 \u041a\u043e\u043b\u043e\u043d\u043a\u0430 \u0441 \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c7f\/799\/0e4\/c7f7990e438f7de0ce870d4f2ab9baaf.png\" width=\"1556\" height=\"282\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-masonry.html\"><strong><u>Masonry<\/u><\/strong><\/a> \u2014 \u043e\u0447\u0435\u043d\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a Listing, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0432\u0438\u0434\u0435 \u043f\u043b\u0438\u0442\u043a\u0438 (\u0438\u043b\u0438 \u043a\u0430\u043c\u0435\u043d\u043d\u043e\u0439 \u043a\u043b\u0430\u0434\u043a\u0438)<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f95\/001\/0f8\/f950010f82611a7f52ba219d3445a43f.png\" width=\"1600\" height=\"914\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-massactions.html\"><strong><u>MassActions<\/u><\/strong><\/a> \u2014 \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043d\u0430\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0433\u0440\u0438\u0434\u0430<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0e8\/82f\/5de\/0e882f5dee5d3b9310cca1fb39bbb4a6.png\" width=\"482\" height=\"63\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-multiselectcolumn.html\"><strong><u>MultiselectColumn<\/u><\/strong><\/a> \u2014 \u041a\u043e\u043b\u043e\u043d\u043a\u0430 \u0441 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0430\u043c\u0438, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0430\u044f \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 MassActions<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1ea\/382\/4fa\/1ea3824faad7e8e11e764bbe5efe1962.png\" width=\"214\" height=\"422\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-onoffcolumn.html\"><strong><u>OnOffColumn<\/u><\/strong><\/a> \u2014 \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c On\/Off \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044c \u0432 \u044f\u0447\u0435\u0439\u043a\u0435<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6ff\/c41\/3dd\/6ffc413ddc302ef096bfccab7394a513.png\" width=\"250\" height=\"258\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-paging.html\"><strong><u>Paging<\/u><\/strong><\/a> \u2014 \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438 \u0433\u0440\u0438\u0434\u0430<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b96\/4e8\/a96\/b964e8a96af10d14847727e7ed314da7.png\" width=\"848\" height=\"112\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-range.html\"><strong><u>Range<\/u><\/strong><\/a> \u2014 \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442&nbsp; \u043f\u043e\u043b\u044f\u043c\u0438 \u0442\u0438\u043f\u0430 \u201c\u043e\u0442\u201d \u0438 \u201c\u0434\u043e\u201d. \u0412 \u0433\u0440\u0438\u0434\u0430\u0445 \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043e\u0434\u043d\u043e \u0438\u0437 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u0433\u0440\u0438\u0434\u0430. \u041c\u043e\u0436\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043a\u0430\u043a \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043f\u043e\u043b\u044f \u0442\u0438\u043f\u0430 Input, \u0442\u0430\u043a \u0438 \u0438\u0445 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u043e\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Date)<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/054\/f65\/b50\/054f65b50b2f588266002e0c1eb2acef.png\" width=\"340\" height=\"143\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-search.html\"><strong><u>Search<\/u><\/strong><\/a> \u2014 \u041f\u043e\u043b\u0435 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430 \u043f\u043e \u0433\u0440\u0438\u0434\u0443<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7c3\/ea5\/548\/7c3ea5548d8fc6991b6a7936ddae89a1.png\" width=\"482\" height=\"64\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-selectcolumn.html\"><strong><u>SelectColumn<\/u><\/strong><\/a> \u2014 \u0421\u0435\u043b\u0435\u043a\u0442 \u0432 \u0444\u0438\u043b\u044c\u0442\u0440\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/33c\/039\/4d4\/33c0394d4624c6fcb9317b2335b5c778.png\" width=\"1124\" height=\"776\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-sizes.html\"><strong><u>Sizes<\/u><\/strong><\/a> \u2014 \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0433\u0440\u0438\u0434\u043e\u043c, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0439 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0440\u043e\u043a \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/251\/761\/01d\/25176101d307e8fae994790d6a6213df.png\" width=\"348\" height=\"636\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-sortby.html\"><strong><u>Sortby<\/u><\/strong><\/a> \u2014 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0433\u0440\u0438\u0434 \u043f\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u043c\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0432 ASC \u0438\u043b\u0438 DESC \u043f\u043e\u0440\u044f\u0434\u043a\u0435<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c8b\/5ba\/c60\/c8b5bac6041090e90e540f6c65f4edb3.png\" width=\"1600\" height=\"312\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-thumbnailcolumn.html\"><strong><u>ThumbnailColumn<\/u><\/strong><\/a> \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u044f\u0447\u0435\u0439\u043a\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5c7\/3a2\/968\/5c73a2968dbff84580cf24e3cfededfd.png\" width=\"784\" height=\"321\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-timeline-columns.html\"><strong><u>TimelineColumns<\/u><\/strong><\/a> \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u0440\u0438\u0434 \u0432 \u0432\u0438\u0434\u0435 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430. \u0412 Magento 2 Commerce Edition \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u0440\u0430\u0441\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/768\/1b9\/e43\/7681b9e439243bfd32563b39315887a3.png\" width=\"1304\" height=\"442\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-toolbar.html\"><strong><u>ListingToolbar<\/u><\/strong><\/a> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0433\u0440\u0438\u0434\u043e\u043c: \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f, \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u043c\u044b\u0445 \u0441\u0442\u0440\u043e\u043a \u0438 \u043f\u0440.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/479\/923\/6f9\/4799236f94e6bae125001581a8a0f202.png\" width=\"878\" height=\"124\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-treemassactions.html\"><strong><u>TreeMassActions<\/u><\/strong><\/a> \u2014 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 MassActions, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u043c\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/69f\/790\/320\/69f790320d5c501f634c7b6ef3cd69a6.png\" width=\"554\" height=\"165\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-secondary-uiselect.html\"><strong><u>UI-select<\/u><\/strong><\/a> \u2014 \u0433\u0438\u0431\u0440\u0438\u0434 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0438 \u043c\u0443\u043b\u044c\u0442\u0438-\u0441\u0435\u043b\u0435\u043a\u0442\u0430, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439 \u0432 \u0442\u043e\u0432\u0430\u0440\u0430\u0445)<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/518\/29c\/5f4\/51829c5f44b2d28db355ed5d5e118af1.jpeg\" width=\"379\" height=\"470\"><figcaption><\/figcaption><\/figure>\n<\/div>\n<\/details>\n<h4>Form Component<\/h4>\n<details class=\"spoiler\">\n<summary>\u041d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u0438 Form Component \u0441 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f\u043c\u0438 \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c (\u0442\u0440\u0430\u0444\u0438\u043a!)<\/summary>\n<div class=\"spoiler__content\">\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-actiondelete.html\"><strong><u>ActionDelete<\/u><\/strong><\/a> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 DynamicRows<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/63d\/e1e\/5de\/63de1e5de4c64fb9609b4fbf6fff3a03.png\" width=\"164\" height=\"163\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-checkbox.html\"><strong><u>Checkbox<\/u><\/strong><\/a> \u2014 \u0435\u0434\u0438\u043d\u0438\u0447\u043d\u044b\u0439 \u0447\u0435\u043a\u0431\u043e\u043a\u0441<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9bc\/002\/fc4\/9bc002fc43b6b15d3dc1518920b44bbb.png\" width=\"362\" height=\"128\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-checkbox-toggle-notice.html\"><strong><u>CheckboxToggleNotice<\/u><\/strong><\/a> \u2014 \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u0435\u043c<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6b7\/2cf\/b75\/6b72cfb75d6b21f6539360d5dab5dbd3.png\" width=\"590\" height=\"188\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-checkboxset.html\"><strong><u>Checkboxset<\/u><\/strong><\/a> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Checkbox \u0432 \u0433\u0440\u0443\u043f\u043f\u044b<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/860\/f48\/77d\/860f4877d178bcde17efa40342a72e2f.png\" width=\"838\" height=\"260\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-colorpicker.html\"><strong><u>ColorPicker<\/u><\/strong><\/a> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0431\u043e\u0440\u0430 \u0446\u0432\u0435\u0442\u0430<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/36a\/a85\/c6e\/36aa85c6e2593f51647d4237076c61cf.png\" width=\"542\" height=\"377\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-container.html\"><strong><u>Container<\/u><\/strong><\/a> \u2014 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0433\u0440\u0443\u043f\u043f\u0443 \u0441 \u043f\u043e\u044f\u0441\u043d\u044f\u044e\u0449\u0438\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ab6\/add\/3ec\/ab6add3ec516da7f82e6e10d64dc0d64.png\" width=\"1264\" height=\"234\"><figcaption><\/figcaption><\/figure>\n<p><strong>DataSource<\/strong> \u2014 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u044b<\/p>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-date.html\"><strong><u>Date<\/u><\/strong><\/a> \u2014 \u043f\u043e\u043b\u0435 \u0441 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u043c \u0432\u044b\u0431\u043e\u0440\u0430 \u0434\u0430\u0442\u044b \u0438\u043b\u0438 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u0434\u0430\u0442<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f7f\/0c7\/96e\/f7f0c796e2e1bb432759ddf9ac037a3d.png\" width=\"455\" height=\"419\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-dynamicrows.html\"><strong><u>DynamicRows<\/u><\/strong><\/a> \u2014 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0437\u0430\u043f\u0438\u0441\u0438, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0435 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u043b\u043e\u043d\u043e\u043a. \u041a\u0430\u0436\u0434\u0430\u044f \u043a\u043e\u043b\u043e\u043d\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u0437 Ui \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/96d\/acb\/9a8\/96dacb9a81e2f423764c50c001b8b0f0.png\" width=\"1600\" height=\"168\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-dynamicrows-dnd.html\"><strong><u>DynamicRowsDragAndDrop<\/u><\/strong><\/a> \u2014 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 DynamicRows \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0443 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0435\u043c<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a1a\/f1b\/4a8\/a1af1b4a80f850709ae860b37f3b59b8.png\" width=\"1600\" height=\"533\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-dynamicrows-record.html\"><strong><u>DynamicRowsRecord<\/u><\/strong><\/a> \u2014 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 DynamicRows<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ab8\/8b7\/7ec\/ab88b77ec8704909a09dbbb20240c1e4.png\" width=\"905\" height=\"214\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-email.html\"><strong><u>Email<\/u><\/strong><\/a> \u2014 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 Input \u0442\u0438\u043f\u0430 email<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1a4\/642\/3d9\/1a46423d9bbe8c95f2643375c69e9d9d.png\" width=\"1600\" height=\"238\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-fieldset.html\"><strong><u>FieldSet<\/u><\/strong><\/a> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3f6\/868\/194\/3f686819415fc9ff70bf0b177a9767b9.png\" width=\"720\" height=\"162\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-file.html\"><strong><u>File<\/u><\/strong><\/a> \u2014 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 Input \u0442\u0438\u043f\u0430 file<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2c9\/208\/8ff\/2c92088ff0db0a3fc6749ef1b8b4e749.png\" width=\"624\" height=\"98\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-fileuploader.html\"><strong><u>FileUploader<\/u><\/strong><\/a> \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0444\u0430\u0439\u043b\u0430 (\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0430\u0434\u0430\u043f\u0442\u0435\u0440 \u0434\u043b\u044f JQuery \u043f\u043b\u0430\u0433\u0438\u043d\u0430 JQuery-File-Upload)<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e8b\/d52\/fb3\/e8bd52fb384a978f9e6238c5e14087cb.png\" width=\"516\" height=\"144\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-form-data-provider.html\"><strong><u>FormDataProvider<\/u><\/strong><\/a> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0439 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0434\u0430\u0442\u0430 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u043e\u043c \u0444\u043e\u0440\u043c\u044b<\/p>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-hidden.html\"><strong><u>Hidden<\/u><\/strong><\/a> \u2014 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 Input \u0442\u0438\u043f\u0430 hidden<\/p>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-htmlcontent.html\"><strong><u>HtmlContent<\/u><\/strong><\/a> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0431\u043b\u043e\u043a\u0438 HTML<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/728\/ad9\/410\/728ad9410453fadfb8ad47fa1f0fae43.png\" width=\"1600\" height=\"215\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-input.html\"><strong><u>Input<\/u><\/strong><\/a><strong> <\/strong>\u2014 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 Input<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/41a\/689\/3c2\/41a6893c2941daa42908fd2d1bdd5f16.png\" width=\"1600\" height=\"123\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-insertform.html\"><strong><u>InsertForm<\/u><\/strong><\/a> \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0444\u043e\u0440\u043c\u044b \u0432 \u0434\u0440\u0443\u0433\u0438\u0435 Ui \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/712\/319\/cd8\/712319cd86d5f9abc883b5a605d31bfb.png\" width=\"1600\" height=\"237\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-modal.html\"><strong><u>Modal<\/u><\/strong><\/a><strong> <\/strong>\u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fe1\/886\/806\/fe18868065ed8744455a6ea5eb44cc6f.png\" width=\"680\" height=\"463\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-multiline.html\"><strong><u>Multiline<\/u><\/strong><\/a> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0449\u0438\u0439 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0435\u0434\u0438\u043d\u0443\u044e \u0433\u0440\u0443\u043f\u043f\u0443 (\u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 M2 \u043f\u0440\u0438 \u0432\u0432\u043e\u0434\u0435 \u043f\u043e\u0447\u0442\u043e\u0432\u043e\u0433\u043e \u0430\u0434\u0440\u0435\u0441\u0430)<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b63\/c03\/e4b\/b63c03e4bd84c1820e18cdb31bc60d70.png\" width=\"801\" height=\"156\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-multiselect.html\"><strong><u>Multiselect<\/u><\/strong><\/a> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0438\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0432\u044b\u0431\u043e\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0438 \u0437\u0430\u0436\u0430\u0442\u043e\u043c ctrl \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d29\/eb7\/8a8\/d29eb78a86442562aaa5c4d5715e2e8c.png\" width=\"341\" height=\"188\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-nav.html\"><strong><u>Nav<\/u><\/strong><\/a> \u2014 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b Tab \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u0421\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Tab<\/p>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-radioset.html\"><strong><u>Radioset<\/u><\/strong><\/a> \u2014 \u043f\u0441\u0435\u0432\u0434\u043e\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Checkboxset<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/790\/246\/f89\/790246f8936755f644eed5f3230fee16.png\" width=\"796\" height=\"262\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-select.html\"><strong><u>Select<\/u><\/strong><\/a> \u2014 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u0438\u043f\u0430 Select<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b8a\/e20\/465\/b8ae2046506fcce46bedf92052a6a604.png\" width=\"337\" height=\"63\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-tab.html\"><strong><u>Tab<\/u><\/strong><\/a> \u2014 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 Tab-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u0441\u043e\u0441\u0442\u0430\u0432\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Nav<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b8f\/998\/ba2\/b8f998ba2a065bef60fc212bc0169a5b.png\" width=\"774\" height=\"218\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-text.html\"><strong><u>Text<\/u><\/strong><\/a> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/081\/985\/466\/0819854664f39a238b6762b6d155e373.png\" width=\"520\" height=\"104\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-textarea.html\"><strong><u>Textarea<\/u><\/strong><\/a> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0439 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u0442\u0438\u043f\u0430 textarea<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/694\/53e\/62b\/69453e62bd22a6a262224562d1a18487.png\" width=\"1600\" height=\"226\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-urlinput.html\"><strong><u>UrlInput<\/u><\/strong><\/a> \u2014 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u043f\u043e\u043b\u0435 \u0442\u0438\u043f\u0430 urlInput<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/29b\/1c2\/cf7\/29b1c2cf755724ccf1103b885da3cb61.png\" width=\"1310\" height=\"152\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/glossary.magento.com\/wysiwyg\"><strong><u>Wysiwyg<\/u><\/strong><\/a> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 TinyMCE \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 textarea<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fbd\/ad4\/6ae\/fbdad46aea26330e8248c70c98e6daf8.png\" width=\"1600\" height=\"422\"><figcaption><\/figcaption><\/figure>\n<\/div>\n<\/details>\n<p>\u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043e\u0431\u0448\u0438\u0440\u0435\u043d \u0438 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u041c2. \u0422\u0430\u043a\u0436\u0435 \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0430\u043c\u0438 \u043a \u0431\u0430\u0437\u043e\u0432\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c, \u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 &#8212; \u0430\u0434\u0430\u043f\u0442\u0435\u0440\u0430\u043c\u0438 \u043a \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u043f\u043e\u043b\u044c\u0437\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f\u0445 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u043e\u0432 Decorator \u0438 Adapter.<\/p>\n<h3>\u0423\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0412 \u043e\u0431\u0449\u0438\u0445 \u0447\u0435\u0440\u0442\u0430\u0445, \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0442\u0440\u0435\u0445 \u0447\u0430\u0441\u0442\u0435\u0439:<\/p>\n<ol>\n<li>\n<p>\u041e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u0432\u0438\u0434\u0435 XML-\u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p>JS \u043a\u043b\u0430\u0441\u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432&nbsp; <a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/concepts\/ui_comp_uielement_concept.html\"><u>UIElement<\/u><\/a>, <a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/concepts\/ui_comp_uiclass_concept.html\"><u>UIClass<\/u><\/a> \u0438\u043b\u0438 <a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/concepts\/ui_comp_uicollection_concept.html\"><u>UICollection<\/u><\/a><\/p>\n<\/li>\n<li>\n<p>\u0428\u0430\u0431\u043b\u043e\u043d (\u043e\u0434\u0438\u043d \u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e), \u0430\u0441\u0441\u043e\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c.<\/p>\n<\/li>\n<\/ol>\n<p>XML \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0435\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a. \u041f\u0440\u0438\u043c\u0435\u0440 \u0442\u0438\u043f\u0438\u0447\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0442\u0438\u043f\u0430 Input \u0432\u043d\u0443\u0442\u0440\u0438 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Form:<\/p>\n<pre><code class=\"xml\">&lt;field name=\"id\" formElement=\"input\"&gt; &nbsp;&nbsp;&nbsp;&lt;argument name=\"data\" xsi:type=\"array\"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item name=\"config\" xsi:type=\"array\"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item name=\"source\" xsi:type=\"string\"&gt;white_rabbit&lt;\/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/item&gt; &nbsp;&nbsp;&nbsp;&lt;\/argument&gt; &nbsp;&nbsp;&nbsp;&lt;settings&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dataType&gt;text&lt;\/dataType&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dataScope&gt;id&lt;\/dataScope&gt; &nbsp;&nbsp;&nbsp;&lt;\/settings&gt; &lt;\/field&gt;<\/code><\/pre>\n<p>\u041f\u0440\u0438 \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0435 XML \u0444\u0430\u0439\u043b\u0430 \u0432\u0441\u044f \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043c\u043d\u043e\u0433\u043e\u043c\u0435\u0440\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 \u0434\u043b\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0432\u0441\u0435\u0445 \u0435\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u043e\u0431 \u044d\u0442\u043e\u043c \u043c\u044b \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445).<\/p>\n<p>JS \u043a\u043b\u0430\u0441\u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0438 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430 \u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0415\u0441\u043b\u0438 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0438\u0437 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u043d\u0435 \u0437\u0430\u0434\u0430\u043d\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u0438\u043f\u0438\u0447\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043a\u043b\u0430\u0441\u0441\u0430:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/912\/8ce\/d2c\/9128ced2cecf68a75b4bf67fc2844ba4.png\" width=\"728\" height=\"742\"><figcaption><\/figcaption><\/figure>\n<p>\u0428\u0430\u0431\u043b\u043e\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 HTML \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430\u043c\u0438 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043a \u043c\u0435\u0442\u043e\u0434\u0430\u043c \u043a\u043b\u0430\u0441\u0441\u0430 \u043f\u0443\u0442\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f knockout.js.<\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0448\u0430\u0431\u043b\u043e\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Checkbox:<\/p>\n<pre><code class=\"xml\">&lt;div class=\"admin__field admin__field-option\"&gt; &nbsp;&nbsp;&nbsp;&lt;input type=\"checkbox\" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;class=\"admin__control-checkbox\" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;simple-checked=\"checked\" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ko-disabled=\"disabled\" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ko-focused=\"focused\" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ko-value=\"value\" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;attr=\"id: uid, name: inputName\"\/&gt; &nbsp;&nbsp;&nbsp;&lt;label class=\"admin__field-label\" text=\"description\" attr=\"for: uid\"\/&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (XML \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0446\u0438\u044f), \u043a\u043b\u0430\u0441\u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d (\u0447\u0442\u043e \u043f\u043e\u0432\u043b\u0435\u0447\u0435\u0442 \u0437\u0430 \u0441\u043e\u0431\u043e\u0439 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0448\u0430\u0431\u043b\u043e\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0430\u043a \u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d. \u0412 \u0446\u0435\u043b\u043e\u043c \u0442\u0430\u043a\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432 \u0448\u0438\u0440\u043e\u043a\u0438\u0445 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u043c\u043e\u0434\u0438\u0446\u0438\u0444\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0434\u043e\u0431\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0439 \u0438 \u043d\u0435\u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u0440\u0430\u0441\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e Ui Components. \u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u043f\u0440\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u0432 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u043e\u0441\u043e\u0431\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e, \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0442\u0435\u043c, \u043e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0440\u0435\u0448\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u0440\u0443\u0433 \u0437\u0430\u0434\u0430\u0447, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 M2.=<\/p>\n<p>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432\u043e\u043f\u0440\u043e\u0441 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043f\u0443\u0442\u043d\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043a\u043e\u0441\u043d\u0435\u043c\u0441\u044f \u0432\u043e\u043f\u0440\u043e\u0441\u0430, \u043a\u0430\u043a XML \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u0432\u0441\u0435. \u041f\u0438\u0448\u0438\u0442\u0435 \u043a\u043e\u0434 \u0441 \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u0435\u043c. \u0414\u043e \u0432\u0441\u0442\u0440\u0435\u0447\u0438!<\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/rshb\/blog\/550772\/\"> https:\/\/habr.com\/ru\/company\/rshb\/blog\/550772\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041f\u0430\u0432\u0435\u043b \u0438 \u044f Magento 2 \u0431\u044d\u043a\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a. \u0415\u0441\u043b\u0438 \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0443 \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0443\u044e\u0449\u0435\u0433\u043e M2 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u043a\u0430\u043a\u0438\u0435 \u0430\u0441\u043f\u0435\u043a\u0442\u044b \u041c2 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0441\u0438\u043b\u044c\u043d\u0443\u044e \u0431\u043e\u043b\u044c, \u2014 \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043e\u0442\u0440\u044b\u0432\u043e\u043c \u0431\u0443\u0434\u0443\u0442 \u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c UI \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b (Ui Components). \u042d\u0442\u043e \u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439, \u043a\u043e\u0433\u0434\u0430 \u0438\u0445 \u0432\u0441\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442, \u043d\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u0438\u0435 \u0437\u043d\u0430\u044e\u0442, \u043a\u0430\u043a \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043e\u043d\u0438 \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u0438 \u043a\u0430\u043a \u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442. \u0421\u043b\u043e\u0436\u0438\u0432\u0448\u0430\u044f\u0441\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u043e\u0442\u0447\u0430\u0441\u0442\u0438 \u0432\u044b\u0437\u0432\u0430\u043d\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043a\u0443\u0434\u043d\u044b\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u043f\u0440\u0438\u043d\u044f\u0442\u044c \u0432\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0435\u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u044c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u043d\u0430\u0447\u043d\u0435\u043c \u0446\u0438\u043a\u043b \u0441\u0442\u0430\u0442\u0435\u0439 \u043f\u0440\u043e M2 Ui Components, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u0434\u0430\u043d\u043d\u0443\u044e \u0442\u0435\u043c\u0443. \u0425\u043e\u0442\u044f \u043d\u0430 \u0445\u0430\u0431\u0440\u0435 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043f\u0440\u0435\u0432\u043e\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0441\u0442\u0430\u0442\u044c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u044e\u0442 \u0442\u0435\u043c\u0443 Ui Components \u0441 \u0442\u043e\u0433\u043e \u0438\u043b\u0438 \u0438\u043d\u043e\u0433\u043e \u0440\u0430\u043a\u0443\u0440\u0441\u0430, \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e \u0435\u0435 \u043d\u0430 \u0425\u0430\u0431\u0440\u0435 \u043d\u0435 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u043b \u0435\u0449\u0435 \u043d\u0438\u043a\u0442\u043e. \u0412 \u043e\u0431\u0449\u0435\u043c, \u0438\u0434\u0438 \u0437\u0430 \u043c\u043d\u043e\u0439 \u041d\u0435\u043e, \u0438 \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u0442\u0435\u0431\u0435, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0433\u043b\u0443\u0431\u043e\u043a\u0430 \u043a\u0440\u043e\u043b\u0438\u0447\u044c\u044f \u043d\u043e\u0440\u0430. \u041f\u043e\u0433\u043d\u0430\u043b\u0438!<\/p>\n<h3>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Ui Components. \u0415\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u0432 \u043e\u0431\u0449\u0435\u043c, \u0442\u043e \u044d\u0442\u043e \u043d\u0430\u0431\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0445 \u043d\u043e\u0432\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u0443\u043d\u0438\u0432\u0435\u0441\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0445 \u043b\u043e\u0433\u0438\u043a\u0443, \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434, \u043e\u0431\u043b\u0430\u0434\u0430\u044e\u0449\u0438\u0445 \u0448\u0438\u0440\u043e\u043a\u0438\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u0437\u0432\u0430\u043d\u044b \u0443\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u0438 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u043a \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0442\u0430\u043a \u0438 \u0438\u0445 \u043d\u0430\u0431\u043e\u0440\u043e\u0432.<\/p>\n<p>UiComponents \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0438\u0441\u044c, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c (\u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u043b\u0438 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e) \u043f\u0440\u0435\u0436\u043d\u0438\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0431\u043b\u043e\u043a\u0430\u0445 \u0438 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u0432 \u043b\u0435\u0439\u0430\u0443\u0442\u0430\u0445.<\/p>\n<p>\u041d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 (M2 \u0432\u0435\u0440\u0441\u0438\u0438 2.4.2) \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u043e \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 M2 \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u0441\u0435 \u0435\u0449\u0435 \u043d\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043e, \u043e\u0434\u043d\u0430\u043a\u043e \u0440\u0430\u0431\u043e\u0442\u0430 \u0438\u0434\u0435\u0442, \u0438 \u043c\u043d\u043e\u0433\u0438\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u044b \u0430\u0434\u043c\u0438\u043d\u043a\u0438 \u041c2 \u0443\u0436\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Ui Components. \u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f M2 \u043f\u0440\u044f\u043c\u043e <a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/bk-ui_comps.html\"><u>\u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442<\/u><\/a> \u043d\u0430 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Ui Components \u0432\u043c\u0435\u0441\u0442\u043e \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u044e\u0442 <a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/coding-standards\/bk-coding-standards.html\"><u>Magento Coding Standards<\/u><\/a>, \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u043e\u0432\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439.&nbsp;<\/p>\n<p>\u041f\u043e \u0437\u0430\u0434\u0443\u043c\u043a\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u0441\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432, \u043e\u0434\u043d\u0430\u043a\u043e \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u044d\u0442\u043e \u043b\u0438\u0448\u044c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0441\u043f\u043e\u0441\u043e\u0431, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u0432\u0441\u044e \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u043a\u043e\u0434\u043e\u0432\u0443\u044e \u0431\u0430\u0437\u0443 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0439, \u0438 \u0434\u043e \u0443\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0435\u0449\u0435 \u0434\u0430\u043b\u0435\u043a\u043e.<\/p>\n<p>\u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0432 \u0447\u0438\u0441\u043b\u043e \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u041c2.<\/p>\n<p>\u041d\u0430\u0431\u043e\u0440 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 <strong>\u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d<\/strong> \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043c\u0438 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438, \u043e\u0434\u043d\u0430\u043a\u043e \u0438\u043c\u0435\u044e\u0449\u0438\u0435\u0441\u044f \u0432 \u043d\u0430\u0431\u043e\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b (\u043e \u043d\u0438\u0445 \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043d\u0438\u0436\u0435) \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043f\u043e\u0434 \u043d\u0443\u0436\u0434\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430.<\/p>\n<h3>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f<\/h3>\n<p>\u0427\u0442\u043e \u0436, \u0441 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c, \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432 \u0441\u0430\u043c\u044b\u0445 \u043e\u0431\u0449\u0438\u0445 \u0447\u0435\u0440\u0442\u0430\u0445, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 Ui \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<p>\u041f\u043e \u0441\u0432\u043e\u0435\u0439 \u043f\u0440\u0438\u0440\u043e\u0434\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u043e\u0441\u043e\u0431\u043b\u0435\u043d\u043d\u044b\u043c JS \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u043c. \u0415\u0441\u043b\u0438 \u0437\u0430\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043c\u044b \u043d\u0430\u0439\u0434\u0435\u043c \u0442\u0430\u043c \u0432\u044b\u0437\u043e\u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u0438\u0434\u0430:<\/p>\n<pre><code class=\"xml\">&lt;script type=\"text\/x-magento-init\"&gt; &nbsp;&nbsp;&nbsp;&nbsp;{\"*\": {\"Magento_Ui\/js\/core\/app\": {...}}} &lt;\/script&gt;<\/code><\/pre>\n<p>\u0422\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435).<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c JSON \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443:<\/p>\n<pre><code class=\"json\">{ ... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"components\": { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"white_rabbit_listing\": { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"children\": { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"white_rabbit_listing\": { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"children\": { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"listing_top\": { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"type\": \"container\", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"name\": \"listing_top\", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"children\": { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"bookmarks\": {...}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"columns_controls\": {...}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"listing_filters\": {...}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"listing_massaction\": {...}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"listing_paging\": {...} \u2026 }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c Ui \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c: white_rabbit_listing \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Listing, bookmarks \u2014 c\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Bookmarks \u0438 \u0442.\u0434. \u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u044d\u0442\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u0433\u0438\u0431\u043a\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0438 \u043f\u0440., \u043f\u0440\u0438\u0447\u0435\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043b\u0438\u0448\u0435\u043d\u044b \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 HTML \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u043c \u0432\u0438\u0434\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0430\u043b\u0435\u0442\u0443, \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f knockout.js \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438!<\/p>\n<p>\u0421\u0442\u043e\u0438\u0442 \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u0433\u0434\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u0435\u0434\u043a\u043e\u0432 \u0438 \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u0430\u044e\u0442 \u0441\u0432\u043e\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 (\u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0431\u044b\u043b \u043f\u043e\u0437\u0430\u0438\u043c\u0441\u0442\u0432\u043e\u0432\u0430\u043d \u0438\u0437 \u041e\u041e\u041f, \u0438, \u043a\u0430\u043a \u043c\u044b \u0434\u0430\u043b\u0435\u0435 \u0443\u0432\u0438\u0434\u0438\u043c, \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0438 \u043a\u043e\u0440\u043d\u0438 \u0432 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435 \u0441\u0430\u043c\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.)<\/p>\n<h3>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h3>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0431\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0435 \u043c\u043e\u0436\u0435\u043c, \u0437\u043d\u0430\u0442\u044c \u043e \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 Ui \u0432\u0434\u0432\u043e\u0439\u043d\u0435 \u0432\u0430\u0436\u043d\u043e.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u043a\u0430\u043a \u043c\u044b \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u0440\u0430\u043d\u0435\u0435, \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443. \u041d\u0430 \u0432\u0435\u0440\u0448\u0438\u043d\u0435 \u044d\u0442\u043e\u0439 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430: Listing Component \u0438 Form Component. \u041a\u0430\u043a \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e \u0434\u043e\u0433\u0430\u0434\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439, \u043f\u0435\u0440\u0432\u044b\u0439 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u043f\u0438\u0441\u043a\u0438, \u0432\u0442\u043e\u0440\u043e\u0439 &#8212; \u0437\u0430 \u0444\u043e\u0440\u043c\u044b. \u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c\u0438 \u043f\u043e \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044e \u043a \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c \u0434\u0432\u0443\u043c.&nbsp;<\/p>\n<p>\u041f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0438\u043c \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0434\u043b\u044f \u0434\u0432\u0443\u0445 \u0431\u0430\u0437\u043e\u0432\u044b\u0445. \u0420\u044f\u0434\u043e\u043c \u044f \u0431\u0443\u0434\u0443 \u0434\u0430\u0432\u0430\u0442\u044c \u043a\u0440\u0430\u0442\u043a\u0438\u0435 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 (\u043a\u0441\u0442\u0430\u0442\u0438, \u0431\u0443\u0434\u044c\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u044b \u2014 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Listing \u0438 Form \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 (\u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438) \u0434\u0430\u043d\u044b <strong>\u043d\u0435\u043f\u043e\u043b\u043d\u044b\u0435<\/strong> \u0441\u043f\u0438\u0441\u043a\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u0440\u0438\u0447\u0435\u043c \u043f\u0440\u043e\u043f\u0443\u0449\u0435\u043d\u0430 \u0447\u0443\u0442\u044c \u043b\u0438 \u043d\u0435 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430). \u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u044f \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044e \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u0432 \u0442\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043c\u0435\u0435\u0442 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u0432 \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435 M2), \u043e\u0434\u043d\u0430\u043a\u043e \u0441\u0442\u043e\u0438\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u0441\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0430\u0434\u043c\u0438\u043d\u043a\u0438, \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u044d\u043d\u0434\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0443\u0436\u043d\u043e \u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 CSS.<\/p>\n<h4>Listing Component<\/h4>\n<details class=\"spoiler\">\n<summary>\u041d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u0438 Listing Component c \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f\u043c\u0438 \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c  (\u0442\u0440\u0430\u0444\u0438\u043a!)<\/summary>\n<div class=\"spoiler__content\">\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-actionscolumn.html\"><strong><u>ActionsColumn<\/u><\/strong><\/a> \u2014 \u043a\u043e\u043b\u043e\u043d\u043a\u0430 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u043d\u0430\u0434 \u0441\u0442\u0440\u043e\u043a\u043e\u0439: \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0438 \u043f\u0440.<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-bookmarks.html\"><strong><u>Bookmarks<\/u><\/strong><\/a> \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0433\u0440\u0438\u0434\u0430 \u0438 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u043d\u0435\u043c\u0443<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-button.html\"><strong><u>Button<\/u><\/strong><\/a> \u2014 \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-column.html\"><strong><u>Column<\/u><\/strong><\/a> \u2014 \u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0438<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-columns.html\"><strong><u>Columns<\/u><\/strong><\/a> \u2014 \u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u0433\u0440\u0438\u0434\u0430<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-columnscontrols.html\"><strong><u>ColumnsControls<\/u><\/strong><\/a> \u2014 \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u044b\u0445 \u0432 \u0433\u0440\u0438\u0434\u0435 \u043a\u043e\u043b\u043e\u043d\u043e\u043a<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-columns-editor.html\"><strong><u>ColumnsEditor<\/u><\/strong><\/a> \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u044f\u043c\u043e \u0432 \u0433\u0440\u0438\u0434\u0435, \u043d\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044f \u043d\u0430 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-columns-editor-record.html\"><strong><u>ColumnsEditorRecord<\/u><\/strong><\/a>&nbsp;\u2014 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 ColumnsEditor, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430, \u043d\u0443\u0436\u043d\u043e, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0434\u043b\u044f ColumnsEditor \u0441 \u043f\u043e\u043b\u0435\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0438\u043f\u0430 Select \u0438\u043b\u0438 Multiselect<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-columns-editor-view.html\"><strong><u>ColumnsEditorView<\/u><\/strong><\/a> \u2014 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 ColumnsEditor, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-columns-editing-bulk.html\"><strong><u>ColumnsEditingBulk<\/u><\/strong><\/a> \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043f\u0430\u043a\u0435\u0442\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u043b\u044f ColumnsEditor<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-columns-editing-client.html\"><strong><u>ColumnsEditingClient<\/u><\/strong><\/a> \u2014 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 ColumnsEditor \u0437\u0430\u043f\u0438\u0441\u0438<\/p>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-columns-resize.html\"><strong><u>ColumnsResize<\/u><\/strong><\/a> \u2014 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0448\u0438\u0440\u0438\u043d\u044b \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0432 \u0433\u0440\u0438\u0434\u0435<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-datecolumn.html\"><strong><u>DateColumn<\/u><\/strong><\/a> \u2014 \u041a\u043e\u043b\u043e\u043d\u043a\u0430 \u0441 \u0434\u0430\u0442\u043e\u0439<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-draganddrop.html\"><strong><u>DragAndDrop<\/u><\/strong><\/a> \u2014 \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0443 \u0441\u0442\u0440\u043e\u043a \u0432 \u0433\u0440\u0438\u0434\u0435 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0435\u043c<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-expandable-column.html\"><strong><u>Expandable<\/u><\/strong><\/a> \u2014 \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0432 \u044f\u0447\u0435\u0439\u043a\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u043a\u0430\u043a\u0438\u043c \u043b\u0438\u0431\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u043c; \u0447\u0430\u0441\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0441\u043a\u0440\u044b\u0442\u0430 \u043f\u043e\u0434 \u0441\u0441\u044b\u043b\u043a\u043e\u0439 show more. \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0443 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Tooltip c \u043f\u043e\u043b\u043d\u044b\u043c \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-exportbutton.html\"><strong><u>ExportButton<\/u><\/strong><\/a> \u2014 \u041a\u043d\u043e\u043f\u043a\u0430 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u0433\u0440\u0438\u0434\u0430 \u0432 \u0444\u0430\u0439\u043b<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-filters.html\"><strong><u>Filters<\/u><\/strong><\/a> \u2014 \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u0433\u0440\u0438\u0434\u0430<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-filterschips.html\"><strong><u>FiltersChips<\/u><\/strong><\/a> \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Filters<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-grid-data-provider.html\"><strong><u>GridDataProvider<\/u><\/strong><\/a> \u2014 data provider \u0434\u043b\u044f \u0433\u0440\u0438\u0434\u0430<\/p>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-image-preview.html\"><strong><u>ImagePreview<\/u><\/strong><\/a> \u2014 \u041f\u0440\u0435\u0432\u044c\u044e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 ThumbnailColumn<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-insertlisting.html\"><strong><u>InsertListing<\/u><\/strong><\/a> \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0442\u0430\u043b\u044f\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Listing \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 Ui \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/p>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-linkcolumn.html\"><strong><u>LinkColumn<\/u><\/strong><\/a> \u2014 \u041a\u043e\u043b\u043e\u043d\u043a\u0430 \u0441 \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-masonry.html\"><strong><u>Masonry<\/u><\/strong><\/a> \u2014 \u043e\u0447\u0435\u043d\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a Listing, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0432\u0438\u0434\u0435 \u043f\u043b\u0438\u0442\u043a\u0438 (\u0438\u043b\u0438 \u043a\u0430\u043c\u0435\u043d\u043d\u043e\u0439 \u043a\u043b\u0430\u0434\u043a\u0438)<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-massactions.html\"><strong><u>MassActions<\/u><\/strong><\/a> \u2014 \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043d\u0430\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0433\u0440\u0438\u0434\u0430<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-multiselectcolumn.html\"><strong><u>MultiselectColumn<\/u><\/strong><\/a> \u2014 \u041a\u043e\u043b\u043e\u043d\u043a\u0430 \u0441 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0430\u043c\u0438, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0430\u044f \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 MassActions<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-onoffcolumn.html\"><strong><u>OnOffColumn<\/u><\/strong><\/a> \u2014 \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c On\/Off \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044c \u0432 \u044f\u0447\u0435\u0439\u043a\u0435<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-paging.html\"><strong><u>Paging<\/u><\/strong><\/a> \u2014 \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438 \u0433\u0440\u0438\u0434\u0430<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-range.html\"><strong><u>Range<\/u><\/strong><\/a> \u2014 \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442&nbsp; \u043f\u043e\u043b\u044f\u043c\u0438 \u0442\u0438\u043f\u0430 \u201c\u043e\u0442\u201d \u0438 \u201c\u0434\u043e\u201d. \u0412 \u0433\u0440\u0438\u0434\u0430\u0445 \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043e\u0434\u043d\u043e \u0438\u0437 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u0433\u0440\u0438\u0434\u0430. \u041c\u043e\u0436\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043a\u0430\u043a \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043f\u043e\u043b\u044f \u0442\u0438\u043f\u0430 Input, \u0442\u0430\u043a \u0438 \u0438\u0445 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u043e\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Date)<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-search.html\"><strong><u>Search<\/u><\/strong><\/a> \u2014 \u041f\u043e\u043b\u0435 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430 \u043f\u043e \u0433\u0440\u0438\u0434\u0443<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-selectcolumn.html\"><strong><u>SelectColumn<\/u><\/strong><\/a> \u2014 \u0421\u0435\u043b\u0435\u043a\u0442 \u0432 \u0444\u0438\u043b\u044c\u0442\u0440\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-sizes.html\"><strong><u>Sizes<\/u><\/strong><\/a> \u2014 \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0433\u0440\u0438\u0434\u043e\u043c, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0439 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0440\u043e\u043a \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-sortby.html\"><strong><u>Sortby<\/u><\/strong><\/a> \u2014 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0433\u0440\u0438\u0434 \u043f\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u043c\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0432 ASC \u0438\u043b\u0438 DESC \u043f\u043e\u0440\u044f\u0434\u043a\u0435<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-thumbnailcolumn.html\"><strong><u>ThumbnailColumn<\/u><\/strong><\/a> \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u044f\u0447\u0435\u0439\u043a\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-timeline-columns.html\"><strong><u>TimelineColumns<\/u><\/strong><\/a> \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u0440\u0438\u0434 \u0432 \u0432\u0438\u0434\u0435 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430. \u0412 Magento 2 Commerce Edition \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u0440\u0430\u0441\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-toolbar.html\"><strong><u>ListingToolbar<\/u><\/strong><\/a> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0433\u0440\u0438\u0434\u043e\u043c: \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f, \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u043c\u044b\u0445 \u0441\u0442\u0440\u043e\u043a \u0438 \u043f\u0440.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-treemassactions.html\"><strong><u>TreeMassActions<\/u><\/strong><\/a> \u2014 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 MassActions, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u043c\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-secondary-uiselect.html\"><strong><u>UI-select<\/u><\/strong><\/a> \u2014 \u0433\u0438\u0431\u0440\u0438\u0434 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0438 \u043c\u0443\u043b\u044c\u0442\u0438-\u0441\u0435\u043b\u0435\u043a\u0442\u0430, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439 \u0432 \u0442\u043e\u0432\u0430\u0440\u0430\u0445)<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<\/div>\n<\/details>\n<h4>Form Component<\/h4>\n<details class=\"spoiler\">\n<summary>\u041d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u0438 Form Component \u0441 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f\u043c\u0438 \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c (\u0442\u0440\u0430\u0444\u0438\u043a!)<\/summary>\n<div class=\"spoiler__content\">\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-actiondelete.html\"><strong><u>ActionDelete<\/u><\/strong><\/a> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 DynamicRows<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-checkbox.html\"><strong><u>Checkbox<\/u><\/strong><\/a> \u2014 \u0435\u0434\u0438\u043d\u0438\u0447\u043d\u044b\u0439 \u0447\u0435\u043a\u0431\u043e\u043a\u0441<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-checkbox-toggle-notice.html\"><strong><u>CheckboxToggleNotice<\/u><\/strong><\/a> \u2014 \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u0435\u043c<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-checkboxset.html\"><strong><u>Checkboxset<\/u><\/strong><\/a> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Checkbox \u0432 \u0433\u0440\u0443\u043f\u043f\u044b<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-colorpicker.html\"><strong><u>ColorPicker<\/u><\/strong><\/a> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0431\u043e\u0440\u0430 \u0446\u0432\u0435\u0442\u0430<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-container.html\"><strong><u>Container<\/u><\/strong><\/a> \u2014 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0433\u0440\u0443\u043f\u043f\u0443 \u0441 \u043f\u043e\u044f\u0441\u043d\u044f\u044e\u0449\u0438\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><strong>DataSource<\/strong> \u2014 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u044b<\/p>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-date.html\"><strong><u>Date<\/u><\/strong><\/a> \u2014 \u043f\u043e\u043b\u0435 \u0441 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u043c \u0432\u044b\u0431\u043e\u0440\u0430 \u0434\u0430\u0442\u044b \u0438\u043b\u0438 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u0434\u0430\u0442<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-dynamicrows.html\"><strong><u>DynamicRows<\/u><\/strong><\/a> \u2014 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0437\u0430\u043f\u0438\u0441\u0438, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0435 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u043b\u043e\u043d\u043e\u043a. \u041a\u0430\u0436\u0434\u0430\u044f \u043a\u043e\u043b\u043e\u043d\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u0437 Ui \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-dynamicrows-dnd.html\"><strong><u>DynamicRowsDragAndDrop<\/u><\/strong><\/a> \u2014 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442<\/p>\n<\/div>\n<\/details>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-320901","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/320901","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=320901"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/320901\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=320901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=320901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=320901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}