diff --git a/browser/public/meta.json b/browser/public/meta.json index 878e6465e4..d944cdda47 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-05 23:55:42","note":"this file is auto-generated"} +{"version":"23.2.915","date":"2026-08-17 18:39:08","note":"this file is auto-generated"} \ No newline at end of file diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json index 878e6465e4..d944cdda47 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-05 23:55:42","note":"this file is auto-generated"} +{"version":"23.2.915","date":"2026-08-17 18:39:08","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/layouts/carousel/animations/src/CarouselAnimations.css b/samples/layouts/carousel/animations/src/CarouselAnimations.css deleted file mode 100644 index 8ed16e11e6..0000000000 --- a/samples/layouts/carousel/animations/src/CarouselAnimations.css +++ /dev/null @@ -1,46 +0,0 @@ -.carousel-wrapper { - height: 600px; - width: 90%; - margin: 20px auto; - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.action-wrapper { - height: 40px; - width: 500px; - display: flex; - justify-content: space-between; - margin-bottom: 10px; -} - -.action { - display: flex; - align-items: center; -} - -.slide-wrapper { - display: flex; - align-items: center; - justify-content: center; - padding: 10px; -} - -igc-carousel { - border: 0.5px solid #dde0e4; -} - -igc-select { - width: 150px; - margin-left: 10px; - --ig-size: var(--ig-size-small); -} - -igc-card { - border: none; -} - -igc-card-header { - padding: 8px 16px; -} \ No newline at end of file diff --git a/samples/layouts/carousel/animations/src/index.css b/samples/layouts/carousel/animations/src/index.css index 1f53b8aa05..831a8d02fd 100644 --- a/samples/layouts/carousel/animations/src/index.css +++ b/samples/layouts/carousel/animations/src/index.css @@ -1,2 +1,178 @@ /* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +.carousel-wrapper { + display: flex; + width: min(860px, 100%); + flex-direction: column; + gap: 16px; + margin: 16px auto 0; +} + +.action-wrapper { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 24px; +} + +.action { + display: flex; + align-items: center; + gap: 8px; +} + +.action-label { + color: var(--ig-gray-700); +} + +igc-select { + width: 150px; + --ig-size: var(--ig-size-small); +} + +igc-switch { + --ig-size: var(--ig-size-small); +} + +igc-carousel { + height: 360px; + overflow: hidden; + border: 1px solid var(--ig-gray-300); + border-radius: 8px; + background: var(--ig-surface-500); +} + +igc-carousel::part(previous), +igc-carousel::part(next) { + width: 40px; + height: 40px; +} + +igc-carousel::part(previous) { + left: 16px; +} + +igc-carousel::part(next) { + right: 16px; +} + +igc-carousel[vertical]::part(previous), +igc-carousel[vertical]::part(next) { + left: auto; + right: 16px; + transform: none; +} + +.slide-wrapper { + display: grid; + grid-template-columns: minmax(0, 1fr) 280px; + align-items: center; + gap: 48px; + width: 100%; + height: 100%; + margin: 0; + padding: 56px 84px; + overflow: hidden; + background: + linear-gradient(135deg, rgba(25, 118, 210, 0.08), transparent 46%), + linear-gradient(315deg, rgba(0, 150, 136, 0.10), transparent 42%), + var(--ig-gray-100); +} + +.slide-content { + max-width: 460px; + color: var(--ig-gray-900); +} + +.slide-label { + display: block; + margin-bottom: 12px; + color: var(--ig-primary-600); + font-size: 12px; + font-weight: 700; +} + +.slide-content h3 { + margin: 0; + font-size: 32px; + line-height: 1.15; +} + +.slide-content p { + margin: 12px 0 0; + color: var(--ig-gray-700); + font-size: 18px; + line-height: 1.45; +} + +.slide-details { + display: inline-flex; + align-items: center; + gap: 16px; + margin-top: 28px; + padding: 10px 14px; + border: 1px solid var(--ig-gray-300); + border-radius: 999px; + background: rgba(255, 255, 255, 0.72); +} + +.slide-details span { + color: var(--ig-gray-700); +} + +.slide-details strong { + color: var(--ig-gray-900); +} + +.slide-preview { + display: grid; + width: 100%; + height: 220px; + grid-template-columns: repeat(3, 1fr); + align-items: center; + gap: 14px; +} + +.slide-preview span { + display: block; + border-radius: 8px; + background: var(--ig-primary-100); + box-shadow: 0 10px 24px rgba(11, 31, 53, 0.12); +} + +.slide-preview span:nth-child(1) { + height: 120px; + opacity: 0.55; +} + +.slide-preview span:nth-child(2) { + height: 180px; + background: var(--ig-primary-300); +} + +.slide-preview span:nth-child(3) { + height: 92px; + opacity: 0.75; +} + +@media (max-width: 640px) { + .action-wrapper { + align-items: flex-start; + flex-direction: column; + gap: 12px; + } + + .slide-wrapper { + grid-template-columns: 1fr; + gap: 28px; + padding: 32px 64px; + } + + .slide-preview { + height: 120px; + } + + .slide-content h3 { + font-size: 28px; + } +} diff --git a/samples/layouts/carousel/animations/src/index.tsx b/samples/layouts/carousel/animations/src/index.tsx index dff7e50a07..c1adad295d 100644 --- a/samples/layouts/carousel/animations/src/index.tsx +++ b/samples/layouts/carousel/animations/src/index.tsx @@ -1,13 +1,7 @@ -import React, { useRef, useState } from "react"; +import React, { useState } from "react"; import ReactDOM from "react-dom/client"; import { HorizontalTransitionAnimation, - IgrButton, - IgrCard, - IgrCardActions, - IgrCardContent, - IgrCardHeader, - IgrCardMedia, IgrCarousel, IgrCarouselSlide, IgrCheckboxChangeEventArgs, @@ -16,10 +10,39 @@ import { IgrSwitch, } from "igniteui-react"; import "igniteui-webcomponents/themes/light/bootstrap.css"; -import "./CarouselAnimations.css"; import "./index.css"; -export default function CarouselComponents() { +const animationTypes: Array<{ value: HorizontalTransitionAnimation; label: string }> = [ + { value: "slide", label: "Slide" }, + { value: "fade", label: "Fade" }, + { value: "none", label: "None" }, +]; + +const slides = [ + { + title: "Slide transition", + subtitle: "Moves content horizontally or vertically to preserve directional context.", + label: "01", + detail: "Best for sequential browsing", + metric: "320ms", + }, + { + title: "Fade transition", + subtitle: "Cross-fades between slides when the relationship between items is looser.", + label: "02", + detail: "Best for featured content", + metric: "240ms", + }, + { + title: "No transition", + subtitle: "Updates the active slide immediately for reduced motion or dense workflows.", + label: "03", + detail: "Best for direct state changes", + metric: "0ms", + }, +]; + +export default function CarouselAnimations() { const [animationType, setAnimationType] = useState('slide'); const [isCarouselVertical, setIsCarouselVertical] = useState(false); @@ -37,17 +60,17 @@ export default function CarouselComponents() {
- Animation type + Animation - - Slide - - - Fade - - - None - + {animationTypes.map((animation) => ( + + {animation.label} + + ))}
@@ -55,7 +78,7 @@ export default function CarouselComponents() { onChange={onSwitchChange} labelPosition="before" > - Vertical alignment + Vertical
@@ -63,102 +86,26 @@ export default function CarouselComponents() { hideIndicators={true} animationType={animationType} vertical={isCarouselVertical}> - -
- - - - Ignite UI for Angular - - - -

- 30+ Material-based Angular components to code speedy web apps - faster. -

- - - - - - - Visit Page - - - -
- - -
- - - - Ignite UI for Javascript - - - -

- A complete JavaScript UI library empowering you to build - data-rich responsive web apps. -

- - - - - - - Visit Page - - - -
- - -
- - - - Ultimate UI for ASP.NET - - - -

- Build full-featured business apps with the most versatile set - of ASP.NET AJAX UI controls. -

- - - - - - - Visit Page - - - -
- + {slides.map((slide) => ( + +
+
+ {slide.label} +

{slide.title}

+

{slide.subtitle}

+
+ {slide.detail} + {slide.metric} +
+
+ +
+ + ))}
); @@ -166,4 +113,4 @@ export default function CarouselComponents() { // rendering above component to the React DOM const root = ReactDOM.createRoot(document.getElementById("root")); -root.render(); +root.render(); diff --git a/samples/layouts/carousel/components/src/CarouselComponents.css b/samples/layouts/carousel/components/src/CarouselComponents.css deleted file mode 100644 index 26b7c61a11..0000000000 --- a/samples/layouts/carousel/components/src/CarouselComponents.css +++ /dev/null @@ -1,25 +0,0 @@ -.carousel-container { - padding: 16px; -} - -igc-carousel { - margin-inline: auto; - max-width: 75%; - height: 500px; -} - -igc-carousel-slide { - display: flex; - justify-content: center; - align-items: center; -} - -igc-carousel-slide div { - text-align: center; - max-width: 40%; - margin-inline: auto; -} - -igc-carousel-slide div * { - margin-block: 8px; -} diff --git a/samples/layouts/carousel/components/src/index.css b/samples/layouts/carousel/components/src/index.css index 1f53b8aa05..38c8b545c8 100644 --- a/samples/layouts/carousel/components/src/index.css +++ b/samples/layouts/carousel/components/src/index.css @@ -1,2 +1,166 @@ /* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +.carousel-container { + width: min(760px, 100%); + margin: 16px auto 0; +} + +igc-carousel { + height: 400px; + overflow: hidden; + border: 1px solid var(--ig-gray-300); + border-radius: 8px; + background: var(--ig-surface-500); +} + +igc-carousel::part(previous), +igc-carousel::part(next) { + width: 40px; + height: 40px; +} + +igc-carousel::part(previous) { + left: 16px; +} + +igc-carousel::part(next) { + right: 16px; +} + +igc-carousel::part(indicators) { + background: transparent; +} + +igc-carousel-slide { + display: grid; + height: 100%; + place-items: center; +} + +igc-carousel-slide.slide-frame { + background: var(--ig-gray-100); +} + +.slide-shell { + display: grid; + grid-template-columns: minmax(0, 390px) 120px; + width: fit-content; + height: auto; + align-items: center; + justify-content: center; + gap: 28px; + margin: 0 auto; + padding: 24px 0; +} + +igc-carousel-slide.slide-coast { + background: + linear-gradient(135deg, rgba(25, 118, 210, 0.12), transparent 45%), + var(--ig-gray-100); +} + +igc-carousel-slide.slide-city { + background: + linear-gradient(135deg, rgba(103, 58, 183, 0.12), transparent 45%), + var(--ig-gray-100); +} + +igc-carousel-slide.slide-resort { + background: + linear-gradient(135deg, rgba(0, 150, 136, 0.12), transparent 45%), + var(--ig-gray-100); +} + +.feature-card { + display: grid; + gap: 14px; + padding: 22px 24px; + border: 1px solid var(--ig-gray-300); + border-radius: 8px; + background: rgba(255, 255, 255, 0.86); + box-shadow: 0 14px 34px rgba(11, 31, 53, 0.14); +} + +.slide-label { + color: var(--ig-primary-600); + font-size: 12px; + font-weight: 700; +} + +.feature-copy { + display: grid; + gap: 8px; +} + +.feature-copy h3 { + margin: 0; + color: var(--ig-gray-900); + font-size: 24px; + line-height: 1.2; +} + +.feature-copy p { + margin: 0 0 8px; + color: var(--ig-gray-700); + line-height: 1.45; +} + +.feature-card igc-button { + justify-self: start; +} + +.chip-row { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.chip-row span { + padding: 6px 10px; + border: 1px solid var(--ig-gray-300); + border-radius: 999px; + color: var(--ig-gray-700); + background: var(--ig-surface-500); + font-size: 14px; +} + +.feature-visual { + display: grid; + width: 120px; + height: 180px; + grid-template-columns: repeat(3, 1fr); + align-items: end; + gap: 8px; +} + +.feature-visual span { + display: block; + border-radius: 8px; + background: rgba(255, 255, 255, 0.72); + box-shadow: 0 10px 24px rgba(11, 31, 53, 0.12); +} + +.feature-visual span:nth-child(1) { + height: 46%; + opacity: 0.75; +} + +.feature-visual span:nth-child(2) { + height: 82%; +} + +.feature-visual span:nth-child(3) { + height: 62%; + opacity: 0.9; +} + +@media (max-width: 720px) { + .slide-shell { + grid-template-columns: 1fr; + padding: 32px 64px; + } + + .feature-visual { + display: none; + } +} diff --git a/samples/layouts/carousel/components/src/index.tsx b/samples/layouts/carousel/components/src/index.tsx index 3a82cfa469..05cd45d8a0 100644 --- a/samples/layouts/carousel/components/src/index.tsx +++ b/samples/layouts/carousel/components/src/index.tsx @@ -9,7 +9,6 @@ import { registerIconFromText, } from "igniteui-react"; import "igniteui-webcomponents/themes/light/bootstrap.css"; -import "./CarouselComponents.css"; import "./index.css"; const icons = [ @@ -40,34 +39,86 @@ export default function CarouselComponents() { return (
- -
- -
- - + +
+ +
+ Featured route +

Coastal weekend

+

Browse curated travel ideas and search directly from the active slide.

+
+ + - - +
+ 3 stops + Sea view + Weekend +
+ + Explore + + + +
+ + +
+
+
+ City guide +

Museum night pass

+

Use slide content for focused cards that combine text, inputs, and actions.

+
+ + +
+ Galleries + After hours + Limited +
- Sign In + Notify Me
-
+ + - -
- -
- - + +
+ +
+ Seasonal offer +

Resort day access

+

Place interactive controls inside slides when each item can stand on its own.

+
+ + +
+ Pool + Lunch + Spa credit +
- Search + Apply Code -
+ +
diff --git a/samples/layouts/carousel/configuration/.devcontainer/devcontainer.json b/samples/layouts/carousel/configuration/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/layouts/carousel/configuration/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/layouts/carousel/configuration/.eslintrc.js b/samples/layouts/carousel/configuration/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/carousel/configuration/.eslintrc.js @@ -0,0 +1,75 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/layouts/carousel/configuration/README.md b/samples/layouts/carousel/configuration/README.md new file mode 100644 index 0000000000..510d93ba01 --- /dev/null +++ b/samples/layouts/carousel/configuration/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Configuration feature using [Carousel](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/layouts/carousel/configuration +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/layouts/carousel/configuration/index.html b/samples/layouts/carousel/configuration/index.html new file mode 100644 index 0000000000..19c587c609 --- /dev/null +++ b/samples/layouts/carousel/configuration/index.html @@ -0,0 +1,11 @@ + + + + Carousel Configuration + + + +
+ + + diff --git a/samples/layouts/carousel/configuration/package.json b/samples/layouts/carousel/configuration/package.json new file mode 100644 index 0000000000..7d47971ea5 --- /dev/null +++ b/samples/layouts/carousel/configuration/package.json @@ -0,0 +1,41 @@ +{ + "name": "react-carousel-configuration", + "description": "This project provides example of Carousel configuration using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "vite --port 4200", + "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "test": "vitest" + }, + "dependencies": { + "igniteui-react": "19.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^24.7.1", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "typescript": "^4.8.4", + "vite": "^7.1.9", + "vitest": "^3.2.4", + "vitest-canvas-mock": "^0.3.3", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/layouts/carousel/configuration/sandbox.config.json b/samples/layouts/carousel/configuration/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/carousel/configuration/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/carousel/configuration/src/index.css b/samples/layouts/carousel/configuration/src/index.css new file mode 100644 index 0000000000..439db7ace5 --- /dev/null +++ b/samples/layouts/carousel/configuration/src/index.css @@ -0,0 +1,90 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +.configuration-sample { + display: grid; + width: min(860px, 100%); + gap: 16px; + margin: 16px auto 0; +} + +.configuration-controls { + display: grid; + grid-template-columns: repeat(3, max-content); + align-items: center; + justify-content: end; + gap: 16px; +} + +igc-switch { + --ig-size: var(--ig-size-small); +} + +igc-carousel { + height: 340px; + overflow: hidden; + border: 1px solid var(--ig-gray-300); + border-radius: 8px; + background: var(--ig-surface-500); +} + +igc-carousel::part(previous), +igc-carousel::part(next) { + width: 40px; + height: 40px; +} + +igc-carousel::part(previous) { + left: 16px; +} + +igc-carousel::part(next) { + right: 16px; +} + +igc-carousel-slide { + display: grid; + height: 100%; + place-items: center; + background: + linear-gradient(135deg, rgba(25, 118, 210, 0.10), transparent 42%), + linear-gradient(315deg, rgba(0, 150, 136, 0.10), transparent 42%), + var(--ig-gray-100); +} + +.slide-card { + display: grid; + width: min(420px, 100%); + gap: 10px; + margin: 0; + padding: 28px; + border: 1px solid var(--ig-gray-300); + border-radius: 8px; + color: var(--ig-gray-900); + background: rgba(255, 255, 255, 0.88); + box-shadow: 0 14px 34px rgba(11, 31, 53, 0.14); +} + +.slide-card span { + color: var(--ig-primary-600); + font-size: 12px; + font-weight: 700; +} + +.slide-card h3 { + margin: 0; + font-size: 28px; + line-height: 1.2; +} + +.slide-card p { + margin: 0; + color: var(--ig-gray-700); + line-height: 1.45; +} + +@media (max-width: 760px) { + .configuration-controls { + grid-template-columns: repeat(2, minmax(0, 1fr)); + justify-content: stretch; + } +} diff --git a/samples/layouts/carousel/configuration/src/index.tsx b/samples/layouts/carousel/configuration/src/index.tsx new file mode 100644 index 0000000000..bddc36b78f --- /dev/null +++ b/samples/layouts/carousel/configuration/src/index.tsx @@ -0,0 +1,80 @@ +import React, { useState } from "react"; +import ReactDOM from "react-dom/client"; +import { + IgrCarousel, + IgrCarouselSlide, + IgrCheckboxChangeEventArgs, + IgrSwitch, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import "./index.css"; + +const slides = [ + { + title: "Coastal route", + subtitle: "A compact visual slide for checking navigation and indicators.", + label: "01", + }, + { + title: "City guide", + subtitle: "A second slide makes loop behavior easy to verify.", + label: "02", + }, + { + title: "Resort access", + subtitle: "Use the controls to compare the Carousel configuration states.", + label: "03", + }, +]; + +export default function CarouselConfiguration() { + const [hideNavigation, setHideNavigation] = useState(false); + const [hideIndicators, setHideIndicators] = useState(false); + const [disableLoop, setDisableLoop] = useState(false); + + const onHideNavigationChange = (e: IgrCheckboxChangeEventArgs) => { + setHideNavigation(e.detail.checked); + }; + + const onHideIndicatorsChange = (e: IgrCheckboxChangeEventArgs) => { + setHideIndicators(e.detail.checked); + }; + + const onDisableLoopChange = (e: IgrCheckboxChangeEventArgs) => { + setDisableLoop(e.detail.checked); + }; + + return ( +
+
+ + Hide navigation + + + Hide indicators + + + Disable loop + +
+ + {slides.map((slide) => ( + +
+ {slide.label} +

{slide.title}

+

{slide.subtitle}

+
+ + ))} + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/carousel/configuration/tsconfig.json b/samples/layouts/carousel/configuration/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/layouts/carousel/configuration/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/layouts/carousel/configuration/vite.config.js b/samples/layouts/carousel/configuration/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/carousel/configuration/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/layouts/carousel/styling/README.md b/samples/layouts/carousel/styling/README.md new file mode 100644 index 0000000000..a98f566cc8 --- /dev/null +++ b/samples/layouts/carousel/styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Styling feature using [Carousel](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/layouts/carousel/styling +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/layouts/carousel/styling/index.html b/samples/layouts/carousel/styling/index.html new file mode 100644 index 0000000000..409467944f --- /dev/null +++ b/samples/layouts/carousel/styling/index.html @@ -0,0 +1,11 @@ + + + + Carousel Styling + + + +
+ + + diff --git a/samples/layouts/carousel/styling/package.json b/samples/layouts/carousel/styling/package.json new file mode 100644 index 0000000000..9d14d32eae --- /dev/null +++ b/samples/layouts/carousel/styling/package.json @@ -0,0 +1,41 @@ +{ + "name": "react-carousel-styling", + "description": "This project provides example of Carousel styling using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "vite --port 4200", + "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "test": "vitest" + }, + "dependencies": { + "igniteui-react": "19.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^24.7.1", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "typescript": "^4.8.4", + "vite": "^7.1.9", + "vitest": "^3.2.4", + "vitest-canvas-mock": "^0.3.3", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/layouts/carousel/styling/sandbox.config.json b/samples/layouts/carousel/styling/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/carousel/styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/carousel/styling/src/index.css b/samples/layouts/carousel/styling/src/index.css new file mode 100644 index 0000000000..d6592a6f5a --- /dev/null +++ b/samples/layouts/carousel/styling/src/index.css @@ -0,0 +1,106 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +.styled-carousel { + width: min(860px, 100%); + height: 430px; + margin: 16px auto 0; + border: 1px solid var(--ig-gray-300); + border-radius: 8px; + overflow: hidden; + background: var(--ig-surface-500); +} + +.styled-carousel::part(indicators) { + gap: 8px; + padding: 6px 10px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.82); + box-shadow: 0 6px 16px rgba(11, 31, 53, 0.16); +} + +.styled-carousel::part(previous), +.styled-carousel::part(next) { + display: grid; + width: 40px; + height: 40px; + place-items: center; + border-radius: 50%; + color: var(--ig-gray-800); + background: rgba(255, 255, 255, 0.88); + box-shadow: 0 6px 16px rgba(11, 31, 53, 0.22); +} + +.carousel-navigation-button { + display: inline-grid; + width: 20px; + height: 20px; + place-items: center; + line-height: 1; +} + +.carousel-navigation-button igc-icon { + width: 20px; + height: 20px; + color: inherit; +} + +.carousel-indicator { + display: block; + width: 9px; + height: 9px; + border: 2px solid var(--ig-gray-600); + border-radius: 50%; + background: transparent; +} + +.carousel-indicator-active { + border-color: var(--ig-primary-500); + background: var(--ig-primary-500); +} + +.slide-card { + position: relative; + display: grid; + width: 100%; + height: 100%; + margin: 0; + overflow: hidden; +} + +.slide-image { + width: 100%; + height: 100%; + object-fit: cover; +} + +.slide-content { + position: absolute; + inset: auto 56px 44px 56px; + max-width: 380px; + padding: 20px 24px; + border-radius: 8px; + color: var(--ig-gray-900); + background: rgba(255, 255, 255, 0.88); + box-shadow: 0 14px 34px rgba(11, 31, 53, 0.18); +} + +.slide-label { + display: block; + margin-bottom: 8px; + color: var(--ig-primary-600); + font-size: 12px; + font-weight: 700; + letter-spacing: 0; +} + +.slide-content h3 { + margin: 0; + font-size: 24px; + line-height: 1.2; +} + +.slide-content p { + margin: 8px 0 0; + color: var(--ig-gray-700); + line-height: 1.45; +} diff --git a/samples/layouts/carousel/styling/src/index.tsx b/samples/layouts/carousel/styling/src/index.tsx new file mode 100644 index 0000000000..57cce06660 --- /dev/null +++ b/samples/layouts/carousel/styling/src/index.tsx @@ -0,0 +1,82 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import { + IgrCarousel, + IgrCarouselIndicator, + IgrCarouselSlide, + IgrIcon, + registerIconFromText, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import "./index.css"; + +const chevronLeft = + ''; +const chevronRight = + ''; + +const slides = [ + { + title: "Coastal retreat", + subtitle: "A quiet route along cliffs, beach towns, and open water.", + image: "https://dl.infragistics.com/x/img/carousel/WonderfulCoast.png", + alt: "Wonderful coast", + label: "01", + }, + { + title: "Cultural district", + subtitle: "Museums, galleries, and historic streets in one walkable plan.", + image: "https://dl.infragistics.com/x/img/carousel/CulturalDip.png", + alt: "Cultural district", + label: "02", + }, + { + title: "Golden beaches", + subtitle: "A sunny itinerary built around swimming, dining, and sunsets.", + image: "https://dl.infragistics.com/x/img/carousel/GoldenBeaches.png", + alt: "Golden beaches", + label: "03", + }, +]; + +export default function CarouselStyling() { + React.useEffect(() => { + registerIconFromText("chevron-left", chevronLeft); + registerIconFromText("chevron-right", chevronRight); + }, []); + + return ( +
+ + + + + + + + + {slides.map((slide) => ( + + +
+ {slide.alt} +
+ {slide.label} +

{slide.title}

+

{slide.subtitle}

+
+
+ + + + + + + ))} + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/carousel/styling/tsconfig.json b/samples/layouts/carousel/styling/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/layouts/carousel/styling/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/layouts/carousel/styling/vite.config.js b/samples/layouts/carousel/styling/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/carousel/styling/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/layouts/carousel/tailwind-styling/README.md b/samples/layouts/carousel/tailwind-styling/README.md new file mode 100644 index 0000000000..9f663fd281 --- /dev/null +++ b/samples/layouts/carousel/tailwind-styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Carousel](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/layouts/carousel/tailwind-styling +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/layouts/carousel/tailwind-styling/index.html b/samples/layouts/carousel/tailwind-styling/index.html new file mode 100644 index 0000000000..c291074743 --- /dev/null +++ b/samples/layouts/carousel/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + Carousel Tailwind Styling + + + +
+ + + diff --git a/samples/layouts/carousel/tailwind-styling/package.json b/samples/layouts/carousel/tailwind-styling/package.json new file mode 100644 index 0000000000..eec40021ee --- /dev/null +++ b/samples/layouts/carousel/tailwind-styling/package.json @@ -0,0 +1,43 @@ +{ + "name": "react-carousel-tailwind-styling", + "description": "This project provides example of Carousel Tailwind styling using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "vite --port 4200", + "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "test": "vitest" + }, + "dependencies": { + "igniteui-react": "19.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@tailwindcss/vite": "^4.3.3", + "@types/jest": "^29.2.0", + "@types/node": "^24.7.1", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "tailwindcss": "^4.3.3", + "typescript": "^4.8.4", + "vite": "^7.1.9", + "vitest": "^3.2.4", + "vitest-canvas-mock": "^0.3.3", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/layouts/carousel/tailwind-styling/sandbox.config.json b/samples/layouts/carousel/tailwind-styling/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/carousel/tailwind-styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/carousel/tailwind-styling/src/index.css b/samples/layouts/carousel/tailwind-styling/src/index.css new file mode 100644 index 0000000000..7da3c138b5 --- /dev/null +++ b/samples/layouts/carousel/tailwind-styling/src/index.css @@ -0,0 +1,31 @@ +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); +@source "./index.tsx"; + +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +.styled-carousel::part(indicators) { + gap: 8px; + padding: 6px 10px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.82); + box-shadow: 0 6px 16px rgba(11, 31, 53, 0.16); +} + +.styled-carousel::part(previous), +.styled-carousel::part(next) { + display: grid; + width: 40px; + height: 40px; + place-items: center; + border-radius: 50%; + color: var(--ig-gray-800); + background: rgba(255, 255, 255, 0.88); + box-shadow: 0 6px 16px rgba(11, 31, 53, 0.22); +} + +.carousel-navigation-button igc-icon { + width: 20px; + height: 20px; + color: inherit; +} diff --git a/samples/layouts/carousel/tailwind-styling/src/index.tsx b/samples/layouts/carousel/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..918d74319b --- /dev/null +++ b/samples/layouts/carousel/tailwind-styling/src/index.tsx @@ -0,0 +1,85 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { + IgrCarousel, + IgrCarouselIndicator, + IgrCarouselSlide, + IgrIcon, + registerIconFromText, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +const chevronLeft = + ''; +const chevronRight = + ''; + +const slides = [ + { + title: "Coastal retreat", + subtitle: "A quiet route along cliffs, beach towns, and open water.", + image: "https://dl.infragistics.com/x/img/carousel/WonderfulCoast.png", + alt: "Wonderful coast", + label: "01", + }, + { + title: "Cultural district", + subtitle: "Museums, galleries, and historic streets in one walkable plan.", + image: "https://dl.infragistics.com/x/img/carousel/CulturalDip.png", + alt: "Cultural district", + label: "02", + }, + { + title: "Golden beaches", + subtitle: "A sunny itinerary built around swimming, dining, and sunsets.", + image: "https://dl.infragistics.com/x/img/carousel/GoldenBeaches.png", + alt: "Golden beaches", + label: "03", + }, +]; + +export default function CarouselTailwindStyling() { + React.useEffect(() => { + registerIconFromText("chevron-left", chevronLeft); + registerIconFromText("chevron-right", chevronRight); + }, []); + + return ( +
+ + + + + + + + + {slides.map((slide) => ( + + +
+ {slide.alt} +
+ {slide.label} +

{slide.title}

+

{slide.subtitle}

+
+
+ + + + + + + ))} + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/carousel/tailwind-styling/tsconfig.json b/samples/layouts/carousel/tailwind-styling/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/layouts/carousel/tailwind-styling/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/layouts/carousel/tailwind-styling/vite.config.js b/samples/layouts/carousel/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..c1fff0c83c --- /dev/null +++ b/samples/layouts/carousel/tailwind-styling/vite.config.js @@ -0,0 +1,13 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import tailwindcss from '@tailwindcss/vite'; + +export default defineConfig({ + plugins: [react(), tailwindcss()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); diff --git a/samples/layouts/carousel/thumbnail/src/CarouselThumbnail.css b/samples/layouts/carousel/thumbnail/src/CarouselThumbnail.css deleted file mode 100644 index c317a85c62..0000000000 --- a/samples/layouts/carousel/thumbnail/src/CarouselThumbnail.css +++ /dev/null @@ -1,13 +0,0 @@ -igc-carousel { - margin-inline: auto; - max-width: 75%; -} - -igc-carousel::part(indicators) { - border-radius: 2px; -} - -.blurred { - filter: blur(2px); - opacity: 0.5; -} \ No newline at end of file diff --git a/samples/layouts/carousel/thumbnail/src/index.css b/samples/layouts/carousel/thumbnail/src/index.css index 1f53b8aa05..56d777920a 100644 --- a/samples/layouts/carousel/thumbnail/src/index.css +++ b/samples/layouts/carousel/thumbnail/src/index.css @@ -1,2 +1,22 @@ /* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +igc-carousel { + height: 420px; + margin: 16px auto 0; + max-width: 75%; +} + +igc-carousel::part(indicators) { + border-radius: 2px; +} + +igc-carousel-slide img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.blurred { + filter: blur(2px); + opacity: 0.5; +} diff --git a/samples/layouts/carousel/thumbnail/src/index.tsx b/samples/layouts/carousel/thumbnail/src/index.tsx index 1da1df7ba3..b04e346c1f 100644 --- a/samples/layouts/carousel/thumbnail/src/index.tsx +++ b/samples/layouts/carousel/thumbnail/src/index.tsx @@ -6,7 +6,6 @@ import { IgrCarouselSlide, } from "igniteui-react"; import "igniteui-webcomponents/themes/light/bootstrap.css"; -import "./CarouselThumbnail.css"; import "./index.css";