diff --git a/live-editing/configs/CarouselConfigGenerator.ts b/live-editing/configs/CarouselConfigGenerator.ts index aeccd5f3d5..a909c4440d 100644 --- a/live-editing/configs/CarouselConfigGenerator.ts +++ b/live-editing/configs/CarouselConfigGenerator.ts @@ -41,6 +41,13 @@ export class CarouselConfigGenerator implements IConfigGenerator { shortenComponentPathBy: "/layouts/carousel/" })); + configs.push(new Config({ + component: 'CarouselStylingSampleComponent', + additionalFiles: ["/src/app/layouts/carousel/carousel-styling-sample/layout.scss"], + appConfig: BaseAppConfig, + shortenComponentPathBy: "/layouts/carousel/" + })); + return configs; } } diff --git a/src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.html b/src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.html new file mode 100644 index 0000000000..1f2c1720b2 --- /dev/null +++ b/src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.html @@ -0,0 +1,19 @@ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
diff --git a/src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.scss b/src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.scss new file mode 100644 index 0000000000..1b6a2852d1 --- /dev/null +++ b/src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.scss @@ -0,0 +1,15 @@ +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +// Create expansion panel theme +$custom-panel-theme: carousel-theme( + $button-background: rgb(124 50 221 / 60%), + $button-arrow-color: #c5bcd0, + $button-hover-arrow-color: #F3E8FF, + $indicator-background: rgb(124 50 221 / 60%), + $indicator-border-color: #a29aab, + $button-shadow: var(--ig-elevation-5) +); + +// Apply the custom themes to the components mixins. +@include css-vars($custom-panel-theme); \ No newline at end of file diff --git a/src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.ts b/src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.ts new file mode 100644 index 0000000000..ffa184d634 --- /dev/null +++ b/src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; +import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular'; + +@Component({ + selector: 'app-carousel', + styleUrls: ['./carousel-styling-sample.component.scss'], + templateUrl: './carousel-styling-sample.component.html', + imports: [IgxCarouselComponent, IgxSlideComponent] +}) + +export class CarouselStylingSampleComponent { } diff --git a/src/app/layouts/carousel/carousel-styling-sample/layout.scss b/src/app/layouts/carousel/carousel-styling-sample/layout.scss new file mode 100644 index 0000000000..4a4e6e05c6 --- /dev/null +++ b/src/app/layouts/carousel/carousel-styling-sample/layout.scss @@ -0,0 +1,27 @@ +.carousel-container { + margin: 2rem 2rem auto; +} + +:host ::ng-deep { + [role='button'], + [role='tablist'] { + backdrop-filter: blur(2px); + + &:hover { + backdrop-filter: blur(10px); + } + } + + .igx-carousel__inner { + min-width: unset; + } + + .igx-slide { + display: flex; + align-items: center; + + img { + min-height: 15rem; + } + } +} \ No newline at end of file diff --git a/src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.html b/src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.html new file mode 100644 index 0000000000..ef2d4f5651 --- /dev/null +++ b/src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.html @@ -0,0 +1,19 @@ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
diff --git a/src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.scss b/src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.scss new file mode 100644 index 0000000000..fbf71820a8 --- /dev/null +++ b/src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.scss @@ -0,0 +1,22 @@ +igx-carousel { + --button-shadow: var(--ig-elevation-15); +} + +.carousel-container { + margin: 2rem 2rem auto; +} + +:host ::ng-deep { + .igx-carousel__inner { + min-width: unset; + } + + .igx-slide { + display: flex; + align-items: center; + + img { + min-height: 15rem; + } + } +} \ No newline at end of file diff --git a/src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.ts b/src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.ts new file mode 100644 index 0000000000..51b302e18e --- /dev/null +++ b/src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; +import { IgxCarouselComponent, IgxSlideComponent} from 'igniteui-angular'; + +@Component({ + selector: 'app-carousel', + styleUrls: ['./carousel-tailwind-sample.component.scss'], + templateUrl: './carousel-tailwind-sample.component.html', + imports: [IgxCarouselComponent, IgxSlideComponent] +}) + +export class CarouselTailwindSampleComponent { } diff --git a/src/app/layouts/layouts-routes-data.ts b/src/app/layouts/layouts-routes-data.ts index 6243a73522..984fe9348d 100644 --- a/src/app/layouts/layouts-routes-data.ts +++ b/src/app/layouts/layouts-routes-data.ts @@ -16,6 +16,8 @@ export const layoutsRoutesData = { 'carousel-no-navigation-sample': { displayName: 'Carousel No Navigation', parentName: 'Carousel' }, 'carousel-animations-sample': { displayName: 'Carousel Animations', parentName: 'Carousel' }, 'carousel-with-components-sample': { displayName: 'Carousel With Other Components', parentName: 'Carousel' }, + 'carousel-tailwind-sample': { displayName: 'Carousel Tailwind', parentName: 'Carousel' }, + 'carousel-styling-sample': { displayName: 'Carousel Styling', parentName: 'Carousel' }, 'dock-manager-sample': { displayName: 'Dock Manager', parentName: 'Dock Manager' }, 'expansion-sample-1': { displayName: 'Expansion Panel 1', parentName: 'Expansion Panel' }, 'expansion-sample-2': { displayName: 'Expansion Panel 2', parentName: 'Expansion Panel' }, diff --git a/src/app/layouts/layouts.routes.ts b/src/app/layouts/layouts.routes.ts index 857d87a2d2..a8f23171c7 100644 --- a/src/app/layouts/layouts.routes.ts +++ b/src/app/layouts/layouts.routes.ts @@ -23,6 +23,12 @@ import { import { CarouselWithComponentsSampleComponent } from './carousel/carousel-with-components-sample/carousel-with-components-sample.component'; +import { + CarouselTailwindSampleComponent +} from './carousel/carousel-tailwind-sample/carousel-tailwind-sample.component'; +import { + CarouselStylingSampleComponent +} from './carousel/carousel-styling-sample/carousel-styling-sample.component'; import { CarouselComponent } from './carousel/carousel.component'; import { DividerDashedComponent } from './divider/dashed/divider-dashed.component'; import { DividerDefaultComponent } from './divider/default/divider-default.component'; @@ -156,6 +162,16 @@ export const LayoutsRoutes: Routes = [ data: layoutsRoutesData['carousel-with-components-sample'], path: 'carousel-with-components-sample' }, + { + component: CarouselTailwindSampleComponent, + data: layoutsRoutesData['carousel-tailwind-sample'], + path: 'carousel-tailwind-sample' + }, + { + component: CarouselStylingSampleComponent, + data: layoutsRoutesData['carousel-styling-sample'], + path: 'carousel-styling-sample' + }, { component: CarouselComponent, data: layoutsRoutesData['carousel'], diff --git a/src/assets/images/carousel/16:9-CulturalDip.png b/src/assets/images/carousel/16:9-CulturalDip.png new file mode 100644 index 0000000000..c1168c79fd Binary files /dev/null and b/src/assets/images/carousel/16:9-CulturalDip.png differ