Skip to content

Commit 0b30955

Browse files
adrianptrvadrianptrv
committed
feat(samples): new styling samples based on design systems
1 parent 432065e commit 0b30955

23 files changed

Lines changed: 804 additions & 190 deletions

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

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

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

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,37 @@
11
@use "layout.scss";
2-
@use "igniteui-angular/theming" as *;
32

4-
$custom-theme: chip-theme(
5-
$background: #57a5cd,
6-
$selected-background: #ecaa53,
7-
$remove-icon-color: #d81414,
8-
$border-radius: 5px,
9-
);
3+
igx-chip {
4+
--text-color: #fff;
5+
--hover-text-color: #fff;
6+
--focus-text-color: #fff;
7+
--border-radius: 5px;
8+
}
109

11-
@include css-vars($custom-theme);
10+
igx-chip[id='1'] {
11+
--background: #000;
12+
--hover-background: #000;
13+
--focus-background: #323232;
14+
}
15+
16+
igx-chip[id='2'] {
17+
--background: #cd201f;
18+
--hover-background: #cd201f;
19+
--focus-background: #9f1717;
20+
}
21+
22+
igx-chip[id='3']{
23+
--background: #3b5999;
24+
--hover-background: #3b5999;
25+
--focus-background: #2c4378;
26+
}
27+
28+
igx-chip[id='4']{
29+
--background: #55acee;
30+
--hover-background: #55acee;
31+
--focus-background: #4682af;
32+
}
33+
34+
igx-icon.igx-icon {
35+
width: 0.75rem;
36+
height: 0.75rem;
37+
}

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

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { ChangeDetectorRef, Component, inject } from '@angular/core';
2-
import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective } from 'igniteui-angular';
1+
import { ChangeDetectorRef, Component, inject } from '@angular/core';
2+
import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective, IgxIconService } from 'igniteui-angular';
33

44

55
@Component({
@@ -11,31 +11,39 @@ import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent,
1111

1212
export class ChipStylingSampleComponent {
1313
changeDetectionRef = inject(ChangeDetectorRef);
14+
private iconService = inject(IgxIconService)
15+
16+
public ngOnInit() {
17+
18+
this.iconService.addSvgIconFromText('twitter', '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16"><path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/></svg>');
19+
this.iconService.addSvgIconFromText('youtube', '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 13"> <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"/> </svg>');
20+
this.iconService.addSvgIconFromText('facebook', '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16"><path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/></svg>');
21+
this.iconService.addSvgIconFromText('linkedin', '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>');
22+
}
1423

1524
public chipList = [
1625
{
17-
text: 'Country',
18-
id: '1',
19-
icon: 'place'
26+
text: 'X.com',
27+
id: '1',
28+
icon: 'twitter'
2029
},
2130
{
22-
text: 'City',
31+
text: 'Youtube',
2332
id: '2',
24-
icon: 'location_city'
33+
icon: 'youtube'
2534
},
2635
{
27-
text: 'Town',
36+
text: 'Facebook',
2837
id: '3',
29-
icon: 'store'
38+
icon: 'facebook'
3039
},
3140
{
32-
text: 'First Name',
41+
text: 'LinkedIn',
3342
id: '4',
34-
icon: 'person_pin'
43+
icon: 'linkedin'
3544
}
3645
];
3746

38-
3947
public chipRemoved(event: IBaseChipEventArgs) {
4048
this.chipList = this.chipList.filter((item) => item.id !== event.owner.id);
4149
this.changeDetectionRef.detectChanges();

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

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,17 @@
1+
:host {
2+
::ng-deep {
3+
igx-chip .igx-chip__item{
4+
height: 20px;
5+
font-size: 12px;
6+
}
7+
}
8+
}
9+
110
igx-chip {
2-
margin-right: 5px;
3-
margin-top: 20px;
11+
margin-right: 5px;
12+
margin-top: 20px;
13+
}
14+
15+
igx-chips-area {
16+
margin-left: 20px;
417
}

‎src/app/data-entries/buttons/buttons-style/buttons-style.component.html‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
1-
<div class="buttons-sample">
2-
<div class="button-sample">
3-
<button igxButton="contained" igxRipple>Contained Button</button>
4-
</div>
5-
<div class="button-sample">
6-
<button igxButton="flat" igxRipple>Flat Button</button>
7-
</div>
8-
<div class="button-sample">
9-
<button igxButton="outlined" igxRipple>Outlined Button</button>
10-
</div>
11-
<div class="button-sample">
12-
<button igxButton="fab" igxRipple>Fab Button</button>
13-
</div>
14-
<div class="button-sample">
15-
<button igxButton="contained" [disabled]="'true'">Disabled</button>
16-
</div>
17-
</div>
1+
@for (item of range; let i = $index; track i) {
2+
<div [class]="'buttons-sample-' + (i + 1)">
3+
<div class="button-sample">
4+
<button igxButton="contained" igxRipple>Solid</button>
5+
</div>
6+
<div class="button-sample">
7+
<button igxButton="outlined" igxRipple>Outlined</button>
8+
</div>
9+
<div class="button-sample dashed">
10+
<button igxButton="outlined" igxRipple>Dashed</button>
11+
</div>
12+
<div class="button-sample filled">
13+
<button igxButton="flat" igxRipple>Filled</button>
14+
</div>
15+
<div class="button-sample text">
16+
<button igxButton="flat" igxRipple>Text</button>
17+
</div>
18+
<div class="button-sample link">
19+
<button igxButton="flat" igxRipple>Link</button>
20+
</div>
21+
</div>
22+
}

0 commit comments

Comments
 (0)