Skip to content

Commit

Permalink
chore: add docs for tabs (#2235)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nmerget
nmerget authored Feb 23, 2024
1 parent 2bad9bd commit 184c57c
Show file tree
Hide file tree
Showing 21 changed files with 590 additions and 55 deletions.
20 changes: 15 additions & 5 deletions packages/components/src/components/tab-list/docs/Angular.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
...
})

Expand All @@ -20,7 +23,14 @@ import { DBTabListModule } from '@db-ui/ngx-components';

```html app.component.html
<!-- app.component.html -->
<db-tab-list>TabList</db-tab-list>
<db-tabs>
<db-tab-list>
<db-tab>Tab 1</db-tab>
<db-tab>Tab 2</db-tab>
<db-tab>Tab 3</db-tab>
</db-tab-list>
<db-tab-panel>Tab Panel 1</db-tab-panel>
<db-tab-panel>Tab Panel 2</db-tab-panel>
<db-tab-panel>Tab Panel 3</db-tab-panel>
</db-tabs>
```


69 changes: 66 additions & 3 deletions packages/components/src/components/tab-list/docs/HTML.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,72 @@ For general installation and configuration take a look at the [components](https
<!-- index.html -->
...
<body>
<div class="db-tab-list">
TabList
<div class="db-tabs">
<div role="tablist" class="db-tab-list" aria-orientation="horizontal">
<div class="db-tab-list-scroll-container">
<label
role="tab"
for="my-tabs-tab-0"
class="db-tab"
data-width="auto"
data-alignment="start"
aria-controls="my-tabs-tab-panel-0"
><input
type="radio"
id="my-tabs-tab-0"
name="my-tabs"
/>Test 1</label
><label
role="tab"
for="my-tabs-tab-1"
class="db-tab"
data-width="auto"
data-alignment="start"
aria-controls="my-tabs-tab-panel-1"
><input
type="radio"
id="my-tabs-tab-1"
name="my-tabs"
/>Test 2</label
><label
role="tab"
for="my-tabs-tab-2"
class="db-tab"
data-width="auto"
data-alignment="start"
aria-controls="my-tabs-tab-panel-2"
><input
type="radio"
id="my-tabs-tab-2"
name="my-tabs"
/>Test 3</label
>
</div>
</div>
<article
role="tabpanel"
class="db-tab-panel"
id="my-tabs-tab-panel-0"
aria-labelledby="my-tabs-tab-0"
>
Tab Panel 1
</article>
<article
role="tabpanel"
class="db-tab-panel"
id="my-tabs-tab-panel-1"
aria-labelledby="my-tabs-tab-1"
>
Tab Panel 2
</article>
<article
role="tabpanel"
class="db-tab-panel"
id="my-tabs-tab-panel-2"
aria-labelledby="my-tabs-tab-2"
>
Tab Panel 3
</article>
</div>
</body>
```

8 changes: 8 additions & 0 deletions packages/components/src/components/tab-list/docs/Migration.md
View file
Original file line number Diff line number Diff line change
@@ -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 🥳
16 changes: 11 additions & 5 deletions packages/components/src/components/tab-list/docs/React.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => (
<DBTabList>
TabList
</DBTabList>
<DBTabs>
<DBTabList>
<DBTab>Tab 1</DBTab>
<DBTab>Tab 2</DBTab>
<DBTab>Tab 3</DBTab>
</DBTabList>
<DBTabPanel>Tab Panel 1</DBTabPanel>
<DBTabPanel>Tab Panel 2</DBTabPanel>
<DBTabPanel>Tab Panel 3</DBTabPanel>
</DBTabs>
);

export default App;
```

15 changes: 11 additions & 4 deletions packages/components/src/components/tab-list/docs/Vue.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,19 @@ For general installation and configuration take a look at the [v-components](htt
```vue App.vue
<!-- App.vue -->
<script>
import { DBTabList } from "@db-ui/v-components";
import { DBTabPanel, DBTabs, DBTabList, DBTab } from "@db-ui/v-components";
</script>
<template>
<DBTabList>TabList</DBTabList>
<DBTabs>
<DBTabList>
<DBTab>Tab 1</DBTab>
<DBTab>Tab 2</DBTab>
<DBTab>Tab 3</DBTab>
</DBTabList>
<DBTabPanel>Tab Panel 1</DBTabPanel>
<DBTabPanel>Tab Panel 2</DBTabPanel>
<DBTabPanel>Tab Panel 3</DBTabPanel>
</DBTabs>
</template>
```


20 changes: 15 additions & 5 deletions packages/components/src/components/tab-panel/docs/Angular.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
...
})

Expand All @@ -20,7 +23,14 @@ import { DBTabPanelModule } from '@db-ui/ngx-components';

