From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/experimentals.html | 1133 +++++------------------------------------------ 1 file changed, 108 insertions(+), 1025 deletions(-) (limited to 'docs/experimentals.html') diff --git a/docs/experimentals.html b/docs/experimentals.html index 47c51e9..94a7a9f 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -23,7 +23,8 @@
@@ -31,11 +32,14 @@
@@ -44,14 +48,22 @@
@@ -60,9 +72,12 @@
@@ -71,25 +86,44 @@
@@ -98,14 +132,22 @@
@@ -114,17 +156,28 @@
@@ -141,976 +194,6 @@ Sometimes, there are some specific browsers targeted components.

-
-

Autocomplete

-
-
- - - -
-
- - -
-
-

Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.

-
-
-
-
-
Bruce Banner -
AvatarThor Odinson
-
AvatarSteve Rogers
-
-
Tony Stark -
Natasha Romanoff - -
-
-
-
-
-
-
-
Bruce BannerThor OdinsonThor Odinson -
- -
-
- -
-
-
-
-

Add a container element with the form-autocomplete class. - There are 2 parts of it, one is form-autocomplete-input, another is menu component. - You may add the is-focused class to form-autocomplete-input to make it appear as focus state. -

-

- Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. - The autocomplete HTML structure is exampled below. -

-
-
-
-
-
Bruce Banner -
AvatarThor Odinson
-
AvatarSteve Rogers
-
-
Tony Stark -
Natasha Romanoff - -
-
-
-
-
- 
<div class="form-autocomplete">
-  <!-- autocomplete input container -->
-  <div class="form-autocomplete-input form-input">
-
-    <!-- autocomplete chips -->
-    <div class="chip">
-      <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson">
-      Thor Odinson
-      <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
-    </div>
-
-    <!-- autocomplete real input box -->
-    <input class="form-input" type="text" placeholder="typing here">
-  </div>
-
-  <!-- autocomplete suggestion list -->
-  <ul class="menu">
-    <!-- menu list items -->
-    <li class="menu-item">
-      <a href="#">
-        <div class="tile tile-centered">
-          <div class="tile-icon">
-            ...
-          </div>
-          <div class="tile-content">
-            ...
-          </div>
-        </div>
-      </a>
-    </li>
-  </ul>
-</div>
-
-
-

Calendars

-
- -
-

Calendars are designed for date or date range picker and events display. It is made with flex layout.

-
-
-
-
- -
March 2017
- -
-
-
-
Sun
-
Mon
-
Tue
-
Wed
-
Thu
-
Fri
-
Sat
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
-
-
- 
<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

-
-
-
-
- -
March 2017
- -
-
-
-
Sun
-
Mon
-
Tue
-
Wed
-
Thu
-
Fri
-
Sat
-
-
-
- -
-
- -
Zhonghe Festival
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
Product launch eventInternational Women's Day
-
-
- -
-
- -
-
- -
-
- -
Arbor Day
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
Spring Equinox
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
April Fools' Day
-
-
-
-
-
-
- 
<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

-

Carousels are slideshows for cycling images. It is built in pure CSS.

