Skip to content

Commit 93f5595

Browse files
Merge pull request #484 from AnkitSharma-007/main
New features added
2 parents b95c8dc + fc8fed1 commit 93f5595

36 files changed

+439
-0
lines changed

projects/bulma-app/src/app/app-routing.module.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,10 @@ const routes: Routes = [
8282
path: 'elements/box',
8383
loadChildren: () => import('./box/box.module').then((box) => box.BoxModule),
8484
},
85+
{
86+
path: 'elements/tag',
87+
loadChildren: () => import('./tag/tag.module').then((tag) => tag.TagModule),
88+
},
8589
// Landing Components routings
8690
{
8791
path: 'components',

projects/bulma-app/src/app/button/button.component.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,19 @@ <h3>Rounded buttons</h3>
161161
</div>
162162
</div>
163163
<hr />
164+
<h3>Delete buttons</h3>
165+
<div class="parent-container">
166+
<div class="component-container">
167+
<button buButton delete="true"></button>
168+
<button buButton size="small" delete="true"></button>
169+
<button buButton size="medium" delete="true"></button>
170+
<button buButton size="large" delete="true"></button>
171+
</div>
172+
<div class="code-snippet-container">
173+
<markdown [src]="'assets/docs/button/delete.md'" lineNumbers></markdown>
174+
</div>
175+
</div>
176+
<hr />
164177
<h3>State: Hover</h3>
165178
<div class="parent-container">
166179
<div class="component-container">

projects/bulma-app/src/app/landingcomponents/elements/elements.home.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,12 @@ <h1 class="title is-2">
3131
</p>
3232
</div>
3333
</a>
34+
<a class="header column is-6" [routerLink]="['tag']">
35+
<div class="nav-link-container">
36+
<i class="fas fa-tag" aria-hidden="true"></i> Tag
37+
<p class="nav-link-description subtitle is-5">
38+
Small tag labels to insert anywhere.
39+
</p>
40+
</div>
41+
</a>
3442
</div>

projects/bulma-app/src/app/navbar/doc-navbar/doc-navbar.component.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,8 @@
6060
<a buNavItem [routerLink]="['elements/progress']" routerLinkActive="router-link-active"
6161
>Progress bar</a
6262
>
63+
<hr class="navbar-divider" />
64+
<a buNavItem [routerLink]="['elements/tag']" routerLinkActive="router-link-active">Tag</a>
6365
</bu-navbar-dropdown>
6466
</bu-navbar-link>
6567
<bu-navbar-link title="Form">
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule, Routes } from '@angular/router';
3+
import { TagComponent } from './tag.component';
4+
5+
const routes: Routes = [
6+
{
7+
path: '',
8+
component: TagComponent,
9+
},
10+
];
11+
@NgModule({
12+
imports: [RouterModule.forChild(routes)],
13+
exports: [RouterModule],
14+
})
15+
export class TagRoutingModule {}
Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<markdown [src]="'assets/docs/tag/tag-description.md'"></markdown>
2+
3+
<h3>Default</h3>
4+
<div class="parent-container">
5+
<div class="component-container">
6+
<bu-tag>Tag label</bu-tag>
7+
</div>
8+
<div class="code-snippet-container">
9+
<markdown [src]="'assets/docs/tag/default.md'"></markdown>
10+
</div>
11+
</div>
12+
<hr />
13+
<h3>Themes</h3>
14+
<markdown [src]="'assets/docs/tag/tag-theme.md'"></markdown>
15+
<br />
16+
<div class="parent-container">
17+
<div class="component-container">
18+
<bu-tag theme="black">Black</bu-tag>
19+
<bu-tag theme="dark">Dark</bu-tag>
20+
<bu-tag theme="light">Light</bu-tag>
21+
<bu-tag theme="white">white</bu-tag>
22+
<bu-tag theme="primary">Primary</bu-tag>
23+
<bu-tag theme="link">Link</bu-tag>
24+
<bu-tag theme="info">Info</bu-tag>
25+
<bu-tag theme="success">Success</bu-tag>
26+
<bu-tag theme="warning">Warning</bu-tag>
27+
<bu-tag theme="danger">Danger</bu-tag>
28+
</div>
29+
<div class="code-snippet-container">
30+
<markdown [src]="'assets/docs/tag/theme.md'" lineNumbers></markdown>
31+
</div>
32+
</div>
33+
<hr />
34+
<h3>Light theme version</h3>
35+
<markdown [src]="'assets/docs/tag/tag-light-theme.md'"></markdown>
36+
<br />
37+
<div class="parent-container">
38+
<div class="component-container">
39+
<bu-tag theme="primary" light="true">Primary</bu-tag>
40+
<bu-tag theme="link" light="true">Link</bu-tag>
41+
<bu-tag theme="info" light="true">Info</bu-tag>
42+
<bu-tag theme="success" light="true">Success</bu-tag>
43+
<bu-tag theme="warning" light="true">Warning</bu-tag>
44+
<bu-tag theme="danger" light="true">Danger</bu-tag>
45+
</div>
46+
<div class="code-snippet-container">
47+
<markdown [src]="'assets/docs/tag/themelight.md'" lineNumbers></markdown>
48+
</div>
49+
</div>
50+
<hr />
51+
<h3>Sizes</h3>
52+
<markdown [src]="'assets/docs/tag/tag-size.md'"></markdown>
53+
<br />
54+
<div class="parent-container">
55+
<div class="component-container">
56+
<bu-tag theme="link" size="normal">Normal</bu-tag>
57+
<bu-tag theme="primary" size="medium">Medium</bu-tag>
58+
<bu-tag theme="info" size="large">Large</bu-tag>
59+
</div>
60+
<div class="code-snippet-container">
61+
<markdown [src]="'assets/docs/tag/size.md'" lineNumbers></markdown>
62+
</div>
63+
</div>
64+
<hr />
65+
<h3>Rounded tags</h3>
66+
<markdown [src]="'assets/docs/tag/tag-rounded.md'"></markdown>
67+
<br />
68+
<div class="parent-container">
69+
<div class="component-container">
70+
<bu-tag theme="primary" rounded="true">Primary</bu-tag>
71+
<bu-tag theme="link" rounded="true">Link</bu-tag>
72+
<bu-tag theme="info" rounded="true">Info</bu-tag>
73+
<bu-tag theme="success" rounded="true">Success</bu-tag>
74+
<bu-tag theme="warning" rounded="true">Warning</bu-tag>
75+
<bu-tag theme="danger" rounded="true">Danger</bu-tag>
76+
</div>
77+
<div class="code-snippet-container">
78+
<markdown [src]="'assets/docs/tag/rounded.md'" lineNumbers></markdown>
79+
</div>
80+
</div>
81+
<hr />
82+
<h3>Tags as delete buttons</h3>
83+
<markdown [src]="'assets/docs/tag/tag-delete.md'"></markdown>
84+
<br />
85+
<div class="parent-container">
86+
<div class="component-container">
87+
<bu-tag delete="true"></bu-tag>
88+
<bu-tag theme="primary" delete="true"></bu-tag>
89+
<bu-tag theme="link" delete="true"></bu-tag>
90+
<bu-tag theme="info" delete="true" rounded="true"></bu-tag>
91+
<bu-tag theme="success" delete="true" rounded="true"></bu-tag>
92+
<bu-tag theme="warning" delete="true" size="medium"></bu-tag>
93+
<bu-tag theme="danger" delete="true" rounded="true" size="large"></bu-tag>
94+
</div>
95+
<div class="code-snippet-container">
96+
<markdown [src]="'assets/docs/tag/delete.md'" lineNumbers></markdown>
97+
</div>
98+
</div>
99+
<hr />
100+
<h3>Combinations</h3>
101+
<markdown [src]="'assets/docs/tag/tag-combination.md'"></markdown>
102+
<br />
103+
<div class="parent-container">
104+
<div class="component-container">
105+
<bu-tag theme="success">Bar<button buButton size="small" delete="true"></button></bu-tag>
106+
<bu-tag theme="warning" size="medium"
107+
>Hello<button buButton size="small" delete="true"></button
108+
></bu-tag>
109+
<bu-tag theme="danger" size="large"
110+
>World<button buButton size="small" delete="true"></button
111+
></bu-tag>
112+
</div>
113+
<div class="code-snippet-container">
114+
<markdown [src]="'assets/docs/tag/combination.md'" lineNumbers></markdown>
115+
</div>
116+
</div>
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
bu-tag {
2+
margin: 5px;
3+
}
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { TagComponent } from './tag.component';
4+
5+
describe('TagComponent', () => {
6+
let component: TagComponent;
7+
let fixture: ComponentFixture<TagComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [TagComponent],
12+
}).compileComponents();
13+
}));
14+
15+
beforeEach(() => {
16+
fixture = TestBed.createComponent(TagComponent);
17+
component = fixture.componentInstance;
18+
fixture.detectChanges();
19+
});
20+
21+
it('should create', () => {
22+
expect(component).toBeTruthy();
23+
});
24+
});
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-tag',
5+
templateUrl: './tag.component.html',
6+
styleUrls: ['./tag.component.scss'],
7+
encapsulation: ViewEncapsulation.None,
8+
changeDetection: ChangeDetectionStrategy.OnPush,
9+
})
10+
export class TagComponent implements OnInit {
11+
constructor() {}
12+
13+
ngOnInit(): void {}
14+
}
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { CommonModule } from '@angular/common';
2+
import { HttpClient } from '@angular/common/http';
3+
import { NgModule } from '@angular/core';
4+
import { BulmaButtonModule } from '@ngx-builders/ngx-bulma/button';
5+
import { BulmaTagModule } from '@ngx-builders/ngx-bulma/tag';
6+
import { MarkdownModule } from 'ngx-markdown';
7+
import { TagRoutingModule } from './tag-routing.module';
8+
import { TagComponent } from './tag.component';
9+
10+
@NgModule({
11+
declarations: [TagComponent],
12+
imports: [
13+
CommonModule,
14+
BulmaButtonModule,
15+
TagRoutingModule,
16+
BulmaTagModule,
17+
MarkdownModule.forRoot({ loader: HttpClient }),
18+
],
19+
exports: [TagComponent],
20+
})
21+
export class TagModule {}

0 commit comments

Comments
 (0)