Summary Files Commits Branches @commit @diff @stats
path: root / docs / experimentals.html
diff options
context:
space:
mode:
1 files changed, 18 insertions, 0 deletions
-rw-r--r--docs/experimentals.html18
diff --git a/docs/experimentals.html b/docs/experimentals.html
index 1baebfa..305fbd9 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -751,6 +751,24 @@
</div>
</div>
</div>
+
+<!-- off-canvas -->
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;off-canvas&quot;</span>&gt;
+ &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;off-canvas-checkbox&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;sidebar-checkbox&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;sidebar-checkbox&quot;</span> <span class="atn">hidden</span>&gt;
+ <span class="com">&lt;!-- off-screen toggle button and close mask --&gt;</span>
+ &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;off-canvas-toggle btn btn-primary btn-lg&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;sidebar-checkbox&quot;</span>&gt;
+ &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-menu&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
+ &lt;<span class="tag">/label</span>&gt;
+
+ &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;off-canvas-sidebar&quot;</span>&gt;
+ <span class="com">&lt;!-- off-screen sidebar --&gt;</span>
+ &lt;<span class="tag">/div</span>&gt;
+ &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;off-canvas-body&quot;</span>&gt;
+ <span class="com">&lt;!-- off-screen content --&gt;</span>
+ &lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">/div</span>&gt;
+</code></pre>
+
</div>
<div id="parallax" class="container">