Skip to content

Commit 96aa220

Browse files
simeonoffsimeonoff
authored
Merge pull request #3712 from IgniteUI/didimmova/add-tailwind-styling-samples
feat(styling): add tailwind styling samples
2 parents 3a9c6b7 + bcdf443 commit 96aa220

123 files changed

Lines changed: 1493 additions & 6 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/app/app.config.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
1+
import { provideHttpClient, withFetch, withInterceptorsFromDi } from "@angular/common/http";
22
import { ApplicationConfig, importProvidersFrom } from "@angular/core";
33
import { FormsModule } from "@angular/forms";
44
import { BrowserModule, HammerModule, provideClientHydration, withEventReplay } from "@angular/platform-browser";
@@ -16,7 +16,7 @@ export const AppConfig: ApplicationConfig = {
1616
HammerModule,
1717
NgbModule
1818
),
19-
provideHttpClient(withInterceptorsFromDi()),
19+
provideHttpClient(withInterceptorsFromDi(), withFetch()),
2020
provideAnimations(),
2121
provideRouter(AppRoutes),
2222
OverflowService, provideClientHydration(withEventReplay())

‎src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<igx-list>
2+
<igx-list-item [isHeader]="true">
3+
Team Members (4)
4+
</igx-list-item>
5+
@for (member of members; track member) {
6+
<igx-list-item>
7+
<div class="wrapper">
8+
<div>
9+
<igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
10+
<igx-badge [icon]="member.icon" shape="square" class="badge-style !light-badge ![--background-color:#FF4E00] ![--border-radius:4px]"></igx-badge>
11+
</div>
12+
<div class="contact-container">
13+
<span class="contact-name">{{ member.name }}</span>
14+
</div>
15+
</div>
16+
</igx-list-item>
17+
}
18+
</igx-list>

‎src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@use "layout.scss";

‎src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Component } from '@angular/core';
2+
import { Member } from '../model/member.model';
3+
import { IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent } from 'igniteui-angular';
4+
5+
6+
@Component({
7+
selector: 'app-badge-tailwind-styling-sample',
8+
styleUrls: ['./badge-tailwind-styling-sample.component.scss'],
9+
templateUrl: './badge-tailwind-styling-sample.component.html',
10+
imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent]
11+
})
12+
export class BadgeTailwindStylingSampleComponent {
13+
public members: Member[] = [
14+
new Member('Terrance Orta', 'online'),
15+
new Member('Donna Price', 'online'),
16+
new Member('Lisa Landers', 'away'),
17+
new Member('Dorothy H. Spencer', 'offline')
18+
];
19+
}

‎src/app/data-display/badge/badge-tailwind-styling-sample/layout.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.wrapper {
2+
display: flex;
3+
flex-direction: row;
4+
}
5+
6+
.contact-name {
7+
font-weight: 600;
8+
}
9+
10+
.contact-container{
11+
margin-left: 20px;
12+
}
13+
14+
.badge-style {
15+
position: absolute;
16+
bottom: 2.5px;
17+
left: 40px;
18+
}

