Skip to content

Commit 6057e1e

Browse files
RivaIvanovaRivaIvanova
committed
feat(carousel): add samples
1 parent efdf2af commit 6057e1e

37 files changed

+1579
-0
lines changed

‎browser/public/index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -924,6 +924,13 @@
924924
<a class="nav-link" href="#" data-nav="/samples/layouts/card/semi-horizontal">─<span>Semi Horizontal</span></a>
925925
<a class="nav-link" href="#" data-nav="/samples/layouts/card/styling">─<span>Styling</span></a>
926926
</div>
927+
<label id="nav-carousel" class="nav-component">Carousel</label>
928+
<div id="nav-carousel-list" class="nav-list" state="collapsed">
929+
<a class="nav-link" href="#" data-nav="/samples/layouts/carousel/animations">─<span>Animations</span></a>
930+
<a class="nav-link" href="#" data-nav="/samples/layouts/carousel/components">─<span>Components</span></a>
931+
<a class="nav-link" href="#" data-nav="/samples/layouts/carousel/overview">─<span>Overview</span></a>
932+
<a class="nav-link" href="#" data-nav="/samples/layouts/carousel/thumbnail">─<span>Thumbnail</span></a>
933+
</div>
927934
<label id="nav-dock-manager" class="nav-component">Dock Manager</label>
928935
<div id="nav-dock-manager-list" class="nav-list" state="collapsed">
929936
<a class="nav-link" href="#" data-nav="/samples/layouts/dock-manager/add-content-runtime">─<span>Add Content Runtime</span></a>

‎samples/layouts/carousel/animations/.prettierrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"printWidth": 250,
3+
"tabWidth": 4,
4+
"useTabs": false,
5+
"semi": true,
6+
"singleQuote": false,
7+
"trailingComma": "none",
8+
"bracketSpacing": true,
9+
"jsxBracketSameLine": false,
10+
"fluid": false
11+
}

‎samples/layouts/carousel/animations/ReadMe.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
2+
<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
3+
4+
This folder contains implementation of Web Components application with example of Animations feature using [Carousel](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
5+
6+
7+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
8+
<body>
9+
<a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
10+
<img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
11+
</a>
12+
<a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
13+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
14+
</a>
15+
<a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/layouts/carousel/animations" rel="noopener noreferrer">
16+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
17+
</a>
18+
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/layouts/carousel/animations?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
19+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
20+
</a>
21+
</body>
22+
</html>
23+
24+
## Branches
25+
26+
> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
27+
28+
## Instructions
29+
30+
To set up this project locally, execute these commands:
31+
32+
```
33+
git clone https://github.com/IgniteUI/igniteui-wc-examples.git
34+
git checkout master
35+
cd ./igniteui-wc-examples
36+
cd ./samples/layouts/carousel/animations
37+
```
38+
39+
open above folder in VS Code or type:
40+
```
41+
code .
42+
```
43+
44+
In terminal window, run:
45+
46+
```
47+
npm install
48+
npm run start
49+
```
50+
51+
Then open http://localhost:4200/ in your browser
52+
53+
54+
## Learn More
55+
56+
To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).

