Skip to content

Commit 0a27df6

Browse files
didimmovadidimmova
committed
sample(tailwind): update tailwind sample
1 parent 1b98b04 commit 0a27df6

4 files changed

Lines changed: 13 additions & 79 deletions

File tree

‎src/app/theming/tailwind/tailwind-sample.component.html‎

Lines changed: 10 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,11 @@
1-
<div class="sample-wrapper flex flex-wrap gap-6">
2-
<div class="sample-column card-wrapper">
3-
<h5>Custom card with tailwind utility classes</h5>
4-
<div
5-
class="card mt-2 flex flex-col max-w-[400px] border-2 border-secondary-400 border-gray-200 rounded shadow-elevation-4 bg-surface-500 overflow-hidden">
6-
<div class="flex items-center px-4 py-3 bg-primary-100">
7-
<img [src]="card.imageUrl" [alt]="card.title" class="w-16 h-16 rounded object-cover mr-4" />
8-
<div>
9-
<h5 class="card-title type-style-h6">{{ card.title }}</h5>
10-
<h6 class="card-subtitle type-style-subtitle-2">{{ card.subtitle }}</h6>
11-
</div>
12-
</div>
13-
14-
<div class="card-content px-4 py-4 text-gray-900">
15-
<p class="type-style-body-2">{{ card.content }}</p>
16-
</div>
17-
18-
<div class="card-actions flex justify-around items-center px-2 py-2 bg-primary-100">
19-
@for (icon of card.icons; track icon) {
20-
<button
21-
class="bg-transparent border-none cursor-pointer text-shadow-2xs text-shadow-secondary-500 text-primary-500-contrast/80 hover:text-secondary-500">
22-
<i class="material-icons mt-1">{{ icon }}</i>
23-
</button>
24-
}
25-
</div>
26-
</div>
1+
<main class="font-ig text-base grid surface-500 px-6 py-6">
2+
<div class="text-center shadow-elevation-4 pb-8">
3+
<p class="type-style-body-1 text-primary-600">404</p>
4+
<h1 class="type-style-h1 mt-4 text-gray-900">Page not found</h1>
5+
<p class="type-style-body-1 mt-6 text-gray-500">Sorry, we couldn’t find the page you’re looking for.</p>
6+
<div class="mt-10 flex items-center justify-center gap-x-6">
7+
<a href="#" class="type-style-button rounded-md bg-primary-500 text-primary-500-contrast px-3.5 py-2.5 shadow-elevation-2 hover:bg-primary-600 transition duration-150 ease-in-out">Go back home</a>
8+
<a href="#" class="type-style-button text-gray-900 hover:text-primary-600 transition duration-150 ease-in-out">Contact support <span aria-hidden="true">&rarr;</span></a>
279
</div>
28-
29-
<div class="sample-column card-wrapper">
30-
<h5>IG Angular Card</h5>
31-
<igx-card class="max-w-[400px] mt-2">
32-
<igx-card-header class="bg-primary-100">
33-
<h5 igxCardHeaderTitle>{{card.title}}</h5>
34-
<h5 igxCardHeaderSubtitle>{{card.subtitle}}</h5>
35-
<igx-card-media width="64px" height="64px">
36-
<img [src]="card.imageUrl">
37-
</igx-card-media>
38-
</igx-card-header>
39-
40-
<igx-card-content>
41-
<p class="text-gray-800">{{card.content}}</p>
42-
</igx-card-content>
43-
44-
<igx-divider></igx-divider>
45-
46-
<igx-card-actions class="bg-primary-100" layout="justify">
47-
@for (icon of card.icons; track icon) {
48-
<button igxIconButton="flat" igxRipple [igxRippleCentered]="true" igxEnd>
49-
<igx-icon>{{icon}}</igx-icon>
50-
</button>
51-
}
52-
</igx-card-actions>
53-
</igx-card>
54-
</div>
55-
</div>
10+
</div>
11+
</main>

‎src/app/theming/tailwind/tailwind-sample.component.scss‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +0,0 @@
1-
@use "igniteui-angular/theming" as *;
2-
3-
.card-title {
4-
@include type-style('h6');
5-
}
6-
.card-subtitle {
7-
@include type-style('subtitle-2');
8-
}
9-
10-
.card-content p {
11-
@include type-style('body-2');
12-
}

‎src/app/theming/tailwind/tailwind-sample.component.ts‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,10 @@
11
import { Component } from '@angular/core';
2-
import { Card } from '../../layouts/card/card.blueprint';
3-
import { IGX_CARD_DIRECTIVES, IgxDividerDirective, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent } from 'igniteui-angular';
42

53
@Component({
64
standalone: true,
75
selector: 'app-tailwind-sample',
86
styleUrls: ['./tailwind-sample.component.scss'],
9-
templateUrl: './tailwind-sample.component.html',
10-
imports: [IGX_CARD_DIRECTIVES, IgxDividerDirective, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent]
7+
templateUrl: './tailwind-sample.component.html'
118
})
129

13-
export class TailwindSampleComponent {
14-
public card = new Card({
15-
icons: ['skip_previous', 'play_arrow', 'skip_next'],
16-
imageUrl: 'assets/images/card/media/ROZES-Under-the-Grave.jpg',
17-
subtitle: 'Under the Grave (2016)',
18-
title: 'Rozes',
19-
content: '"Under the Grave" by The Roses is a moody, emotional track exploring loss and remembrance. Haunting vocals and atmospheric melodies create a somber, reflective tone. It\'s a poignant blend of sorrow and beauty that lingers.'
20-
});
21-
}
10+
export class TailwindSampleComponent {}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export const themingRoutesData = {
44
'animations-sample-1': { displayName: 'Angular Animations', parentName: 'Animations' },
55
'animations-sample-2': { displayName: 'SCSS Animations', parentName: 'Animations' },
66
'default-theme-sample': { displayName: 'Default theme sample', parentName: 'Themes' },
7+
'tailwind-sample': { displayName: 'Tailwind sample', parentName: 'Themes' },
78
'shadows-sample': { displayName: 'Shadows sample', parentName: 'Shadows' },
89
'shadows-sample-2': { displayName: 'Shadows sample 2', parentName: 'Shadows' },
910
// eslint-disable-next-line quote-props

0 commit comments

Comments
 (0)