From f22c243700f2cf83a244f2b173038af5606657b9 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 14 Oct 2026 14:32:49 +0300 Subject: [PATCH] feat(tabs): update samples content --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/layouts/tabs/alignment/src/index.css | 6 - samples/layouts/tabs/alignment/src/index.tsx | 49 ------- .../.devcontainer/devcontainer.json | 0 .../tabs/{alignment => amount}/.eslintrc.js | 0 .../tabs/{alignment => amount}/README.md | 8 +- .../tabs/{alignment => amount}/index.html | 2 +- .../tabs/{alignment => amount}/package.json | 4 +- .../{alignment => amount}/sandbox.config.json | 0 samples/layouts/tabs/amount/src/index.css | 35 +++++ samples/layouts/tabs/amount/src/index.tsx | 38 +++++ .../tabs/{alignment => amount}/tsconfig.json | 0 .../tabs/{alignment => amount}/vite.config.js | 0 samples/layouts/tabs/overview/index.html | 2 +- samples/layouts/tabs/overview/package.json | 4 +- samples/layouts/tabs/overview/src/index.css | 34 ++++- samples/layouts/tabs/overview/src/index.tsx | 73 +++++----- .../layouts/tabs/prefix-suffix/src/index.css | 5 - .../layouts/tabs/prefix-suffix/src/index.tsx | 65 --------- .../.devcontainer/devcontainer.json | 0 .../.eslintrc.js | 0 samples/layouts/tabs/responsiveness/README.md | 56 ++++++++ .../layouts/tabs/responsiveness/index.html | 11 ++ .../layouts/tabs/responsiveness/package.json | 42 ++++++ .../sandbox.config.json | 0 .../layouts/tabs/responsiveness/src/index.css | 28 ++++ .../layouts/tabs/responsiveness/src/index.tsx | 33 +++++ .../tsconfig.json | 0 .../vite.config.js | 0 samples/layouts/tabs/scrolling/src/index.css | 2 - samples/layouts/tabs/scrolling/src/index.tsx | 28 ---- .../.devcontainer/devcontainer.json | 0 .../tabs/{scrolling => states}/.eslintrc.js | 0 .../tabs/{scrolling => states}/README.md | 8 +- .../tabs/{scrolling => states}/index.html | 2 +- .../tabs/{scrolling => states}/package.json | 4 +- .../{scrolling => states}/sandbox.config.json | 0 samples/layouts/tabs/states/src/index.css | 58 ++++++++ samples/layouts/tabs/states/src/index.tsx | 35 +++++ .../tabs/{scrolling => states}/tsconfig.json | 0 .../tabs/{scrolling => states}/vite.config.js | 0 samples/layouts/tabs/styling/index.html | 2 +- samples/layouts/tabs/styling/package.json | 4 +- samples/layouts/tabs/styling/src/index.css | 134 ++++++++++++++---- samples/layouts/tabs/styling/src/index.tsx | 93 +++++++----- .../.devcontainer/devcontainer.json | 4 + .../tabs/tailwind-styling/.eslintrc.js | 75 ++++++++++ .../layouts/tabs/tailwind-styling/README.md | 56 ++++++++ .../layouts/tabs/tailwind-styling/index.html | 11 ++ .../tabs/tailwind-styling/package.json | 44 ++++++ .../tabs/tailwind-styling/sandbox.config.json | 5 + .../tabs/tailwind-styling/src/index.css | 15 ++ .../tabs/tailwind-styling/src/index.tsx | 53 +++++++ .../tabs/tailwind-styling/tsconfig.json | 44 ++++++ .../tabs/tailwind-styling/vite.config.js | 13 ++ .../tabs/type/.devcontainer/devcontainer.json | 4 + samples/layouts/tabs/type/.eslintrc.js | 75 ++++++++++ .../tabs/{prefix-suffix => type}/README.md | 8 +- .../tabs/{prefix-suffix => type}/index.html | 2 +- .../tabs/{prefix-suffix => type}/package.json | 4 +- samples/layouts/tabs/type/sandbox.config.json | 5 + samples/layouts/tabs/type/src/index.css | 28 ++++ samples/layouts/tabs/type/src/index.tsx | 49 +++++++ samples/layouts/tabs/type/tsconfig.json | 44 ++++++ samples/layouts/tabs/type/vite.config.js | 12 ++ 66 files changed, 1137 insertions(+), 283 deletions(-) delete mode 100644 samples/layouts/tabs/alignment/src/index.css delete mode 100644 samples/layouts/tabs/alignment/src/index.tsx rename samples/layouts/tabs/{alignment => amount}/.devcontainer/devcontainer.json (100%) rename samples/layouts/tabs/{alignment => amount}/.eslintrc.js (100%) rename samples/layouts/tabs/{alignment => amount}/README.md (86%) rename samples/layouts/tabs/{alignment => amount}/index.html (89%) rename samples/layouts/tabs/{alignment => amount}/package.json (88%) rename samples/layouts/tabs/{alignment => amount}/sandbox.config.json (100%) create mode 100644 samples/layouts/tabs/amount/src/index.css create mode 100644 samples/layouts/tabs/amount/src/index.tsx rename samples/layouts/tabs/{alignment => amount}/tsconfig.json (100%) rename samples/layouts/tabs/{alignment => amount}/vite.config.js (100%) delete mode 100644 samples/layouts/tabs/prefix-suffix/src/index.css delete mode 100644 samples/layouts/tabs/prefix-suffix/src/index.tsx rename samples/layouts/tabs/{prefix-suffix => responsiveness}/.devcontainer/devcontainer.json (100%) rename samples/layouts/tabs/{prefix-suffix => responsiveness}/.eslintrc.js (100%) create mode 100644 samples/layouts/tabs/responsiveness/README.md create mode 100644 samples/layouts/tabs/responsiveness/index.html create mode 100644 samples/layouts/tabs/responsiveness/package.json rename samples/layouts/tabs/{prefix-suffix => responsiveness}/sandbox.config.json (100%) create mode 100644 samples/layouts/tabs/responsiveness/src/index.css create mode 100644 samples/layouts/tabs/responsiveness/src/index.tsx rename samples/layouts/tabs/{prefix-suffix => responsiveness}/tsconfig.json (100%) rename samples/layouts/tabs/{prefix-suffix => responsiveness}/vite.config.js (100%) delete mode 100644 samples/layouts/tabs/scrolling/src/index.css delete mode 100644 samples/layouts/tabs/scrolling/src/index.tsx rename samples/layouts/tabs/{scrolling => states}/.devcontainer/devcontainer.json (100%) rename samples/layouts/tabs/{scrolling => states}/.eslintrc.js (100%) rename samples/layouts/tabs/{scrolling => states}/README.md (86%) rename samples/layouts/tabs/{scrolling => states}/index.html (89%) rename samples/layouts/tabs/{scrolling => states}/package.json (88%) rename samples/layouts/tabs/{scrolling => states}/sandbox.config.json (100%) create mode 100644 samples/layouts/tabs/states/src/index.css create mode 100644 samples/layouts/tabs/states/src/index.tsx rename samples/layouts/tabs/{scrolling => states}/tsconfig.json (100%) rename samples/layouts/tabs/{scrolling => states}/vite.config.js (100%) create mode 100644 samples/layouts/tabs/tailwind-styling/.devcontainer/devcontainer.json create mode 100644 samples/layouts/tabs/tailwind-styling/.eslintrc.js create mode 100644 samples/layouts/tabs/tailwind-styling/README.md create mode 100644 samples/layouts/tabs/tailwind-styling/index.html create mode 100644 samples/layouts/tabs/tailwind-styling/package.json create mode 100644 samples/layouts/tabs/tailwind-styling/sandbox.config.json create mode 100644 samples/layouts/tabs/tailwind-styling/src/index.css create mode 100644 samples/layouts/tabs/tailwind-styling/src/index.tsx create mode 100644 samples/layouts/tabs/tailwind-styling/tsconfig.json create mode 100644 samples/layouts/tabs/tailwind-styling/vite.config.js create mode 100644 samples/layouts/tabs/type/.devcontainer/devcontainer.json create mode 100644 samples/layouts/tabs/type/.eslintrc.js rename samples/layouts/tabs/{prefix-suffix => type}/README.md (85%) rename samples/layouts/tabs/{prefix-suffix => type}/index.html (89%) rename samples/layouts/tabs/{prefix-suffix => type}/package.json (88%) create mode 100644 samples/layouts/tabs/type/sandbox.config.json create mode 100644 samples/layouts/tabs/type/src/index.css create mode 100644 samples/layouts/tabs/type/src/index.tsx create mode 100644 samples/layouts/tabs/type/tsconfig.json create mode 100644 samples/layouts/tabs/type/vite.config.js diff --git a/browser/public/meta.json b/browser/public/meta.json index abc53cbbe5..6475b17bd2 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-28 13:50:58","note":"this file is auto-generated"} +{"version":"23.2.915","date":"2026-10-13 17:27:58","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 abc53cbbe5..6475b17bd2 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-28 13:50:58","note":"this file is auto-generated"} +{"version":"23.2.915","date":"2026-10-13 17:27:58","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/layouts/tabs/alignment/src/index.css b/samples/layouts/tabs/alignment/src/index.css deleted file mode 100644 index 0506830f9c..0000000000 --- a/samples/layouts/tabs/alignment/src/index.css +++ /dev/null @@ -1,6 +0,0 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ - -igc-radio-group { - padding-block-end: 12px; -} \ No newline at end of file diff --git a/samples/layouts/tabs/alignment/src/index.tsx b/samples/layouts/tabs/alignment/src/index.tsx deleted file mode 100644 index 3642364397..0000000000 --- a/samples/layouts/tabs/alignment/src/index.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import "./index.css"; -import { IgrTabs, IgrTab, TabsAlignment, IgrRadio, IgrRadioGroup } from "igniteui-react"; -import "igniteui-webcomponents/themes/light/bootstrap.css"; - -export default class Alignment extends React.Component { - - constructor(props) { - super(props); - this.state = { alignment: "start" }; - } - - public render(): JSX.Element { - return ( -
- - Start - Center - End - Justify - - - - Basics tab panel - - - Details tab panel - - - Custom tab panel - - - Disabled tab panel will not be displayed - - -
- ); - } - - public onRadioChange = (e: any) => { - this.setState({ alignment: e.detail.value }); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById("root")); -root.render(); - diff --git a/samples/layouts/tabs/alignment/.devcontainer/devcontainer.json b/samples/layouts/tabs/amount/.devcontainer/devcontainer.json similarity index 100% rename from samples/layouts/tabs/alignment/.devcontainer/devcontainer.json rename to samples/layouts/tabs/amount/.devcontainer/devcontainer.json diff --git a/samples/layouts/tabs/alignment/.eslintrc.js b/samples/layouts/tabs/amount/.eslintrc.js similarity index 100% rename from samples/layouts/tabs/alignment/.eslintrc.js rename to samples/layouts/tabs/amount/.eslintrc.js diff --git a/samples/layouts/tabs/alignment/README.md b/samples/layouts/tabs/amount/README.md similarity index 86% rename from samples/layouts/tabs/alignment/README.md rename to samples/layouts/tabs/amount/README.md index 3f6106ab7d..2ffdce263e 100644 --- a/samples/layouts/tabs/alignment/README.md +++ b/samples/layouts/tabs/amount/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Alignment feature using [Tabs](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. +This folder contains implementation of React application with example of Amount feature using [Tabs](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Alignme View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ 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/tabs/alignment +cd ./samples/layouts/tabs/amount ``` open above folder in VS Code or type: diff --git a/samples/layouts/tabs/alignment/index.html b/samples/layouts/tabs/amount/index.html similarity index 89% rename from samples/layouts/tabs/alignment/index.html rename to samples/layouts/tabs/amount/index.html index c7551077f1..6b1b0667cf 100644 --- a/samples/layouts/tabs/alignment/index.html +++ b/samples/layouts/tabs/amount/index.html @@ -1,7 +1,7 @@ - RadioGroup + Tabs Amount diff --git a/samples/layouts/tabs/alignment/package.json b/samples/layouts/tabs/amount/package.json similarity index 88% rename from samples/layouts/tabs/alignment/package.json rename to samples/layouts/tabs/amount/package.json index 6d511528ed..e9af58996f 100644 --- a/samples/layouts/tabs/alignment/package.json +++ b/samples/layouts/tabs/amount/package.json @@ -1,6 +1,6 @@ { - "name": "react-radio-group", - "description": "This project provides example of Radio Group using Infragistics React components", + "name": "react-tabs-amount", + "description": "This project provides an example of Tabs amount using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/layouts/tabs/alignment/sandbox.config.json b/samples/layouts/tabs/amount/sandbox.config.json similarity index 100% rename from samples/layouts/tabs/alignment/sandbox.config.json rename to samples/layouts/tabs/amount/sandbox.config.json diff --git a/samples/layouts/tabs/amount/src/index.css b/samples/layouts/tabs/amount/src/index.css new file mode 100644 index 0000000000..df6bacc718 --- /dev/null +++ b/samples/layouts/tabs/amount/src/index.css @@ -0,0 +1,35 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.amounts { + display: grid; + grid-template-columns: 5.6875rem 35rem; + align-items: center; + row-gap: 3.75rem; +} + +.amounts igc-tabs::part(inner) { + flex-grow: 1; +} + +.two-tabs::part(inner) { + grid-template-columns: repeat(2, 1fr); +} + +.five-tabs::part(inner) { + grid-template-columns: repeat(5, 1fr); +} + +.amount-label { + font: 400 13px / 20px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.3px; + color: var(--ig-gray-600); +} diff --git a/samples/layouts/tabs/amount/src/index.tsx b/samples/layouts/tabs/amount/src/index.tsx new file mode 100644 index 0000000000..08c21b8043 --- /dev/null +++ b/samples/layouts/tabs/amount/src/index.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrTab, IgrTabs } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const categories = ['Podcasts', 'Playlists', 'Genres', 'Albums', 'Artists', 'Audiobooks', 'Radio']; + +export default function TabsAmount(): JSX.Element { + return ( +
+
+ Two Tabs + + {categories.slice(0, 2).map((category) => ( + + ))} + + Five Tabs + + {categories.slice(0, 5).map((category) => ( + + ))} + + 5+ Tabs + + {categories.map((category) => ( + + ))} + +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/layouts/tabs/alignment/tsconfig.json b/samples/layouts/tabs/amount/tsconfig.json similarity index 100% rename from samples/layouts/tabs/alignment/tsconfig.json rename to samples/layouts/tabs/amount/tsconfig.json diff --git a/samples/layouts/tabs/alignment/vite.config.js b/samples/layouts/tabs/amount/vite.config.js similarity index 100% rename from samples/layouts/tabs/alignment/vite.config.js rename to samples/layouts/tabs/amount/vite.config.js diff --git a/samples/layouts/tabs/overview/index.html b/samples/layouts/tabs/overview/index.html index c7551077f1..c367e70dec 100644 --- a/samples/layouts/tabs/overview/index.html +++ b/samples/layouts/tabs/overview/index.html @@ -1,7 +1,7 @@ - RadioGroup + Tabs Overview diff --git a/samples/layouts/tabs/overview/package.json b/samples/layouts/tabs/overview/package.json index 6d511528ed..6ab04cb26c 100644 --- a/samples/layouts/tabs/overview/package.json +++ b/samples/layouts/tabs/overview/package.json @@ -1,6 +1,6 @@ { - "name": "react-radio-group", - "description": "This project provides example of Radio Group using Infragistics React components", + "name": "react-tabs-overview", + "description": "This project provides an example of Tabs overview using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/layouts/tabs/overview/src/index.css b/samples/layouts/tabs/overview/src/index.css index 1f53b8aa05..e3a1e9a0d0 100644 --- a/samples/layouts/tabs/overview/src/index.css +++ b/samples/layouts/tabs/overview/src/index.css @@ -1,2 +1,34 @@ /* 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 */ + +.sample { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.team-tabs { + width: 23.9375rem; + height: 17rem; + background: var(--ig-surface-500); +} + +.team-tabs igc-tabs::part(inner) { + flex-grow: 1; + grid-template-columns: repeat(3, 1fr); +} + +.team-tabs igc-list { + --ig-size: var(--ig-size-large); +} + +.team-name { + font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-2-font-size); + font-weight: var(--ig-subtitle-2-font-weight); + line-height: var(--ig-subtitle-2-line-height); + letter-spacing: var(--ig-subtitle-2-letter-spacing); + color: var(--ig-gray-900); +} diff --git a/samples/layouts/tabs/overview/src/index.tsx b/samples/layouts/tabs/overview/src/index.tsx index 2895c9f154..74c733d4bb 100644 --- a/samples/layouts/tabs/overview/src/index.tsx +++ b/samples/layouts/tabs/overview/src/index.tsx @@ -1,45 +1,44 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import "./index.css"; -import { IgrTabs, IgrTab, IgrIcon, registerIconFromText } from "igniteui-react"; -import "igniteui-webcomponents/themes/light/bootstrap.css"; +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrAvatar, IgrList, IgrListItem, IgrTab, IgrTabs } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; -const home = ''; -const search = ''; -const favorite = ''; -registerIconFromText("home", home, "material"); -registerIconFromText("search", search, "material"); -registerIconFromText("favorite", favorite, "material"); +const people = [ + { name: 'Emily Carter', team: 'Finance', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png' }, + { name: 'Jose Diaz', team: 'Engineering', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png' }, + { name: 'Kira Tanaka', team: 'Finance', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png' }, + { name: 'Liam Brooks', team: 'Engineering', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-03.png' }, +]; -export default class Overview extends React.Component { +const teams = ['Everyone', 'Finance', 'Engineering']; - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { +export default function TabsOverview(): JSX.Element { return ( -
- - - - Home tab panel - - - - Search tab panel - - - - Favorite tab panel - - -
+
+
+ + {teams.map((team) => ( + + + {people + .filter((person) => team === 'Everyone' || person.team === team) + .map((person) => ( + + + {person.name} + {person.team} + + ))} + + + ))} + +
+
); - } - } // rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById("root")); -root.render(); +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/layouts/tabs/prefix-suffix/src/index.css b/samples/layouts/tabs/prefix-suffix/src/index.css deleted file mode 100644 index 841ce91bed..0000000000 --- a/samples/layouts/tabs/prefix-suffix/src/index.css +++ /dev/null @@ -1,5 +0,0 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -.sample { - --ig-size: var(--ig-size-small); -} diff --git a/samples/layouts/tabs/prefix-suffix/src/index.tsx b/samples/layouts/tabs/prefix-suffix/src/index.tsx deleted file mode 100644 index 0a1e43e938..0000000000 --- a/samples/layouts/tabs/prefix-suffix/src/index.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import "./index.css"; -import { IgrTabs, IgrTab, IgrButton, IgrIcon, IgrIconButton, registerIconFromText } from "igniteui-react"; -import "igniteui-webcomponents/themes/light/bootstrap.css"; - -const home = ''; -const search = ''; -const favorite = ''; - const close = ''; -registerIconFromText("home", home, "material"); -registerIconFromText("search", search, "material"); -registerIconFromText("favorite", favorite, "material"); -registerIconFromText("close", close, "material"); - -export default class PrefixSuffix extends React.Component { - - constructor(props: any) { - super(props); - this.state = { - tabs: ['Home','Search', 'Favorite'] - }; - } - - public render(): JSX.Element { - return ( -
- - {this.state.tabs.map((tab, index) => ( - - - - {tab} - - this.onCloseClicked(index)} - > - - {tab} tab panel - - ))} - - Reset -
- ); - } - - public onCloseClicked = (index: number) => { - const updatedTabs = [...this.state.tabs]; - updatedTabs.splice(index, 1); - this.setState({ tabs: updatedTabs }); - } - - public onResetClick = () => { - this.setState({ tabs: ['Home','Search', 'Favorite'] }); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById("root")); -root.render(); diff --git a/samples/layouts/tabs/prefix-suffix/.devcontainer/devcontainer.json b/samples/layouts/tabs/responsiveness/.devcontainer/devcontainer.json similarity index 100% rename from samples/layouts/tabs/prefix-suffix/.devcontainer/devcontainer.json rename to samples/layouts/tabs/responsiveness/.devcontainer/devcontainer.json diff --git a/samples/layouts/tabs/prefix-suffix/.eslintrc.js b/samples/layouts/tabs/responsiveness/.eslintrc.js similarity index 100% rename from samples/layouts/tabs/prefix-suffix/.eslintrc.js rename to samples/layouts/tabs/responsiveness/.eslintrc.js diff --git a/samples/layouts/tabs/responsiveness/README.md b/samples/layouts/tabs/responsiveness/README.md new file mode 100644 index 0000000000..f904373ac1 --- /dev/null +++ b/samples/layouts/tabs/responsiveness/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Responsiveness feature using [Tabs](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/tabs/responsiveness +``` + +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/tabs/responsiveness/index.html b/samples/layouts/tabs/responsiveness/index.html new file mode 100644 index 0000000000..564a34636d --- /dev/null +++ b/samples/layouts/tabs/responsiveness/index.html @@ -0,0 +1,11 @@ + + + + Tabs Responsiveness + + + +
+ + + \ No newline at end of file diff --git a/samples/layouts/tabs/responsiveness/package.json b/samples/layouts/tabs/responsiveness/package.json new file mode 100644 index 0000000000..480ece04a6 --- /dev/null +++ b/samples/layouts/tabs/responsiveness/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-tabs-responsiveness", + "description": "This project provides an example of Tabs responsiveness 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-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.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/tabs/prefix-suffix/sandbox.config.json b/samples/layouts/tabs/responsiveness/sandbox.config.json similarity index 100% rename from samples/layouts/tabs/prefix-suffix/sandbox.config.json rename to samples/layouts/tabs/responsiveness/sandbox.config.json diff --git a/samples/layouts/tabs/responsiveness/src/index.css b/samples/layouts/tabs/responsiveness/src/index.css new file mode 100644 index 0000000000..ba0e10533e --- /dev/null +++ b/samples/layouts/tabs/responsiveness/src/index.css @@ -0,0 +1,28 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.modes { + display: grid; + grid-template-columns: 6.1875rem 33.125rem; + align-items: center; + row-gap: 3.75rem; +} + +.modes igc-tabs[alignment="justify"]::part(inner) { + flex-grow: 1; + grid-template-columns: repeat(3, 1fr); +} + +.mode-label { + font: 400 13px / 20px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.3px; + color: var(--ig-gray-600); +} diff --git a/samples/layouts/tabs/responsiveness/src/index.tsx b/samples/layouts/tabs/responsiveness/src/index.tsx new file mode 100644 index 0000000000..daefdd7f8b --- /dev/null +++ b/samples/layouts/tabs/responsiveness/src/index.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrTab, IgrTabs } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const categories = ['Podcasts', 'Playlists', 'Genres']; +const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; + +export default function TabsResponsiveness(): JSX.Element { + return ( +
+
+ Content Fit + + {categories.map((category) => ( + + ))} + + Content Fix + + {days.map((day) => ( + + ))} + +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/layouts/tabs/prefix-suffix/tsconfig.json b/samples/layouts/tabs/responsiveness/tsconfig.json similarity index 100% rename from samples/layouts/tabs/prefix-suffix/tsconfig.json rename to samples/layouts/tabs/responsiveness/tsconfig.json diff --git a/samples/layouts/tabs/prefix-suffix/vite.config.js b/samples/layouts/tabs/responsiveness/vite.config.js similarity index 100% rename from samples/layouts/tabs/prefix-suffix/vite.config.js rename to samples/layouts/tabs/responsiveness/vite.config.js diff --git a/samples/layouts/tabs/scrolling/src/index.css b/samples/layouts/tabs/scrolling/src/index.css deleted file mode 100644 index 1f53b8aa05..0000000000 --- a/samples/layouts/tabs/scrolling/src/index.css +++ /dev/null @@ -1,2 +0,0 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file diff --git a/samples/layouts/tabs/scrolling/src/index.tsx b/samples/layouts/tabs/scrolling/src/index.tsx deleted file mode 100644 index 26cebb27c6..0000000000 --- a/samples/layouts/tabs/scrolling/src/index.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import "./index.css"; -import { IgrTabs, IgrTab} from "igniteui-react"; -import "igniteui-webcomponents/themes/light/bootstrap.css"; - -export default class Scrolling extends React.Component { - - public render(): JSX.Element { - return ( -
- - {Array.from({length: 18}, (_, index) => index + 1).map(number => ( - - Tab {number} - Tab {number} panel - - ))} - -
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById("root")); -root.render(); - diff --git a/samples/layouts/tabs/scrolling/.devcontainer/devcontainer.json b/samples/layouts/tabs/states/.devcontainer/devcontainer.json similarity index 100% rename from samples/layouts/tabs/scrolling/.devcontainer/devcontainer.json rename to samples/layouts/tabs/states/.devcontainer/devcontainer.json diff --git a/samples/layouts/tabs/scrolling/.eslintrc.js b/samples/layouts/tabs/states/.eslintrc.js similarity index 100% rename from samples/layouts/tabs/scrolling/.eslintrc.js rename to samples/layouts/tabs/states/.eslintrc.js diff --git a/samples/layouts/tabs/scrolling/README.md b/samples/layouts/tabs/states/README.md similarity index 86% rename from samples/layouts/tabs/scrolling/README.md rename to samples/layouts/tabs/states/README.md index 9e078f1fe2..c64cd5a1c9 100644 --- a/samples/layouts/tabs/scrolling/README.md +++ b/samples/layouts/tabs/states/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Scrolling feature using [Tabs](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. +This folder contains implementation of React application with example of States feature using [Tabs](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Scrolli View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ 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/tabs/scrolling +cd ./samples/layouts/tabs/states ``` open above folder in VS Code or type: diff --git a/samples/layouts/tabs/scrolling/index.html b/samples/layouts/tabs/states/index.html similarity index 89% rename from samples/layouts/tabs/scrolling/index.html rename to samples/layouts/tabs/states/index.html index c7551077f1..61429fb4b8 100644 --- a/samples/layouts/tabs/scrolling/index.html +++ b/samples/layouts/tabs/states/index.html @@ -1,7 +1,7 @@ - RadioGroup + Tabs States diff --git a/samples/layouts/tabs/scrolling/package.json b/samples/layouts/tabs/states/package.json similarity index 88% rename from samples/layouts/tabs/scrolling/package.json rename to samples/layouts/tabs/states/package.json index 6d511528ed..2d6f3cf10d 100644 --- a/samples/layouts/tabs/scrolling/package.json +++ b/samples/layouts/tabs/states/package.json @@ -1,6 +1,6 @@ { - "name": "react-radio-group", - "description": "This project provides example of Radio Group using Infragistics React components", + "name": "react-tabs-states", + "description": "This project provides an example of Tabs states using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/layouts/tabs/scrolling/sandbox.config.json b/samples/layouts/tabs/states/sandbox.config.json similarity index 100% rename from samples/layouts/tabs/scrolling/sandbox.config.json rename to samples/layouts/tabs/states/sandbox.config.json diff --git a/samples/layouts/tabs/states/src/index.css b/samples/layouts/tabs/states/src/index.css new file mode 100644 index 0000000000..32f131fd14 --- /dev/null +++ b/samples/layouts/tabs/states/src/index.css @@ -0,0 +1,58 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.states { + display: grid; + grid-template-columns: 4.5rem repeat(3, 8.875rem); + align-items: center; + row-gap: 1.875rem; +} + +.state-label { + font: 400 13px / 20px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.3px; + color: var(--ig-gray-600); +} + +.state-column { + justify-self: center; +} + +.state-tabs { + grid-column: 2 / -1; + pointer-events: none; +} + +.state-tabs::part(inner) { + grid-template-columns: repeat(3, 8.875rem); +} + +.state-tabs igc-tab::part(tab-header) { + justify-self: center; +} + +.state-tabs igc-tab.hover::part(tab-header) { + color: var(--item-hover-color); + background: var(--item-hover-background); +} + +.state-tabs igc-tab.hover::part(tab-header)::after { + background: var(--item-hover-background); +} + +.state-tabs igc-tab.hover[selected]::part(tab-header) { + color: var(--item-active-hover-color); + background: var(--item-active-hover-background); +} + +.state-tabs igc-tab.hover[selected]::part(tab-header)::after { + background: var(--item-active-hover-background); +} diff --git a/samples/layouts/tabs/states/src/index.tsx b/samples/layouts/tabs/states/src/index.tsx new file mode 100644 index 0000000000..8c49348033 --- /dev/null +++ b/samples/layouts/tabs/states/src/index.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrTab, IgrTabs } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default function TabsStates(): JSX.Element { + const blockKeyboard = (e: React.KeyboardEvent) => e.stopPropagation(); + + return ( +
+
+ + Active + Inactive + Disabled + Hover / Off + + + + + + Hover / On + + + + +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/layouts/tabs/scrolling/tsconfig.json b/samples/layouts/tabs/states/tsconfig.json similarity index 100% rename from samples/layouts/tabs/scrolling/tsconfig.json rename to samples/layouts/tabs/states/tsconfig.json diff --git a/samples/layouts/tabs/scrolling/vite.config.js b/samples/layouts/tabs/states/vite.config.js similarity index 100% rename from samples/layouts/tabs/scrolling/vite.config.js rename to samples/layouts/tabs/states/vite.config.js diff --git a/samples/layouts/tabs/styling/index.html b/samples/layouts/tabs/styling/index.html index c7551077f1..79ad1b2d0c 100644 --- a/samples/layouts/tabs/styling/index.html +++ b/samples/layouts/tabs/styling/index.html @@ -1,7 +1,7 @@ - RadioGroup + Tabs Styling diff --git a/samples/layouts/tabs/styling/package.json b/samples/layouts/tabs/styling/package.json index 6d511528ed..22558fbff4 100644 --- a/samples/layouts/tabs/styling/package.json +++ b/samples/layouts/tabs/styling/package.json @@ -1,6 +1,6 @@ { - "name": "react-radio-group", - "description": "This project provides example of Radio Group using Infragistics React components", + "name": "react-tabs-styling", + "description": "This project provides an example of Tabs styling using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/layouts/tabs/styling/src/index.css b/samples/layouts/tabs/styling/src/index.css index d6590468e3..fbe9c8f8cb 100644 --- a/samples/layouts/tabs/styling/src/index.css +++ b/samples/layouts/tabs/styling/src/index.css @@ -1,37 +1,123 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -igc-tab::part(tab-header), -igc-tabs::part(inner)::after { - --item-background: var(--ig-surface-600); - --border-color: var(--ig-success-300); +@import url("https://use.typekit.net/bng2zgw.css"); + +.sample { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.profile-card { + --ig-font-family: aktiv-grotesk, sans-serif; + + display: flex; + flex-direction: column; + box-sizing: border-box; + width: 19.125rem; + height: 15.25rem; + padding: 0.5rem; + border: 1px solid #e5ebf3; + border-radius: 1rem; + background: #fff; +} + +.profile-card igc-list { + --ig-size: var(--ig-size-large); + --ig-list-background: #fff; + --ig-list-item-background: #fff; + + border: none; } -igc-tab::part(tab-body), -igc-tab[selected] igc-icon { - --item-active-icon-color: var(--ig-success-300); +.profile-name { + font: 600 16px / 24px aktiv-grotesk, sans-serif; + letter-spacing: 0.15px; + color: #212121; } -igc-tab:not([selected]) igc-icon { - --item-icon-color: var(--ig-gray-500); +.profile-role { + font: 600 12px / 16px aktiv-grotesk, sans-serif; + letter-spacing: 0.15px; + color: #556c86; +} + +.profile-status { + --ig-size: var(--ig-size-small); + --ig-chip-background: #cde6d1; + --ig-chip-hover-background: #cde6d1; + --ig-chip-text-color: #000; + --ig-chip-hover-text-color: #000; + --ig-chip-border-radius: 1rem; +} + +.profile-status::part(base) { + font: 400 12px / 16px aktiv-grotesk, sans-serif; + letter-spacing: 0.4px; +} + +.profile-tabs { + --ig-tabs-item-background: #fff; + --ig-tabs-item-hover-background: #fff; + --ig-tabs-item-active-background: #fff; + --ig-tabs-item-active-hover-background: #fff; + --ig-tabs-item-text-color: #556c86; + --ig-tabs-item-hover-color: #344b65; + --ig-tabs-item-active-color: #0176ff; + --ig-tabs-item-active-hover-color: #0176ff; + --ig-tabs-item-disabled-color: #a9b8cc; + --ig-tabs-indicator-color: #0176ff; + --ig-tabs-border-color: transparent; + --ig-tabs-border-color--hover: transparent; + + flex: 1 1 0; + min-height: 0; } -igc-tabs::part(start-scroll-button), -igc-tabs::part(end-scroll-button) { - --background: var(--ig-surface-600); - --hover-background: var(--ig-surface-700); - --active-background: var(--ig-surface-700); - --disabled-background: var(--ig-gray-100); - --button-color: var(--ig-gray-700); - --button-hover-color: var(--ig-gray-800); - --button-disabled-color: var(--ig-gray-300); - --border-color: var(--ig-surface-600); +.profile-tabs::part(inner) { + flex-grow: 1; + grid-template-columns: repeat(3, 1fr); } -igc-tab::part(tab-header) { - --item-hover-color: var(--ig-success-500); +.profile-tabs igc-tab::part(content) { + font: 500 14px / 20px aktiv-grotesk, sans-serif; + letter-spacing: 0.25px; + text-transform: none; } -igc-tab::part(tab-header)::before { - --border-color--hover: var(--ig-gray-500); -} \ No newline at end of file +.profile-tabs igc-tab[selected]::part(tab-header)::before { + box-shadow: inset 0 -2px 0 #0176ff; +} + +.profile-details { + --ig-list-border-color: #e5ebf3; + --ig-list-border-width: 1px; +} + +.profile-details igc-list-item { + box-sizing: border-box; + height: 2.25rem; +} + +.profile-details igc-list-item::part(start) { + display: none; +} + +.profile-details igc-list-item:first-of-type { + box-shadow: inset 0 1px 0 #e5ebf3; +} + +.detail-label { + font: 400 13px / 20px aktiv-grotesk, sans-serif; + letter-spacing: 0.3px; + color: #344b65; +} + +.detail-value { + font: 600 12px / 16px "Titillium Web", sans-serif; + letter-spacing: 0.15px; + color: #344b65; +} diff --git a/samples/layouts/tabs/styling/src/index.tsx b/samples/layouts/tabs/styling/src/index.tsx index c08c2f2689..36e70eb832 100644 --- a/samples/layouts/tabs/styling/src/index.tsx +++ b/samples/layouts/tabs/styling/src/index.tsx @@ -1,45 +1,64 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import "./index.css"; -import { IgrTabs, IgrTab, IgrIcon, registerIconFromText } from "igniteui-react"; -import "igniteui-webcomponents/themes/light/bootstrap.css"; +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrAvatar, IgrChip, IgrList, IgrListItem, IgrTab, IgrTabs } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; -const home = ''; -const search = ''; -const favorite = ''; -registerIconFromText("home", home, "material"); -registerIconFromText("search", search, "material"); -registerIconFromText("favorite", favorite, "material"); +const sections = [ + { + label: 'Overview', + details: [ + { label: 'Email', value: 'emily.carter@gmail.com' }, + { label: 'Team', value: 'Finance, 8 members' }, + { label: 'Joined', value: 'March 2023' }, + ], + }, + { + label: 'Activity', + details: [ + { label: 'Last login', value: 'Today, 09:24' }, + { label: 'Reports', value: '12 this month' }, + { label: 'Approvals', value: '3 pending' }, + ], + }, + { + label: 'Billing', + disabled: true, + details: [], + }, +]; -export default class TabsStyling extends React.Component { - - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { +export default function TabsStyling(): JSX.Element { return ( -
- - - - Home tab panel - - - - Search tab panel - - - - Favorite tab panel - - -
+
+
+ + + + Emily Carter + Finance lead - Sofia + Active + + + + {sections.map((section) => ( + + + {section.details.map((detail) => ( + + {detail.label} + {detail.value} + + ))} + + + ))} + +
+
); - } - } // rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById("root")); +const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); diff --git a/samples/layouts/tabs/tailwind-styling/.devcontainer/devcontainer.json b/samples/layouts/tabs/tailwind-styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/tabs/tailwind-styling/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/layouts/tabs/tailwind-styling/.eslintrc.js b/samples/layouts/tabs/tailwind-styling/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/tabs/tailwind-styling/.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/tabs/tailwind-styling/README.md b/samples/layouts/tabs/tailwind-styling/README.md new file mode 100644 index 0000000000..9c3b7fb443 --- /dev/null +++ b/samples/layouts/tabs/tailwind-styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Tabs](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/tabs/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/tabs/tailwind-styling/index.html b/samples/layouts/tabs/tailwind-styling/index.html new file mode 100644 index 0000000000..9f08ea5a80 --- /dev/null +++ b/samples/layouts/tabs/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + Tabs Tailwind Styling + + + +
+ + + \ No newline at end of file diff --git a/samples/layouts/tabs/tailwind-styling/package.json b/samples/layouts/tabs/tailwind-styling/package.json new file mode 100644 index 0000000000..1cd8b9af6f --- /dev/null +++ b/samples/layouts/tabs/tailwind-styling/package.json @@ -0,0 +1,44 @@ +{ + "name": "react-tabs-tailwind-styling", + "description": "This project provides an example of Tabs 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-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@tailwindcss/vite": "^4.1.14", + "@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.1.14", + "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/tabs/tailwind-styling/sandbox.config.json b/samples/layouts/tabs/tailwind-styling/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/tabs/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/tabs/tailwind-styling/src/index.css b/samples/layouts/tabs/tailwind-styling/src/index.css new file mode 100644 index 0000000000..86ff0572e4 --- /dev/null +++ b/samples/layouts/tabs/tailwind-styling/src/index.css @@ -0,0 +1,15 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +@layer theme, base, components, utilities; +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); +@import url("https://use.typekit.net/bng2zgw.css"); +@source "./index.tsx"; + +@theme { + --color-nav-surface: #112031; + --color-nav-hover: #1a314a; + --color-nav-active: #006ae6; + --color-nav-ink: #3392ff; +} diff --git a/samples/layouts/tabs/tailwind-styling/src/index.tsx b/samples/layouts/tabs/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..895d2fd76d --- /dev/null +++ b/samples/layouts/tabs/tailwind-styling/src/index.tsx @@ -0,0 +1,53 @@ +import React, { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrIcon, IgrTab, IgrTabs, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const homeIcon = ''; +const placeIcon = ''; +const notificationsIcon = ''; +const messengerIcon = ''; +const personIcon = ''; + +const destinations = [ + { label: 'Home', icon: 'home' }, + { label: 'Location', icon: 'place', selected: true }, + { label: 'Alerts', icon: 'notifications' }, + { label: 'Chat', icon: 'messenger' }, + { label: 'Profile', icon: 'person' }, +]; + +export default function TabsTailwindStyling(): JSX.Element { + useEffect(() => { + registerIconFromText('home', homeIcon, 'material'); + registerIconFromText('place', placeIcon, 'material'); + registerIconFromText('notifications', notificationsIcon, 'material'); + registerIconFromText('messenger', messengerIcon, 'material'); + registerIconFromText('person', personIcon, 'material'); + }, []); + + return ( +
+ + {destinations.map((destination) => ( + + + {destination.label} + + ))} + +
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/layouts/tabs/tailwind-styling/tsconfig.json b/samples/layouts/tabs/tailwind-styling/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/layouts/tabs/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/tabs/tailwind-styling/vite.config.js b/samples/layouts/tabs/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..4043727956 --- /dev/null +++ b/samples/layouts/tabs/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/tabs/type/.devcontainer/devcontainer.json b/samples/layouts/tabs/type/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/tabs/type/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/layouts/tabs/type/.eslintrc.js b/samples/layouts/tabs/type/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/tabs/type/.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/tabs/prefix-suffix/README.md b/samples/layouts/tabs/type/README.md similarity index 85% rename from samples/layouts/tabs/prefix-suffix/README.md rename to samples/layouts/tabs/type/README.md index ba593981ce..d2be442f23 100644 --- a/samples/layouts/tabs/prefix-suffix/README.md +++ b/samples/layouts/tabs/type/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Prefix Suffix feature using [Tabs](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. +This folder contains implementation of React application with example of Type feature using [Tabs](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Prefix View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ 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/tabs/prefix-suffix +cd ./samples/layouts/tabs/type ``` open above folder in VS Code or type: diff --git a/samples/layouts/tabs/prefix-suffix/index.html b/samples/layouts/tabs/type/index.html similarity index 89% rename from samples/layouts/tabs/prefix-suffix/index.html rename to samples/layouts/tabs/type/index.html index c7551077f1..66fe70f4c4 100644 --- a/samples/layouts/tabs/prefix-suffix/index.html +++ b/samples/layouts/tabs/type/index.html @@ -1,7 +1,7 @@ - RadioGroup + Tabs Type diff --git a/samples/layouts/tabs/prefix-suffix/package.json b/samples/layouts/tabs/type/package.json similarity index 88% rename from samples/layouts/tabs/prefix-suffix/package.json rename to samples/layouts/tabs/type/package.json index 6d511528ed..10e8f8d7d3 100644 --- a/samples/layouts/tabs/prefix-suffix/package.json +++ b/samples/layouts/tabs/type/package.json @@ -1,6 +1,6 @@ { - "name": "react-radio-group", - "description": "This project provides example of Radio Group using Infragistics React components", + "name": "react-tabs-type", + "description": "This project provides an example of Tabs type using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/layouts/tabs/type/sandbox.config.json b/samples/layouts/tabs/type/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/tabs/type/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/tabs/type/src/index.css b/samples/layouts/tabs/type/src/index.css new file mode 100644 index 0000000000..cc583f026c --- /dev/null +++ b/samples/layouts/tabs/type/src/index.css @@ -0,0 +1,28 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.types { + display: grid; + grid-template-columns: 6.1875rem 33.125rem; + align-items: center; + row-gap: 3.75rem; +} + +.types igc-tabs::part(inner) { + flex-grow: 1; + grid-template-columns: repeat(3, 1fr); +} + +.type-label { + font: 400 13px / 20px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.3px; + color: var(--ig-gray-600); +} diff --git a/samples/layouts/tabs/type/src/index.tsx b/samples/layouts/tabs/type/src/index.tsx new file mode 100644 index 0000000000..f8df0a3aa3 --- /dev/null +++ b/samples/layouts/tabs/type/src/index.tsx @@ -0,0 +1,49 @@ +import React, { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrIcon, IgrTab, IgrTabs, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const shoppingBasketIcon = ''; +const deliveryIcon = ''; +const creditCardIcon = ''; + +const steps = [ + { label: 'Cart', icon: 'shopping_basket' }, + { label: 'Shipping', icon: 'delivery' }, + { label: 'Payment', icon: 'credit_card' }, +]; + +export default function TabsType(): JSX.Element { + useEffect(() => { + registerIconFromText('shopping_basket', shoppingBasketIcon, 'material'); + registerIconFromText('delivery', deliveryIcon, 'material'); + registerIconFromText('credit_card', creditCardIcon, 'material'); + }, []); + + return ( +
+
+ Short Bar + + {steps.map((step) => ( + + ))} + + Tall Bar + + {steps.map((step) => ( + + + {step.label} + + ))} + +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/layouts/tabs/type/tsconfig.json b/samples/layouts/tabs/type/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/layouts/tabs/type/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/tabs/type/vite.config.js b/samples/layouts/tabs/type/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/tabs/type/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