Skip to content

Commit 1b52e89

Browse files
kacheshmarovakacheshmarova
authored
Merge pull request #3642 from IgniteUI/rivanova/add-carousel-vertical-prop-sample
feat(carousel-animations): add vertical property switch
2 parents 8b8a184 + 1d06003 commit 1b52e89

File tree

3 files changed

+78
-89
lines changed

3 files changed

+78
-89
lines changed

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

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,39 @@
1-
<div class="carousel-animation-wrapper">
1+
<div class="carousel-wrapper">
22
<div class="action-wrapper">
3-
<span>Current animation: </span>
4-
<span class="select-container">
5-
<igx-select #select [(ngModel)]="carousel.animationType">
3+
<div class="action">
4+
<span>Animation type</span>
5+
<igx-select #select [type]="'border'" [(ngModel)]="carousel.animationType">
66
@for (animation of animations; track animation) {
77
<igx-select-item [value]="animation">
88
{{animation | titlecase}}
99
</igx-select-item>
1010
}
11-
</igx-select>
12-
</span>
13-
</div>
14-
<div class="carousel-wrapper">
15-
<igx-carousel #carousel [indicators]="false">
16-
@for (slide of slides; track slide) {
17-
<igx-slide>
18-
<div class="slide-wrapper">
19-
<igx-card elevated>
20-
<igx-card-header>
21-
<h4 igxCardHeaderTitle>{{slide.heading}}</h4>
22-
</igx-card-header>
23-
<igx-card-content>
24-
<p>{{slide.description}}</p>
25-
</igx-card-content>
26-
<igx-card-media>
27-
<img [src]="slide.image">
28-
</igx-card-media>
29-
<igx-card-actions>
30-
<a igxButton href="{{slide.link}}" target="_blank" rel="noopener" style="text-decoration: none;" igxStart>visit page</a>
31-
</igx-card-actions>
32-
</igx-card>
33-
</div>
34-
</igx-slide>
35-
}
36-
</igx-carousel>
11+
</igx-select>
12+
</div>
13+
<div class="action">
14+
<igx-switch labelPosition="before" [(ngModel)]="carousel.vertical">Vertical alignment</igx-switch>
15+
</div>
3716
</div>
17+
<igx-carousel #carousel [indicators]="false">
18+
@for (slide of slides; track slide) {
19+
<igx-slide>
20+
<div class="slide-wrapper">
21+
<igx-card>
22+
<igx-card-header>
23+
<h3 igxCardHeaderTitle>{{slide.heading}}</h3>
24+
</igx-card-header>
25+
<igx-card-content>
26+
<p>{{slide.description}}</p>
27+
</igx-card-content>
28+
<igx-card-media>
29+
<img [src]="slide.image">
30+
</igx-card-media>
31+
<igx-card-actions>
32+
<a igxButton href="{{slide.link}}" target="_blank" rel="noopener" igxStart>visit page</a>
33+
</igx-card-actions>
34+
</igx-card>
35+
</div>
36+
</igx-slide>
37+
}
38+
</igx-carousel>
3839
</div>

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

