diff options
Merge pull request #147 from picturepan2/feature/bars v0.2.3
Feature/bars
1 files changed, 72 insertions, 22 deletions
| -rw-r--r-- | docs/components.html | 94 |
diff --git a/docs/components.html b/docs/components.html index 4e4662e..cf2a2ec 100644 --- a/docs/components.html +++ b/docs/components.html @@ -53,6 +53,9 @@ <a href="components.html#badges">Badges</a> </li> <li class="nav-item"> + <a href="components.html#bars">Bars</a> + </li> + <li class="nav-item"> <a href="components.html#cards">Cards</a> </li> <li class="nav-item"> @@ -176,7 +179,6 @@ <p>Add a container element with the class <code>form-autocomplete</code>. There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component. You may add the class <code>is-focused</code> to <code>form-autocomplete-input</code> to make it appear as focus state.</p> <p>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.</p> </section> - <!-- autocomplete example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete"</span>> @@ -254,12 +256,10 @@ <figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #5764c6;"></figure> </div> </div> - <section class="notes"> <p>Add the class <code>avatar</code> to <img> element. There are 4 additional sizes available, including <code>avatar-xl</code> (64px), <code>avatar-lg</code> (48px), <code>avatar-sm</code> (24px), and <code>avatar-xs</code> (16px). By default, the avatar size is 32px.</p> <p>For users who don't have profile pictures, you may use their initials for avatars. Add the class <code>avatar</code> and avatar size class to <div> element. The attribute <code>data-initial</code> is the name appear inside the avatar.</p> </section> - <div class="columns"> <div class="column col-6 col-xs-12"> <figure class="avatar avatar-xl"> @@ -284,7 +284,6 @@ </figure> </div> </div> - <!-- avatars example --> <pre> <code class="code lang-html" data-lang="HTML"><span class="com"><!-- Basic avatar examples --></span> @@ -335,18 +334,82 @@ </div> <section class="notes"> <p>Add the class <code>badge</code> to non self closing elements. And add the attribute <code>data-badge</code> to define the content of a badge. The badge will appear in the top-right direction of the element. </p> - <p>If there is no <code>data-badge</code> or the attribute is empty, the badge will appear as a dot.</p> + <p>If there is no <code>data-badge</code> or the attribute is not specified, the badge will appear as a dot.</p> + </section> + <div class="columns"> + <div class="column col-xs-6"> + <button class="btn badge" data-badge="">Button</button> + </div> + <div class="column col-xs-6"> + <button class="btn badge" data-badge="8">Button</button> + </div> + <div class="column col-xs-6"> + <button class="btn btn-primary badge" data-badge="">Button</button> + </div> + <div class="column col-xs-6"> + <button class="btn btn-primary badge" data-badge="8">Button</button> + </div> + </div> + <section class="notes"> + <p>Badges support <code>button</code> elements as well. </p> </section> - <!-- badges example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"badge"</span> <span class="atn">data-badge</span>=<span class="atv">""</span>> Notifications <<span class="tag">/span</span>> -<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"badge"</span> <span class="atn">data-badge</span>=<span class="atv">"99"</span>> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"badge"</span> <span class="atn">data-badge</span>=<span class="atv">"88"</span>> Notifications -<<span class="tag">/span</span>></code> +<<span class="tag">/span</span>> + +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn badge"</span> <span class="atn">data-badge</span>=<span class="atv">"88"</span>> + Button +<<span class="tag">/button</span>></code> +</pre> + </section> + + <section id="bars" class="container"> + <header class="text-center"><h3>Bars</h3></header> + <section class="notes"> + <p><strong>Bars</strong> represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <code>progress</code> and <code>meter</code> elements.</p> + </section> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <div class="bar bar-sm"> + <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="bar"> + <div class="bar-item tooltip" data-tooltip="50%" style="width:50%;"></div> + </div> + </div> + </div> + <div class="columns"> + <div class="column col-12 col-xs-12"> + <div class="bar"> + <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div> + <div class="bar-item tooltip" data-tooltip="15%" style="width:15%;background:#818bd5;">15%</div> + <div class="bar-item tooltip" data-tooltip="10%" style="width:10%;background:#abb1e2;">10%</div> + <div class="bar-item tooltip" data-tooltip="15%" style="width:15%;">15%</div> + </div> + </div> + </div> + <section class="notes"> + <p>Add a container element with the class <code>bar</code>. And add child elements with the class <code>bar-item</code>. The width percentage value is needed for every <code>bar-item</code>.</p> + <p>There is a class <code>bar-sm</code> for thinner Bars. Also, you could use <a href="#tooltips">Tooltips</a> for each <code>bar-item</code>.</p> + </section> +<!-- bars example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar bar-sm"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar-item"</span> <span class="atn">role</span>=<span class="atv">"progressbar"</span> <span class="atn">style</span>=<span class="atv">"width:25%;"</span> <span class="atn">aria-valuenow</span>=<span class="atv">"25"</span> <span class="atn">aria-valuemin</span>=<span class="atv">"0"</span> <span class="atn">aria-valuemax</span>=<span class="atv">"100"</span>><<span class="tag">/div</span>> +<<span class="tag">/div</span>> + +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar-item tooltip"</span> <span class="atn">data-tooltip</span>=<span class="atv">"25%"</span> <span class="atn">style</span>=<span class="atv">"width:25%;"</span>>25%<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar-item"</span> <span class="atn">style</span>=<span class="atv">"width:15%;background:#818BD5;"</span>>15%<<span class="tag">/div</span>> +<<span class="tag">/div</span>></code> </pre> </section> @@ -424,7 +487,6 @@ <div class="card-body"> <strong>Surface Studio</strong>. Turn your desk into a Studio. Surface Studio is designed for the creative process. </div> - </div> </div> <div class="column col-6 col-xs-12"> @@ -519,11 +581,9 @@ </div> </div> </div> - <section class="notes"> <p>Add a container element with the class <code>chip</code>. And add child text element, buttons or avatars with the class <code>avatar</code>.</p> </section> - <!-- chips example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> @@ -537,7 +597,6 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> <<span class="tag">/div</span>></code> </pre> - </section> <section id="dropdowns" class="container"> @@ -696,7 +755,6 @@ </li> </ul> </div> - <div class="column col-xs-12"> <ul class="menu"> <li class="menu-header"> @@ -725,7 +783,6 @@ <section class="notes"> <p>Add a container element with the class <code>menu</code>. And add child elements with the classname <code>menu-item</code>. You can separate menu items with a <code>divider</code> or <code>menu-header</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p> </section> - <!-- menus example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> @@ -941,7 +998,6 @@ <section class="notes"> <p>Add a container element with the class <code>breadcrumb</code>. And add child elements with the classname <code>breadcrumb-item</code>.</p> </section> - <!-- breadcrumbs example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"breadcrumb"</span>> @@ -1067,7 +1123,6 @@ </ul> </div> </div> - <section class="notes"> <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>. </p> </section> @@ -1434,7 +1489,6 @@ <p>Add a container with the class <code>tile</code>. And add child elements with the class name <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code>. The <code>tile-icon</code> and <code>tile-action</code> are optional.</p> <p>There are <code>tile-title</code> and <code>tile-meta</code> classes for title and meta text styles.</p> </section> - <!-- tiles example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile"</span>> @@ -1452,7 +1506,6 @@ <<span class="tag">/div</span>> <<span class="tag">/div</span>></code> </pre> - <section class="notes"> <p>There is compact version of Tiles component, which is often used as contact and file info blocks.</p> <p>Add the class <code>tile-centered</code> to the container <code>tile</code>. The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.</p> @@ -1475,7 +1528,6 @@ </div> </div> </div> - <!-- tiles example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile tile-centered"</span>> @@ -1536,7 +1588,6 @@ <section class="notes"> <p>And you can add the class <code>toast-primary</code>, <code>toast-success</code> or <code>toast-danger</code> for additional toast colors.</p> </section> - <!-- toasts example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"toast"</span>> @@ -1572,10 +1623,9 @@ </div> </div> <section class="notes"> - <p>Tooltip component is built entirely in CSS.</p> + <p>Tooltips component is built entirely in CSS.</p> <p>Add the class <code>tooltip</code> and the attribute <code>data-tooltip</code>, which contains the tooltip content, to non self closing elements. And add the class name <code>tooltip-right</code>, <code>tooltip-bottom</code> or <code>tooltip-left</code> to define the position of a tooltip. By default, the tooltip appears above the element.</p> </section> - <!-- tooltips example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn tooltip"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Lorem ipsum dolor sit amet"</span>>top tooltip<<span class="tag">/button</span>> |