Skip to content

docs(ui5-carousel): document hidden items exclusion from navigation #12564

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 29, 2025
Merged

docs(ui5-carousel): document hidden items exclusion from navigation #12564

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ac00ee0
docs(ui5-carousel): add documentation for hidden items behavior
duygu-rmdn Oct 28, 2025
6492e70
chore: add sample
duygu-rmdn Oct 28, 2025
5122f9d
chore: add requested changes
duygu-rmdn Oct 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/main/src/Carousel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 })
Expand Down
8 changes: 7 additions & 1 deletion packages/website/docs/_components_pages/main/Carousel.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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.

<AccessibleName />
<AccessibleName />

### 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.

<CardsWithHidden />
5 changes: 5 additions & 0 deletions packages/website/docs/_samples/main/Carousel/CardsWithHidden/CardsWithHidden.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

<Editor html={html} js={js} css={css} />
10 changes: 10 additions & 0 deletions packages/website/docs/_samples/main/Carousel/CardsWithHidden/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
ui5-card {
width: 300px;
height: 200px;
margin: 0.5rem;
}

ui5-carousel {
width: 100%;
max-width: 800px;
}
5 changes: 5 additions & 0 deletions packages/website/docs/_samples/main/Carousel/CardsWithHidden/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
82 changes: 82 additions & 0 deletions packages/website/docs/_samples/main/Carousel/CardsWithHidden/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample</title>
<link rel="stylesheet" href="./main.css">
</head>

<body style="background-color: var(--sapBackgroundColor)">
<ui5-carousel items-per-page="S1 M2 L3 XL3" background-design="Solid" page-indicator-background-design="Transparent"
page-indicator-border-design="None">

<ui5-card class="myCard">
<ui5-card-header slot="header" status="Item 1" title-text="Visible Card 1"
subtitle-text="This card is visible">
</ui5-card-header>
<ui5-list separators="Inner">
<ui5-li icon="horizontal-bullet-chart">Marketing Overview</ui5-li>
<ui5-li icon="opportunity">Sales Performance</ui5-li>
<ui5-li icon="line-charts">Quarterly Reports</ui5-li>
</ui5-list>
</ui5-card>

<ui5-card class="myCard" hidden>
<ui5-card-header slot="header" status="Item 2" title-text="Hidden Card 2"
subtitle-text="This card is hidden via attribute">
<ui5-icon name="hide" slot="avatar"></ui5-icon>
</ui5-card-header>
<ui5-list separators="Inner">
<ui5-li icon="cancel">Hidden Analytics</ui5-li>
<ui5-li icon="delete">Hidden Data Cleanup</ui5-li>
</ui5-list>
</ui5-card>

<ui5-card class="myCard">
<ui5-card-header slot="header" status="Item 3" title-text="Visible Card 3"
subtitle-text="Visible card after hidden one">
</ui5-card-header>
<ui5-list separators="Inner">
<ui5-li icon="horizontal-bullet-chart">Customer Insights</ui5-li>
<ui5-li icon="opportunity">Campaign Performance</ui5-li>
</ui5-list>
</ui5-card>

<ui5-card class="myCard">
<ui5-card-header slot="header" status="Item 4" title-text="Visible Card 4"
subtitle-text="Visible item example">
</ui5-card-header>
<ui5-list separators="Inner">
<ui5-li icon="line-charts">Trend Analysis</ui5-li>
<ui5-li icon="customer">Customer Segments</ui5-li>
<ui5-li icon="workflow-tasks">Action Items</ui5-li>
</ui5-list>
</ui5-card>

<ui5-card class="myCard" hidden>
<ui5-card-header slot="header" status="Item 5" title-text="Hidden Card 5"
subtitle-text="Another hidden example">
<ui5-icon name="hide" slot="avatar"></ui5-icon>
</ui5-card-header>
<ui5-list separators="Inner">
<ui5-li icon="cancel">Hidden Task</ui5-li>
<ui5-li icon="delete">Hidden Entry</ui5-li>
</ui5-list>
</ui5-card>

<ui5-card class="myCard">
<ui5-card-header slot="header" status="Item 6" title-text="Visible Card 6"
subtitle-text="End of visible sequence">
</ui5-card-header>
<ui5-list separators="Inner">
<ui5-li icon="horizontal-bullet-chart">Final Overview</ui5-li>
<ui5-li icon="opportunity">Closing Metrics</ui5-li>
</ui5-list>
</ui5-card>
</ui5-carousel>
<script type="module" src="main.js"></script>
</body>

</html>
Loading