Skip to content

Commit 2a67cd8

Browse files
simeonoffsimeonoff
authored
Merge pull request #3754 from IgniteUI/apetrov/add-carousel-styling-sample
feat(carousel): add styling & tailwind sample
2 parents a651b99 + cc053b0 commit 2a67cd8

11 files changed

Lines changed: 149 additions & 0 deletions

‎live-editing/configs/CarouselConfigGenerator.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,13 @@ export class CarouselConfigGenerator implements IConfigGenerator {
4141
shortenComponentPathBy: "/layouts/carousel/"
4242
}));
4343

44+
configs.push(new Config({
45+
component: 'CarouselStylingSampleComponent',
46+
additionalFiles: ["/src/app/layouts/carousel/carousel-styling-sample/layout.scss"],
47+
appConfig: BaseAppConfig,
48+
shortenComponentPathBy: "/layouts/carousel/"
49+
}));
50+
4451
return configs;
4552
}
4653
}

‎src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<div class="carousel-container">
2+
<igx-carousel>
3+
<igx-slide>
4+
<div class="slide-content-wrapper">
5+
<img src="assets/images/carousel/slide1@x2.jpg">
6+
</div>
7+
</igx-slide>
8+
<igx-slide>
9+
<div class="slide-content-wrapper">
10+
<img src="assets/images/carousel/16:9-CulturalDip.png">
11+
</div>
12+
</igx-slide>
13+
<igx-slide>
14+
<div class="slide-content-wrapper">
15+
<img src="assets/images/carousel/slide3@x2.jpg">
16+
</div>
17+
</igx-slide>
18+
</igx-carousel>
19+
</div>

‎src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@use "layout.scss";
2+
@use "igniteui-angular/theming" as *;
3+
4+
// Create expansion panel theme
5+
$custom-panel-theme: carousel-theme(
6+
$button-background: rgb(124 50 221 / 60%),
7+
$button-arrow-color: #c5bcd0,
8+
$button-hover-arrow-color: #F3E8FF,
9+
$indicator-background: rgb(124 50 221 / 60%),
10+
$indicator-border-color: #a29aab,
11+
$button-shadow: var(--ig-elevation-5)
12+
);
13+
14+
// Apply the custom themes to the components mixins.
15+
@include css-vars($custom-panel-theme);

‎src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Component } from '@angular/core';
2+
import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular';
3+
4+
@Component({
5+
selector: 'app-carousel',
6+
styleUrls: ['./carousel-styling-sample.component.scss'],
7+
templateUrl: './carousel-styling-sample.component.html',
8+
imports: [IgxCarouselComponent, IgxSlideComponent]
9+
})
10+
11+
export class CarouselStylingSampleComponent { }

‎src/app/layouts/carousel/carousel-styling-sample/layout.scss‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.carousel-container {
2+
margin: 2rem 2rem auto;
3+
}
4+
5+
:host ::ng-deep {
6+
[role='button'],
7+
[role='tablist'] {
8+
backdrop-filter: blur(2px);
9+
10+
&:hover {
11+
backdrop-filter: blur(10px);
12+
}
13+
}
14+
15+
.igx-carousel__inner {
16+
min-width: unset;
17+
}
18+
19+
.igx-slide {
20+
display: flex;
21+
align-items: center;
22+
23+
img {
24+
min-height: 15rem;
25+
}
26+
}
27+
}

‎src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<div class="carousel-container">
2+
<igx-carousel class=" ![--indicator-background:#a7b6de] ![--button-background:#a7b6de] ![--button-hover-background:#8d9abc] ![--indicator-border-color:#3E4853] ![--indicator-active-border-color:#000000] ![--button-hover-arrow-color:#000000] ![--button-arrow-color:#3E4853]">
3+
<igx-slide>
4+
<div class="slide-content-wrapper">
5+
<img src="assets/images/carousel/slide1@x2.jpg">
6+
</div>
7+
</igx-slide>
8+
<igx-slide>
9+
<div class="slide-content-wrapper">
10+
<img src="assets/images/carousel/16:9-CulturalDip.png">
11+
</div>
12+
</igx-slide>
13+
<igx-slide>
14+
<div class="slide-content-wrapper">
15+
<img src="assets/images/carousel/slide3@x2.jpg">
16+
</div>
17+
</igx-slide>
18+
</igx-carousel>
19+
</div>

