adding complete-example

Author: dev-javascript

example/basic/App.css

@@ -0,0 +1,54 @@
+body {
+  position: relative;
+  left: 0px;
+  top: 0px;
+  margin: 0px;
+  padding: 0px;
+  background-color: lavender;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+select,
+button,
+input {
+  outline: none;
+}
+
+#root {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
+}
+
+#header {
+  position: relative;
+  margin: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#header a {
+  text-decoration: none;
+  z-index: 2;
+}
+
+#header h1 {
+  text-align: center;
+  color: #ab0000;
+  margin: 0px;
+}
+
+#actions > div {
+  margin-right: 150px;
+}
+
+@media only screen and (max-width: 580px) {
+  #header {
+    display: table;
+    margin: auto;
+  }
+}

example/basic/App.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import './App.css';
+import Tabs from './components/tabs/tabs.js';
+function App() {
+  return (
+    <>
+      <div id="header">
+        <a href="https://github.com/dev-javascript/react-dyn-tabs" target="_blank">
+          <h1>react-dyn-tabs</h1>
+        </a>
+      </div>
+      <Tabs />
+    </>
+  );
+}
+
+export default App;

example/basic/com/basic/com/eager/eagerPanel1.js

@@ -0,0 +1,60 @@
+#actions > div {
+  margin-right: 150px;
+}
+
+@media only screen and (max-width: 580px) {
+  #actions > div {
+    margin-right: 0px;
+  }
+}
+
+#actions {
+  margin-bottom: 5px;
+  display: table;
+  background-color: #eff0f1;
+  padding: 10px;
+  border-radius: 7px;
+  margin: 10px;
+  overflow: hidden;
+}
+
+#actions button {
+  float: left;
+  margin: 2px;
+  white-space: nowrap;
+}
+
+.log-container {
+  position: relative;
+}
+
+.log-container::before {
+  content: 'event log';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-weight: 500;
+  color: #80808075;
+}
+
+.log {
+  background-color: #eff0f1;
+  margin: 10px;
+  color: #00000080;
+  border-radius: 7px;
+  max-height: 100px;
+  overflow: auto;
+}
+
+.log > pre {
+  padding: 10px;
+  margin: 0px;
+}
+
+.clear-log {
+  position: absolute;
+  right: 30px;
+  top: 5px;
+  cursor: pointer;
+}