Close #19

tarkhov · Jun 8, 2019 · 6992aa3 · 6992aa3
1 parent 7737691
commit 6992aa3
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 22 deletions.
diff --git a/docs/assets/json/contents.json b/docs/assets/json/contents.json
@@ -357,7 +357,13 @@
       },
       {
         "url": "#nav-size",
-        "name": "Size"
+        "name": "Size",
+        "childs": [
+          {
+            "url": "#nav-size-direction",
+            "name": "Direction"
+          }
+        ]
       },
       {
         "url": "#nav-tabs",

diff --git a/docs/assets/pug/dropdown/off-click.pug b/docs/assets/pug/dropdown/off-click.pug
@@ -1,14 +1,16 @@
 extends ../example-js.pug
 
 block example_title
-  h4.fw-400 Off click events
+  h4.fw-400 Disable dropdown on click
 
 block example_code
   :prismjs(language='javascript')
-    $(document).off('.dropdown.data-api');
-    $(document).on('show.bs.dropdown', '.dropdown-hover', function (e) {
-      var events = $._data(e.relatedTarget, 'events');
-      if (events) {
-        $(e.relatedTarget).off('click.bs.dropdown');
-      }
+    jQuery(document).ready(function ($) {
+      $(document).off('.dropdown.data-api');
+      $(document).on('show.bs.dropdown', '.dropdown-hover', function (e) {
+        var events = $._data(e.relatedTarget, 'events');
+        if (events) {
+          $(e.relatedTarget).off('click.bs.dropdown');
+        }
+      });
     });
diff --git a/docs/assets/pug/nav.pug b/docs/assets/pug/nav.pug
@@ -4,6 +4,8 @@
     include nav/active.pug
   #nav-size
     include nav/size.pug
+    #nav-size-direction
+      include nav/size-direction.pug
   #nav-tabs
     include nav/tabs.pug
     #nav-tabs-responsive

diff --git a/docs/assets/pug/nav/size-direction.pug b/docs/assets/pug/nav/size-direction.pug
@@ -0,0 +1,12 @@
+extends ../example-html.pug
+
+block example_title
+  h4.fw-400 Direction
+
+block example_code
+  :encode-pug
+    | <!-- Source -->
+    each size in [0, 'xs', 'sm', 'lg']
+      each dir in ['x', 'y']
+        ul.nav(class='nav-' + dir + '-' + size)
+      = "\n"
diff --git a/docs/index.html b/docs/index.html
@@ -226,6 +226,9 @@
                   <li class="nav-item"><a class="nav-link" href="#nav-active">Active</a>
                   </li>
                   <li class="nav-item"><a class="nav-link" href="#nav-size">Size</a>
+                    <ul class="sidebar-nav nav-tree nav-x-0 nav-y-sm fs-1 pl-3">
+                      <li class="nav-item"><a class="nav-link" href="#nav-size-direction">Direction</a></li>
+                    </ul>
                   </li>
                   <li class="nav-item"><a class="nav-link" href="#nav-tabs">Tabs</a>
                     <ul class="sidebar-nav nav-tree nav-x-0 nav-y-sm fs-1 pl-3">
@@ -2673,14 +2676,16 @@ <h3 class="fw-400">Hover</h3>
                 <div class="clearfix"></div>
               </div>
               <div id="dropdown-off-click">
-                <h4 class="fw-400">Off click events</h4>
+                <h4 class="fw-400">Disable dropdown on click</h4>
                 <div class="card card-body bg-light mb-3">
-                  <pre class="pre-scrollable"><code class="language-javascript"><pre><code class="language-javascript">$(document).off(&#39;.dropdown.data-api&#39;);
-$(document).on(&#39;show.bs.dropdown&#39;, &#39;.dropdown-hover&#39;, function (e) {
-  var events = $._data(e.relatedTarget, &#39;events&#39;);
-  if (events) {
-    $(e.relatedTarget).off(&#39;click.bs.dropdown&#39;);
-  }
+                  <pre class="pre-scrollable"><code class="language-javascript"><pre><code class="language-javascript">jQuery(document).ready(function ($) {
+  $(document).off(&#39;.dropdown.data-api&#39;);
+  $(document).on(&#39;show.bs.dropdown&#39;, &#39;.dropdown-hover&#39;, function (e) {
+    var events = $._data(e.relatedTarget, &#39;events&#39;);
+    if (events) {
+      $(e.relatedTarget).off(&#39;click.bs.dropdown&#39;);
+    }
+  });
 });</code></pre></code></pre>
                 </div>
               </div>
@@ -3502,6 +3507,24 @@ <h3 class="fw-400">Sizes</h3>
                   </div>
                 </div>
                 <div class="clearfix"></div>
+                <div id="nav-size-direction">
+                  <h4 class="fw-400">Direction</h4>
+                  <div class="card card-body bg-light mb-3">
+                    <pre class="pre-scrollable"><code class="language-markup">&#x3C;!-- Source --&#x3E;
+&#x3C;ul class=&#x22;nav nav-x-0&#x22;&#x3E;&#x3C;/ul&#x3E;
+&#x3C;ul class=&#x22;nav nav-y-0&#x22;&#x3E;&#x3C;/ul&#x3E;
+
+&#x3C;ul class=&#x22;nav nav-x-xs&#x22;&#x3E;&#x3C;/ul&#x3E;
+&#x3C;ul class=&#x22;nav nav-y-xs&#x22;&#x3E;&#x3C;/ul&#x3E;
+
+&#x3C;ul class=&#x22;nav nav-x-sm&#x22;&#x3E;&#x3C;/ul&#x3E;
+&#x3C;ul class=&#x22;nav nav-y-sm&#x22;&#x3E;&#x3C;/ul&#x3E;
+
+&#x3C;ul class=&#x22;nav nav-x-lg&#x22;&#x3E;&#x3C;/ul&#x3E;
+&#x3C;ul class=&#x22;nav nav-y-lg&#x22;&#x3E;&#x3C;/ul&#x3E;
+</code></pre>
+                  </div>
+                </div>
               </div>
               <div id="nav-tabs">
                 <h3 class="fw-400">Tabs position</h3>

diff --git a/docs/v1/index.html b/docs/v1/index.html
@@ -226,6 +226,9 @@
                   <li class="nav-item"><a class="nav-link" href="#nav-active">Active</a>
                   </li>
                   <li class="nav-item"><a class="nav-link" href="#nav-size">Size</a>
+                    <ul class="sidebar-nav nav-tree nav-x-0 nav-y-sm fs-1 pl-3">
+                      <li class="nav-item"><a class="nav-link" href="#nav-size-direction">Direction</a></li>
+                    </ul>
                   </li>
                   <li class="nav-item"><a class="nav-link" href="#nav-tabs">Tabs</a>
                     <ul class="sidebar-nav nav-tree nav-x-0 nav-y-sm fs-1 pl-3">
@@ -2673,14 +2676,16 @@ <h3 class="fw-400">Hover</h3>
                 <div class="clearfix"></div>
               </div>
               <div id="dropdown-off-click">
-                <h4 class="fw-400">Off click events</h4>
+                <h4 class="fw-400">Disable dropdown on click</h4>
                 <div class="card card-body bg-light mb-3">
-                  <pre class="pre-scrollable"><code class="language-javascript"><pre><code class="language-javascript">$(document).off(&#39;.dropdown.data-api&#39;);
-$(document).on(&#39;show.bs.dropdown&#39;, &#39;.dropdown-hover&#39;, function (e) {
-  var events = $._data(e.relatedTarget, &#39;events&#39;);
-  if (events) {
-    $(e.relatedTarget).off(&#39;click.bs.dropdown&#39;);
-  }
+                  <pre class="pre-scrollable"><code class="language-javascript"><pre><code class="language-javascript">jQuery(document).ready(function ($) {
+  $(document).off(&#39;.dropdown.data-api&#39;);
+  $(document).on(&#39;show.bs.dropdown&#39;, &#39;.dropdown-hover&#39;, function (e) {
+    var events = $._data(e.relatedTarget, &#39;events&#39;);
+    if (events) {
+      $(e.relatedTarget).off(&#39;click.bs.dropdown&#39;);
+    }
+  });
 });</code></pre></code></pre>
                 </div>
               </div>
@@ -3502,6 +3507,24 @@ <h3 class="fw-400">Sizes</h3>
                   </div>
                 </div>
                 <div class="clearfix"></div>
+                <div id="nav-size-direction">
+                  <h4 class="fw-400">Direction</h4>
+                  <div class="card card-body bg-light mb-3">
+                    <pre class="pre-scrollable"><code class="language-markup">&#x3C;!-- Source --&#x3E;
+&#x3C;ul class=&#x22;nav nav-x-0&#x22;&#x3E;&#x3C;/ul&#x3E;
+&#x3C;ul class=&#x22;nav nav-y-0&#x22;&#x3E;&#x3C;/ul&#x3E;
+
+&#x3C;ul class=&#x22;nav nav-x-xs&#x22;&#x3E;&#x3C;/ul&#x3E;
+&#x3C;ul class=&#x22;nav nav-y-xs&#x22;&#x3E;&#x3C;/ul&#x3E;
+
+&#x3C;ul class=&#x22;nav nav-x-sm&#x22;&#x3E;&#x3C;/ul&#x3E;
+&#x3C;ul class=&#x22;nav nav-y-sm&#x22;&#x3E;&#x3C;/ul&#x3E;
+
+&#x3C;ul class=&#x22;nav nav-x-lg&#x22;&#x3E;&#x3C;/ul&#x3E;
+&#x3C;ul class=&#x22;nav nav-y-lg&#x22;&#x3E;&#x3C;/ul&#x3E;
+</code></pre>
+                  </div>
+                </div>
               </div>
               <div id="nav-tabs">
                 <h3 class="fw-400">Tabs position</h3>