Skip to content

Commit 7044762

Browse files
Mohammad JavedMohammad Javed
Mohammad Javed
authored and
Mohammad Javed
committed
docs(Tabs): Added docs for tabs component
1 parent 6ba1c83 commit 7044762

File tree

5 files changed

+147
-2
lines changed

5 files changed

+147
-2
lines changed

‎projects/docs/src/app/app.routes.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@ export const routes: Routes = [
4545
path: 'components/popover',
4646
loadComponent: () => import('./pages/docs/components/popover/popover.component').then(c => c.PopoverComponent)
4747
},
48+
{
49+
path: 'components/tabs',
50+
loadComponent: () => import('./pages/docs/components/tabs/tabs.component').then(c => c.TabsComponent)
51+
},
4852
{
4953
path: '',
5054
pathMatch: 'full',

‎projects/docs/src/app/components/sidenav/sidenav.component.ts

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { NgTemplateOutlet } from '@angular/common';
1515
})
1616
export class SidenavComponent {
1717

18-
sections: any = [
18+
sections: NavSection[] = [
1919
{
2020
title: 'Getting Started',
2121
links: [
@@ -29,16 +29,35 @@ export class SidenavComponent {
2929
links: [
3030
{ name: 'Accordion', path: '/docs/components/accordion' },
3131
{ name: 'Alert', path: '/docs/components/alert' },
32+
{ name: 'Tabs', path: '/docs/components/tabs' },
3233
{ name: 'Avatar', path: '/docs/components/avatar' },
3334
{ name: 'Badge', path: '/docs/components/badge' },
3435
{ name: 'Button', path: '/docs/components/button' },
3536
{ name: 'Dialog', path: '/docs/components/dialog' },
3637
{ name: 'Dropdown Menu', path: '/docs/components/dropdown-menu' },
37-
{ name: 'Popver', path: '/docs/components/popover' }
38+
{ name: 'Popver', path: '/docs/components/popover' },
3839
]
3940
}
4041
];
4142

4243
readonly menuOpen = model(false);
4344

45+
ngOnInit() {
46+
const componentsSection = this.sections.find((section: any) => section.title === 'Components');
47+
if (componentsSection) {
48+
componentsSection.links.sort((a: NavLink, b: NavLink) => a.name.localeCompare(b.name));
49+
}
50+
}
51+
52+
}
53+
54+
interface NavLink {
55+
name: string;
56+
icon?: string;
57+
path: string;
58+
}
59+
60+
interface NavSection {
61+
title: string;
62+
links: NavLink[];
4463
}

‎projects/docs/src/app/pages/docs/components/tabs/tabs.component.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<p
2+
class="from-indigo-700 to-blue-500 mb-2 inline-block bg-gradient-to-r bg-clip-text text-sm font-medium text-transparent">
3+
Components
4+
</p>
5+
<h1 class="text-2xl font-semibold">Tabs</h1>
6+
7+
<p class="mt-4 text-md text-muted-foreground">
8+
Displays rich content in a portal, triggered by a button.
9+
</p>
10+
11+
12+
<div class="mt-5">
13+
<docs-example [code]="TABS_CODES.DEFAULT">
14+
<div uiTabset>
15+
<div uiTabList class="min-w-96">
16+
<button uiTabButton uiTabButtonValue="tab1">Tab 1</button>
17+
<button uiTabButton uiTabButtonValue="tab2">Tab 2</button>
18+
</div>
19+
<div class="relative w-full flex-1">
20+
<div uiTabPanel uiTabPanelValue="tab1">
21+
Tab 1 Content
22+
</div>
23+
<div uiTabPanel uiTabPanelValue="tab2">
24+
Tab 2 Content
25+
</div>
26+
</div>
27+
</div>
28+
</docs-example>
29+
</div>
30+
31+
32+
<h2 class="text-xl font-semibold my-5 border-b border-border pb-3 mt-10" id="installation">Installation</h2>
33+
<docs-installation-guide [cliCode]="cliCode" [npmCode]="TABS_CODES.DEFAULT"></docs-installation-guide>
34+
35+
<h2 class="text-xl font-semibold my-5 border-b border-border pb-3 mt-10" id="usage">Usage</h2>
36+
37+
<docs-code-view [code]="importCode"></docs-code-view>
38+
<docs-code-view class="mt-5 block" [code]="usageCode" language="html"></docs-code-view>
39+
40+
<h2 class="text-xl font-semibold my-5 border-b border-border pb-3 mt-10" id="examples">Examples</h2>
41+
42+
<div class="mt-5">
43+
<h3 class="text-lg font-semibold mb-3" id="default">Default</h3>
44+
<docs-example [code]="TABS_CODES.DEFAULT">
45+
<div uiTabset>
46+
<div uiTabList>
47+
<button uiTabButton uiTabButtonValue="item1">Item 1</button>
48+
<button uiTabButton uiTabButtonValue="item2">Item 2</button>
49+
</div>
50+
<div class="relative w-full flex-1">
51+
<div uiTabPanel uiTabPanelValue="item1">
52+
Content 1
53+
</div>
54+
<div uiTabPanel uiTabPanelValue="item2">
55+
Content 2
56+
</div>
57+
</div>
58+
</div>
59+
</docs-example>
60+
</div>

‎projects/docs/src/app/pages/docs/components/tabs/tabs.component.ts

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Component } from '@angular/core';
2+
import { TabsCodeConstants } from './tabs.constants';
3+
import { UiButton, UiPopover, UiPopoverTrigger, UiTabButton, UiTabList, UiTabPanel, UiTabset } from '@angularui/core';
4+
import { InstallationGuideComponent } from '../../../../components/installation-guide/installation-guide.component';
5+
import { CodeViewComponent } from '../../../../components/code-view/code-view.component';
6+
import { ExampleComponent } from '../../../../components/example/example.component';
7+
8+
@Component({
9+
selector: 'docs-tabs',
10+
imports: [ExampleComponent, CodeViewComponent, InstallationGuideComponent, UiTabList, UiTabset, UiTabButton, UiTabPanel],
11+
templateUrl: './tabs.component.html'
12+
})
13+
export class TabsComponent {
14+
15+
importCode = `import { UiTabList, UiTabset, UiTabButton, UiTabPanel } from '@angularui/core';`
16+
usageCode = `
17+
<div uiTabset>
18+
<div uiTabList>
19+
<button uiTabButton uiTabButtonValue="item1">Item 1</button>
20+
<button uiTabButton uiTabButtonValue="item2">Item 2</button>
21+
</div>
22+
<div class="relative w-full flex-1">
23+
<div uiTabPanel uiTabPanelValue="item1">
24+
Content 1
25+
</div>
26+
<div uiTabPanel uiTabPanelValue="item2">
27+
Content 2
28+
</div>
29+
</div>
30+
</div>`;
31+
32+
cliCode = `ng g @angularui/core:component tabs`;
33+
34+
TABS_CODES = TabsCodeConstants;
35+
36+
}

‎projects/docs/src/app/pages/docs/components/tabs/tabs.constants.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export class TabsCodeConstants {
2+
static readonly DEFAULT = `
3+
import { Component } from '@angular/core';
4+
import { UiTabList, UiTabset, UiTabButton, UiTabPanel } from '@angularui/core';
5+
6+
@Component({
7+
selector: 'tabs-demo',
8+
imports: [UiTabList, UiTabset, UiTabButton, UiTabPanel],
9+
template: \` <div uiTabset>
10+
<div uiTabList>
11+
<button uiTabButton uiTabButtonValue="item1">Item 1</button>
12+
<button uiTabButton uiTabButtonValue="item2">Item 2</button>
13+
</div>
14+
<div class="relative w-full flex-1">
15+
<div uiTabPanel uiTabPanelValue="item1">
16+
Content 1
17+
</div>
18+
<div uiTabPanel uiTabPanelValue="item2">
19+
Content 2
20+
</div>
21+
</div>
22+
</div> \`
23+
})
24+
export class TabsComponent {}
25+
`;
26+
}

0 commit comments

Comments
 (0)