From 184c57c9dc403d965707dd1a5e642f1bacc58ae5 Mon Sep 17 00:00:00 2001 From: Nicolas Merget <104347736+nmerget@users.noreply.github.com> Date: Fri, 23 Feb 2024 15:09:09 +0100 Subject: [PATCH] chore: add docs for tabs (#2235) --- .../src/components/tab-list/docs/Angular.md | 20 +++-- .../src/components/tab-list/docs/HTML.md | 69 ++++++++++++++- .../src/components/tab-list/docs/Migration.md | 8 ++ .../src/components/tab-list/docs/React.md | 16 ++-- .../src/components/tab-list/docs/Vue.md | 15 +++- .../src/components/tab-panel/docs/Angular.md | 20 +++-- .../src/components/tab-panel/docs/HTML.md | 69 ++++++++++++++- .../components/tab-panel/docs/Migration.md | 8 ++ .../src/components/tab-panel/docs/React.md | 16 ++-- .../src/components/tab-panel/docs/Vue.md | 15 +++- .../src/components/tab/docs/Angular.md | 35 +++++++- .../src/components/tab/docs/HTML.md | 78 ++++++++++++++++- .../src/components/tab/docs/Migration.md | 18 ++++ .../src/components/tab/docs/React.md | 24 +++++- .../components/src/components/tab/docs/Vue.md | 24 +++++- .../src/components/tabs/docs/Angular.md | 20 +++-- .../src/components/tabs/docs/HTML.md | 67 ++++++++++++++- .../src/components/tabs/docs/Migration.md | 12 +++ .../src/components/tabs/docs/React.md | 12 ++- .../src/components/tabs/docs/Vue.md | 15 +++- showcases/shared/tabs.json | 84 ++++++++++++++++++- 21 files changed, 590 insertions(+), 55 deletions(-) create mode 100644 packages/components/src/components/tab-list/docs/Migration.md create mode 100644 packages/components/src/components/tab-panel/docs/Migration.md create mode 100644 packages/components/src/components/tab/docs/Migration.md create mode 100644 packages/components/src/components/tabs/docs/Migration.md diff --git a/packages/components/src/components/tab-list/docs/Angular.md b/packages/components/src/components/tab-list/docs/Angular.md index 43de7103896..d2e549a8f88 100644 --- a/packages/components/src/components/tab-list/docs/Angular.md +++ b/packages/components/src/components/tab-list/docs/Angular.md @@ -4,13 +4,16 @@ For general installation and configuration take a look at the [ngx-components](h ### Load component +You can't use the component standalone! + ```ts app.module.ts //app.module.ts -import { DBTabListModule } from '@db-ui/ngx-components'; +import { DBTab, DBTabList, DBTabPanel, DBTabs } from '@db-ui/ngx-components'; @NgModule({ ... - imports: [..., DBTabListModule], + standalone: true, + imports: [..., DBTab,DBTabList,DBTabPanel,DBTabs], ... }) @@ -20,7 +23,14 @@ import { DBTabListModule } from '@db-ui/ngx-components'; ```html app.component.html -TabList + + + Tab 1 + Tab 2 + Tab 3 + + Tab Panel 1 + Tab Panel 2 + Tab Panel 3 + ``` - - diff --git a/packages/components/src/components/tab-list/docs/HTML.md b/packages/components/src/components/tab-list/docs/HTML.md index c8a6dbcfa0b..bbbb2ed375e 100644 --- a/packages/components/src/components/tab-list/docs/HTML.md +++ b/packages/components/src/components/tab-list/docs/HTML.md @@ -8,9 +8,72 @@ For general installation and configuration take a look at the [components](https ... -
- TabList +
+
+
+ +
+
+
+ Tab Panel 1 +
+
+ Tab Panel 2 +
+
+ Tab Panel 3 +
``` - diff --git a/packages/components/src/components/tab-list/docs/Migration.md b/packages/components/src/components/tab-list/docs/Migration.md new file mode 100644 index 00000000000..5f5eb8a04d6 --- /dev/null +++ b/packages/components/src/components/tab-list/docs/Migration.md @@ -0,0 +1,8 @@ +## General + +> **Note** +> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ui/components). + +## DB UI Core ➡ DB UI Components + +New Component 🥳 diff --git a/packages/components/src/components/tab-list/docs/React.md b/packages/components/src/components/tab-list/docs/React.md index 617cf71fdb4..aa011c14cd2 100644 --- a/packages/components/src/components/tab-list/docs/React.md +++ b/packages/components/src/components/tab-list/docs/React.md @@ -6,14 +6,20 @@ For general installation and configuration take a look at the [react-components] ```tsx App.tsx // App.tsx -import { DBTabList } from "@db-ui/react-components"; +import { DBTab, DBTabList, DBTabs, DBTabPanel } from "@db-ui/react-components"; const App = () => ( - - TabList - + + + Tab 1 + Tab 2 + Tab 3 + + Tab Panel 1 + Tab Panel 2 + Tab Panel 3 + ); export default App; ``` - diff --git a/packages/components/src/components/tab-list/docs/Vue.md b/packages/components/src/components/tab-list/docs/Vue.md index ea932b6644d..423dc4ac3cc 100644 --- a/packages/components/src/components/tab-list/docs/Vue.md +++ b/packages/components/src/components/tab-list/docs/Vue.md @@ -7,12 +7,19 @@ For general installation and configuration take a look at the [v-components](htt ```vue App.vue ``` - - diff --git a/packages/components/src/components/tab-panel/docs/Angular.md b/packages/components/src/components/tab-panel/docs/Angular.md index e7a73fea293..d2e549a8f88 100644 --- a/packages/components/src/components/tab-panel/docs/Angular.md +++ b/packages/components/src/components/tab-panel/docs/Angular.md @@ -4,13 +4,16 @@ For general installation and configuration take a look at the [ngx-components](h ### Load component +You can't use the component standalone! + ```ts app.module.ts //app.module.ts -import { DBTabPanelModule } from '@db-ui/ngx-components'; +import { DBTab, DBTabList, DBTabPanel, DBTabs } from '@db-ui/ngx-components'; @NgModule({ ... - imports: [..., DBTabPanelModule], + standalone: true, + imports: [..., DBTab,DBTabList,DBTabPanel,DBTabs], ... }) @@ -20,7 +23,14 @@ import { DBTabPanelModule } from '@db-ui/ngx-components'; ```html app.component.html -TabPanel + + + Tab 1 + Tab 2 + Tab 3 + + Tab Panel 1 + Tab Panel 2 + Tab Panel 3 + ``` - - diff --git a/packages/components/src/components/tab-panel/docs/HTML.md b/packages/components/src/components/tab-panel/docs/HTML.md index 187e8ee28ac..bbbb2ed375e 100644 --- a/packages/components/src/components/tab-panel/docs/HTML.md +++ b/packages/components/src/components/tab-panel/docs/HTML.md @@ -8,9 +8,72 @@ For general installation and configuration take a look at the [components](https ... -
- TabPanel +
+
+
+ +
+
+
+ Tab Panel 1 +
+
+ Tab Panel 2 +
+
+ Tab Panel 3 +
``` - diff --git a/packages/components/src/components/tab-panel/docs/Migration.md b/packages/components/src/components/tab-panel/docs/Migration.md new file mode 100644 index 00000000000..5f5eb8a04d6 --- /dev/null +++ b/packages/components/src/components/tab-panel/docs/Migration.md @@ -0,0 +1,8 @@ +## General + +> **Note** +> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ui/components). + +## DB UI Core ➡ DB UI Components + +New Component 🥳 diff --git a/packages/components/src/components/tab-panel/docs/React.md b/packages/components/src/components/tab-panel/docs/React.md index 64d0a0f469b..aa011c14cd2 100644 --- a/packages/components/src/components/tab-panel/docs/React.md +++ b/packages/components/src/components/tab-panel/docs/React.md @@ -6,14 +6,20 @@ For general installation and configuration take a look at the [react-components] ```tsx App.tsx // App.tsx -import { DBTabPanel } from "@db-ui/react-components"; +import { DBTab, DBTabList, DBTabs, DBTabPanel } from "@db-ui/react-components"; const App = () => ( - - TabPanel - + + + Tab 1 + Tab 2 + Tab 3 + + Tab Panel 1 + Tab Panel 2 + Tab Panel 3 + ); export default App; ``` - diff --git a/packages/components/src/components/tab-panel/docs/Vue.md b/packages/components/src/components/tab-panel/docs/Vue.md index 37d4ce6deb5..423dc4ac3cc 100644 --- a/packages/components/src/components/tab-panel/docs/Vue.md +++ b/packages/components/src/components/tab-panel/docs/Vue.md @@ -7,12 +7,19 @@ For general installation and configuration take a look at the [v-components](htt ```vue App.vue ``` - - diff --git a/packages/components/src/components/tab/docs/Angular.md b/packages/components/src/components/tab/docs/Angular.md index 943dcb2bfcb..d2e549a8f88 100644 --- a/packages/components/src/components/tab/docs/Angular.md +++ b/packages/components/src/components/tab/docs/Angular.md @@ -1,3 +1,36 @@ ## Angular -TODO +For general installation and configuration take a look at the [ngx-components](https://www.npmjs.com/package/@db-ui/ngx-components) package. + +### Load component + +You can't use the component standalone! + +```ts app.module.ts +//app.module.ts +import { DBTab, DBTabList, DBTabPanel, DBTabs } from '@db-ui/ngx-components'; + +@NgModule({ + ... + standalone: true, + imports: [..., DBTab,DBTabList,DBTabPanel,DBTabs], + ... +}) + +``` + +### Use component + +```html app.component.html + + + + Tab 1 + Tab 2 + Tab 3 + + Tab Panel 1 + Tab Panel 2 + Tab Panel 3 + +``` diff --git a/packages/components/src/components/tab/docs/HTML.md b/packages/components/src/components/tab/docs/HTML.md index 9b0451f54aa..bbbb2ed375e 100644 --- a/packages/components/src/components/tab/docs/HTML.md +++ b/packages/components/src/components/tab/docs/HTML.md @@ -1,3 +1,79 @@ ## HTML -TODO +For general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ui/components) package. + +### Use component + +```html index.html + +... + +
+
+
+ +
+
+
+ Tab Panel 1 +
+
+ Tab Panel 2 +
+
+ Tab Panel 3 +
+
+ +``` diff --git a/packages/components/src/components/tab/docs/Migration.md b/packages/components/src/components/tab/docs/Migration.md new file mode 100644 index 00000000000..b12f4d1d1fe --- /dev/null +++ b/packages/components/src/components/tab/docs/Migration.md @@ -0,0 +1,18 @@ +## General + +> **Note** +> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ui/components). + +## DB UI Core ➡ DB UI Components + +### class + +| Before | Status | After | Description | +| ------------ | :----: | -------- | ----------- | +| `cmp-db-tab` | 🔁 | `db-tab` | | + +### name + +| Before | Status | After | Description | +| ------ | :----: | :---: | --------------------------------------------------------------------------------------------------- | +| `name` | ❌ | ❌ | It should be used with `db-tabs` which will add a the `name` from `db-tabs` to all tabs all at one. | diff --git a/packages/components/src/components/tab/docs/React.md b/packages/components/src/components/tab/docs/React.md index 906385cb178..aa011c14cd2 100644 --- a/packages/components/src/components/tab/docs/React.md +++ b/packages/components/src/components/tab/docs/React.md @@ -1,3 +1,25 @@ ## React -TODO +For general installation and configuration take a look at the [react-components](https://www.npmjs.com/package/@db-ui/react-components) package. + +### Use component + +```tsx App.tsx +// App.tsx +import { DBTab, DBTabList, DBTabs, DBTabPanel } from "@db-ui/react-components"; + +const App = () => ( + + + Tab 1 + Tab 2 + Tab 3 + + Tab Panel 1 + Tab Panel 2 + Tab Panel 3 + +); + +export default App; +``` diff --git a/packages/components/src/components/tab/docs/Vue.md b/packages/components/src/components/tab/docs/Vue.md index 340e02edf1d..423dc4ac3cc 100644 --- a/packages/components/src/components/tab/docs/Vue.md +++ b/packages/components/src/components/tab/docs/Vue.md @@ -1,3 +1,25 @@ ## Vue -TODO +For general installation and configuration take a look at the [v-components](https://www.npmjs.com/package/@db-ui/v-components) package. + +### Use component + +```vue App.vue + + + + +``` diff --git a/packages/components/src/components/tabs/docs/Angular.md b/packages/components/src/components/tabs/docs/Angular.md index 61d0fd5a2a1..d2e549a8f88 100644 --- a/packages/components/src/components/tabs/docs/Angular.md +++ b/packages/components/src/components/tabs/docs/Angular.md @@ -4,13 +4,16 @@ For general installation and configuration take a look at the [ngx-components](h ### Load component +You can't use the component standalone! + ```ts app.module.ts //app.module.ts -import { DBTabsModule } from '@db-ui/ngx-components'; +import { DBTab, DBTabList, DBTabPanel, DBTabs } from '@db-ui/ngx-components'; @NgModule({ ... - imports: [..., DBTabsModule], + standalone: true, + imports: [..., DBTab,DBTabList,DBTabPanel,DBTabs], ... }) @@ -20,7 +23,14 @@ import { DBTabsModule } from '@db-ui/ngx-components'; ```html app.component.html -Tabs + + + Tab 1 + Tab 2 + Tab 3 + + Tab Panel 1 + Tab Panel 2 + Tab Panel 3 + ``` - - diff --git a/packages/components/src/components/tabs/docs/HTML.md b/packages/components/src/components/tabs/docs/HTML.md index a732a55c3cf..bbbb2ed375e 100644 --- a/packages/components/src/components/tabs/docs/HTML.md +++ b/packages/components/src/components/tabs/docs/HTML.md @@ -9,8 +9,71 @@ For general installation and configuration take a look at the [components](https ...
- Tabs +
+
+ +
+
+
+ Tab Panel 1 +
+
+ Tab Panel 2 +
+
+ Tab Panel 3 +
``` - diff --git a/packages/components/src/components/tabs/docs/Migration.md b/packages/components/src/components/tabs/docs/Migration.md new file mode 100644 index 00000000000..1da0f7c6300 --- /dev/null +++ b/packages/components/src/components/tabs/docs/Migration.md @@ -0,0 +1,12 @@ +## General + +> **Note** +> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ui/components). + +## DB UI Core ➡ DB UI Components + +### class + +| Before | Status | After | Description | +| ------------- | :----: | --------- | ----------- | +| `cmp-tab-bar` | 🔁 | `db-tabs` | | diff --git a/packages/components/src/components/tabs/docs/React.md b/packages/components/src/components/tabs/docs/React.md index 15e668c693f..aa011c14cd2 100644 --- a/packages/components/src/components/tabs/docs/React.md +++ b/packages/components/src/components/tabs/docs/React.md @@ -6,14 +6,20 @@ For general installation and configuration take a look at the [react-components] ```tsx App.tsx // App.tsx -import { DBTabs } from "@db-ui/react-components"; +import { DBTab, DBTabList, DBTabs, DBTabPanel } from "@db-ui/react-components"; const App = () => ( - Tabs + + Tab 1 + Tab 2 + Tab 3 + + Tab Panel 1 + Tab Panel 2 + Tab Panel 3 ); export default App; ``` - diff --git a/packages/components/src/components/tabs/docs/Vue.md b/packages/components/src/components/tabs/docs/Vue.md index 0bd2762db1d..423dc4ac3cc 100644 --- a/packages/components/src/components/tabs/docs/Vue.md +++ b/packages/components/src/components/tabs/docs/Vue.md @@ -7,12 +7,19 @@ For general installation and configuration take a look at the [v-components](htt ```vue App.vue ``` - - diff --git a/showcases/shared/tabs.json b/showcases/shared/tabs.json index 1e006bad8a3..ef5357eb09c 100644 --- a/showcases/shared/tabs.json +++ b/showcases/shared/tabs.json @@ -5,17 +5,35 @@ { "name": "functional", "className": "db-ui-functional", - "props": {} + "props": {}, + "code": { + "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", + "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", + "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", + "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" + } }, { "name": "regular (Default)", "className": "db-ui-regular", - "props": {} + "props": {}, + "code": { + "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", + "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", + "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", + "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" + } }, { "name": "expressive", "className": "db-ui-expressive", - "props": {} + "props": {}, + "code": { + "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", + "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", + "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", + "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" + } } ] }, @@ -26,12 +44,24 @@ "name": "horizontal", "props": { "orientation": "horizontal" + }, + "code": { + "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", + "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", + "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", + "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" } }, { "name": "vertical", "props": { "orientation": "vertical" + }, + "code": { + "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", + "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", + "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", + "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" } } ] @@ -45,6 +75,12 @@ "className": "db-bg-informational", "props": { "width": "auto" + }, + "code": { + "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", + "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", + "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", + "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" } }, { @@ -53,6 +89,12 @@ "className": "db-bg-informational", "props": { "width": "full" + }, + "code": { + "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", + "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", + "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", + "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" } }, { @@ -62,6 +104,12 @@ "props": { "width": "full", "alignment": "center" + }, + "code": { + "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", + "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", + "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", + "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" } } ] @@ -74,6 +122,12 @@ "style": { "width": "300px" }, "props": { "width": "auto" + }, + "code": { + "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", + "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", + "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", + "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" } }, { @@ -81,6 +135,12 @@ "style": { "width": "300px" }, "props": { "overflow": true + }, + "code": { + "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", + "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", + "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", + "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" } }, { @@ -89,6 +149,12 @@ "props": { "overflow": true, "behaviour": "arrows" + }, + "code": { + "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", + "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", + "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", + "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" } } ] @@ -100,12 +166,24 @@ "name": "2 tab selected", "props": { "initialSelectedIndex": 1 + }, + "code": { + "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", + "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", + "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", + "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" } }, { "name": "nothing selected", "props": { "initialSelectedMode": "manually" + }, + "code": { + "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", + "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", + "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", + "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" } } ]