fix: (select) Add Mobile mode (#695)

SAP · Feb 25, 2020 · b4517aa · b4517aa
1 parent 2e4e6f8
commit b4517aa
Showing 1 changed file with 55 additions and 0 deletions.
diff --git a/docs/pages/components/select.md b/docs/pages/components/select.md
@@ -589,3 +589,58 @@ To add text in the body of the component, simply include your text in the `fd-li
 {% endcapture %}
 
 {% include display-component.html component=semantic-select %}
+
+## Select Mobile Mode
+For mobile devices, or tablets, select component should be displayed in fullscreen mode. It can be achieved by wrapping
+select component in `dialog` and `bar` components. 
+{% capture disabled-select %}
+<div class="fd-dialog fd-dialog-docs-static fd-select-docs-max-height fd-dialog--active" id="select-dialog-example">
+    <div class="fd-dialog__content">
+        <header class="fd-dialog__header fd-bar fd-bar--header-with-subheader">
+            <div class="fd-bar__left">
+                <div class="fd-bar__element">
+                    <h3 class="fd-dialog__title">
+                        Select Ingredient
+                    </h3>
+                </div>
+            </div>
+            <div class="fd-bar__right">
+                <div class="fd-bar__element">
+                    <button class=" fd-button--light sap-icon--decline" aria-label="close"></button>
+                </div>
+            </div>
+        </header>
+        <div class="fd-dialog__body fd-dialog__body--no-vertical-padding">
+            <ul class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact" role="listbox">
+                <li class="fd-list__message fd-list__message--information">Choose one item</li>
+                <li role="option" tabindex="0" class="fd-list__item is-selected">
+                   <span class="fd-list__title">Apple</span>
+               </li>
+               <li role="option" tabindex="0" class="fd-list__item">
+                   <span class="fd-list__title">Orange</span>
+               </li>
+               <li role="option" tabindex="0" class="fd-list__item">
+                   <span class="fd-list__title">Banana</span>
+               </li>
+                <li role="option" tabindex="0" class="fd-list__item">
+                   <span class="fd-list__title">Kiwi</span>
+                </li>
+                <li role="option" tabindex="0" class="fd-list__item">
+                    <span class="fd-list__title">Tomato</span>
+                </li>
+                <li role="option" tabindex="0" class="fd-list__item">
+                    <span class="fd-list__title">Onion</span>
+                </li>
+                <li role="option" tabindex="0" class="fd-list__item">
+                    <span class="fd-list__title">Spinach</span>
+                </li>
+                <li role="option" tabindex="0" class="fd-list__item">
+                    <span class="fd-list__title">Potato</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
+{% endcapture %}
+
+{% include display-component.html component=disabled-select %}