‎samples/layouts/carousel/animations/index.html‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Carousel Animations</title>
5+
<meta charset="UTF-8" />
6+
7+
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
11+
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
12+
</head>
13+
14+
<body>
15+
<div id="root">
16+
<div class="carousel-wrapper">
17+
<div class="action-wrapper">
18+
<div class="action">
19+
<span>Animation type</span>
20+
<igc-select id="select">
21+
<igc-select-item value="slide" selected>Slide</igc-select-item>
22+
<igc-select-item value="fade">Fade</igc-select-item>
23+
<igc-select-item value="none">None</igc-select-item>
24+
</igc-select>
25+
</div>
26+
<div class="action">
27+
<igc-switch label-position="before">Vertical alignment</igc-switch>
28+
</div>
29+
</div>
30+
<igc-carousel skip-indicator>
31+
<igc-carousel-slide>
32+
<div class="slide-wrapper">
33+
<igc-card>
34+
<igc-card-header>
35+
<h3 slot="title">Ignite UI for Angular</h3>
36+
</igc-card-header>
37+
<igc-card-content>
38+
<p>30+ Material-based Angular components to code speedy web apps faster.</p>
39+
</igc-card-content>
40+
<igc-card-media>
41+
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slide1-angular.png">
42+
</igc-card-media>
43+
<igc-card-actions>
44+
<igc-button slot="start" href="https://www.infragistics.com/products/ignite-ui-angular" target="_blank" rel="noopener">
45+
Visit Page
46+
</igc-button>
47+
</igc-card-actions>
48+
</igc-card>
49+
</div>
50+
</igc-carousel-slide>
51+
<igc-carousel-slide>
52+
<div class="slide-wrapper">
53+
<igc-card>
54+
<igc-card-header>
55+
<h3 slot="title">Ignite UI for Javascript</h3>
56+
</igc-card-header>
57+
<igc-card-content>
58+
<p>A complete JavaScript UI library empowering you to build data-rich responsive web apps.</p>
59+
</igc-card-content>
60+
<igc-card-media>
61+
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slide2-ignite.png">
62+
</igc-card-media>
63+
<igc-card-actions>
64+
<igc-button slot="start" href="https://www.infragistics.com/products/ignite-ui" target="_blank" rel="noopener">
65+
Visit Page
66+
</igc-button>
67+
</igc-card-actions>
68+
</igc-card>
69+
</div>
70+
</igc-carousel-slide>
71+
<igc-carousel-slide>
72+
<div class="slide-wrapper">
73+
<igc-card>
74+
<igc-card-header>
75+
<h3 slot="title">Ultimate UI for ASP.NET</h3>
76+
</igc-card-header>
77+
<igc-card-content>
78+
<p>Build full-featured business apps with the most versatile set of ASP.NET AJAX UI controls.</p>
79+
</igc-card-content>
80+
<igc-card-media>
81+
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slide3-aspnet.png">
82+
</igc-card-media>
83+
<igc-card-actions>
84+
<igc-button slot="start" href="https://www.infragistics.com/products/aspnet" target="_blank" rel="noopener">
85+
Visit Page
86+
</igc-button>
87+
</igc-card-actions>
88+
</igc-card>
89+
</div>
90+
</igc-carousel-slide>
91+
</igc-carousel>
92+
</div>
93+
</div>
94+
<!-- This script is needed only for parcel and it will be excluded for webpack -->
95+
<% if (false) { %><script src="src/index.ts"></script><% } %>
96+
97+
</body>
98+
</html>

‎samples/layouts/carousel/animations/package.json‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
{
2+
"name": "wc-carousel-animations",
3+
"version": "1.0.0",
4+
"description": "This project provides example of button group using IgniteUI for Web Components",
5+
"main": "src/index.ts",
6+
"scripts": {
7+
"build": "npm run build:prod",
8+
"build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
9+
"build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
10+
"serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
11+
"serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
12+
"start": "npm run serve:dev",
13+
"build:legacy": "npm run build:prod:legacy",
14+
"build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details",
15+
"build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
16+
"serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
17+
"serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
18+
"start:legacy": "npm run serve:dev:legacy"
19+
},
20+
"author": "Infragistics",
21+
"dependencies": {
22+
"@webcomponents/custom-elements": "^1.4.1",
23+
"@webcomponents/template": "^1.4.2",
24+
"babel-runtime": "^6.26.0",
25+
"core-js": "^3.6.5",
26+
"igniteui-webcomponents": "4.11.1",
27+
"lit": "^2.0.2",
28+
"lit-html": "^2.2.0",
29+
"tslib": "^2.6.3"
30+
},
31+
"devDependencies": {
32+
"@babel/cli": "^7.8.3",
33+
"@babel/core": "^7.8.3",
34+
"@babel/plugin-proposal-class-properties": "^7.8.3",
35+
"@babel/plugin-transform-runtime": "^7.10.0",
36+
"@babel/preset-env": "^7.8.3",
37+
"@babel/preset-typescript": "^7.8.3",
38+
"@types/source-map": "^0.5.7",
39+
"babel-loader": "^8.1.0",
40+
"babel-plugin-transform-custom-element-classes": "^0.1.0",
41+
"css-loader": "^1.0.0",
42+
"csv-loader": "^3.0.2",
43+
"file-loader": "^4.2.0",
44+
"fork-ts-checker-webpack-plugin": "^4.1.5",
45+
"html-webpack-plugin": "^4.3.0",
46+
"parcel-bundler": "^1.6.1",
47+
"source-map": "^0.7.3",
48+
"style-loader": "^0.22.1",
49+
"tsconfig-paths-webpack-plugin": "^4.0.0",
50+
"typescript": "^4.4.4",
51+
"webpack": "^5.74.0",
52+
"webpack-cli": "^4.10.0",
53+
"webpack-dev-server": "^4.11.1",
54+
"worker-loader": "^3.0.8",
55+
"xml-loader": "^1.2.1"
56+
},
57+
"license": "",
58+
"homepage": "."
59+
}

