liuxm/json2dart
1
0
Fork 0
forked from lxm_flutter/json2dart
Code Issues Pull Requests Projects Releases Wiki Activity

修改了页面的样式

Browse Source
This commit is contained in:
Caijinglong
2018-08-08 09:36:50 +08:00
parent 4716743a87
commit 961628180c
3 changed files with 99 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
lib/json_generator.dart
View File

@@ -11,20 +11,22 @@ bool isCamelCase = true;
var downloadFileName = "";
const defaultValue = """{
"body": "",
"data": [1],
"input_content":["1"],
"list1":[{"name":"hello"}],
"number": [1.02],
"user":{"name":"abc"}
}""";
// const defaultValue = """{
// "body": "",
// "data": [1],
// "input_content":["1"],
// "list1":[{"name":"hello"}],
// "number": [1.02],
// "user":{"name":"abc"}
// }""";
const defaultValue = "";
void main() {
TextAreaElement jsonInput = querySelector("#json");
jsonInput.value = defaultValue;
jsonInput.onInput.listen((event) {
print(jsonInput.value);
refreshData();
});

54
web/index.html
View File

@@ -7,42 +7,46 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="scaffolded-by" content="https://github.com/google/stagehand" />
<title>hello_world</title>
<title>json2dart_for_json_serializable</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
<script defer src="main.dart.js"></script>
</head>
<body>
<h1>为了便利使用json_serializable库</h1>
<div>
<div id="input" class="textarea">
<div class="top">
将json粘贴至左边
</div>
<textarea id="json" title="json字符串"></textarea>
<div>
<button id="format">格式化</button>
</div>
<div class="title">
<span class="half_span">将json粘贴至左边</span>
<span class="half_span">
<div class="result_title">
类名称
<input id="out_entity_name" />
<input type="checkbox" id="use_json_key" />
<span id="check_label">jsonKey annotation</span>
<input type="checkbox" id="camelCase" />
<span id="camelCaseLabel">use camelCase</span>
</div>
<div id="file_name"></div>
</span>
</div>
<div id="output" class="textarea">
<div class="top"></div>
<div class="result_title">
类名称
<input id="out_entity_name" />
<input type="checkbox" id="use_json_key" />
<span id="check_label">jsonKey annotation</span>
<input type="checkbox" id="camelCase" />
<span id="camelCaseLabel">use camelCase</span>
</div>
<div id="file_name"></div>
<textarea id="result" title="结果"></textarea>
<div>
<div class="content">
<span class="half_span">
<textarea id="json" title="json字符串" class="content_area"></textarea>
</span>
<span class="half_span">
<textarea id="result" title="结果" class="content_area"></textarea>
</span>
</div>
<div class="func">
<span class="half_span">
<button id="format">格式化</button>
</span>
<span class="half_span">
<button id="copy">复制</button>
<button id="save">下载</button>
</div>
</span>
</div>
</div>
</body>

87
web/styles.css
View File

@@ -2,40 +2,73 @@
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
}
/*
.top {
height: 4vh;
text-align: center;
padding-top: 1vh;
}
.textarea {
width: 50%;
height: 90%;
text-align: center;
float: left;
}
textarea {
width: 90%;
height: 80vh;
height: 4vh;
text-align: center;
padding-top: 1vh;
}
.result_title {
padding-bottom: 15px;
padding-bottom: 15px;
}
#result {
width: 90%;
height: 70vh;
.textarea {
width: 50%;
height: 90%;
text-align: center;
float: left;
}
.content_area {
width: 80%;
height: 90vh;
text-align: center;
float: left;
}
.out_entity_name {
height: 40px;
}
height: 40px;
} */
h1 {
text-align: center;
}
.half_span {
width: 50%;
float: left;
text-align: center;
}
textarea {
width: 86%;
height: 70vh;
}
.content {
padding-top: 5vh;
}
.func .half_span {
height: 7rem;
padding-top: 1rem;
}
button {
width: 5rem;
height: 2rem;
font-size: 1rem;
}
#file_name {
font-size: 0.5rem;
padding-top: 5px;
color: mediumvioletred;
}