From 0c2eedf551cb7d3c2ad6c3a5e7f35ef6a1ac655c Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 10 Jun 2018 08:13:26 +0800 Subject: Update Docs and add Calendar code --- docs/experimentals.html | 248 +++++++++++++++++++++++++++++++++--------------- 1 file changed, 172 insertions(+), 76 deletions(-) (limited to 'docs/experimentals.html') 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 @@ <!-- autocomplete suggestion list --> <ul class="menu"> - <!-- menu list chips --> + <!-- menu list items --> <li class="menu-item"> <a href="#"> <div class="tile tile-centered"> <div class="tile-icon"> - <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers"> + ... </div> <div class="tile-content"> - Steve Rogers + ... </div> </div> </a> @@ -279,109 +279,109 @@
Sat
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
- +
+
-
+
-
+
-
+
-
- +
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
@@ -389,6 +389,85 @@
+ 
<div class="calendar">
+  <!-- calendar navbar -->
+  <div class="calendar-nav navbar">
+    <button class="btn btn-action btn-link btn-lg">
+      <i class="icon icon-arrow-left"></i>
+    </button>
+    <div class="navbar-primary">March 2017</div>
+    <button class="btn btn-action btn-link btn-lg">
+      <i class="icon icon-arrow-right"></i>
+    </button>
+  </div>
+
+  <div class="calendar-container">
+    <div class="calendar-header">
+      <div class="calendar-date">Sun</div>
+      <div class="calendar-date">Mon</div>
+      <div class="calendar-date">Tue</div>
+      <div class="calendar-date">Wed</div>
+      <div class="calendar-date">Thu</div>
+      <div class="calendar-date">Fri</div>
+      <div class="calendar-date">Sat</div>
+    </div>
+
+    <div class="calendar-body">
+      <!-- calendar previous month -->
+      <div class="calendar-date prev-month">
+        <button class="date-item">26</button>
+      </div>
+      ...
+      <div class="calendar-date prev-month">
+        <button class="date-item">28</button>
+      </div>
+
+      <!-- calendar current month -->
+      <div class="calendar-date">
+        <button class="date-item">1</button>
+      </div>
+      <div class="calendar-date">
+        <button class="date-item">2</button>
+      </div>
+      <div class="calendar-date">
+        <button class="date-item">3</button>
+      </div>
+      <!-- calendar date: today -->
+      <div class="calendar-date">
+        <button class="date-item date-today">4</button>
+      </div>
+      <!-- calendar date: tooltip -->
+      <div class="calendar-date tooltip" data-tooltip="You have appointments">
+        <button class="date-item">5</button>
+      </div>
+      <!-- calendar date: not available -->
+      <div class="calendar-date tooltip" data-tooltip="Not available">
+        <button class="date-item" disabled="">6</button>
+      </div>
+
+      <!-- calendar range -->
+      <div class="calendar-date calendar-range range-start">
+        <button class="date-item">7</button>
+      </div>
+      <div class="calendar-date calendar-range">
+        <button class="date-item">8</button>
+      </div>
+      <div class="calendar-date calendar-range range-end">
+        <button class="date-item">9</button>
+      </div>
+      ...
+      <div class="calendar-date">
+        <button class="date-item">31</button>
+      </div>
+
+      <!-- calendar next month -->
+      <div class="calendar-date next-month">
+        <button class="date-item">1</button>
+      </div>
+    </div>
+  </div>
+</div>
+

Calendars sizes

@@ -409,110 +488,110 @@
Sat
-
+
-
+
Zhonghe Festival
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
Product launch eventInternational Women's Day
-
+
-
+
-
+
-
+
Arbor Day
-
+
-
+
-
+
-
- +
+
-
+
-
+
-
+
-
- +
+
Spring Equinox
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
@@ -524,6 +603,23 @@
+ 
<div class="calendar calendar-lg">
+  <!-- calendar navbar structure -->
+
+  <div class="calendar-container">
+    <!-- calendar header structure -->
+
+    <div class="calendar-body">
+      <!-- calendar date with events -->
+      <div class="calendar-date">
+        <button class="date-item active">20</button>
+        <div class="calendar-events">
+          <a class="calendar-event bg-success text-light" href="#calendars">Spring Equinox</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

Carousels

-- cgit v1.3.1-23-gd82d