penframe
Version:
A lightweight DSL-based wireframe and UI structure visualization tool.
103 lines (102 loc) • 2.44 kB
JSON
[
{
"type": "config",
"name": "app",
"platform": "pc",
"width": 1440,
"height": 1024,
"scale": 0.8,
"title": "Sample Wireframe",
"description": "This is a sample wireframe"
},
{
"type": "headline",
"value": "First Headline",
"level": 1
},
{
"type": "headline",
"value": "Seconnd Headline",
"level": 2
},
{
"type": "container",
"y": 0,
"x": 0,
"width": 350,
"height": 1024,
"children": [
{
"type": "headline",
"value": "side menu",
"level": 1
}
]
},
{
"type": "container",
"x": 350,
"height": 1024,
"children": [
{
"type": "headline",
"value": "main content",
"level": 1
},
{
"type": "paragraph",
"value": "This is the first paragraph. It is left-aligned by default.",
"x": 20
},
{
"type": "paragraph",
"value": "This is the first paragraph. It is left-aligned by default.",
"x": 20,
"color": "#f00"
},
{
"type": "button",
"align": "right",
"x": -20,
"value": "編集"
},
{
"type": "formcontrol",
"label": "氏名",
"control": "textbox",
"width": 300,
"placeholder": "お名前を入力してください。"
},
{
"type": "table",
"headers": ["Select", "User", "Role", "Enabled"],
"widths": [80, 250, 250, 100],
"rows": [
[
{ "type": "checkbox", "value": true },
{ "type": "text", "value": "administrator", "color": "#0066cc" },
{ "type": "textbox", "placeholder": "Admin" },
{ "type": "checkbox", "value": true }
],
[
{ "type": "checkbox", "value": false },
{ "type": "text", "value": "support-user", "color": "#0066cc" },
{ "type": "textbox", "placeholder": "Support" },
{ "type": "checkbox", "value": true }
],
[
{ "type": "checkbox", "value": false },
{ "type": "text", "value": "guest-user" },
{ "type": "textbox", "placeholder": "Guest" },
{ "type": "checkbox", "value": false }
]
]
},
{
"type": "button",
"value": "戻る",
"x": 20,"y": 850
}
]
}
]