docs(ui5-shellbar): new sample added (#10590)

* fix(ui5-shellbar): new sample added * docs(ui5-shallbar): new sample added * docs(ui5-shellbar): move functionality to basic sample --------- Co-authored-by: PetyaMarkovaBogdanova <[email protected]>
SAP · Feb 3, 2025 · 18ed281 · 18ed281
1 parent bc2bae8
commit 18ed281
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/packages/website/docs/_samples/fiori/ShellBar/Basic/main.js b/packages/website/docs/_samples/fiori/ShellBar/Basic/main.js
@@ -1,7 +1,20 @@
+
 import "@ui5/webcomponents/dist/Avatar.js";
 import "@ui5/webcomponents/dist/Button.js";
+import "@ui5/webcomponents/dist/Switch.js";
+import "@ui5/webcomponents/dist/ToggleButton.js";
+import "@ui5/webcomponents/dist/Input.js";
+import "@ui5/webcomponents/dist/ListItemStandard.js";
+import "@ui5/webcomponents/dist/Popover.js";
+import "@ui5/webcomponents/dist/Title.js";
+import "@ui5/webcomponents/dist/ToggleButton.js";
+import "@ui5/webcomponents/dist/List.js";
+import "@ui5/webcomponents/dist/Text.js";
+import "@ui5/webcomponents/dist/Tag.js";
 
 import "@ui5/webcomponents-fiori/dist/ShellBar.js";
+import "@ui5/webcomponents-fiori/dist/ShellBarSpacer.js";
 
 import "@ui5/webcomponents-icons/dist/customer.js";
-import "@ui5/webcomponents-icons/dist/nav-back.js";
+import "@ui5/webcomponents-icons/dist/nav-back.js";
+import "@ui5/webcomponents-icons/dist/edit.js";
diff --git a/packages/website/docs/_samples/fiori/ShellBar/Basic/sample.html b/packages/website/docs/_samples/fiori/ShellBar/Basic/sample.html
@@ -11,10 +11,20 @@
 <body style="background-color: var(--sapBackgroundColor)">
     <!-- playground-fold-end -->
 
-        <ui5-shellbar primary-title="Corporate Portal" secondary-title="Secondary title">
+        <ui5-shellbar primary-title="Product name">
+            <ui5-tag color-scheme="7" slot="content" data-hide-order="4" design="Information">Trial</ui5-tag>
+            <ui5-text slot="content" data-hide-order="3">EMEA</ui5-text>
+            <ui5-shellbar-spacer slot="content"></ui5-shellbar-spacer>
             <ui5-avatar slot="profile" icon="customer"></ui5-avatar>
             <img slot="logo" src="../assets/images/sap-logo-svg.svg" />
+            <ui5-shellbar-spacer slot="content"></ui5-shellbar-spacer>
+            <ui5-button slot="content" text="Edit" data-hide-order="2">Edit</ui5-button>
+            <ui5-switch design="Textual" data-hide-order="1" text-on="new" text-off="old" slot="content" checked="true"></ui5-switch>
             <ui5-button icon="nav-back" slot="startButton"></ui5-button>
+            <ui5-input placeholder="Instructions" slot="searchField" show-suggestions value-state="Information">
+                <div slot="valueStateMessage">Instructions</div>
+            </ui5-input>
+            <ui5-shellbar-item icon="feedback" text="Button5"></ui5-shellbar-item>
         </ui5-shellbar>
     <!-- playground-fold -->
     <script type="module" src="main.js"></script>