mirror of
https://github.com/divkit/divkit.git
synced 2026-05-07 20:02:32 +00:00
babaevmm
187 lines
5.1 KiB
JSON
187 lines
5.1 KiB
JSON
{
|
|
"templates": {
|
|
"text_block": {
|
|
"type": "text",
|
|
"font_size": 14,
|
|
"text_alignment_horizontal": "center",
|
|
"text_alignment_vertical": "center",
|
|
"alignment_horizontal": "center",
|
|
"paddings": {
|
|
"top": 4,
|
|
"bottom": 4,
|
|
"left": 8,
|
|
"right": 8
|
|
},
|
|
"width": {
|
|
"type": "match_parent"
|
|
},
|
|
"height": {
|
|
"type": "match_parent"
|
|
},
|
|
"background": [
|
|
{
|
|
"type": "solid",
|
|
"color": "#f1f1f1"
|
|
}
|
|
],
|
|
"border": {
|
|
"corner_radius": 16
|
|
}
|
|
},
|
|
"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
|
|
}
|
|
}
|
|
},
|
|
"card": {
|
|
"log_id": "sample_card",
|
|
"states": [
|
|
{
|
|
"state_id": 0,
|
|
"div": {
|
|
"type": "container",
|
|
"orientation": "vertical",
|
|
"margins": {
|
|
"top": 24,
|
|
"bottom": 24
|
|
},
|
|
"items": [
|
|
{
|
|
"type": "title",
|
|
"text": "Pager"
|
|
},
|
|
{
|
|
"type": "subtitle",
|
|
"text": "A pager displays a horizontal set of cards, where the main card is fully visible and the neighboring ones are partially displayed.\n\nYou can use it with an indicator to show which card is selected.\n\nAn indicator is also a div and can be positioned independently of a pager.\n\nThe example shows a pager with ten cards and an indicator on top.",
|
|
"margins": {
|
|
"bottom": 24
|
|
}
|
|
},
|
|
{
|
|
"type": "container",
|
|
"items": [
|
|
{
|
|
"type": "indicator",
|
|
"active_item_color": "#000000",
|
|
"active_item_size": 1.5,
|
|
"height": {
|
|
"type": "fixed",
|
|
"value": 10
|
|
},
|
|
"margins": {
|
|
"top": 10,
|
|
"bottom": 10
|
|
},
|
|
"space_between_centers": 10,
|
|
"inactive_item_color": "#D0D1D9",
|
|
"pager_id": "pager_with_indicator",
|
|
"shape": {
|
|
"type": "rounded_rectangle",
|
|
"corner_radius": {
|
|
"type": "fixed",
|
|
"value": 2
|
|
},
|
|
"item_height": {
|
|
"type": "fixed",
|
|
"value": 2
|
|
},
|
|
"item_width": {
|
|
"type": "fixed",
|
|
"value": 10
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"type": "pager",
|
|
"id": "pager_with_indicator",
|
|
"item_spacing": {
|
|
"type": "fixed",
|
|
"value": 8
|
|
},
|
|
"height": {
|
|
"type": "fixed",
|
|
"value": 300
|
|
},
|
|
"items": [
|
|
{
|
|
"type": "text_block",
|
|
"text": "Item 0"
|
|
},
|
|
{
|
|
"type": "text_block",
|
|
"text": "Item 1"
|
|
},
|
|
{
|
|
"type": "text_block",
|
|
"text": "Item 2"
|
|
},
|
|
{
|
|
"type": "text_block",
|
|
"text": "Item 3"
|
|
},
|
|
{
|
|
"type": "text_block",
|
|
"text": "Item 4"
|
|
},
|
|
{
|
|
"type": "text_block",
|
|
"text": "Item 5"
|
|
},
|
|
{
|
|
"type": "text_block",
|
|
"text": "Item 6"
|
|
},
|
|
{
|
|
"type": "text_block",
|
|
"text": "Item 7"
|
|
},
|
|
{
|
|
"type": "text_block",
|
|
"text": "Item 8"
|
|
},
|
|
{
|
|
"type": "text_block",
|
|
"text": "Item 9"
|
|
},
|
|
{
|
|
"type": "text_block",
|
|
"text": "Item 10"
|
|
}
|
|
],
|
|
"layout_mode": {
|
|
"type": "fixed",
|
|
"neighbour_page_width": {
|
|
"type": "fixed",
|
|
"value": 16
|
|
}
|
|
},
|
|
"paddings": {
|
|
"right": 4,
|
|
"left": 4
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|