Skip to content

Commit 89c6332

Browse files
duygu-rmdnduygu-rmdn
authored
chore(ui5-side-navigation): add custom width usage sample and update documentation (#12105)
1 parent 5fdf8cf commit 89c6332

File tree

5 files changed

+60
-0
lines changed

5 files changed

+60
-0
lines changed

‎packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigation.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Basic from "../../../_samples/fiori/SideNavigation/Basic/Basic.md";
22
import QuickAction from "../../../_samples/fiori/SideNavigation/QuickAction/QuickAction.md";
33
import UnselectableParentItems from "../../../_samples/fiori/SideNavigation/UnselectableParentItems/UnselectableParentItems.md";
44
import OverlayMode from "../../../_samples/fiori/SideNavigation/OverlayMode/OverlayMode.md";
5+
import CustomWidth from "../../../_samples/fiori/SideNavigation/CustomWidth/CustomWidth.md";
56

67
<%COMPONENT_OVERVIEW%>
78

@@ -26,3 +27,8 @@ Quick action items allow for providing access to frequent functionality.
2627
SideNavigation is enabled to be used inside a responsive popover. This example shows how to achieve overlay mode with correct design and interaction.
2728

2829
<OverlayMode />
30+
31+
### Defining Custom Width
32+
The horizontal size of the side navigation panel can be customized through CSS. The panel must be at least 16 rem wide to maintain readability and layout stability. You can set a larger width as needed, but it cannot be reduced below 16 rem.
33+
34+
<CustomWidth />

‎packages/website/docs/_samples/fiori/SideNavigation/CustomWidth/CustomWidth.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import html from '!!raw-loader!./sample.html';
2+
import js from '!!raw-loader!./main.js';
3+
import css from '!!raw-loader!./main.css';
4+
5+
<Editor html={html} js={js} css={css} />

‎packages/website/docs/_samples/fiori/SideNavigation/CustomWidth/main.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
ui5-side-navigation {
2+
/* Specifies the width of the control.
3+
The minimum width is 16rem.
4+
Use this property to set a larger width. */
5+
width: 20rem;
6+
}

‎packages/website/docs/_samples/fiori/SideNavigation/CustomWidth/main.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";
2+
import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";
3+
import "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js";
4+
import "@ui5/webcomponents-fiori/dist/SideNavigation.js";
5+
6+
import "@ui5/webcomponents-icons/dist/home.js";
7+
import "@ui5/webcomponents-icons/dist/chain-link.js";
8+
import "@ui5/webcomponents-icons/dist/group.js";
9+
import "@ui5/webcomponents-icons/dist/locate-me.js";
10+
import "@ui5/webcomponents-icons/dist/calendar.js";
11+
import "@ui5/webcomponents-icons/dist/history.js";
12+
import "@ui5/webcomponents-icons/dist/customer.js";

‎packages/website/docs/_samples/fiori/SideNavigation/CustomWidth/sample.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!-- playground-fold -->
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Sample</title>
9+
<link rel="stylesheet" href="./main.css">
10+
</head>
11+
12+
<body style="background-color: var(--sapBackgroundColor)">
13+
<!-- playground-fold-end -->
14+
15+
<ui5-side-navigation>
16+
<ui5-side-navigation-item text="Home" icon="home"></ui5-side-navigation-item>
17+
<ui5-side-navigation-group text="Group" expanded>
18+
<ui5-side-navigation-item text="Locations" icon="locate-me" selected></ui5-side-navigation-item>
19+
<ui5-side-navigation-item text="Events" icon="calendar">
20+
<ui5-side-navigation-sub-item text="Local"></ui5-side-navigation-sub-item>
21+
<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
22+
</ui5-side-navigation-item>
23+
</ui5-side-navigation-group>
24+
<ui5-side-navigation-item slot="fixedItems" text="History" icon="history"></ui5-side-navigation-item>
25+
</ui5-side-navigation>
26+
<!-- playground-fold -->
27+
<script type="module" src="main.js"></script>
28+
</body>
29+
30+
</html>
31+
<!-- playground-fold-end -->

0 commit comments

Comments
 (0)