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 21bc953af6..0000000000 --- a/samples/layouts/tabs/alignment/src/index.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { useState } from "react"; -import ReactDOM from "react-dom/client"; -import "./index.css"; -import { IgrTabs, IgrTab, TabsAlignment, IgrRadio, IgrRadioGroup, IgrRadioChangeEventArgs } from "igniteui-react"; -import "igniteui-webcomponents/themes/light/bootstrap.css"; - -export default function Alignment() { - const [alignment, setAlignment] = useState("start"); - - function onRadioChange(e: IgrRadioChangeEventArgs) { - setAlignment(e.detail.value as TabsAlignment); - } - - return ( -
- - Start - Center - End - Justify - - - - Basics tab panel - - - Details tab panel - - - Custom tab panel - - - Disabled tab panel will not be displayed - - -
- ); -} - -// rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById("root")!); -root.render(); diff --git a/samples/layouts/tabs/alignment/README.md b/samples/layouts/tabs/amount/README.md similarity index 87% rename from samples/layouts/tabs/alignment/README.md rename to samples/layouts/tabs/amount/README.md index 9ed23432ae..3fcc29977b 100644 --- a/samples/layouts/tabs/alignment/README.md +++ b/samples/layouts/tabs/amount/README.md @@ -1,4 +1,4 @@ -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. @@ -9,7 +9,7 @@ This folder contains implementation of React application with example of Alignme View Code - + Run Sample @@ -28,7 +28,7 @@ Follow these instructions to run this example: git clone https://github.com/IgniteUI/igniteui-react-examples.git cd ./igniteui-react-examples git checkout master -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 031399e7ae..7a89a30450 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/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..d0d71134b8 --- /dev/null +++ b/samples/layouts/tabs/amount/src/index.tsx @@ -0,0 +1,37 @@ +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() { + return ( +
+
+ Two Tabs + + {categories.slice(0, 2).map((category) => ( + + ))} + + Five Tabs + + {categories.slice(0, 5).map((category) => ( + + ))} + + 5+ Tabs + + {categories.map((category) => ( + + ))} + +
+
+ ); +} + +// rendering above component 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 031399e7ae..32481f1247 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..ed1fff0464 100644 --- a/samples/layouts/tabs/overview/src/index.css +++ b/samples/layouts/tabs/overview/src/index.css @@ -1,2 +1,38 @@ /* 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-tab::part(content) { + white-space: nowrap; +} + +.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 5f3ae62db1..c74e2e76cc 100644 --- a/samples/layouts/tabs/overview/src/index.tsx +++ b/samples/layouts/tabs/overview/src/index.tsx @@ -1,36 +1,43 @@ -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 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 function Overview() { - return ( -
- - - - Home tab panel - - - - Search tab panel - - - - Favorite tab panel - - -
- ); +const teams = ['Everyone', 'Finance', 'Engineering']; + +export default function TabsOverview() { + return ( +
+
+ + {teams.map((team) => ( + + + {people + .filter((person) => team === 'Everyone' || person.team === team) + .map((person) => ( + + + {person.name} + {person.team} + + ))} + + + ))} + +
+
+ ); } // rendering above component 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 3dc7bd47b3..0000000000 --- a/samples/layouts/tabs/prefix-suffix/src/index.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { useState } 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"); - -const initialTabs = ['Home','Search', 'Favorite']; - -export default function PrefixSuffix() { - const [tabs, setTabs] = useState(initialTabs); - - function onCloseClicked(index: number) { - const updatedTabs = [...tabs]; - updatedTabs.splice(index, 1); - setTabs(updatedTabs); - } - - function onResetClick() { - setTabs(initialTabs); - } - - return ( -
- - {tabs.map((tab, index) => ( - - - - {tab} - - onCloseClicked(index)} - > - - {tab} tab panel - - ))} - - Reset -
- ); -} - -// rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById("root")!); -root.render(); diff --git a/samples/layouts/tabs/responsiveness/README.md b/samples/layouts/tabs/responsiveness/README.md new file mode 100644 index 0000000000..bd10dac751 --- /dev/null +++ b/samples/layouts/tabs/responsiveness/README.md @@ -0,0 +1,50 @@ +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 + + + + +## 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 +cd ./igniteui-react-examples +git checkout master +cd ./samples/layouts/tabs/responsiveness +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install +npm 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..30acf35bcd --- /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": "^2.2.1", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "~7.4.1", + "react": "^19.3.0", + "react-dom": "^19.3.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^30.0.0", + "@types/node": "^24.7.1", + "@types/react": "^19.3.0", + "@types/react-dom": "^19.3.0", + "@vitejs/plugin-react": "^6.1.1", + "@vitest/browser": "^5.0.2", + "typescript": "^5.9.3", + "vite": "^8.3.1", + "vitest": "^5.0.2", + "vitest-canvas-mock": "^1.2.0", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} 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..f54b52d7d5 --- /dev/null +++ b/samples/layouts/tabs/responsiveness/src/index.tsx @@ -0,0 +1,32 @@ +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() { + return ( +
+
+ Content Fit + + {categories.map((category) => ( + + ))} + + Content Fix + + {days.map((day) => ( + + ))} + +
+
+ ); +} + +// rendering above component 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 241ca4c6e8..0000000000 --- a/samples/layouts/tabs/scrolling/src/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import ReactDOM from "react-dom/client"; -import "./index.css"; -import { IgrTabs, IgrTab} from "igniteui-react"; -import "igniteui-webcomponents/themes/light/bootstrap.css"; - -export default function Scrolling() { - return ( -
- - {Array.from({length: 18}, (_, index) => index + 1).map(number => ( - - Tab {number} - Tab {number} panel - - ))} - -
- ); -} - -// rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById("root")!); -root.render(); diff --git a/samples/layouts/tabs/scrolling/README.md b/samples/layouts/tabs/states/README.md similarity index 87% rename from samples/layouts/tabs/scrolling/README.md rename to samples/layouts/tabs/states/README.md index d81a42d2bc..1aa8ac6d60 100644 --- a/samples/layouts/tabs/scrolling/README.md +++ b/samples/layouts/tabs/states/README.md @@ -1,4 +1,4 @@ -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. @@ -9,7 +9,7 @@ This folder contains implementation of React application with example of Scrolli View Code - + Run Sample @@ -28,7 +28,7 @@ Follow these instructions to run this example: git clone https://github.com/IgniteUI/igniteui-react-examples.git cd ./igniteui-react-examples git checkout master -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 031399e7ae..95b8a0e2dd 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/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..aea54ec8dd --- /dev/null +++ b/samples/layouts/tabs/states/src/index.tsx @@ -0,0 +1,42 @@ +import { useEffect, useRef } 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() { + const statesRef = useRef(null); + + // The tabs only show their look, so inert keeps them out of the tab order and ignores pointer input. + useEffect(() => { + if (statesRef.current) { + statesRef.current.inert = true; + } + }, []); + + return ( +
+
+ + Active + Inactive + Disabled + Hover / Off + + + + + + Hover / On + + + + +
+
+ ); +} + +// rendering above component 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 031399e7ae..899031ec72 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..bccb30bea1 100644 --- a/samples/layouts/tabs/styling/src/index.css +++ b/samples/layouts/tabs/styling/src/index.css @@ -1,37 +1,127 @@ /* 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; } -igc-tab::part(tab-body), -igc-tab[selected] igc-icon { - --item-active-icon-color: var(--ig-success-300); +.profile-card igc-list { + --ig-size: var(--ig-size-large); + --ig-list-background: #fff; + --ig-list-item-background: #fff; + + border: none; +} + +.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; } -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-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; } -igc-tab::part(tab-header) { - --item-hover-color: var(--ig-success-500); +.profile-status::part(base) { + font: 400 12px / 16px aktiv-grotesk, sans-serif; + letter-spacing: 0.4px; } -igc-tab::part(tab-header)::before { - --border-color--hover: var(--ig-gray-500); -} \ No newline at end of file +.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; +} + +.profile-tabs::part(inner) { + flex-grow: 1; + grid-template-columns: repeat(3, 1fr); +} + +.profile-tabs igc-tab::part(content) { + font: 500 14px / 20px aktiv-grotesk, sans-serif; + letter-spacing: 0.25px; + text-transform: none; +} + +.profile-tabs igc-tab[selected]::part(tab-header)::before { + box-shadow: inset 0 -2px 0 #0176ff; +} + +.profile-tabs igc-tab::part(tab-header):focus-within::after { + box-shadow: none; +} + +.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 6cc0129b18..3b0a57ea87 100644 --- a/samples/layouts/tabs/styling/src/index.tsx +++ b/samples/layouts/tabs/styling/src/index.tsx @@ -1,36 +1,63 @@ -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 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 function TabsStyling() { - return ( -
- - - - Home tab panel - - - - Search tab panel - - - - Favorite tab panel - - -
- ); + return ( +
+
+ + + + Emily Carter + Finance lead - Sofia + Active + + + + {sections.map((section) => ( + + + {section.details.map((detail) => ( + + {detail.label} + {detail.value} + + ))} + + + ))} + +
+
+ ); } // rendering above component 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/README.md b/samples/layouts/tabs/tailwind-styling/README.md new file mode 100644 index 0000000000..61aaea67c1 --- /dev/null +++ b/samples/layouts/tabs/tailwind-styling/README.md @@ -0,0 +1,50 @@ +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 + + + + +## 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 +cd ./igniteui-react-examples +git checkout master +cd ./samples/layouts/tabs/tailwind-styling +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install +npm 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..04ccf2164d --- /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": "^2.2.1", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "~7.4.1", + "react": "^19.3.0", + "react-dom": "^19.3.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@tailwindcss/vite": "^4.3.3", + "@types/jest": "^30.0.0", + "@types/node": "^24.7.1", + "@types/react": "^19.3.0", + "@types/react-dom": "^19.3.0", + "@vitejs/plugin-react": "^6.1.1", + "@vitest/browser": "^5.0.2", + "tailwindcss": "^4.3.3", + "typescript": "^5.9.3", + "vite": "^8.3.1", + "vitest": "^5.0.2", + "vitest-canvas-mock": "^1.2.0", + "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/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..835ae0bf7b --- /dev/null +++ b/samples/layouts/tabs/tailwind-styling/src/index.tsx @@ -0,0 +1,53 @@ +import { 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() { + 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 component 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..e27a22be9b --- /dev/null +++ b/samples/layouts/tabs/tailwind-styling/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "es2020", + "lib": [ + "es2020", + "dom", + "dom.iterable" + ], + "module": "esnext", + "moduleResolution": "bundler", + "jsx": "react-jsx", + "types": [ + "vite/client" + ], + "strict": true, + "resolveJsonModule": true, + "isolatedModules": true, + "skipLibCheck": true, + "noEmit": true + }, + "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/prefix-suffix/README.md b/samples/layouts/tabs/type/README.md similarity index 87% rename from samples/layouts/tabs/prefix-suffix/README.md rename to samples/layouts/tabs/type/README.md index 64b3335be7..5a801aac00 100644 --- a/samples/layouts/tabs/prefix-suffix/README.md +++ b/samples/layouts/tabs/type/README.md @@ -1,4 +1,4 @@ -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. @@ -9,7 +9,7 @@ This folder contains implementation of React application with example of Prefix View Code - + Run Sample @@ -28,7 +28,7 @@ Follow these instructions to run this example: git clone https://github.com/IgniteUI/igniteui-react-examples.git cd ./igniteui-react-examples git checkout master -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 031399e7ae..a5e58d8801 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/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..a205d6f822 --- /dev/null +++ b/samples/layouts/tabs/type/src/index.tsx @@ -0,0 +1,49 @@ +import { 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() { + 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 component 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..e27a22be9b --- /dev/null +++ b/samples/layouts/tabs/type/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "es2020", + "lib": [ + "es2020", + "dom", + "dom.iterable" + ], + "module": "esnext", + "moduleResolution": "bundler", + "jsx": "react-jsx", + "types": [ + "vite/client" + ], + "strict": true, + "resolveJsonModule": true, + "isolatedModules": true, + "skipLibCheck": true, + "noEmit": true + }, + "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