diff options
Add Popovers docs
3 files changed, 23 insertions, 3 deletions
| -rw-r--r-- | README.md | 1 | ||||
| -rw-r--r-- | docs/components.html | 22 | ||||
| -rw-r--r-- | docs/index.html | 3 |
@@ -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 @@ </div> </div> <section class="notes"> - <p></p> + <p>Wrap an element by a container with the <code>popover</code> class. And add a container with the <code>popover-container</code> next to the element. You can use <a href="#cards">Cards</a> component inside the <code>popover-container</code>. </p> + <p>Also, you can add the <code>popover-right</code>, <code>popover-bottom</code> or <code>popover-left</code> class to define the position. By default, the popovers appear above the element.</p> </section> -<!-- steps example --> -<pre class="code" data-lang="HTML"><code> +<!-- popovers example --> +<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"popover popover-right"</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>right popover<<span class="tag">/button</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"popover-container"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-header"</span>> + ... + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-body"</span>> + ... + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-footer"</span>> + ... + <<span class="tag">/div</span>> + <<span class="tag">/div</span>> + <<span class="tag">/div</span>> +<<span class="tag">/div</span>> </code></pre> </section> diff --git a/docs/index.html b/docs/index.html index 6992015..23b260c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -310,6 +310,9 @@ <p><strong>March 2017</strong></p> <ul> <li> + <a href="components.html#popovers">Popovers</a>: small overlay content containers <small class="label label-primary">NEW</small> + </li> + <li> <a href="layout.html#panels">Panels</a>: flexible view container layout with auto-expand content section <small class="label label-primary">NEW</small> </li> <li> |