diff options
CHG: Split Codes and improve docs codes
1 files changed, 104 insertions, 87 deletions
| -rw-r--r-- | docs/components.html | 191 |
diff --git a/docs/components.html b/docs/components.html index cf2a2ec..46fc50a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -179,9 +179,9 @@ <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>> +<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete"</span>> <span class="com"><!-- autocomplete input container --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete-input"</span>> <span class="com"><!-- autocomplete chips --></span> @@ -221,8 +221,9 @@ <<span class="tag">/a</span>> <<span class="tag">/li</span>> <<span class="tag">/ul</span>> -<<span class="tag">/div</span>></code> -</pre> +<<span class="tag">/div</span>> +</code></pre> + </section> <section id="avatars" class="container"> @@ -284,9 +285,9 @@ </figure> </div> </div> + <!-- avatars example --> -<pre> -<code class="code lang-html" data-lang="HTML"><span class="com"><!-- Basic avatar examples --></span> +<pre class="code" data-lang="HTML"><code><span class="com"><!-- Basic avatar examples --></span> <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span>> <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> /> <<span class="tag">/figure</span>> @@ -301,8 +302,9 @@ <span class="com"><!-- Show initals when avatar image is unavailable or not fully loaded --></span> <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span> <span class="atn">style</span>=<span class="atv">"background-color: #5764c6;"</span>> <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> /> -<<span class="tag">/figure</span>></code> -</pre> +<<span class="tag">/figure</span>> +</code></pre> + </section> <section id="badges" class="container"> @@ -353,9 +355,9 @@ <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>> +<pre class="code" data-lang="HTML"><code><<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>> @@ -365,8 +367,9 @@ <<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> +<<span class="tag">/button</span>> +</code></pre> + </section> <section id="bars" class="container"> @@ -398,19 +401,20 @@ </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> + <p>There is a class <code>bar-sm</code> for thinner Bars. Also, you could use <a href="#tooltips">Tooltips</a> for any <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>> +<pre class="code" data-lang="HTML"><code><<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> +<<span class="tag">/div</span>> +</code></pre> + </section> <section id="cards" class="container"> @@ -522,9 +526,9 @@ <section class="notes"> <p>Add a container element with the class <code>card</code>. And add child elements with the class name <code>card-image</code>, <code>card-header</code>, <code>card-content</code> and/or <code>card-footer</code>. The <code>card-image</code> can be placed in any position. </p> </section> + <!-- cards example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card"</span>> +<pre class="code" data-lang="HTML"><code><<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-image"</span>> <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive"</span> /> <<span class="tag">/div</span>> @@ -538,8 +542,9 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-footer"</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>Do<<span class="tag">/button</span>> <<span class="tag">/div</span>> -<<span class="tag">/div</span>></code> -</pre> +<<span class="tag">/div</span>> +</code></pre> + </section> <section id="chips" class="container"> @@ -584,9 +589,9 @@ <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>> +<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> Crime <<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>> @@ -597,6 +602,7 @@ <<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"> @@ -682,9 +688,9 @@ <section class="notes"> <p>Also, you can implement your JS to interact with the dropdown menus by adding the class <code>active</code> to the <code>dropdown</code>.</p> </section> + <!-- dropdowns example --> -<pre> -<code class="code lang-html" data-lang="HTML"><span class="com"><!-- basic dropdown button --></span> +<pre class="code" data-lang="HTML"><code><span class="com"><!-- basic dropdown button --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"dropdown"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link dropdown-toggle"</span> <span class="atn">tabindex</span>=<span class="atv">"0"</span>> dropdown menu <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon-caret"</span>><<span class="tag">/i</span>> @@ -715,8 +721,9 @@ ... <<span class="tag">/ul</span>> <<span class="tag">/div</span>> -<<span class="tag">/div</span>></code> -</pre> +<<span class="tag">/div</span>> +</code></pre> + </section> <section id="menus" class="container"> @@ -783,9 +790,9 @@ <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>> +<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> <span class="com"><!-- menu header --></span> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-header"</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"menu-header-text"</span>> @@ -815,8 +822,9 @@ <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Settings <<span class="tag">/a</span>> <<span class="tag">/li</span>> -<<span class="tag">/ul</span>></code> -</pre> +<<span class="tag">/ul</span>> +</code></pre> + </section> <section id="modals" class="container"> @@ -860,9 +868,9 @@ <p>Add a container element with the class <code>modal</code>. And add a real container <code>modal-container</code> and overlay <code>modal-overlay</code> inside it. You can add child elements with the class name <code>modal-header</code>, <code>modal-content</code> and <code>modal-footer</code> - any or all of them. </p> <p>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 <code>active</code> to the <code>modal</code> container.</p> </section> + <!-- modals example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal active"</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal active"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-overlay"</span>><<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-container"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-header"</span>> @@ -879,8 +887,8 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>Share<<span class="tag">/button</span>> <<span class="tag">/div</span>> <<span class="tag">/div</span>> -<<span class="tag">/div</span>></code> -</pre> +<<span class="tag">/div</span>> +</code></pre> <header class="text-center"><h4>Modal sizes</h4></header> <div class="columns"> @@ -944,15 +952,16 @@ <section class="notes"> <p>Add the class <code>modal-sm</code> for a smaller modal dialog. </p> </section> + <!-- modals example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal modal-sm"</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal modal-sm"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-overlay"</span>><<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-container"</span>> <span class="com"><!-- modal structure here --></span> <<span class="tag">/div</span>> -<<span class="tag">/div</span>></code> -</pre> +<<span class="tag">/div</span>> +</code></pre> + </section> <section id="navigation" class="container"> @@ -998,9 +1007,9 @@ <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>> +<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"breadcrumb"</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> Home @@ -1014,8 +1023,8 @@ <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> Change avatar <<span class="tag">/li</span>> -<<span class="tag">/ul</span>></code> -</pre> +<<span class="tag">/ul</span>> +</code></pre> <header id="tabs" class="text-center"><h4>Tabs</h4></header> <div class="columns"> @@ -1066,9 +1075,9 @@ <section class="notes"> <p>Add a container element with the class <code>tab</code>. And add child elements with the classname <code>tab-item</code>. You can add the class <code>tab-block</code> for a full-width tab. The <code>tab-item</code> or its child <code><a></code> with the class <code>active</code> will be highlighted.</p> </section> + <!-- tabs example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab tab-block"</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab tab-block"</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item active"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Music<<span class="tag">/a</span>> <<span class="tag">/li</span>> @@ -1081,8 +1090,9 @@ <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Connect<<span class="tag">/a</span>> <<span class="tag">/li</span>> -<<span class="tag">/ul</span>></code> -</pre> +<<span class="tag">/ul</span>> +</code></pre> + <div class="columns"> <div class="column col-xs-12"> <ul class="tab"> @@ -1126,16 +1136,16 @@ <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> + <!-- tabs with badges example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab tab-block"</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab tab-block"</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item active"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"badge"</span> <span class="atn">data-badge</span>=<span class="atv">"9"</span>> Music <<span class="tag">/a</span>> <<span class="tag">/li</span>> -<<span class="tag">/ul</span>></code> -</pre> +<<span class="tag">/ul</span>> +</code></pre> <div class="columns"> <div class="column col-12"> @@ -1172,9 +1182,9 @@ <section class="notes"> <p>You could add a search box or buttons inside a tab. Add the class <code>tab-action</code> to the <code>tab-item</code>. </p> </section> + <!-- tabs with badges example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab"</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab"</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item active"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> Music @@ -1186,8 +1196,8 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-sm input-group-btn"</span>>Search<<span class="tag">/button</span>> <<span class="tag">/div</span>> <<span class="tag">/li</span>> -<<span class="tag">/ul</span>></code> -</pre> +<<span class="tag">/ul</span>> +</code></pre> <header id="pagination" class="text-center"><h4>Pagination</h4></header> <div class="columns"> @@ -1251,9 +1261,9 @@ <section class="notes"> <p>Add a container element with the class <code>pagination</code>. And add child elements with the classname <code>page-item</code>. The <code>page-item</code> with the class <code>active</code> will be highlighted.</p> </section> + <!-- pagination example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"pagination"</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"pagination"</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">disabled</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>Previous<<span class="tag">/a</span>> <<span class="tag">/li</span>> @@ -1275,8 +1285,9 @@ <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Next<<span class="tag">/a</span>> <<span class="tag">/li</span>> -<<span class="tag">/ul</span>></code> -</pre> +<<span class="tag">/ul</span>> +</code></pre> + <div class="columns"> <div class="column col-12"> <ul class="pagination"> @@ -1298,9 +1309,9 @@ <div class="notes"> <p>You could use previous and next pagination to navigate. </p> </div> + <!-- pagination example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"pagination"</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"pagination"</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item page-prev"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"page-item-meta"</span>>Previous<<span class="tag">/p</span>> @@ -1312,8 +1323,8 @@ <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"page-item-meta"</span>>Next<<span class="tag">/p</span>> <<span class="tag">h3</span> <span class="atn">class</span>=<span class="atv">"page-item-title"</span>>Layout<<span class="tag">/h3</span>> <<span class="tag">/a</span>> - <<span class="tag">/li</span>></code> -</pre> + <<span class="tag">/li</span>> +</code></pre> <header id="navs" class="text-center"><h4>Navs</h4></header> <div class="columns"> @@ -1351,9 +1362,9 @@ <section class="notes"> <p>Add a container element with the class <code>nav</code>. And add child elements with the classname <code>nav-item</code>. The <code>nav-item</code> with the class <code>active</code> will be highlighted.</p> </section> + <!-- navs example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"nav"</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"nav"</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Elements<<span class="tag">/a</span>> <<span class="tag">/li</span>> @@ -1380,8 +1391,9 @@ <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Utilities<<span class="tag">/a</span>> <<span class="tag">/li</span>> -<<span class="tag">/ul</span>></code> -</pre> +<<span class="tag">/ul</span>> +</code></pre> + </section> <section id="steps" class="container"> @@ -1426,9 +1438,9 @@ <section class="notes"> <p>Add a container element with the class <code>step</code>. And add child elements with the classname <code>step-item</code>. The <code>step-item</code> with the class <code>active</code> will be highlighted and indicate the current state of progress.</p> </section> + <!-- steps example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"step"</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"step"</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"step-item"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"tooltip"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Step 1"</span>>Step 1<<span class="tag">/a</span>> <<span class="tag">/li</span>> @@ -1441,8 +1453,9 @@ <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"step-item"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"tooltip"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Step 4"</span>>Step 4<<span class="tag">/a</span>> <<span class="tag">/li</span>> -<<span class="tag">/ul</span>></code> -</pre> +<<span class="tag">/ul</span>> +</code></pre> + </section> <section id="tiles" class="container"> @@ -1489,9 +1502,9 @@ <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>> +<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-icon"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"example-tile-icon"</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-explore centered"</span>><<span class="tag">/i</span>> @@ -1504,8 +1517,9 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-action"</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>Join<<span class="tag">/button</span>> <<span class="tag">/div</span>> -<<span class="tag">/div</span>></code> -</pre> +<<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> @@ -1528,9 +1542,9 @@ </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>> +<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile tile-centered"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-icon"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"example-tile-icon"</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-explore centered"</span>><<span class="tag">/i</span>> @@ -1545,8 +1559,9 @@ <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-more_vert"</span>><<span class="tag">/i</span>> <<span class="tag">/button</span>> <<span class="tag">/div</span>> -<<span class="tag">/div</span>></code> -</pre> +<<span class="tag">/div</span>> +</code></pre> + </section> <section id="toasts" class="container"> @@ -1588,9 +1603,9 @@ <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>> +<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"toast"</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear float-right"</span>><<span class="tag">/button</span>> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <<span class="tag">/div</span>> @@ -1599,8 +1614,9 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear float-right"</span>><<span class="tag">/button</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-error_outline"</span>><<span class="tag">/i</span>> Lorem ipsum dolor sit amet, consectetur adipiscing elit. -<<span class="tag">/div</span>></code> -</pre> +<<span class="tag">/div</span>> +</code></pre> + </section> <section id="tooltips" class="container"> @@ -1626,11 +1642,12 @@ <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>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn tooltip tooltip-right"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Lorem ipsum dolor sit amet"</span>>right tooltip<<span class="tag">/button</span>></code> -</pre> +<pre class="code" data-lang="HTML"><code><<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>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn tooltip tooltip-right"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Lorem ipsum dolor sit amet"</span>>right tooltip<<span class="tag">/button</span>> +</code></pre> + </section> <section class="container"> |