From 6a0b4cbb5895496ab8e204b5ef04732c4d9fdf1a Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Mon, 20 Feb 2017 10:26:45 +0800 Subject: ADD: New Documents experience --- docs/components.html | 1335 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1335 insertions(+) create mode 100644 docs/components.html (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html new file mode 100644 index 0000000..994082c --- /dev/null +++ b/docs/components.html @@ -0,0 +1,1335 @@ + + + + + + + + + Components - Spectre.css + + + + + +
+
+ +
+
+ +
+
+
+ +
+
+
+

Autocomplete

+
+

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

+
+
+
+
+
+
+
+ Bruce Banner + +
+
+ + Thor Odinson + +
+
+ + Steve Rogers + +
+
+
+ Tony Stark + +
+
+ Natasha Romanoff + +
+ +
+
+
+
+
+
+
+
+
+ Bruce Banner + +
+
+ + Thor Odinson + +
+ +
+ +
+
+
+
+
+

Add a container element with the class form-autocomplete. There are 2 parts of it, one is form-autocomplete-input, another is menu component. 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.

+
+ + +
+<div class="form-autocomplete">
+  <!-- autocomplete input container -->
+  <div class="form-autocomplete-input">
+    <!-- autocomplete chips -->
+    <div class="chip-sm">
+      <img src="img/avatar-1.png" class="avatar" />
+      Yan Zhu
+      <button class="btn btn-clear"></button>
+    </div>
+    <div class="chip-sm selected">
+      <img src="img/avatar-2.png" class="avatar" />
+      Yan Zhu
+      <button class="btn btn-clear"></button>
+    </div>
+    <!-- autocomplete real input box -->
+    <input class="form-input" type="text" placeholder="typing here" />
+  </div>
+  <!-- autocomplete suggestion list -->
+  <ul class="menu">
+    <!-- menu list chips -->
+    <li class="menu-item">
+      <a href="#">
+        <div class="chip">
+          <div class="chip-icon">
+            <img src="img/avatar-4.png" class="avatar" />
+          </div>
+          <div class="chip-content">
+            Steve Rogers
+          </div>
+        </div>
+      </a>
+    </li>
+    <li class="menu-item">
+      <a href="#">
+        <div class="chip">
+          <div class="chip-icon">
+            <img src="img/avatar-3.png" class="avatar" />
+          </div>
+          <div class="chip-content">
+            Yan Zhu
+          </div>
+        </div>
+      </a>
+    </li>
+  </ul>
+</div>
+
+
+ +
+

Avatars

+
+

Avatars are user profile pictures.

+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+

Add the class avatar to <img> element. There are 4 additional sizes available, including avatar-xl (64px), avatar-lg (48px), avatar-sm (24px), and avatar-xs (16px). By default, the avatar size is 32px.

+

For users who don't have profile pictures, you may use their initials for avatars. Add the class avatar and avatar size class to <div> element. The attribute data-initial is the name appear inside the avatar.

+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+<!-- Basic avatar examples -->
+<figure class="avatar avatar-xl">
+  <img src="img/avatar-1.png" />
+</figure>
+
+<figure class="avatar avatar-xl">
+  <img src="img/avatar-1.png" />
+  <img src="img/avatar-5.png" class="avatar-icon" />
+</figure>
+
+<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"></figure>
+
+<!-- Show initals when avatar image is unavailable or not fully loaded -->
+<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;">
+  <img src="img/avatar-1.png" />
+</figure>
+
+
+ +
+

Badges

+
+

Badges are often used as unread number indicators.

+
+
+
+ + Notifications + +
+
+ + Notifications + +
+
+ + Notifications + +
+
+ + Notifications + +
+
+
+

Add the class badge to non self closing elements. And add the attribute data-badge to define the content of a badge. The badge will appear in the top-right direction of the element.

+

If there is no data-badge or the attribute is empty, the badge will appear as a dot.

+
+ + +
+<span class="badge" data-badge="">
+  Notifications
+</span>
+
+<span class="badge" data-badge="99">
+  Notifications
+</span>
+
+
+ +
+

Cards

+
+

Cards are flexible content containers.

+
+
+
+
+
+ +
+
+

Microsoft

+
Software and hardware
+
+
+ Empower every person and every organization on the planet to achieve more. +
+
+ Do +
+
+
+
+
+
+

Apple

+
Hardware and software
+
+
+ +
+
+ To make a contribution to the world by making tools for the mind that advance humankind. +
+
+
+ + + +
+
+
+
+
+
+
+

Google

+
Software and hardware
+
+
+ Organize the world’s information and make it universally accessible and useful. +
+
+ +
+
+ Search + Share +
+
+
+
+
+
+ +
+
+ Buy + Share +
+
+ Surface Studio. Turn your desk into a Studio. Surface Studio is designed for the creative process. +
+ +
+
+
+
+
+

Apple

+
Hardware and software
+
+
+ To make a contribution to the world by making tools for the mind that advance humankind. +
+
+ +
+
+
+
+
+
+

Google I/O

+
+
+ An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. +
+
+
+
+
Google
+
Software and hardware
+
+
+ +
+
+
+
+
+
+
+

Add a container element with the class card. And add child elements with the class name card-image, card-header, card-content and/or card-footer. The card-image can be placed in any position.

+
+ +
+<div class="card">
+  <div class="card-image">
+    <img src="img/osx-el-capitan.jpg" class="img-responsive" />
+  </div>
+  <div class="card-header">
+    <h4 class="card-title">Microsoft</h4>
+    <h6 class="card-meta">Software and hardware</h6>
+  </div>
+  <div class="card-body">
+    To make a contribution to the world by making tools for the mind that advance humankind.
+  </div>
+  <div class="card-footer">
+    <button class="btn btn-primary">Do</button>
+  </div>
+</div>
+
+
+ +
+

Chips

+
+

Chips are complex entities in small blocks.

+
+
+
+
+ Crime + +
+
+ Drama + +
+
+ Biography + +
+
+ Mystery + +
+
+
+
+
+ Tony Stark + +
+
+ + Thor Odinson + +
+
+ + Steve Rogers +
+
+
+ +
+

Add a container element with the class chip-sm. And add child text element, buttons or avatars with the class avatar.

+
+ +
+
+
+
+ +
+
+
Tony Stark
+
Iron man
+
+
+ +
+
+
+
+ + +
+<div class="chip-sm">
+  Crime
+  <button class="btn btn-clear"></button>
+</div>
+
+<div class="chip-sm">
+  <img src="img/avatar-1.png" class="avatar" />
+  Yan Zhu
+  <button class="btn btn-clear"></button>
+</div>
+
+ +
+ + + + + +
+

Modals

+
+

Modals are flexible dialog prompts.

+
+
+
+
+
+
+
+ +
Modal title
+
+
+
+

This is the content inside the modal.

+

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.

+

Cupcake ipsum

+

Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.

+

De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.

+

Candy ipsum

+

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.

+

Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.

+
+
+
+ + +
+
+
+
+
+
+

Add a container element with the class modal. And add a real container modal-container and overlay modal-overlay inside it. You can add child elements with the class name modal-header, modal-content and modal-footer - any or all of them.

+

Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the class active to the modal container

+
+ +
+<div class="modal active">
+  <div class="modal-overlay"></div>
+  <div class="modal-container">
+    <div class="modal-header">
+      <button class="btn btn-clear float-right"></button>
+      <div class="modal-title">Modal title</div>
+    </div>
+    <div class="modal-body">
+      <div class="content">
+        <!-- content here -->
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-link">Close</button>
+      <button class="btn btn-primary">Share</button>
+    </div>
+  </div>
+</div>
+
+ +

Modal sizes

+
+
+
+
+
+
+ +
Modal title
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
+
+
+ + +
+
+
+
+
+
+
+
+
+ +
Modal title
+
+
+
+
+
+ + +
+
+ + + +
+
+
+
+
+ + +
+
+
+
+
+
+

Add the class modal-sm for a smaller modal dialog.

+
+ +
+<div class="modal modal-sm">
+  <div class="modal-overlay"></div>
+  <div class="modal-container">
+    <!-- modal structure here -->
+  </div>
+</div>
+
+
+ + + +
+

Toasts

+
+

Toasts are used to show alert or information to users.

+
+
+
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
+
+
+
+

Add a container element with the class toast. You can add any text within the container, and even icons. You may also add a close button with the class btn-clear if you need.

+
+
+
+
+ Toast primary +
+
+
+
+ Toast success +
+
+
+
+ Toast danger +
+
+
+
+

And you can add the class toast-primary, toast-success or toast-danger for additional toast colors.

+
+ + +
+<div class="toast">
+  <button class="btn btn-clear float-right"></button>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+</div>
+
+<div class="toast toast-primary">
+  <button class="btn btn-clear float-right"></button>
+  <i class="icon icon-error_outline"></i>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+</div>
+
+
+ +
+

Tooltips

+
+

Tooltips provide context information labels that appear on hover and focus.

+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+

Tooltip component is built entirely in CSS.

+

Add the class tooltip and the attribute data-tooltip, which contains the tooltip content, to non self closing elements. And add the class name tooltip-right, tooltip-bottom or tooltip-left to define the position of a tooltip. By default, the tooltip appears above the element.

+
+ + +
+<button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
+<button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>
+
+
+
+
+
+ + + + + -- cgit v1.3.1-23-gd82d