Add navbar

This commit is contained in:
Roman Gotsiy 2015-11-04 21:31:10 +02:00
parent 20157a6743
commit 9a036b40e6
3 changed files with 52 additions and 0 deletions

View File

@ -6,6 +6,11 @@
<link rel="stylesheet" href="dist/redoc.full.css"> <link rel="stylesheet" href="dist/redoc.full.css">
</head> </head>
<body> <body>
<nav>
<input id="schema-url-input" value='swagger.json'>
<button id="load-button"> Explore </button>
</nav>
</nav>
<side-menu> <side-menu>
</side-menu> </side-menu>
<!-- The wrapper component --> <!-- The wrapper component -->
@ -15,6 +20,7 @@
<!-- ReDoc built file with all dependencies included --> <!-- ReDoc built file with all dependencies included -->
<script src="dist/redoc.full.js"> </script> <script src="dist/redoc.full.js"> </script>
<script src="main.js"> </script>
<script> <script>
/* init redoc */ /* init redoc */
Redoc.init('swagger.json'); Redoc.init('swagger.json');

View File

@ -4,6 +4,43 @@ body {
color: #333; color: #333;
margin: 0; margin: 0;
line-height: 1.5; line-height: 1.5;
padding-top: 50px;
}
nav input, nav button {
font-size: 16px;
line-height: 28px;
height: 28px;
box-sizing: border-box;
vertical-align: middle;
line-height: 1;
outline: none;
}
nav input {
width: 50%;
box-sizing: border-box;
max-width: 500px;
}
nav button {
background-color: white;
border: 1px solid #FFFFFF;
cursor: pointer;
color: white;
background-color: #21476D;
padding: 2px 10px;
}
nav {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #053361;
position: fixed;
top: 0;
z-index: 1;
} }
side-menu, redoc { side-menu, redoc {

9
demo/main.js Normal file
View File

@ -0,0 +1,9 @@
;(function() {
'use strict';
var loadButton = document.getElementById('load-button');
var schemaUrlInput = document.getElementById('schema-url-input');
loadButton.addEventListener('click', function() {
Redoc.init(schemaUrlInput.value);
})
})();