‎src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
igx-carousel {
2+
--button-shadow: var(--ig-elevation-15);
3+
}
4+
5+
.carousel-container {
6+
margin: 2rem 2rem auto;
7+
}
8+
9+
:host ::ng-deep {
10+
.igx-carousel__inner {
11+
min-width: unset;
12+
}
13+
14+
.igx-slide {
15+
display: flex;
16+
align-items: center;
17+
18+
img {
19+
min-height: 15rem;
20+
}
21+
}
22+
}

‎src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Component } from '@angular/core';
2+
import { IgxCarouselComponent, IgxSlideComponent} from 'igniteui-angular';
3+
4+
@Component({
5+
selector: 'app-carousel',
6+
styleUrls: ['./carousel-tailwind-sample.component.scss'],
7+
templateUrl: './carousel-tailwind-sample.component.html',
8+
imports: [IgxCarouselComponent, IgxSlideComponent]
9+
})
10+
11+
export class CarouselTailwindSampleComponent { }

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ export const layoutsRoutesData = {
1616
'carousel-no-navigation-sample': { displayName: 'Carousel No Navigation', parentName: 'Carousel' },
1717
'carousel-animations-sample': { displayName: 'Carousel Animations', parentName: 'Carousel' },
1818
'carousel-with-components-sample': { displayName: 'Carousel With Other Components', parentName: 'Carousel' },
19+
'carousel-tailwind-sample': { displayName: 'Carousel Tailwind', parentName: 'Carousel' },
20+
'carousel-styling-sample': { displayName: 'Carousel Styling', parentName: 'Carousel' },
1921
'dock-manager-sample': { displayName: 'Dock Manager', parentName: 'Dock Manager' },
2022
'expansion-sample-1': { displayName: 'Expansion Panel 1', parentName: 'Expansion Panel' },
2123
'expansion-sample-2': { displayName: 'Expansion Panel 2', parentName: 'Expansion Panel' },

‎src/app/layouts/layouts.routes.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,12 @@ import {
2323
import {
2424
CarouselWithComponentsSampleComponent
2525
} from './carousel/carousel-with-components-sample/carousel-with-components-sample.component';
26+
import {
27+
CarouselTailwindSampleComponent
28+
} from './carousel/carousel-tailwind-sample/carousel-tailwind-sample.component';
29+
import {
30+
CarouselStylingSampleComponent
31+
} from './carousel/carousel-styling-sample/carousel-styling-sample.component';
2632
import { CarouselComponent } from './carousel/carousel.component';
2733
import { DividerDashedComponent } from './divider/dashed/divider-dashed.component';
2834
import { DividerDefaultComponent } from './divider/default/divider-default.component';
@@ -156,6 +162,16 @@ export const LayoutsRoutes: Routes = [
156162
data: layoutsRoutesData['carousel-with-components-sample'],
157163
path: 'carousel-with-components-sample'
158164
},
165+
{
166+
component: CarouselTailwindSampleComponent,
167+
data: layoutsRoutesData['carousel-tailwind-sample'],
168+
path: 'carousel-tailwind-sample'
169+
},
170+
{
171+
component: CarouselStylingSampleComponent,
172+
data: layoutsRoutesData['carousel-styling-sample'],
173+
path: 'carousel-styling-sample'
174+
},
159175
{
160176
component: CarouselComponent,
161177
data: layoutsRoutesData['carousel'],

0 commit comments

Comments
 (0)