Skip to content

Commit c5667ce

Browse files
immohammadjavedimmohammadjaved
committed
docs(toggle): Add toggle docs
1 parent 1ab1489 commit c5667ce

File tree

4 files changed

+275
-1
lines changed

4 files changed

+275
-1
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,10 @@ export const routes: Routes = [
8484
path: 'dropdown-menu',
8585
loadComponent: () => import('./dropdown-menu/dropdown-menu').then(m => m.DropdownMenu)
8686
},
87+
{
88+
path: 'toggle',
89+
loadComponent: () => import('./toggle/toggle').then(m => m.Toggle)
90+
},
8791
{
8892
path: '',
8993
redirectTo: 'alert',

‎projects/docs/src/app/pages/docs/components/toggle/toggle.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Component } from '@angular/core';
2+
import { ComponentPreview } from '@components/component-preview/component-preview';
3+
import { toggleVariants, toggleMeta } from './toggle.variants';
4+
5+
@Component({
6+
selector: 'docs-toggle',
7+
imports: [ComponentPreview],
8+
template: `
9+
<docs-component-preview
10+
[meta]="toggleMeta"
11+
[variants]="toggleVariants">
12+
</docs-component-preview>
13+
`
14+
})
15+
export class Toggle {
16+
toggleMeta = toggleMeta;
17+
toggleVariants = toggleVariants;
18+
}

