diff --git a/packages/main/src/Carousel.ts b/packages/main/src/Carousel.ts index 527faf0e4b4a..b800a2ec99bd 100644 --- a/packages/main/src/Carousel.ts +++ b/packages/main/src/Carousel.ts @@ -84,6 +84,12 @@ type ItemsInfo = { * - The items you want to display need to be visible at the same time. * - The items you want to display are uniform and very similar. * + * ### Hidden Items + * + * Carousel items can be conditionally hidden by adding the `hidden` attribute to any child element. + * Hidden items are automatically excluded from carousel navigation and will not be displayed or counted in pagination. + * This allows for dynamic showing or hiding of carousel items without affecting the overall carousel behavior. + * * ### Keyboard Handling * * #### Basic Navigation @@ -307,6 +313,9 @@ class Carousel extends UI5Element { /** * Defines the content of the component. + * + * **Note:** Items with the `hidden` attribute will be automatically excluded from carousel navigation and page calculations. + * They will not be displayed or accessible via keyboard navigation. See [sample](./#carousel-with-hidden-items). * @public */ @slot({ "default": true, type: HTMLElement, individualSlots: true }) diff --git a/packages/website/docs/_components_pages/main/Carousel.mdx b/packages/website/docs/_components_pages/main/Carousel.mdx index 9e570949f4a3..2420ecb0203d 100644 --- a/packages/website/docs/_components_pages/main/Carousel.mdx +++ b/packages/website/docs/_components_pages/main/Carousel.mdx @@ -8,6 +8,7 @@ import Basic from "../../_samples/main/Carousel/Basic/Basic.md"; import Cyclic from "../../_samples/main/Carousel/Cyclic/Cyclic.md"; import ArrowsPlacement from "../../_samples/main/Carousel/ArrowsPlacement/ArrowsPlacement.md"; import AccessibleName from "../../_samples/main/Carousel/AccessibleName/AccessibleName.md"; +import CardsWithHidden from "../../_samples/main/Carousel/CardsWithHidden/CardsWithHidden.md"; import PageIndicatorType from "../../_samples/main/Carousel/PageIndicatorType/PageIndicatorType.md"; import MultipleItemsPerPage from "../../_samples/main/Carousel/MultipleItemsPerPage/MultipleItemsPerPage.md"; @@ -45,4 +46,9 @@ define the number of items per page for given breakpoint ("S", "M", "L" and "XL" ### Accessible name Use the **accessibleName** or the **accessibleNameRef** properties to label the Carousel and improve its accessibility. - \ No newline at end of file + + +### Carousel with Hidden Items +This is a Carousel containing cards where some are hidden using the **hidden** attribute. Hidden items will not be included in the carousel navigation. + + diff --git a/packages/website/docs/_samples/main/Carousel/CardsWithHidden/CardsWithHidden.md b/packages/website/docs/_samples/main/Carousel/CardsWithHidden/CardsWithHidden.md new file mode 100644 index 000000000000..ef4652628b4d --- /dev/null +++ b/packages/website/docs/_samples/main/Carousel/CardsWithHidden/CardsWithHidden.md @@ -0,0 +1,5 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; +import css from '!!raw-loader!./main.css'; + + diff --git a/packages/website/docs/_samples/main/Carousel/CardsWithHidden/main.css b/packages/website/docs/_samples/main/Carousel/CardsWithHidden/main.css new file mode 100644 index 000000000000..bffa68e89859 --- /dev/null +++ b/packages/website/docs/_samples/main/Carousel/CardsWithHidden/main.css @@ -0,0 +1,10 @@ +ui5-card { + width: 300px; + height: 200px; + margin: 0.5rem; +} + +ui5-carousel { + width: 100%; + max-width: 800px; +} diff --git a/packages/website/docs/_samples/main/Carousel/CardsWithHidden/main.js b/packages/website/docs/_samples/main/Carousel/CardsWithHidden/main.js new file mode 100644 index 000000000000..251447fc102f --- /dev/null +++ b/packages/website/docs/_samples/main/Carousel/CardsWithHidden/main.js @@ -0,0 +1,5 @@ +import "@ui5/webcomponents/dist/Carousel.js"; +import "@ui5/webcomponents/dist/Card.js"; +import "@ui5/webcomponents/dist/CardHeader.js"; +import "@ui5/webcomponents/dist/List.js"; +import "@ui5/webcomponents/dist/ListItemStandard.js"; diff --git a/packages/website/docs/_samples/main/Carousel/CardsWithHidden/sample.html b/packages/website/docs/_samples/main/Carousel/CardsWithHidden/sample.html new file mode 100644 index 000000000000..cf51398e4f57 --- /dev/null +++ b/packages/website/docs/_samples/main/Carousel/CardsWithHidden/sample.html @@ -0,0 +1,82 @@ + + + + + + + Sample + + + + + + + + + + + Marketing Overview + Sales Performance + Quarterly Reports + + + + + + + + + + Customer Insights + Campaign Performance + + + + + + + + Trend Analysis + Customer Segments + Action Items + + + + + + + + + + Final Overview + Closing Metrics + + + + + + +