diff --git a/.mapping.json b/.mapping.json index ee8683d55..249bbf3d2 100644 --- a/.mapping.json +++ b/.mapping.json @@ -20220,6 +20220,8 @@ "client/web/divkit/tests/hermione/screens/crossplatform/samples/base/background/firefoxMobile/background.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/samples/base/background/firefoxMobile/background.png", "client/web/divkit/tests/hermione/screens/crossplatform/samples/base/border/chromeMobile/border.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/samples/base/border/chromeMobile/border.png", "client/web/divkit/tests/hermione/screens/crossplatform/samples/base/border/firefoxMobile/border.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/samples/base/border/firefoxMobile/border.png", + "client/web/divkit/tests/hermione/screens/crossplatform/samples/base/layout_provider/chromeMobile/layout_provider.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/samples/base/layout_provider/chromeMobile/layout_provider.png", + "client/web/divkit/tests/hermione/screens/crossplatform/samples/base/layout_provider/firefoxMobile/layout_provider.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/samples/base/layout_provider/firefoxMobile/layout_provider.png", "client/web/divkit/tests/hermione/screens/crossplatform/samples/base/size_types/chromeMobile/size_types.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/samples/base/size_types/chromeMobile/size_types.png", "client/web/divkit/tests/hermione/screens/crossplatform/samples/base/size_types/firefoxMobile/size_types.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/samples/base/size_types/firefoxMobile/size_types.png", "client/web/divkit/tests/hermione/screens/crossplatform/samples/base/size_units/chromeMobile/size_units.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/samples/base/size_units/chromeMobile/size_units.png", @@ -22100,6 +22102,7 @@ "test_data/samples/base/alpha.json":"divkit/public/test_data/samples/base/alpha.json", "test_data/samples/base/background.json":"divkit/public/test_data/samples/base/background.json", "test_data/samples/base/border.json":"divkit/public/test_data/samples/base/border.json", + "test_data/samples/base/layout_provider.json":"divkit/public/test_data/samples/base/layout_provider.json", "test_data/samples/base/size_types.json":"divkit/public/test_data/samples/base/size_types.json", "test_data/samples/base/size_units.json":"divkit/public/test_data/samples/base/size_units.json", "test_data/samples/container/alignment.json":"divkit/public/test_data/samples/container/alignment.json", diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/samples/base/layout_provider/chromeMobile/layout_provider.png b/client/web/divkit/tests/hermione/screens/crossplatform/samples/base/layout_provider/chromeMobile/layout_provider.png new file mode 100644 index 000000000..73772ac1f Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/samples/base/layout_provider/chromeMobile/layout_provider.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/samples/base/layout_provider/firefoxMobile/layout_provider.png b/client/web/divkit/tests/hermione/screens/crossplatform/samples/base/layout_provider/firefoxMobile/layout_provider.png new file mode 100644 index 000000000..d294a5793 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/samples/base/layout_provider/firefoxMobile/layout_provider.png differ diff --git a/schema/translations.json b/schema/translations.json index 1afcef7cc..3ee7fafe0 100644 --- a/schema/translations.json +++ b/schema/translations.json @@ -1584,8 +1584,8 @@ "ru": "Ввод данных с клавиатуры." }, "div_layout_provider": { - "en": "Provides data on the actual size of the element.", - "ru": "Предоставляет данные о реальном размере элемента." + "en": "Provides data on the actual size of the element. Allows you to capture the rendered dimensions and store them in variables for use in responsive layouts. See the [Layout Provider](../../layout.md#layout-provider) section for detailed information.", + "ru": "Предоставляет данные о реальном размере элемента. Позволяет получить отрисованные размеры и сохранить их в переменные для использования в адаптивных макетах. См. раздел [Layout Provider](../../layout.md#layout-provider) для подробной информации." }, "div_layout_provider_height_variable_name": { "en": "Name of the variable that stores the element’s height.", diff --git a/test_data/samples/base/layout_provider.json b/test_data/samples/base/layout_provider.json new file mode 100644 index 000000000..0ea139de7 --- /dev/null +++ b/test_data/samples/base/layout_provider.json @@ -0,0 +1,167 @@ +{ + "templates": { + "title": { + "type": "text", + "font_size": 20, + "line_height": 24, + "font_weight": "bold", + "paddings": { + "left": 24, + "right": 24, + "bottom": 16 + } + }, + "subtitle": { + "font_size": 15, + "line_height": 20, + "type": "text", + "paddings": { + "left": 24, + "right": 24 + } + }, + "block": { + "type": "container", + "items": [ + { + "type": "text", + "$text": "text", + "font_size": 16, + "width": { + "type": "wrap_content" + }, + "paddings": { + "left": 12, + "right": 12, + "top": 12, + "bottom": 12 + } + } + ], + "background": [ + { + "type": "solid", + "$color": "background_color" + } + ], + "border": { + "corner_radius": 8 + } + } + }, + "card": { + "log_id": "layout_provider_sample", + "variables": [ + { + "name": "block1_height", + "type": "integer", + "value": 0 + }, + { + "name": "block1_width", + "type": "integer", + "value": 0 + }, + { + "name": "block2_width", + "type": "integer", + "value": 0 + } + ], + "states": [ + { + "state_id": 0, + "div": { + "type": "container", + "orientation": "vertical", + "margins": { + "top": 24, + "bottom": 24 + }, + "items": [ + { + "type": "title", + "text": "Layout Provider" + }, + { + "type": "subtitle", + "text": "Layout provider allows you to get the actual size of an element and store it in variables. This is useful for creating responsive layouts where one element's size depends on another.", + "margins": { + "bottom": 24 + } + }, + { + "type": "container", + "orientation": "vertical", + "paddings": { + "left": 16, + "right": 16 + }, + "items": [ + { + "type": "block", + "background_color": "#00B341", + "text": "This block has wrap_content height.\nIts actual size is stored in variables.", + "width": { + "type": "fixed", + "value": "@{block1_height * 4}" + }, + "layout_provider": { + "height_variable_name": "block1_height", + "width_variable_name": "block1_width" + }, + "margins": { + "bottom": 16 + } + }, + { + "type": "block", + "background_color": "#0077FF", + "text": "Height = first block's height\nWidth = wrap_content", + "width": { + "type": "wrap_content" + }, + "height": { + "type": "fixed", + "value": "@{block1_height}" + }, + "layout_provider": { + "width_variable_name": "block2_width" + }, + "margins": { + "bottom": 16 + } + }, + { + "type": "block", + "background_color": "#FFCC00", + "text": "Width = second block's width\nHeight = first block's width", + "width": { + "type": "fixed", + "value": "@{block2_width}" + }, + "height": { + "type": "fixed", + "value": "@{block1_width}" + }, + "margins": { + "bottom": 16 + } + }, + { + "type": "subtitle", + "text": "Variables:\n• block1_height = @{block1_height}\n• block1_width = @{block1_width}\n• block2_width = @{block2_width}", + "paddings": { + "left": 0, + "right": 0, + "top": 8 + } + } + ] + } + ] + } + } + ] + } +}