complete examples

dev-javascript · Jul 20, 2024 · ac33113 · ac33113
1 parent 062f0b6
commit ac33113
Show file tree

Hide file tree

Showing 22 changed files with 3,908 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -112,12 +112,12 @@ const initialOptions = {
     {
       id: '1',
       title: 'tab 1',
-      panelComponent: (porps) => <p> panel 1 </p>,
+      panelComponent: (props) => <p> panel 1 </p>,
     },
     {
       id: '2',
       title: 'tab 2',
-      panelComponent: (porps) => <p> panel 2 </p>,
+      panelComponent: (props) => <p> panel 2 </p>,
     },
   ],
   selectedTabID: '1',
@@ -147,12 +147,12 @@ const initialOptions = {
     {
       id: '1',
       title: 'tab1',
-      panelComponent: (porps) => <p> panel 1 </p>,
+      panelComponent: (props) => <p> panel 1 </p>,
     },
     {
       id: '2',
       title: 'tab2',
-      panelComponent: (porps) => <p> panel 2 </p>,
+      panelComponent: (props) => <p> panel 2 </p>,
     },
   ],
   selectedTabID: '1',
@@ -163,7 +163,7 @@ export default () => {
   const addTab3 = function () {
     ready((instance) => {
       // open tab 3
-      instance.open({id: '3', title: 'Tab 3', panelComponent: (porps) => <p> panel 3 </p>}).then(() => {
+      instance.open({id: '3', title: 'Tab 3', panelComponent: (props) => <p> panel 3 </p>}).then(() => {
         console.log('tab 3 is open');
       });
       // switch to tab 3
@@ -232,15 +232,15 @@ const [TabList, PanelList, ready] = useDynTabs({
       title: 'home',
       iconClass: 'fa fa-home',
       closable: true,
-      panelComponent: (porps) => <p> home content </p>,
+      panelComponent: (props) => <p> home content </p>,
     },
     {
       id: '2',
       title: 'contact',
       tooltip: 'contact',
       disable: true,
       closable: false,
-      panelComponent: (porps) => <p> contact content </p>,
+      panelComponent: (props) => <p> contact content </p>,
     },
   ],
 });
@@ -275,15 +275,15 @@ const [TabList, PanelList, ready] = useDynTabs({
       title: 'home',
       iconClass: 'fa fa-home',
       closable: true,
-      panelComponent: (porps) => <p> home content </p>,
+      panelComponent: (props) => <p> home content </p>,
     },
     {
       id: '2',
       title: 'contact',
       tooltip: 'contact',
       disable: true,
       closable: false,
-      panelComponent: (porps) => <p> contact content </p>,
+      panelComponent: (props) => <p> contact content </p>,
     },
   ],
   selectedTabID: '2',
@@ -1152,7 +1152,7 @@ const tabData = {
   lazy: true,
   iconClass: 'fa fa-home',
   closable: false,
-  panelComponent: (porps) => <p> contact content </p>,
+  panelComponent: (props) => <p> contact content </p>,
 };
 const [TabList, PanelList, ready] = useDynTabs({tabs: [tabData]});
 // or
@@ -1169,10 +1169,10 @@ Example 1
 
 ```js
 const Panel3 = React.lazy(() => import('./components/panel3.js'));
-function LazyLoadingPanel3(porps) {
+function LazyLoadingPanel3(props) {
   return (
     <Suspense fallback={<div>Loading...</div>}>
-      <Panel3 {...porps}></Panel3>
+      <Panel3 {...props}></Panel3>
     </Suspense>
   );
 }

diff --git a/example/stories/change-options/README.md b/example/stories/change-options/README.md
@@ -0,0 +1,201 @@
+### change Theme
+
+```jsx
+import React from 'react';
+import 'react-dyn-tabs/style/react-dyn-tabs.css';
+import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
+import 'react-dyn-tabs/themes/react-dyn-tabs-bootstrap.css';
+import 'react-dyn-tabs/themes/react-dyn-tabs-classic.css';
+import 'react-dyn-tabs/themes/react-dyn-tabs-basic.css';
+import useDynTabs from 'react-dyn-tabs';
+
+const initialOptions = {
+  tabs: [
+    {
+      id: '1',
+      title: 'tab1',
+      iconClass: 'fa fa-home',
+      panelComponent: (props) => <p> panel 1 </p>,
+    },
+    {
+      id: '2',
+      title: 'tab2',
+      iconClass: 'fa fa-book',
+      panelComponent: (props) => <p> panel 2 </p>,
+    },
+  ],
+  selectedTabID: '1',
+  theme: 'card',
+};
+
+function App() {
+  const [TabList, PanelList, ready] = useDynTabs(initialOptions);
+
+  const changeTheme = function (e) {
+    ready((instance) => {
+      instance.setOption('theme', e.target.value);
+      instance.refresh();
+    });
+  };
+
+  return (
+    <div>
+      <select onChange={changeTheme} style={{marginBottom: '15px'}}>
+        <option value="card">card theme</option>
+        <option value="bootstrap">bootstrap theme</option>
+        <option value="classic">classic theme</option>
+        <option value="basic">basic theme</option>
+      </select>
+      <TabList></TabList>
+      <PanelList></PanelList>
+    </div>
+  );
+}
+<App />;
+```
+
+### change direction
+
+```jsx
+import React from 'react';
+import 'react-dyn-tabs/style/react-dyn-tabs.css';
+import 'react-dyn-tabs/style/react-dyn-tabs-rtl.css';
+import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
+import useDynTabs from 'react-dyn-tabs';
+
+const initialOptions = {
+  tabs: [
+    {
+      id: '1',
+      title: 'tab1',
+      panelComponent: (props) => <p> panel 1 </p>,
+    },
+    {
+      id: '2',
+      title: 'tab2',
+      panelComponent: (props) => <p> panel 2 </p>,
+    },
+  ],
+  selectedTabID: '1',
+  theme: 'card',
+};
+
+function App() {
+  const [TabList, PanelList, ready] = useDynTabs(initialOptions);
+  const rightToLeft = function () {
+    ready((instance) => {
+      instance.setOption('direction', 'rtl');
+      instance.refresh();
+    });
+  };
+
+  return (
+    <div>
+      <button onClick={rightToLeft}>right to left</button>
+      <TabList></TabList>
+      <PanelList></PanelList>
+    </div>
+  );
+}
+<App />;
+```
+
+### change isVertical
+
+```jsx
+import React from 'react';
+import 'react-dyn-tabs/style/react-dyn-tabs.css';
+import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
+import useDynTabs from 'react-dyn-tabs';
+
+const initialOptions = {
+  tabs: [
+    {
+      id: '1',
+      title: 'tab1',
+      panelComponent: (props) => <p> panel 1 </p>,
+    },
+    {
+      id: '2',
+      title: 'tab2',
+      panelComponent: (props) => <p> panel 2 </p>,
+    },
+  ],
+  selectedTabID: '1',
+  theme: 'card',
+};
+
+function App() {
+  const [TabList, PanelList, ready] = useDynTabs(initialOptions);
+  const setVertical = function () {
+    ready((instance) => {
+      instance.setOption('isVertical', true);
+      instance.refresh();
+    });
+  };
+
+  return (
+    <div>
+      <div>
+        <button onClick={setVertical}>vertical</button>
+      </div>
+      <TabList></TabList>
+      <PanelList></PanelList>
+    </div>
+  );
+}
+<App />;
+```
+
+### change Tab component
+
+```jsx
+import React from 'react';
+import 'react-dyn-tabs/style/react-dyn-tabs.css';
+import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
+import useDynTabs from 'react-dyn-tabs';
+
+const initialOptions = {
+  tabs: [
+    {
+      id: '1',
+      title: 'tab1',
+      iconClass: 'fa fa-home',
+      panelComponent: (props) => <p> panel 1 </p>,
+    },
+    {
+      id: '2',
+      title: 'tab2',
+      iconClass: 'fa fa-book',
+      panelComponent: (props) => <p> panel 2 </p>,
+    },
+  ],
+  selectedTabID: '1',
+  theme: 'card',
+};
+
+function App() {
+  const [TabList, PanelList, ready] = useDynTabs(initialOptions);
+
+  const customizeTabComponent = function () {
+    ready((instance) => {
+      instance.setOption('tabComponent', (props) => (
+        <button {...props.tabProps} style={{display: 'flex', flexDirection: 'column'}}>
+          {props.iconProps && <span {...props.iconProps}></span>}
+          <span>{props.children}</span>
+        </button>
+      ));
+      instance.refresh();
+    });
+  };
+
+  return (
+    <div>
+      <button onClick={customizeTabComponent}>Customize Tab Component</button>
+      <TabList></TabList>
+      <PanelList></PanelList>
+    </div>
+  );
+}
+<App />;
+```