‎src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<igx-chips-area (reorder)="chipsOrderChanged($event)">
2+
@for (chip of chipList; track chip) {
3+
<igx-chip
4+
class="!light-chip ![--background:#99BAA6]
5+
![--remove-icon-color:#C92828]"
6+
[id]="chip.id"
7+
[selectable]="true"
8+
[selectIcon]="mySelectIcon"
9+
[removable]="true"
10+
[removeIcon]="myRemoveIcon"
11+
(remove)="chipRemoved($event)"
12+
[draggable]="true">
13+
<igx-icon igxPrefix>{{chip.icon}}</igx-icon>
14+
{{chip.text}}
15+
</igx-chip>
16+
}
17+
</igx-chips-area>
18+
19+
<ng-template #mySelectIcon>
20+
<igx-icon>check_circle</igx-icon>
21+
</ng-template>
22+
23+
<ng-template #myRemoveIcon>
24+
<igx-icon>delete</igx-icon>
25+
</ng-template>

‎src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@use "layout.scss";

‎src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.ts‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { ChangeDetectorRef, Component, inject } from '@angular/core';
2+
import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective } from 'igniteui-angular';
3+
4+
5+
@Component({
6+
selector: 'app-chip-tailwind-styling',
7+
styleUrls: ['./chip-tailwind-styling.component.scss'],
8+
templateUrl: './chip-tailwind-styling.component.html',
9+
imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective]
10+
})
11+
12+
export class ChipTailwindStylingSampleComponent {
13+
changeDetectionRef = inject(ChangeDetectorRef);
14+
15+
public chipList = [
16+
{
17+
text: 'Country',
18+
id: '1',
19+
icon: 'place'
20+
},
21+
{
22+
text: 'City',
23+
id: '2',
24+
icon: 'location_city'
25+
},
26+
{
27+
text: 'Town',
28+
id: '3',
29+
icon: 'store'
30+
},
31+
{
32+
text: 'First Name',
33+
id: '4',
34+
icon: 'person_pin'
35+
}
36+
];
37+
38+
39+
public chipRemoved(event: IBaseChipEventArgs) {
40+
this.chipList = this.chipList.filter((item) => item.id !== event.owner.id);
41+
this.changeDetectionRef.detectChanges();
42+
}
43+
44+
public chipsOrderChanged(event: IChipsAreaReorderEventArgs) {
45+
const newChipList = [];
46+
for (const chip of event.chipsArray) {
47+
const chipItem = this.chipList.filter((item) => item.id === chip.id)[0];
48+
newChipList.push(chipItem);
49+
}
50+
this.chipList = newChipList;
51+
}
52+
}

‎src/app/data-display/chip/chip-tailwind-styling/layout.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
igx-chip {
2+
margin-right: 5px;
3+
margin-top: 20px;
4+
}

‎src/app/data-display/data-display-routes-data.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@ export const dataDisplayRoutesData = {
55
"badge-sample-2": { displayName: "Simple Badge", parentName: "Badge" },
66
"badge-sample-3": { displayName: "Badge for List Items", parentName: "Badge" },
77
"badge-styling-sample": { displayName: "Badge Styling Sample", parentName: "Badge" },
8+
"badge-tailwind-styling-sample": { displayName: "Badge Tailwind Styling Sample", parentName: "Badge" },
89
"chip-simple": { displayName: "Chip Simple", parentName: "Chip" },
910
"chip-area-sample": { displayName: "Chip Area Sample", parentName: "Chip" },
1011
"chip-styling": { displayName: "Chip Styling", parentName: "Chip" },
12+
"chip-tailwind-styling": { displayName: "Chip Tailwind Styling", parentName: "Chip" },
1113
"circular-progressbar": { displayName: "Circular Progressbar Sample", parentName: "Circular Progressbar" },
1214
"circular-dynamic-sample": { displayName: "Circular Dynamic Sample", parentName: "Circular Progressbar" },
1315
// tslint:disable-next-line:max-line-length
@@ -16,6 +18,7 @@ export const dataDisplayRoutesData = {
1618
"icon-sample-1": { displayName: "Simple Icons", parentName: "Icon" },
1719
"icon-service": { displayName: "Icon Service", parentName: "Icon" },
1820
"icon-styling": { displayName: "Icon Styling", parentName: "Icon" },
21+
"icon-tailwind-styling": { displayName: "Icon Tailwind Styling", parentName: "Icon" },
1922
"svg-icon-sample": { displayName: "SVG Icons", parentName: "Icon" },
2023
"material-symbols": { displayName: "Material Symbols", parentName: "Icon" },
2124
"material-icons-extended": { displayName: "Material Icons Extended", parentName: "Icon" },

0 commit comments

Comments
 (0)