Lines changed: 40 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,55 @@
1+
.carousel-wrapper {
2+
height: 600px;
3+
width: 90%;
4+
margin: 20px auto;
5+
display: flex;
6+
flex-direction: column;
7+
justify-content: space-between;
8+
}
9+
10+
.action-wrapper {
11+
height: 40px;
12+
width: 500px;
13+
display: flex;
14+
justify-content: space-between;
15+
margin-bottom: 10px;
16+
}
17+
18+
.action {
19+
display: flex;
20+
align-items: center;
21+
}
22+
123
.slide-wrapper {
2-
max-height: 600px;
324
display: flex;
425
align-items: center;
526
justify-content: center;
627
height: 100%;
728
padding: 10px;
8-
29+
930
img {
1031
width: 100%;
1132
}
1233
}
13-
14-
.carousel-wrapper {
15-
max-height: 600px;
16-
height: 100%;
17-
width: 90%;
18-
margin: 20px auto;
19-
}
20-
21-
.action-wrapper {
22-
height: 40px;
23-
width: 70%;
24-
display: flex;
25-
align-items: baseline;
26-
margin-bottom: 1rem;
27-
margin-left: 5.7rem;
28-
}
29-
30-
.carousel-animation-wrapper {
31-
height: 700px;
32-
margin: 16px auto;
33-
display: flex;
34-
flex-flow: column;
35-
}
36-
37-
.igx-card {
38-
box-shadow: none;
34+
35+
igx-carousel {
36+
border: 0.5px solid #dde0e4;
3937
}
40-
41-
.select-container {
38+
39+
igx-select {
40+
width: 150px;
4241
margin-left: 10px;
42+
--ig-size: var(--ig-size-small);
4343
}
44-
45-
span:first-child {
46-
position: relative;
47-
bottom: 2px;
44+
45+
igx-card {
46+
border: none;
4847
}
49-
50-
igx-select {
51-
width: 150px;
48+
49+
igx-card-header {
50+
padding: 8px 16px;
51+
}
52+
53+
a {
54+
text-decoration: none;
5255
}
53-
54-
::ng-deep {
55-
.input.igx-input-group__input {
56-
top: 10px;
57-
left: 10px;
58-
}
59-
}

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

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,20 @@
1-
import { Component, OnInit, ViewChild } from '@angular/core';
2-
import { IgxCarouselComponent, IgxSelectComponent, IgxSelectItemComponent, IgxSlideComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardMediaDirective, IgxCardActionsComponent, IgxButtonDirective, IgxPrefixDirective } from 'igniteui-angular';
1+
import { Component, ViewChild } from '@angular/core';
2+
import { IgxCarouselComponent, IgxSelectComponent, IgxSelectItemComponent, IgxSlideComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardMediaDirective, IgxCardActionsComponent, IgxButtonDirective, IgxPrefixDirective, IgxSwitchComponent } from 'igniteui-angular';
33
import { FormsModule } from '@angular/forms';
44
import { TitleCasePipe } from '@angular/common';
55

66
@Component({
77
selector: 'app-carousel',
88
styleUrls: ['./carousel-animations-sample.component.scss'],
99
templateUrl: './carousel-animations-sample.component.html',
10-
imports: [IgxSelectComponent, FormsModule, IgxSelectItemComponent, IgxCarouselComponent, IgxSlideComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardMediaDirective, IgxCardActionsComponent, IgxButtonDirective, IgxPrefixDirective, TitleCasePipe]
10+
imports: [IgxSelectComponent, IgxSwitchComponent, FormsModule, IgxSelectItemComponent, IgxCarouselComponent, IgxSlideComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardMediaDirective, IgxCardActionsComponent, IgxButtonDirective, IgxPrefixDirective, TitleCasePipe]
1111
})
12-
export class CarouselAnimationsSampleComponent implements OnInit {
12+
export class CarouselAnimationsSampleComponent {
1313
@ViewChild('carousel', { static: true }) public carousel: IgxCarouselComponent;
1414

15-
public slides: any[] = [];
1615
public animations = ['slide', 'fade', 'none'];
17-
18-
public ngOnInit() {
19-
this.addSlides();
20-
}
21-
22-
public addSlides() {
23-
this.slides.push(
24-
{
16+
public slides: any[] = [
17+
{
2518
description: '30+ Material-based Angular components to code speedy web apps faster.',
2619
heading: 'Ignite UI for Angular',
2720
image: 'assets/images/carousel/slide1-angular.png',
@@ -39,6 +32,5 @@ export class CarouselAnimationsSampleComponent implements OnInit {
3932
image: 'assets/images/carousel/slide3-aspnet.png',
4033
link: 'https://www.infragistics.com/products/aspnet'
4134
}
42-
);
43-
}
35+
];
4436
}

0 commit comments

Comments
 (0)