mirror of
https://github.com/divkit/divkit.git
synced 2026-06-06 20:07:59 +00:00
87 lines
3.2 KiB
HTML
87 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Document</title>
|
|
<link rel="stylesheet" type="text/css" href="node_modules/@divkitframework/divkit/dist/client.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="root"></div>
|
|
|
|
<script type="module">
|
|
import { render } from './node_modules/@divkitframework/divkit/dist/esm/client.mjs';
|
|
import './customElement.js';
|
|
|
|
render({
|
|
id: 'test',
|
|
target: document.querySelector('#root'),
|
|
customComponents: new Map([
|
|
['custom_container', {
|
|
element: 'custom-container'
|
|
}]
|
|
]),
|
|
json: {
|
|
"templates": {
|
|
"news_item_template": {
|
|
"type": "text",
|
|
"font_size": 16,
|
|
"line_height": 20,
|
|
"text_color": "#333",
|
|
"$text": "news_item_text",
|
|
"paddings": {
|
|
"left": 12,
|
|
"right": 12,
|
|
"top": 8
|
|
}
|
|
}
|
|
},
|
|
"card": {
|
|
"log_id": "custom_card",
|
|
"states": [
|
|
{
|
|
"state_id": 0,
|
|
"div": {
|
|
"type": "container",
|
|
"margins": {
|
|
"left": 16,
|
|
"top": 16,
|
|
"right": 16,
|
|
"bottom": 16
|
|
},
|
|
"items": [
|
|
{
|
|
"type": "custom",
|
|
"custom_type": "custom_container",
|
|
"items": [
|
|
{
|
|
"type": "news_item_template",
|
|
"news_item_text": "This is div-text item 1"
|
|
},
|
|
{
|
|
"type": "news_item_template",
|
|
"news_item_text": "This is div-text item 2"
|
|
},
|
|
{
|
|
"type": "news_item_template",
|
|
"news_item_text": "This is div-text item 3"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|