-
-
-
- - - - -
-
- - macOS Yosemite Wallpaper -
-
- - macOS Yosemite Wallpaper -
-
- - macOS Yosemite Wallpaper -
-
- - macOS Yosemite Wallpaper -
-
-
- - - - -
-
-
-
- 
<div class="carousel">
-  <!-- carousel locator -->
-  <input class="carousel-locator" id="slide-1" type="radio" name="carousel-radio" hidden="" checked="">
-  <input class="carousel-locator" id="slide-2" type="radio" name="carousel-radio" hidden="">
-  <input class="carousel-locator" id="slide-3" type="radio" name="carousel-radio" hidden="">
-  <input class="carousel-locator" id="slide-4" type="radio" name="carousel-radio" hidden="">
-  
-  <!-- carousel container -->
-  <div class="carousel-container">
-    <!-- carousel item -->
-    <figure class="carousel-item">
-      <label class="item-prev btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-left"></i></label>
-      <label class="item-next btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper">
-    </figure>
-    <figure class="carousel-item">
-      <label class="item-prev btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-left"></i></label>
-      <label class="item-next btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
-    </figure>
-    <figure class="carousel-item">
-      <label class="item-prev btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-left"></i></label>
-      <label class="item-next btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-el-capitan.jpg" alt="macOS Yosemite Wallpaper">
-    </figure>
-    <figure class="carousel-item">
-      <label class="item-prev btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-left"></i></label>
-      <label class="item-next btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-el-capitan-2.jpg" alt="macOS Yosemite Wallpaper">
-    </figure>
-  </div>
-  <!-- carousel navigation -->
-  <div class="carousel-nav">
-    <label class="nav-item text-hide c-hand" for="slide-1">1</label>
-    <label class="nav-item text-hide c-hand" for="slide-2">2</label>
-    <label class="nav-item text-hide c-hand" for="slide-3">3</label>
-    <label class="nav-item text-hide c-hand" for="slide-4">4</label>
-  </div>
-</div>
-
-
-

Comparison sliders

-
-
- - - -
-
- - -
-
-

Comparison Sliders are sliders for comparing two images. It is built in pure CSS.

-
-
-
-
macOS Sierra Wallpaper -
Before
-
-
macOS Sierra Wallpaper -
After
- -
-
-
-
- 
<div class="comparison-slider">
-  <figure class="comparison-before">
-    <!-- image (before) -->
-    <div class="comparison-label">Before</div>
-  </figure>
-
-  <figure class="comparison-after">
-    <!-- image (after) -->
-    <div class="comparison-label">After</div>
-    <textarea class="comparison-resizer" readonly></textarea>
-  </figure>
-</div>
-
-
-

Filters

-

Filters are CSS only content filters.

-
-
-
- - - - - -
- - - - - -
-
-
-
-
-
Fallout 4
-
Roleplaying
-
-
-
-
-
-
-
Halo 5
-
Shooter
-
-
-
-
-
-
-
Quantum Break
-
Action
-
-
-
-
-
-
-
Forza Horizon 3
-
Sports
-
-
-
-
-
-
-
Final Fantasy XV
-
Roleplaying
-
-
-
-
-
-
-
NBA 2K17
-
Sports
-
-
-
-
-
-
-
Battlefield 1
-
Shooter
-
-
-
-
-
-
-
GTA V
-
Action
-
-
-
-
-
-
-
FIFA 17
-
Sports
-
-
-
-
-
-
-
Overwatch
-
Shooter
-
-
-
-
-
-
-
Titanfall 2
-
Shooter
-
-
-
-
-
-
-
Gears of Wars 4
-
Shooter
-
-
-
-
-
-
-
-

Filters use tag-1 to tag-8 to flag different tags. - tag-0 is reserved for clearing filter (or showing all). - You can overwrite $filter-number in _filters.scss to have more filters. -

- 
<div class="filter">
-  <input type="radio" id="tag-0" class="filter-tag" name="filter-radio" hidden checked>
-  <input type="radio" id="tag-1" class="filter-tag" name="filter-radio" hidden>
-  <input type="radio" id="tag-2" class="filter-tag" name="filter-radio" hidden>
-
-  <div class="filter-nav">
-    <label class="chip" for="tag-0">All</label>
-    <label class="chip" for="tag-1">Action</label>
-    <label class="chip" for="tag-2">Roleplaying</label>
-  </div>
-
-  <div class="filter-body">
-    <div class="filter-item card" data-tag="tag-1">
-      <!-- Filter item content -->
-    </div>
-    <div class="filter-item card" data-tag="tag-2">
-      <!-- Filter item content -->
-    </div>
-    <!-- Filter items -->
-  </div>
-</div>
-
-
-

Meters

-

Meters represent the value within the known range.

