feat(menu): wrapping variant

Added wrapping variants as of fomantic/Fomantic-UI#2682
fomantic · Feb 2, 2023 · b6708be · b6708be
1 parent 2a7bd46
commit b6708be
Showing 1 changed file with 72 additions and 0 deletions.
diff --git a/server/documents/collections/menu.html.eco b/server/documents/collections/menu.html.eco
@@ -1666,5 +1666,77 @@ themes      : ['Default', 'Chubby', 'GitHub', 'Material']
     </div>
   </div>
 
+  <div class="example">
+    <h4 class="ui header">Centered Fluid <span class="ui black label">New in 2.9.2</span></h4>
+    <p>A menu can be shown centered and fluid at the same time.</p>
+    <div class="ui centered fluid menu">
+      <a class="bug popup icon item">
+        <i class="edit icon"></i>
+      </a>
+      <a class="bug popup icon item">
+        <i class="bug icon"></i>
+      </a>
+      <a class="github popup icon item">
+        <i class="alternate github icon"></i>
+      </a>
+    </div>
+  </div>
+
+  <div class="example">
+    <h4 class="ui header">Wrapping <span class="ui black label">New in 2.9.2</span></h4>
+    <p>Menu items can automatically wrap on responsive layouts</p>
+    <div class="ui inverted wrapped green wrapping menu">
+      <a class="active item">One</a>
+      <a class="item">Two</a>
+      <a class="item">Three</a>
+      <a class="item">Four</a>
+      <a class="item">Five</a>
+      <a class="item">Six</a>
+      <a class="item">Seven</a>
+      <a class="item">Eight</a>
+      <a class="item">Nine</a>
+      <a class="item">Ten</a>
+      <a class="item">Eleven</a>
+      <a class="item">Twelve</a>
+      <a class="item">Thirteen</a>
+      <a class="item">Fourteen</a>
+      <a class="item">Fifteen</a>
+      <a class="item">Sixteen</a>
+      <a class="item">Seventeen</a>
+      <a class="item">Eighteen</a>
+      <a class="item">Nineteen</a>
+      <a class="item">Twenty</a>
+    </div>
+    <div class="ui ignored info message">
+        There exists an optional <code>wrapped</code> helper class which should be set to the menu when it's known if menu items are actually wrapped, which will adjust some border-radius. As it is not possible to detect a wrapping child automatically via pure CSS, you should use that helper class whenever appropriate.
+    </div>
+  </div>
+
+  <div class="example">
+    <h4 class="ui header">Centered Fluid Wrapping <span class="ui black label">New in 2.9.2</span></h4>
+    <p>By combining centered, fluid and wrapping you could create a menu similar to <a href="/elements/button.html#wrapping-buttons">Wrapping button groups</a></p>
+    <div class="ui inverted wrapped blue centered fluid wrapping menu">
+      <a class="active item">One</a>
+      <a class="item">Two</a>
+      <a class="item">Three</a>
+      <a class="item">Four</a>
+      <a class="item">Five</a>
+      <a class="item">Six</a>
+      <a class="item">Seven</a>
+      <a class="item">Eight</a>
+      <a class="item">Nine</a>
+      <a class="item">Ten</a>
+      <a class="item">Eleven</a>
+      <a class="item">Twelve</a>
+      <a class="item">Thirteen</a>
+      <a class="item">Fourteen</a>
+      <a class="item">Fifteen</a>
+      <a class="item">Sixteen</a>
+      <a class="item">Seventeen</a>
+      <a class="item">Eighteen</a>
+      <a class="item">Nineteen</a>
+      <a class="item">Twenty</a>
+    </div>
+  </div>
 
 </div>