```html app.component.html
<!-- app.component.html -->
<db-tab-panel>TabPanel</db-tab-panel>
<db-tabs>
<db-tab-list>
<db-tab>Tab 1</db-tab>
<db-tab>Tab 2</db-tab>
<db-tab>Tab 3</db-tab>
</db-tab-list>
<db-tab-panel>Tab Panel 1</db-tab-panel>
<db-tab-panel>Tab Panel 2</db-tab-panel>
<db-tab-panel>Tab Panel 3</db-tab-panel>
</db-tabs>
```


69 changes: 66 additions & 3 deletions packages/components/src/components/tab-panel/docs/HTML.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,72 @@ For general installation and configuration take a look at the [components](https
<!-- index.html -->
...
<body>
<div class="db-tab-panel">
TabPanel
<div class="db-tabs">
<div role="tablist" class="db-tab-list" aria-orientation="horizontal">
<div class="db-tab-list-scroll-container">
<label
role="tab"
for="my-tabs-tab-0"
class="db-tab"
data-width="auto"
data-alignment="start"
aria-controls="my-tabs-tab-panel-0"
><input
type="radio"
id="my-tabs-tab-0"
name="my-tabs"
/>Test 1</label
><label
role="tab"
for="my-tabs-tab-1"
class="db-tab"
data-width="auto"
data-alignment="start"
aria-controls="my-tabs-tab-panel-1"
><input
type="radio"
id="my-tabs-tab-1"
name="my-tabs"
/>Test 2</label
><label
role="tab"
for="my-tabs-tab-2"
class="db-tab"
data-width="auto"
data-alignment="start"
aria-controls="my-tabs-tab-panel-2"
><input
type="radio"
id="my-tabs-tab-2"
name="my-tabs"
/>Test 3</label
>
</div>
</div>
<article
role="tabpanel"
class="db-tab-panel"
id="my-tabs-tab-panel-0"
aria-labelledby="my-tabs-tab-0"
>
Tab Panel 1
</article>
<article
role="tabpanel"
class="db-tab-panel"
id="my-tabs-tab-panel-1"
aria-labelledby="my-tabs-tab-1"
>
Tab Panel 2
</article>
<article
role="tabpanel"
class="db-tab-panel"
id="my-tabs-tab-panel-2"
aria-labelledby="my-tabs-tab-2"
>
Tab Panel 3
</article>
</div>
</body>
```

8 changes: 8 additions & 0 deletions packages/components/src/components/tab-panel/docs/Migration.md
View file
Original file line number Diff line number Diff line change
@@ -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 🥳
16 changes: 11 additions & 5 deletions packages/components/src/components/tab-panel/docs/React.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => (
<DBTabPanel>
TabPanel
</DBTabPanel>
<DBTabs>
<DBTabList>
<DBTab>Tab 1</DBTab>
<DBTab>Tab 2</DBTab>
<DBTab>Tab 3</DBTab>
</DBTabList>
<DBTabPanel>Tab Panel 1</DBTabPanel>
<DBTabPanel>Tab Panel 2</DBTabPanel>
<DBTabPanel>Tab Panel 3</DBTabPanel>
</DBTabs>
);

export default App;
```

15 changes: 11 additions & 4 deletions packages/components/src/components/tab-panel/docs/Vue.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,19 @@ For general installation and configuration take a look at the [v-components](htt
```vue App.vue
<!-- App.vue -->
<script>
import { DBTabPanel } from "@db-ui/v-components";
import { DBTabPanel, DBTabs, DBTabList, DBTab } from "@db-ui/v-components";
</script>
<template>
<DBTabPanel>TabPanel</DBTabPanel>
<DBTabs>
<DBTabList>
<DBTab>Tab 1</DBTab>
<DBTab>Tab 2</DBTab>
<DBTab>Tab 3</DBTab>
</DBTabList>
<DBTabPanel>Tab Panel 1</DBTabPanel>
<DBTabPanel>Tab Panel 2</DBTabPanel>
<DBTabPanel>Tab Panel 3</DBTabPanel>
</DBTabs>
</template>
```


35 changes: 34 additions & 1 deletion packages/components/src/components/tab/docs/Angular.md
View file
Original file line number Diff line number Diff line change
@@ -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
<!-- app.component.html -->
<db-tabs>
<db-tab-list>
<db-tab>Tab 1</db-tab>
<db-tab>Tab 2</db-tab>
<db-tab>Tab 3</db-tab>
</db-tab-list>
<db-tab-panel>Tab Panel 1</db-tab-panel>
<db-tab-panel>Tab Panel 2</db-tab-panel>
<db-tab-panel>Tab Panel 3</db-tab-panel>
</db-tabs>
```
Loading

0 comments on commit 184c57c

Please sign in to comment.