-
-
- -
-
- -
-
- -
-
- -
-
- 
<!-- Meter is green when low < value < high -->
-<meter class="meter" value="20" min="0" max="100"></meter>
-<meter class="meter" value="60" min="0" max="100" low="30" high="80"></meter>
-<!-- Meter is yellow when value < low  or high < value -->
-<meter class="meter" value="85" min="0" max="100" low="30" high="80"></meter>
-<!-- Meter is red when value < low < high < optimum or optimum < low < high < value -->
-<meter class="meter" value="20" optimum="90" min="0" max="100" low="30" high="80"></meter>
-
-
-

Off-canvas

-

The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS.

-

- By default, the off-canvas menu is collapsed whenever the window width is. - But you can add the off-canvas-sidebar-show class to the off-canvas to make the sidebar expanded when the window width is larger than or equal to 960px. -

-
-
-
- -
-
-

Lorem ipsum

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

-

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

-
-
-
-
-
-

You can open the sidebar by adding the class active to off-canvas-sidebar. - And remove the active to close it. -

- 
<div class="off-canvas">
-  <!-- off-screen toggle button -->
-  <a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-id">
-    <i class="icon icon-menu"></i>
-  </a>
-
-  <div id="sidebar-id" class="off-canvas-sidebar">
-    <!-- off-screen sidebar -->
-  </div>
-
-  <a class="off-canvas-overlay" href="#close"></a>
-
-  <div class="off-canvas-content">
-    <!-- off-screen content -->
-  </div>
-</div>
-
-
-

Parallax

-
-
- - - -
-
- - -
-
-

The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.

-
-
-
-
-
-
-
-
-
-

tvOS parallax demo

-
-
macOS Yosemite Wallpaper
-
-
-
-
- 
<div class="parallax">
-  <div class="parallax-top-left" tabindex="1"></div>
-  <div class="parallax-top-right" tabindex="2"></div>
-  <div class="parallax-bottom-left" tabindex="3"></div>
-  <div class="parallax-bottom-right" tabindex="4"></div>
-  <div class="parallax-content">
-    <div class="parallax-front">
-      <h2>tvOS parallax demo</h2>
-    </div>
-    <div class="parallax-back">
-      <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" ...>
-    </div>
-  </div>
-</div>
-
-
-
-

Progress

-

The Progress indicates the progress completion of a task.

-
-
- -
-
- -
-
- -
-
- -
-
- 
<progress class="progress" value="25" max="100"></progress>
-<progress class="progress" max="100"></progress>
-
-
-

Sliders

-

Sliders are for selecting values from ranges.

-

You can add the class tooltip to have tooltip labels. - If no data-tooltip is set, the value will be used instead. -

-
-
- -
-
- -
-
- 
<!-- Sliders -->
-<input class="slider" type="range" min="0" max="100" value="50">
-<!-- Sliders with tooltips -->
-<input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);">
-
-
-

Timelines

-

Timelines are ordered sequences of activities.

-
-
-
-
-
-
-
-
-

March 2016

-

Initial commit

-
-
-
-
-
-
-
-
-
-

February 2017

-

New Documents experience

-

Bars: represent the progress of a task

-

Steps: progress indicators of a sequence of task steps

-

Tiles: repeatable or embeddable information blocks

-
-
- -
-
-
-
-
-
-
-
-
-

March 2017

-

Icons: single-element, responsive and pure CSS icons

-

Popovers: small overlay content containers

-

Calendars: date or date range picker and events display

-

Carousels: slideshows for cycling images

-
-
- -
-
-
-
-
-
-
- 
<div class="timeline">
-  <div class="timeline-item" id="timeline-example-1">
-    <div class="timeline-left">
-      <a class="timeline-icon" href="#timeline-example-1"></a>
-    </div>
-    <div class="timeline-content">
-      <!-- tiles structure -->
-    </div>
-  </div>
-
-  <div class="timeline-item" id="timeline-example-2">
-    <div class="timeline-left">
-      <a class="timeline-icon icon-lg" href="#timeline-example-2">
-        <i class="icon icon-check"></i>
-      </a>
-    </div>
-    <div class="timeline-content">
-      <!-- tiles structure -->
-    </div>
-  </div>
-  ...
-</div>
-