‎samples/layouts/carousel/animations/sandbox.config.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"infiniteLoopProtection": false,
3+
"hardReloadOnChange": false,
4+
"view": "browser",
5+
"template": "parcel"
6+
}
7+

‎samples/layouts/carousel/animations/src/index.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/* shared styles are loaded from: */
2+
/* https://static.infragistics.com/xplatform/css/samples */
3+
4+
.carousel-wrapper {
5+
height: 600px;
6+
width: 90%;
7+
margin: 20px auto;
8+
display: flex;
9+
flex-direction: column;
10+
justify-content: space-between;
11+
}
12+
13+
.action-wrapper {
14+
height: 40px;
15+
width: 500px;
16+
display: flex;
17+
justify-content: space-between;
18+
}
19+
20+
.action {
21+
display: flex;
22+
align-items: center;
23+
}
24+
25+
.slide-wrapper {
26+
display: flex;
27+
align-items: center;
28+
justify-content: center;
29+
padding: 10px;
30+
}
31+
32+
igc-carousel {
33+
border-radius: 10px;
34+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
35+
max-height: 550px;
36+
}
37+
38+
igc-select {
39+
width: 150px;
40+
margin-left: 10px;
41+
--ig-size: var(--ig-size-small);
42+
}
43+
44+
igc-card {
45+
border: none;
46+
}
47+
48+
igc-card-header {
49+
padding: 8px 16px;
50+
}

‎samples/layouts/carousel/animations/src/index.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { defineComponents, IgcButtonComponent, IgcCardComponent, IgcCarouselComponent, IgcSelectComponent, IgcSwitchComponent } from "igniteui-webcomponents";
2+
import "igniteui-webcomponents/themes/light/bootstrap.css";
3+
import "./index.css";
4+
5+
defineComponents(IgcCarouselComponent, IgcSelectComponent, IgcCardComponent, IgcButtonComponent, IgcSwitchComponent);
6+
7+
export class CarouselAnimations {
8+
private carousel: IgcCarouselComponent;
9+
private select: IgcSelectComponent;
10+
private switch: IgcSwitchComponent;
11+
12+
constructor() {
13+
this.carousel = document.querySelector('igc-carousel') as IgcCarouselComponent;
14+
this.select = document.querySelector('igc-select') as IgcSelectComponent;
15+
this.switch = document.querySelector('igc-switch') as IgcSwitchComponent;
16+
17+
this.select.addEventListener("igcChange", (e) => {
18+
const animation = e.detail.value as 'slide' | 'fade' | 'none';
19+
this.carousel.animationType = animation;
20+
});
21+
22+
this.switch.addEventListener("igcChange", (e) => {
23+
this.carousel.vertical = e.detail.checked;
24+
});
25+
}
26+
}
27+
28+
new CarouselAnimations();

‎samples/layouts/carousel/animations/tsconfig.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"compilerOptions": {
3+
"noImplicitReturns": true,
4+
"esModuleInterop": true,
5+
"noImplicitAny": true,
6+
"declarationDir": "dist/types",
7+
"moduleResolution": "node",
8+
"declaration": true,
9+
"target": "es2015",
10+
"module": "es2015",
11+
"strict": true
12+
},
13+
"include": [
14+
"src/**/*"
15+
],
16+
"exclude": [
17+
"node_modules",
18+
"dist"
19+
]
20+
}

0 commit comments

Comments
 (0)