kmaterialize 2.0.0 → 2.3.3-1.0.0

package/components/navigation-bar/_old

@@ -0,0 +1,582 @@
+
+
+            <div id="center" class="section scrollspy">
+              <h3 class="header">Centering the logo</h3>
+              <p>
+                The logo will center itself on medium and down screens, but if you want the logo to always be centered, add the <code class="language-html">center</code> class to
+                your 
+                <code class="language-html">
+                  &lt;a class=&quot;brand-logo&quot;&gt;&lt;/a&gt;
+                </code>. You will have to make sure yourself that links do not overlap if you use this.
+              </p>
+              <nav clas="nav navbar">
+                <div class="nav-wrapper">
+                  <a href="#!" class="brand-logo center">Logo</a>
+                  <ul class="left hide-on-med-and-down">
+                    <li>
+                      <a href="sass.html">Sass</a>
+                    </li>
+                    <li>
+                      <a href="badges.html">Components</a>
+                    </li>
+                  </ul>
+                </div>
+              </nav>
+
+              <pre><code class="language-html">
+<xmp>
+<nav class="nav navbar">
+  <div class="nav-wrapper">
+    <a href="#" class="brand-logo center">Logo</a>
+    <ul id="nav-mobile" class="left hide-on-med-and-down">
+      <li><a href="sass.html">Sass</a></li>
+      <li><a href="badges.html">Components</a></li>
+      <li><a href="collapsible.html">JavaScript</a></li>
+    </ul>
+  </div>
+</nav>
+</xmp>
+        </code></pre>
+            </div>
+
+            <div id="active-label" class="section scrollspy">
+              <h3 class="header">Active Items</h3>
+              <p>Add active class to your li tags to denote the current page.</p>
+
+              <nav class="nav navbar">
+                <div class="nav-wrapper">
+                  <a href="#!" class="brand-logo center">Logo</a>
+                  <ul class="left hide-on-med-and-down">
+                    <li>
+                      <a href="sass.html">Sass</a>
+                    </li>
+                    <li>
+                      <a href="badges.html">Components</a>
+                    </li>
+                    <li class="active">
+                      <a href="collapsible.html">JavaScript</a>
+                    </li>
+                  </ul>
+                </div>
+              </nav>
+
+              <pre><code class="language-html">
+<xmp>
+<nav class="nav navbar">
+  <div class="nav-wrapper">
+    <a href="#!" class="brand-logo center">Logo</a>
+    <ul class="left hide-on-med-and-down">
+      <li><a href="sass.html">Sass</a></li>
+      <li><a href="badges.html">Components</a></li>
+      <li class="active"><a href="collapsible.html">JavaScript</a></li>
+    </ul>
+  </div>
+</nav>
+</xmp>
+        </code></pre>
+            </div>
+
+            <div id="navbar-tabs" class="section scrollspy">
+              <h3 class="header">Extended Navbar with Tabs</h3>
+              <p>
+                To add extended components to the navbar, add the class
+                <code class="language-html">nav-extended</code> to the outer <span class="language-html">nav</span> tag. This will allow your navbar height to be variable. Then you
+                can just include a tabs component inside the <span class="language-html">nav-wrapper</span>.
+              </p>
+
+              <nav class="nav navbar nav-extended">
+                <div class="nav-wrapper">
+                  <a href="#" class="brand-logo">Logo</a>
+                  <a href="#" data-target="mobile-demo" class="sidenav-trigger">
+                    <i class="material-icons">menu</i>
+                  </a>
+                  <ul id="nav-mobile" class="right hide-on-med-and-down">
+                    <li>
+                      <a href="sass.html">Sass</a>
+                    </li>
+                    <li>
+                      <a href="badges.html">Components</a>
+                    </li>
+                    <li>
+                      <a href="collapsible.html">JavaScript</a>
+                    </li>
+                  </ul>
+                </div>
+                <div class="nav-content">
+                  <ul class="tabs tabs-transparent">
+                    <li class="tab">
+                      <a href="#test1">Test 1</a>
+                    </li>
+                    <li class="tab">
+                      <a class="active" href="#test2">Test 2</a>
+                    </li>
+                    <li class="tab disabled">
+                      <a href="#test3">Disabled Tab</a>
+                    </li>
+                    <li class="tab">
+                      <a href="#test4">Test 4</a>
+                    </li>
+                  </ul>
+                </div>
+              </nav>
+
+              <ul class="sidenav" id="mobile-demo">
+                <li>
+                  <a href="sass.html">Sass</a>
+                </li>
+                <li>
+                  <a href="badges.html">Components</a>
+                </li>
+                <li>
+                  <a href="collapsible.html">JavaScript</a>
+                </li>
+              </ul>
+
+              <div id="test1" class="col s12">Test 1</div>
+              <div id="test2" class="col s12">Test 2</div>
+              <div id="test3" class="col s12">Test 3</div>
+              <div id="test4" class="col s12">Test 4</div>
+
+              <pre><code class="language-html">
+<xmp>
+<nav class="nav navbar nav-extended">
+  <div class="nav-wrapper">
+    <a href="#" class="brand-logo">Logo</a>
+    <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
+    <ul id="nav-mobile" class="right hide-on-med-and-down">
+      <li><a href="sass.html">Sass</a></li>
+      <li><a href="badges.html">Components</a></li>
+      <li><a href="collapsible.html">JavaScript</a></li>
+    </ul>
+  </div>
+  <div class="nav-content">
+    <ul class="tabs tabs-transparent">
+      <li class="tab"><a href="#test1">Test 1</a></li>
+      <li class="tab"><a class="active" href="#test2">Test 2</a></li>
+      <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
+      <li class="tab"><a href="#test4">Test 4</a></li>
+    </ul>
+  </div>
+</nav>
+
+<ul class="sidenav" id="mobile-demo">
+  <li><a href="sass.html">Sass</a></li>
+  <li><a href="badges.html">Components</a></li>
+  <li><a href="collapsible.html">JavaScript</a></li>
+</ul>
+
+<div id="test1" class="col s12">Test 1</div>
+<div id="test2" class="col s12">Test 2</div>
+<div id="test3" class="col s12">Test 3</div>
+<div id="test4" class="col s12">Test 4</div>
+</xmp>
+        </code></pre>
+            </div>
+
+            <div id="navbar-fixed" class="section scrollspy">
+              <h3 class="header">Fixed Navbar</h3>
+              <p>
+                To make the navbar fixed, you have to add an outer wrapping div with the class
+                <code class="language-html">navbar-fixed</code>. This will offset your other content while making your nav fixed. You can adjust the height of this outer div to
+                change how much offset is on your content.
+              </p>
+
+              <pre><code class="language-html">
+<xmp>
+<div class="navbar-fixed">
+  <nav class="nav navbar">
+    <div class="nav-wrapper">
+      <a href="#!" class="brand-logo">Logo</a>
+      <ul class="right hide-on-med-and-down">
+        <li><a href="sass.html">Sass</a></li>
+        <li><a href="badges.html">Components</a></li>
+      </ul>
+    </div>
+  </nav>
+</div>
+</xmp>
+        </code></pre>
+            </div>
+
+            <div id="navbar-dropdown" class="section scrollspy">
+              <h3 class="header">Navbar Dropdown Menu</h3>
+              <p>
+                To add a navbar dropdown menu, add the
+                <code class="language-html">ul</code> dropdown structure into the page. Then, add an element to trigger the dropdown menu. Make sure to supply the id of the
+                dropdown structure to the <code class="language-html">data-target</code> attribute of the dropdown trigger.
+              </p>
+
+              <!-- Dropdown Structure -->
+              <ul id="dropdown1" class="dropdown-content">
+                <li>
+                  <a href="#!">one</a>
+                </li>
+                <li>
+                  <a href="#!">two</a>
+                </li>
+                <li class="divider"></li>
+                <li>
+                  <a href="#!">three</a>
+                </li>
+              </ul>
+              <nav class="nav navbar">
+                <div class="nav-wrapper">
+                  <a href="#!" class="brand-logo">Logo</a>
+                  <ul class="right hide-on-med-and-down">
+                    <li>
+                      <a href="sass.html">Sass</a>
+                    </li>
+                    <li>
+                      <a href="badges.html">Components</a>
+                    </li>
+                    <!-- Dropdown Trigger -->
+                    <li>
+                      <a class="dropdown-trigger" href="#!" data-target="dropdown1"
+                        >Dropdown
+                        <i class="material-icons right">arrow_drop_down</i>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </nav>
+
+              <pre><code class="language-html">
+<xmp>
+<!-- Dropdown Structure -->
+<ul id="dropdown1" class="dropdown-content">
+  <li><a href="#!">one</a></li>
+  <li><a href="#!">two</a></li>
+  <li class="divider"></li>
+  <li><a href="#!">three</a></li>
+</ul>
+<nav class="nav navbar">
+  <div class="nav-wrapper">
+    <a href="#!" class="brand-logo">Logo</a>
+    <ul class="right hide-on-med-and-down">
+      <li><a href="sass.html">Sass</a></li>
+      <li><a href="badges.html">Components</a></li>
+      <!-- Dropdown Trigger -->
+      <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
+    </ul>
+  </div>
+</nav>
+</xmp>
+        </code></pre>
+              <p>
+                To activate the dropdown menu, insert this line of code into your JavaScript file. You can read more about the
+                <a href="dropdown.html" target="_blank">Dropdown component here</a>.
+              </p>
+              <pre><code class="language-javascript">
+  document.addEventListener('DOMContentLoaded', function() {
+    const elems = document.querySelectorAll('.dropdown-trigger');
+    const instances = M.Dropdown.init(elems, {
+      // specify options here
+    });
+  });
+        </code></pre>
+              <h5>Trigger dropdown menu on click</h5>
+              <p>
+                By default, the dropdown menu is activated by hovering over the dropdown trigger. To activate the dropdown menu on click, pass
+                <code class="language-javascript">{ hover: false }</code> into the above <code class="language-javascript">dropdown()</code> function
+              </p>
+            </div>
+
+            <div id="icons" class="section scrollspy">
+              <h3 class="header">Icon Links</h3>
+
+              <nav class="nav navbar">
+                <div class="nav-wrapper">
+                  <a href="#!" class="brand-logo"> <i class="material-icons">cloud</i>Logo</a>
+                  <ul class="right hide-on-med-and-down">
+                    <li>
+                      <a href="sass.html">
+                        <i class="material-icons">search</i>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="badges.html">
+                        <i class="material-icons">view_module</i>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="collapsible.html">
+                        <i class="material-icons">refresh</i>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="mobile.html">
+                        <i class="material-icons">more_vert</i>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </nav>
+
+              <p>
+                You can add icons into links. For icon only links you don't need any additional class. Just pop the <code class="language-html">i</code> tag in and it will work.
+              </p>
+              <pre><code class="language-html">
+<xmp>
+<nav class="nav navbar">
+  <div class="nav-wrapper">
+    <a href="#!" class="brand-logo"><i class="material-icons">cloud</i>Logo</a>
+    <ul class="right hide-on-med-and-down">
+      <li><a href="sass.html"><i class="material-icons">search</i></a></li>
+      <li><a href="badges.html"><i class="material-icons">view_module</i></a></li>
+      <li><a href="collapsible.html"><i class="material-icons">refresh</i></a></li>
+      <li><a href="mobile.html"><i class="material-icons">more_vert</i></a></li>
+    </ul>
+  </div>
+</nav>
+</xmp>
+</code></pre>
+
+              <nav class="nav navbar">
+                <div class="nav-wrapper">
+                  <a href="#!" class="brand-logo">Logo</a>
+                  <ul class="right hide-on-med-and-down">
+                    <li>
+                      <a href="sass.html"> <i class="material-icons left">search</i>Link with Left Icon</a>
+                    </li>
+                    <li>
+                      <a href="badges.html">
+                        <i class="material-icons right">view_module</i>
+                        Link with Right Icon</a
+                      >
+                    </li>
+                  </ul>
+                </div>
+              </nav>
+
+              <p>
+                For adding an icon to a text link you need to add either a <code class="language-html">left</code> or <code class="language-html">right</code> class to the icon
+                depending on where you want the icon to be.
+              </p>
+              <pre><code class="language-html">
+<xmp>
+<nav class="nav navbar">
+  <div class="nav-wrapper">
+    <a href="#!" class="brand-logo">Logo</a>
+    <ul class="right hide-on-med-and-down">
+      <li><a href="sass.html"><i class="material-icons left">search</i>Link with Left Icon</a></li>
+      <li><a href="badges.html"><i class="material-icons right">view_module</i>Link with Right Icon</a></li>
+    </ul>
+  </div>
+</nav>
+</xmp>
+</code></pre>
+            </div>
+
+            <div id="buttons" class="section scrollspy">
+              <h3 class="header">Buttons</h3>
+
+              <nav class="nav navbar">
+                <div class="nav-wrapper">
+                  <a href="#!" class="brand-logo">Logo</a>
+                  <ul class="right hide-on-med-and-down">
+                    <li>
+                      <a class="waves-effect waves-light btn">Button</a>
+                    </li>
+                    <li>
+                      <a class="waves-effect waves-light btn"
+                        >Button
+                        <i class="material-icons right">cloud</i>
+                      </a>
+                    </li>
+                    <li>
+                      <a class="waves-effect waves-light btn-large">Large Button</a>
+                    </li>
+                  </ul>
+                </div>
+              </nav>
+
+              <p>
+                You can add buttons into links. For buttons you don't need any additional class. Just pop the <code class="language-html">.btn</code> class on the
+                <code class="language-html">a</code> tag.
+              </p>
+              <pre><code class="language-html">
+<xmp>
+<nav class="nav navbar">
+  <div class="nav-wrapper">
+    <a href="#!" class="brand-logo">Logo</a>
+    <ul class="right hide-on-med-and-down">
+      <li><a class="waves-effect waves-light btn">Button</a></li>
+      <li><a class="waves-effect waves-light btn">Button <i class="material-icons right">cloud</i></a></li>
+      <li><a class="waves-effect waves-light btn-large">Large Button</a></li>
+    </ul>
+  </div>
+</nav>
+</xmp>
+</code></pre>
+
+              <h5>Halfway FAB in Extended Navbar</h5>
+              <p>Add a halfway FAB to your extended navbar.</p>
+
+              <nav class="nav navbar nav-extended">
+                <div class="nav-wrapper">
+                  <a href="#!" class="brand-logo">Logo</a>
+                  <ul class="right hide-on-med-and-down">
+                    <li>
+                      <a>A link</a>
+                    </li>
+                    <li>
+                      <a>A second link</a>
+                    </li>
+                    <li>
+                      <a>A third link</a>
+                    </li>
+                  </ul>
+                </div>
+                <div class="nav-content">
+                  <span class="nav-title">Title</span>
+                  <a class="btn-floating btn-large halfway-fab waves-effect waves-light">
+                    <i class="material-icons">add</i>
+                  </a>
+                </div>
+              </nav>
+
+              <pre><code class="language-html">
+<xmp>
+<nav class="nav navbar nav-extended">
+  <div class="nav-wrapper">
+    <a href="#!" class="brand-logo">Logo</a>
+    <ul class="right hide-on-med-and-down">
+      <li><a>A link</a></li>
+      <li><a>A second link</a></li>
+      <li><a>A third link</a></li>
+    </ul>
+  </div>
+  <div class="nav-content">
+    <span class="nav-title">Title</span>
+    <a class="btn-floating btn-large halfway-fab waves-effect waves-light">
+      <i class="material-icons">add</i>
+    </a>
+  </div>
+</nav>
+</xmp>
+</code></pre>
+            </div>
+
+            <div id="search-docs" class="section scrollspy">
+              <h3 class="header">Search Bar</h3>
+
+              <nav class="nav navbar">
+                <div class="nav-wrapper">
+                  <form>
+                    <div class="input-field">
+                      <input id="search-example" type="search" required />
+                      <label class="label-icon" for="search-example">
+                        <i class="material-icons">search</i>
+                      </label>
+                      <i class="material-icons">close</i>
+                    </div>
+                  </form>
+                </div>
+              </nav>
+
+              <p>You can add a search form in the navbar.</p>
+              <pre><code class="language-html">
+<xmp>
+<nav class="navbar">
+  <div class="nav-wrapper">
+    <form>
+      <div class="input-field">
+        <input id="search" type="search" required>
+        <label class="label-icon" for="search"><i class="material-icons">search</i></label>
+        <i class="material-icons">close</i>
+      </div>
+    </form>
+  </div>
+</nav>
+</xmp>
+</code></pre>
+            </div>
+
+            <div id="mobile-collapse" class="section scrollspy">
+              <h3 class="header">Mobile Collapse Button</h3>
+
+              <nav class="nav navbar">
+                <div class="nav-wrapper">
+                  <a href="#!" class="brand-logo">Logo</a>
+                  <a href="#" data-target="mobile-demo" class="sidenav-trigger">
+                    <i class="material-icons">menu</i>
+                  </a>
+                  <ul class="right hide-on-med-and-down">
+                    <li>
+                      <a href="sass.html">Sass</a>
+                    </li>
+                    <li>
+                      <a href="badges.html">Components</a>
+                    </li>
+                    <li>
+                      <a href="collapsible.html">Javascript</a>
+                    </li>
+                    <li>
+                      <a href="mobile.html">Mobile</a>
+                    </li>
+                    <li>
+                      <a class="btn waves-effect waves-light" href="buttons.html">Buttons</a>
+                    </li>
+                  </ul>
+                </div>
+              </nav>
+
+              <ul class="sidenav" id="mobile-demo">
+                <li>
+                  <a href="sass.html">Sass</a>
+                </li>
+                <li>
+                  <a href="badges.html">Components</a>
+                </li>
+                <li>
+                  <a href="collapsible.html">Javascript</a>
+                </li>
+                <li>
+                  <a href="mobile.html">Mobile</a>
+                </li>
+                <li>
+                  <a class="btn waves-effect waves-light" href="buttons.html">Buttons</a>
+                </li>
+              </ul>
+
+              <p>
+                When your nav bar is resized, you will see that the links on the right turn into a hamburger icon <i class="material-icons">menu</i>. Take a look at the example
+                below to get this functionality. Add the entire <code class="language-html">sidenav-trigger</code> line to your <code class="language-html">nav</code>.
+              </p>
+              <pre><code class="language-html">
+<xmp>
+<nav class="nav navbar">
+  <div class="nav-wrapper">
+    <a href="#!" class="brand-logo">Logo</a>
+    <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
+    <ul class="right hide-on-med-and-down">
+      <li><a href="sass.html">Sass</a></li>
+      <li><a href="badges.html">Components</a></li>
+      <li><a href="collapsible.html">Javascript</a></li>
+      <li><a href="mobile.html">Mobile</a></li>
+    </ul>
+  </div>
+</nav>
+
+<ul class="sidenav" id="mobile-demo">
+  <li><a href="sass.html">Sass</a></li>
+  <li><a href="badges.html">Components</a></li>
+  <li><a href="collapsible.html">Javascript</a></li>
+  <li><a href="mobile.html">Mobile</a></li>
+</ul>
+</xmp>
+          </code></pre>
+
+              <h5>Initialization</h5>
+              <p>
+                After including the sidenav-trigger line into your navbar, all you have to do now initialize the plugin. This example below assumes you have not modified the
+                classes in the above example. In the case that you have, just change the selector in the line below to match it.
+              </p>
+              <pre><code class="language-javascript">
+  document.addEventListener('DOMContentLoaded', function() {
+    const elems = document.querySelectorAll('.sidenav');
+    const instances = M.Sidenav.init(elems, options);
+  });
+        </code></pre>
+            </div>
+          </div>

