Skip to content

Instantly share code, notes, and snippets.

@branflake2267

branflake2267/docs-component-template-prototype.html

Last active November 3, 2019 16:36
Show Gist options
  • Save branflake2267/ae3f78fff10f5cc4a3a45fbcccb603fb to your computer and use it in GitHub Desktop.
Save branflake2267/ae3f78fff10f5cc4a3a45fbcccb603fb to your computer and use it in GitHub Desktop.
Download ZIP
Example component docs template prototype
Raw
docs-component-template-prototype.html
<!DOCTYPE html>
<html>
<head>
<title>${component_title}</title>
<!-- Font -->
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<!-- Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<script type="module">
import './example.component.js';
</script>
<body>
<style>
html {
font-family: 'Roboto', sans-serif;
}
body {
font-family: 'Roboto', sans-serif;
}
#components_header {
border: 1px solid gray;
}
#components_footer {
border: 1px solid gray;
}
#components_middle {
border: 1px solid blue;
display: flex;
}
#components_index {
border: 1px solid gray;
width: 250px;
}
#component_content {
border: 1px solid gray;
width: 100%;
}
#component_title {
border: 1px solid gray;
}
#component_tabs {
display: flex;
margin-bottom: 10px;
}
.component_tab {
padding: 20px;
width: 100px;
text-align: center;
cursor: pointer;
}
.component_tab_selected {
border-bottom: 2px solid green;
}
.component_tab_not_selected {}
.component_content_selected {}
.component_content_not_selected {
display: none;
}
.component_attribute {
padding: 10px;
}
#component_tab_overview {}
.component_contents_left_and_right {
/* border: 1px solid purple; */
display: flex;
}
.component_contents_left {
width: 100%;
}
.component_contents_right {
white-space: nowrap;
}
#component_tab_api {
/* border: 1px solid red; */
}
.component_tab_api_left_and_right {
display: flex;
}
.component_tab_api_left {
width: 100%;
}
.component_tab_api_right {
width: 100px;
}
</style>
<script>
function toggleTab(event) {
let componentContentEl = document.getElementById('component_content');
let componentTabsEls = componentContentEl.querySelectorAll('.component_tab');
let selected = -1;
for (let i = 0; i < componentTabsEls.length; i++) {
let tabEl = componentTabsEls[i];
if (tabEl === event.target) {
tabEl.classList.remove('component_tab_not_selected');
tabEl.classList.add('component_tab_selected');
selected = i;
} else {
tabEl.classList.remove('component_tab_selected');
tabEl.classList.add('component_tab_not_selected');
}
}
let componentContentsEls = componentContentEl.querySelectorAll('.component_content');
for (let i = 0; i < componentContentsEls.length; i++) {
let contentEl = componentContentsEls[i];
if (selected === i) {
contentEl.classList.remove('component_content_not_selected');
contentEl.classList.add('component_content_selected');
} else {
contentEl.classList.remove('component_content_selected');
contentEl.classList.add('component_content_not_selected');
}
}
}
function addTabListeners() {
let componentTabsEl = document.getElementById('component_tabs');
let componentTabsEls = componentTabsEl.querySelectorAll('.component_tab');
for (const tabEl of componentTabsEls) {
tabEl.onclick = toggleTab;
}
}
function documentOnReady() {
addTabListeners();
}
document.addEventListener("DOMContentLoaded", documentOnReady);
</script>
<div id='components_header'>
components header
</div>
<div id='components_middle'>
<div id='components_index'>
components index
</div>
<div id='component_content'>
<div id='component_title'>
component title
</div>
<div id='component_tabs'>
<div class='component_tab component_tab_selected'>Overview</div>
<div class='component_tab component_tab_not_selected'>Examples</div>
<div class='component_tab component_tab_not_selected'>API</div>
</div>
<div id='component_contents'>
<div id='component_tab_overview' class='component_content component_content_selected'>
<div class='component_contents_left_and_right'>
<div class='component_contents_left'>
<div class='component_attribute'>Component Name</div>
<div class='component_attribute'>Component Look <br> - Example by Code / Animated Gif / Image</div>
<div class='component_attribute'>Component Specs <br> - version </div>
<div class='component_attribute'>Component Purpose</div>
<div class='component_attribute'>Component Features & Benefits</div>
<div class='component_attribute'>Component Usage</div>
<div class='component_attribute'>Component Guides</div>
<div class='component_attribute'>Component Purchase</div>
</div>
<div class='component_contents_right'>
Overview Index
</div>
</div>
</div>
<div id='component_tab_examples' class='component_content component_content_not_selected'>
<sencha-docs-example></sencha-docs-example>
<sencha-docs-example></sencha-docs-example>
<sencha-docs-example></sencha-docs-example>
</div>
<div id='component_tab_api' class='component_content component_content_not_selected'>
<div class='component_tab_api_left_and_right'>
<div class='component_tab_api_left'>
<div class='component_attribute'>Component Name</div>
<div class='component_attribute'>Component Specs</div>
<div class='component_attribute'>Component Import</div>
<div class='component_attribute'>Component API Properties</div>
<div class='component_attribute'>Component API Methods</div>
<div class='component_attribute'>Component API Events</div>
</div>
<div class='component_tab_api_right'>
<div class='component_attribute'>API Index</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id='components_footer'>
components footer
</div>
</body>
</html>
@branflake2267
Copy link
Author

Screen Shot 2019-11-02 at 9 26 52 PM

ScreenFlow

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment