add basic example

Author: dev-javascript

example/.gitignore

@@ -0,0 +1,10 @@
+import './App.css';
+import Basic from './com/basic/index.js';
+
+function App() {
+  return (
+    <Basic></Basic>
+  );
+}
+
+export default App;

example/README.md

@@ -0,0 +1,8 @@
+import React from 'react';
+export default function (props) {
+    return (
+        <p>
+            {'eager tab content 1'}
+        </p>
+    );
+};

example/basic/App.css

@@ -0,0 +1,8 @@
+import React from 'react';
+export default function (props) {
+    return (
+        <p>
+            {'eager tab content 2'}
+        </p>
+    );
+};

example/basic/App.js

@@ -0,0 +1,15 @@
+import React from 'react';
+//import useDynTabs from 'react-dyn-tabs/dist/react-dyn-tabs.umd.js';
+import useDynTabs from 'react-dyn-tabs';
+import service from './service/index.js';
+import './index.css';
+export default function (props) {
+    const options = service.getLocalData();
+    const [Tablist, Panellist, api] = useDynTabs(options);
+    return (
+        <>
+            <Tablist></Tablist>
+            <Panellist></Panellist>
+        </>
+    );
+};

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import MockPanel1 from '../com/eager/eagerPanel1.js';
+import MockPanel2 from '../com/eager/eagerPanel2.js';
+export default {
+    getLocalData: function () {
+        return {
+            tabs: [{
+                id: '1',
+                title: 'mock tab 1',
+                closable: true,
+                panelComponent: <MockPanel1></MockPanel1>
+            }, {
+                id: '2',
+                title: 'mock tab 2',
+                iconClass: 'ui-icon ui-icon-seek-end',
+                closable: true,
+                panelComponent: <MockPanel2></MockPanel2>
+            }],
+            selectedTabID: '1',
+            onSelect: (switchTabsId, api) => {
+            }
+        };
+    }
+};

example/basic/com/basic/com/eager/eagerPanel2.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App.js';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+