package/components/navigation-bar/navigation-bar.mdx

@@ -0,0 +1,20 @@
+import {Story, Meta, Source, Controls, Markdown, Primary} from '@storybook/addon-docs/blocks';
+import * as stories from './navigation-bar.stories';
+
+<Meta of={stories}/>
+
+# Navigation Bar
+
+There are 2 main parts of the navbar. A logo or brand link, and the navigations links. You can align these links to the left or right.
+
+## Right Aligned Links
+
+To right align your navbar links, just add a `right` class to the `ul` that contains them.
+
+<Story of={stories.RightAligned} />
+<Source of={stories.RightAligned} format="dedent"/>
+
+## Left Aligned Links
+
+<Story of={stories.LeftAligned} />
+<Source of={stories.LeftAligned} format="dedent"/>

package/components/navigation-bar/navigation-bar.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/html-vite';
+
+export default {
+  title: 'Components/Navigation-Bar'
+} satisfies Meta;
+
+export const RightAligned: StoryObj = {
+  render() {
+    return `
+<nav class="nav navbar">
+  <div class="nav-wrapper">
+    <a href="#" class="brand-logo">Logo</a>
+    <ul id="nav-mobile" class="right hide-on-med-and-down">
+      <li><a href="sass.html">Sass</a></li>
+      <li><a href="badges.html">Components</a></li>
+      <li><a href="collapsible.html">JavaScript</a></li>
+    </ul>
+  </div>
+</nav>
+    `;
+  }
+};
+
+export const LeftAligned: StoryObj = {
+  render() {
+    return `
+<nav class="nav navbar">
+  <div class="nav-wrapper">
+    <a href="#" class="brand-logo right">Logo</a>
+    <ul id="nav-mobile" class="left hide-on-med-and-down">
+      <li><a href="sass.html">Sass</a></li>
+      <li><a href="badges.html">Components</a></li>
+      <li><a href="collapsible.html">JavaScript</a></li>
+    </ul>
+  </div>
+</nav>
+    `;
+  }
+};