diff options
Update Docs and add Calendar code
1 files changed, 172 insertions, 76 deletions
| -rw-r--r-- | docs/experimentals.html | 248 |
diff --git a/docs/experimentals.html b/docs/experimentals.html index f369752..25c398a 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -238,15 +238,15 @@ <span class="hljs-comment"><!-- autocomplete suggestion list --></span> <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span> - <span class="hljs-comment"><!-- menu list chips --></span> + <span class="hljs-comment"><!-- menu list items --></span> <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile tile-centered"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-icon"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-4.png"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-sm"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Steve Rogers"</span>></span> + ... <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-content"</span>></span> - Steve Rogers + ... <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">a</span>></span> @@ -279,109 +279,109 @@ <div class="calendar-date">Sat</div> </div> <div class="calendar-body"> - <div class="calendar-date prev-month disabled"> + <div class="calendar-date prev-month"> <button class="date-item">26</button> </div> - <div class="calendar-date prev-month disabled"> + <div class="calendar-date prev-month"> <button class="date-item">27</button> </div> - <div class="calendar-date prev-month disabled"> + <div class="calendar-date prev-month"> <button class="date-item">28</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">1</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">2</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">3</button> </div> - <div class="calendar-date current-month tooltip" data-tooltip="Today"> + <div class="calendar-date tooltip" data-tooltip="Today"> <button class="date-item date-today">4</button> </div> - <div class="calendar-date current-month tooltip" data-tooltip="Not available"> + <div class="calendar-date tooltip" data-tooltip="Not available"> <button class="date-item" disabled="">5</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">6</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">7</button> </div> - <div class="calendar-date current-month tooltip" data-tooltip="You have appointments"> + <div class="calendar-date tooltip" data-tooltip="You have appointments"> <button class="date-item badge">8</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">9</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">10</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">11</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">12</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">13</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">14</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">15</button> </div> - <div class="calendar-date current-month calendar-range range-start"> - <button class="date-item active">16</button> + <div class="calendar-date calendar-range range-start"> + <button class="date-item">16</button> </div> - <div class="calendar-date current-month calendar-range"> + <div class="calendar-date calendar-range"> <button class="date-item">17</button> </div> - <div class="calendar-date current-month calendar-range"> + <div class="calendar-date calendar-range"> <button class="date-item">18</button> </div> - <div class="calendar-date current-month calendar-range"> + <div class="calendar-date calendar-range"> <button class="date-item">19</button> </div> - <div class="calendar-date current-month calendar-range range-end"> - <button class="date-item active">20</button> + <div class="calendar-date calendar-range range-end"> + <button class="date-item">20</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">21</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">22</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">23</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">24</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">25</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">26</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">27</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">28</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">29</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">30</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">31</button> </div> - <div class="calendar-date next-month disabled"> + <div class="calendar-date next-month"> <button class="date-item">1</button> </div> </div> @@ -389,6 +389,85 @@ </div> </div> </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar"</span>></span> + <span class="hljs-comment"><!-- calendar navbar --></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-nav navbar"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action btn-link btn-lg"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> + <span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-primary"</span>></span>March 2017<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action btn-link btn-lg"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> + <span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-container"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-header"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>></span>Sun<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>></span>Mon<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>></span>Tue<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>></span>Wed<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>></span>Thu<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>></span>Fri<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>></span>Sat<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-body"</span>></span> + <span class="hljs-comment"><!-- calendar previous month --></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date prev-month"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>26<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + ... + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date prev-month"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>28<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + + <span class="hljs-comment"><!-- calendar current month --></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>1<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>2<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>3<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-comment"><!-- calendar date: today --></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item date-today"</span>></span>4<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-comment"><!-- calendar date: tooltip --></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"You have appointments"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>5<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-comment"><!-- calendar date: not available --></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Not available"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span> <span class="hljs-attr">disabled</span>=<span class="hljs-string">""</span>></span>6<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + + <span class="hljs-comment"><!-- calendar range --></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date calendar-range range-start"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>7<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date calendar-range"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>8<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date calendar-range range-end"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>9<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + ... + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>31<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + + <span class="hljs-comment"><!-- calendar next month --></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date next-month"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>1<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +</code></pre> <h4 class="s-subtitle" id="calendars-sizes"><a class="anchor" href="#calendars-sizes" aria-hidden="true">#</a>Calendars sizes</h4> <div class="docs-demo columns"> <div class="column col-12"> @@ -409,110 +488,110 @@ <div class="calendar-date">Sat</div> </div> <div class="calendar-body"> - <div class="calendar-date prev-month disabled"> + <div class="calendar-date prev-month"> <button class="date-item">26</button> </div> - <div class="calendar-date prev-month disabled"> + <div class="calendar-date prev-month"> <button class="date-item">27</button> <div class="calendar-events"><a class="calendar-event bg-error text-light" href="#calendars">Zhonghe Festival</a></div> </div> - <div class="calendar-date prev-month disabled"> + <div class="calendar-date prev-month"> <button class="date-item">28</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">1</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">2</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">3</button> </div> - <div class="calendar-date current-month tooltip" data-tooltip="Today"> + <div class="calendar-date tooltip" data-tooltip="Today"> <button class="date-item date-today">4</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item" disabled="">5</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">6</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">7</button> </div> - <div class="calendar-date current-month tooltip" data-tooltip="You have appointments"> + <div class="calendar-date tooltip" data-tooltip="You have appointments"> <button class="date-item badge">8</button> <div class="calendar-events"><a class="calendar-event bg-primary text-light" href="#calendars">Product launch event</a><a class="calendar-event bg-error text-light" href="#calendars">International Women's Day</a></div> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">9</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">10</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">11</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">12</button> <div class="calendar-events"><a class="calendar-event bg-error text-light" href="#calendars">Arbor Day</a></div> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">13</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">14</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">15</button> </div> - <div class="calendar-date current-month calendar-range range-start"> - <button class="date-item active">16</button> + <div class="calendar-date calendar-range range-start"> + <button class="date-item">16</button> </div> - <div class="calendar-date current-month calendar-range"> + <div class="calendar-date calendar-range"> <button class="date-item">17</button> </div> - <div class="calendar-date current-month calendar-range"> + <div class="calendar-date calendar-range"> <button class="date-item">18</button> </div> - <div class="calendar-date current-month calendar-range"> + <div class="calendar-date calendar-range"> <button class="date-item">19</button> </div> - <div class="calendar-date current-month calendar-range range-end"> - <button class="date-item active">20</button> + <div class="calendar-date calendar-range range-end"> + <button class="date-item">20</button> <div class="calendar-events"><a class="calendar-event bg-success text-light" href="#calendars">Spring Equinox</a></div> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">21</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">22</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">23</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">24</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">25</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">26</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">27</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">28</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">29</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">30</button> </div> - <div class="calendar-date current-month"> + <div class="calendar-date"> <button class="date-item">31</button> </div> <div class="calendar-date next-month disabled"> @@ -524,6 +603,23 @@ </div> </div> </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar calendar-lg"</span>></span> + <span class="hljs-comment"><!-- calendar navbar structure --></span> + + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-container"</span>></span> + <span class="hljs-comment"><!-- calendar header structure --></span> + + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-body"</span>></span> + <span class="hljs-comment"><!-- calendar date with events --></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item active"</span>></span>20<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-events"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-event bg-success text-light"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#calendars"</span>></span>Spring Equinox<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> <div class="container" id="carousels"> <h3 class="s-title"><a class="anchor" href="#carousels" aria-hidden="true">#</a>Carousels</h3> |