‎projects/docs/src/app/pages/docs/components/toggle/toggle.variants.ts‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
import { Component, model } from '@angular/core';
2+
import { UiToggle } from 'ui';
3+
import { IVariant, IComponentMeta } from '@components/component-preview/component-preview';
4+
import { NgIcon, provideIcons } from '@ng-icons/core';
5+
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
6+
7+
// Toggle example components for dynamic rendering
8+
@Component({
9+
selector: 'toggle-default-example',
10+
template: `
11+
<button uiToggle [(uiToggleSelected)]="selected">
12+
<ng-icon name="lucideBold" size="16" />
13+
</button>`,
14+
imports: [UiToggle, NgIcon],
15+
providers: [provideIcons({ lucideBold })],
16+
17+
})
18+
export class ToggleDefaultExample {
19+
selected = model(false);
20+
}
21+
22+
@Component({
23+
selector: 'toggle-outline-example',
24+
template: `<button uiToggle [(uiToggleSelected)]="selected" variant="outline">
25+
<ng-icon name="lucideItalic" size="16" />
26+
</button>`,
27+
imports: [UiToggle, NgIcon],
28+
providers: [provideIcons({ lucideItalic })],
29+
30+
})
31+
export class ToggleOutlineExample {
32+
selected = model(false);
33+
}
34+
35+
@Component({
36+
selector: 'toggle-with-text-example',
37+
template: `<button uiToggle [(uiToggleSelected)]="selected">
38+
<ng-icon name="lucideItalic" size="16" />
39+
Italic
40+
</button>`,
41+
imports: [UiToggle, NgIcon],
42+
providers: [provideIcons({ lucideItalic })],
43+
44+
})
45+
export class ToggleWithTextExample {
46+
selected = model(false);
47+
}
48+
49+
@Component({
50+
selector: 'toggle-sizes-example',
51+
template: `
52+
<div class="flex items-center gap-4">
53+
<button uiToggle [(uiToggleSelected)]="selectedSm" size="sm">
54+
<ng-icon name="lucideBold" size="14" />
55+
</button>
56+
<button uiToggle [(uiToggleSelected)]="selectedDefault" size="default">
57+
<ng-icon name="lucideBold" size="16" />
58+
</button>
59+
<button uiToggle [(uiToggleSelected)]="selectedLg" size="lg">
60+
<ng-icon name="lucideBold" size="18" />
61+
</button>
62+
</div>
63+
`,
64+
imports: [UiToggle, NgIcon],
65+
providers: [provideIcons({ lucideBold })],
66+
67+
})
68+
export class ToggleSizesExample {
69+
selectedSm = model(false);
70+
selectedDefault = model(false);
71+
selectedLg = model(false);
72+
}
73+
74+
@Component({
75+
selector: 'toggle-disabled-example',
76+
template: `<button uiToggle [(uiToggleSelected)]="selected" disabled>
77+
<ng-icon name="lucideUnderline" size="16" />
78+
</button>`,
79+
imports: [UiToggle, NgIcon],
80+
providers: [provideIcons({ lucideUnderline })],
81+
82+
})
83+
export class ToggleDisabledExample {
84+
selected = model(false);
85+
}
86+
87+
88+
89+
export const toggleMeta: IComponentMeta = {
90+
title: 'Toggle',
91+
description: 'A two-state button that can be either on or off.',
92+
installation: {
93+
package: 'toggle',
94+
import: `import { UiToggle } from '@workspace/ui/directives/toggle';`,
95+
usage: `<button uiToggle [(uiToggleSelected)]="selected">Toggle</button>`
96+
},
97+
api: {
98+
props: [
99+
{
100+
name: 'variant',
101+
type: '"default" | "outline"',
102+
default: '"default"',
103+
description: 'The visual variant of the toggle.'
104+
},
105+
{
106+
name: 'size',
107+
type: '"default" | "sm" | "lg"',
108+
default: '"default"',
109+
description: 'The size of the toggle.'
110+
},
111+
{
112+
name: 'disabled',
113+
type: 'boolean',
114+
default: 'false',
115+
description: 'Whether the toggle is disabled.'
116+
},
117+
{
118+
name: 'uiToggleSelected',
119+
type: 'boolean',
120+
default: 'false',
121+
description: 'Two-way binding for the toggle state.'
122+
},
123+
{
124+
name: 'class',
125+
type: 'string',
126+
description: 'Additional CSS classes to apply to the toggle.'
127+
}
128+
]
129+
}
130+
};
131+
132+
export const toggleVariants: IVariant[] = [
133+
{
134+
title: 'Default',
135+
description: 'The default toggle appearance.',
136+
code: `import { Component, model } from '@angular/core';
137+
import { UiToggle } from '@workspace/ui/directives/toggle';
138+
import { NgIcon, provideIcons } from '@ng-icons/core';
139+
import { lucideBold } from '@ng-icons/lucide';
140+
141+
@Component({
142+
selector: 'toggle-default-example',
143+
template: \`<button uiToggle [(uiToggleSelected)]="selected">
144+
<ng-icon name="lucideBold" size="16" />
145+
</button>\`,
146+
imports: [UiToggle, NgIcon],
147+
providers: [provideIcons({ lucideBold })]
148+
})
149+
export class ToggleDefaultExample {
150+
selected = model(false);
151+
}`,
152+
component: ToggleDefaultExample
153+
},
154+
{
155+
title: 'Outline',
156+
description: 'A toggle with an outlined appearance.',
157+
code: `import { Component, model } from '@angular/core';
158+
import { UiToggle } from '@workspace/ui/directives/toggle';
159+
import { NgIcon, provideIcons } from '@ng-icons/core';
160+
import { lucideItalic } from '@ng-icons/lucide';
161+
162+
@Component({
163+
selector: 'toggle-outline-example',
164+
template: \`<button uiToggle [(uiToggleSelected)]="selected" variant="outline">
165+
<ng-icon name="lucideItalic" size="16" />
166+
</button>\`,
167+
imports: [UiToggle, NgIcon],
168+
providers: [provideIcons({ lucideItalic })]
169+
})
170+
export class ToggleOutlineExample {
171+
selected = model(false);
172+
}`,
173+
component: ToggleOutlineExample
174+
},
175+
{
176+
title: 'With Text',
177+
description: 'A toggle with text and icon.',
178+
code: `import { Component, model } from '@angular/core';
179+
import { UiToggle } from '@workspace/ui/directives/toggle';
180+
import { NgIcon, provideIcons } from '@ng-icons/core';
181+
import { lucideItalic } from '@ng-icons/lucide';
182+
183+
@Component({
184+
selector: 'toggle-with-text-example',
185+
template: \`<button uiToggle [(uiToggleSelected)]="selected">
186+
<ng-icon name="lucideItalic" size="16" />
187+
Italic
188+
</button>\`,
189+
imports: [UiToggle, NgIcon],
190+
providers: [provideIcons({ lucideItalic })]
191+
})
192+
export class ToggleWithTextExample {
193+
selected = model(false);
194+
}`,
195+
component: ToggleWithTextExample
196+
},
197+
{
198+
title: 'Sizes',
199+
description: 'Toggles in different sizes.',
200+
code: `import { Component, model } from '@angular/core';
201+
import { UiToggle } from '@workspace/ui/directives/toggle';
202+
import { NgIcon, provideIcons } from '@ng-icons/core';
203+
import { lucideBold } from '@ng-icons/lucide';
204+
205+
@Component({
206+
selector: 'toggle-sizes-example',
207+
template: \`
208+
<div class="flex items-center gap-4">
209+
<button uiToggle [(uiToggleSelected)]="selectedSm" size="sm">
210+
<ng-icon name="lucideBold" size="14" />
211+
</button>
212+
<button uiToggle [(uiToggleSelected)]="selectedDefault" size="default">
213+
<ng-icon name="lucideBold" size="16" />
214+
</button>
215+
<button uiToggle [(uiToggleSelected)]="selectedLg" size="lg">
216+
<ng-icon name="lucideBold" size="18" />
217+
</button>
218+
</div>
219+
\`,
220+
imports: [UiToggle, NgIcon],
221+
providers: [provideIcons({ lucideBold })]
222+
})
223+
export class ToggleSizesExample {
224+
selectedSm = model(false);
225+
selectedDefault = model(false);
226+
selectedLg = model(false);
227+
}`,
228+
component: ToggleSizesExample
229+
},
230+
{
231+
title: 'Disabled',
232+
description: 'A disabled toggle.',
233+
code: `import { Component, model } from '@angular/core';
234+
import { UiToggle } from '@workspace/ui/directives/toggle';
235+
import { NgIcon, provideIcons } from '@ng-icons/core';
236+
import { lucideUnderline } from '@ng-icons/lucide';
237+
238+
@Component({
239+
selector: 'toggle-disabled-example',
240+
template: \`<button uiToggle [(uiToggleSelected)]="selected" disabled>
241+
<ng-icon name="lucideUnderline" size="16" />
242+
</button>\`,
243+
imports: [UiToggle, NgIcon],
244+
providers: [provideIcons({ lucideUnderline })]
245+
})
246+
export class ToggleDisabledExample {
247+
selected = model(false);
248+
}`,
249+
component: ToggleDisabledExample
250+
}
251+
];

‎projects/docs/src/app/shared/components/sidebar/sidebar.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,8 @@ export class Sidebar {
6666
{ name: 'Tabs', path: 'tabs' },
6767
// { name: 'Toast', path: 'toast' },
6868
{ name: 'Tooltip', path: 'tooltip' },
69-
{ name: 'Table', path: 'table' }
69+
{ name: 'Table', path: 'table' },
70+
{ name: 'Toggle', path: 'toggle' }
7071
]
7172
}
7273
]);

0 commit comments

Comments
 (0)