From 92012cae19ff70b693ef8b2a6a927c5a4d18c104 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Mon, 20 Mar 2017 15:32:25 +0800 Subject: Add Popovers docs --- README.md | 1 + docs/components.html | 22 +++++++++++++++++++--- docs/index.html | 3 +++ 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index d3d1040..b07c1eb 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,7 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt - [Menus](http://picturepan2.github.io/spectre/components.html#menus) - list of links or buttons for actions and navigation - [Modals](http://picturepan2.github.io/spectre/components.html#modals) - flexible dialog prompts - [Navigation](http://picturepan2.github.io/spectre/components.html#navigation) - breadcrumb, tabs, pagination and navs +- [Popovers](http://picturepan2.github.io/spectre/components.html#popovers) - small overlay content containers - [Steps](http://picturepan2.github.io/spectre/components.html#steps) - progress indicators of a sequence of task steps - [Tiles](http://picturepan2.github.io/spectre/components.html#tiles) - repeatable or embeddable information blocks - [Toasts](http://picturepan2.github.io/spectre/components.html#toasts) - showing alerts or notifications diff --git a/docs/components.html b/docs/components.html index 4512945..565f1b9 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1469,11 +1469,27 @@
-

+

Wrap an element by a container with the popover class. And add a container with the popover-container next to the element. You can use Cards component inside the popover-container.

+

Also, you can add the popover-right, popover-bottom or popover-left class to define the position. By default, the popovers appear above the element.

- -

+
+
<div class="popover popover-right">
+  <button class="btn btn-primary">right popover</button>
+  <div class="popover-container">
+    <div class="card">
+      <div class="card-header">
+        ...
+      </div>
+      <div class="card-body">
+        ...
+      </div>
+      <div class="card-footer">
+        ...
+      </div>
+    </div>
+  </div>
+</div>
 

 
         
diff --git a/docs/index.html b/docs/index.html
index 6992015..23b260c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -309,6 +309,9 @@
           

             
March 2017

             
    
+              
  • 
+                Popovers: small overlay content containers NEW
+              
    • 
               
  • 
                 Panels: flexible view container layout with auto-expand content section NEW
               
    • 
-- 
cgit v1.3.1-23-gd82d