diff options
Add Details and Summary Accordians support #256
1 files changed, 94 insertions, 68 deletions
| -rw-r--r-- | docs/components.html | 162 |
diff --git a/docs/components.html b/docs/components.html index 2f12f90..c009ad6 100644 --- a/docs/components.html +++ b/docs/components.html @@ -22,8 +22,8 @@ </a> </div> <div class="s-nav"> - <div class="accordion"> - <div class="accordion-item"> + <div class="accordion-container"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-1"> Getting started @@ -48,7 +48,7 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-2"> Elements @@ -82,7 +82,7 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-3"> Layout @@ -101,7 +101,7 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden checked> <label class="accordion-header c-hand" for="docs-accordion-4"> Components @@ -171,7 +171,7 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-5"> Utilities @@ -205,7 +205,7 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-6"> Experimentals @@ -268,10 +268,10 @@ <div class="columns"> <div class="column col-6 col-md-12"> <div class="accordion"> - <div class="accordion-item"> + <div class="accordion"> <input type="radio" id="accordion-1" name="accordion-radio" hidden checked> <label class="accordion-header c-hand" for="accordion-1"> - <i class="icon icon-arrow-right mr-5"></i> + <i class="icon icon-arrow-right mr-1"></i> Elements </label> <div class="accordion-body"> @@ -285,10 +285,10 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="radio" id="accordion-2" name="accordion-radio" hidden> <label class="accordion-header c-hand" for="accordion-2"> - <i class="icon icon-arrow-right mr-5"></i> + <i class="icon icon-arrow-right mr-1"></i> Layout </label> <div class="accordion-body"> @@ -302,10 +302,10 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="radio" id="accordion-3" name="accordion-radio" hidden> <label class="accordion-header c-hand" for="accordion-3"> - <i class="icon icon-arrow-right mr-5"></i> + <i class="icon icon-arrow-right mr-1"></i> Components </label> <div class="accordion-body"> @@ -322,11 +322,10 @@ </div> </div> <div class="column col-6 col-md-12"> - <div class="accordion"> - <div class="accordion-item"> + <div class="accordion-container"> + <div class="accordion"> <input type="checkbox" id="accordion-4" name="accordion-checkbox" hidden checked> <label class="accordion-header c-hand" for="accordion-4"> - <i class="icon icon-arrow-right mr-5"></i> Elements </label> <div class="accordion-body"> @@ -340,10 +339,9 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="accordion-5" name="accordion-checkbox" hidden> <label class="accordion-header c-hand" for="accordion-5"> - <i class="icon icon-arrow-right mr-5"></i> Layout </label> <div class="accordion-body"> @@ -357,10 +355,9 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="accordion-6" name="accordion-checkbox" hidden> <label class="accordion-header c-hand" for="accordion-6"> - <i class="icon icon-arrow-right mr-5"></i> Components </label> <div class="accordion-body"> @@ -378,37 +375,66 @@ </div> </div> -<!-- accordions example --> -<pre class="code" data-lang="HTML"><code><span class="com"><!-- standard Accordions examples --></span> +<!-- accordions --> +<pre class="code" data-lang="HTML"><code><span class="com"><!-- standard Accordions example --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion-item"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> <span class="atn">id</span>=<span class="atv">"accordion-1"</span> <span class="atn">name</span>=<span class="atv">"accordion-checkbox"</span> <span class="atn">hidden</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"accordion-header"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-right mr-5"</span>><<span class="tag">/i</span>> - Title - <<span class="tag">/label</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion-body"</span>> - <span class="com"><!-- Accordions content --></span> - <<span class="tag">/div</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> <span class="atn">id</span>=<span class="atv">"accordion-1"</span> <span class="atn">name</span>=<span class="atv">"accordion-checkbox"</span> <span class="atn">hidden</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"accordion-header"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-right mr-1"</span>><<span class="tag">/i</span>> + Title + <<span class="tag">/label</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion-body"</span>> + <span class="com"><!-- Accordions content --></span> <<span class="tag">/div</span>> - <span class="com"><!-- Accordions item --></span> <<span class="tag">/div</span>> -<span class="com"><!-- mutually exclusive Accordions examples --></span> +<span class="com"><!-- mutually exclusive Accordions example (with same input names) --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion-item"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"accordion-1"</span> <span class="atn">name</span>=<span class="atv">"accordion-radio"</span> <span class="atn">hidden</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"accordion-header"</span>> - Title - <<span class="tag">/label</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion-body"</span>> - <span class="com"><!-- Accordions content --></span> - <<span class="tag">/div</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"accordion-1"</span> <span class="atn">name</span>=<span class="atv">"accordion-radio"</span> <span class="atn">hidden</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"accordion-header"</span>> + Title + <<span class="tag">/label</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion-body"</span>> + <span class="com"><!-- Accordions content --></span> <<span class="tag">/div</span>> - <span class="com"><!-- Accordions item --></span> <<span class="tag">/div</span>> </code></pre> + <div class="docs-note"> + <p>Alternatively, you can use <code>details</code> and <code>summary</code> instead of <code>input</code> radio or checkbox trick. Add the <code>open</code> attribute to <code>details</code> to expand it. Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/" target="_blank">in development</a>.</p> + </div> + + <div class="columns"> + <div class="column col-sm-12 col-6"> + <details class="accordion" open> + <summary class="accordion-header c-hand"> <i class="icon icon-arrow-right mr-1"></i> Elements</summary> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="#accordions">Element 1</a> + </li> + <li class="menu-item"> + <a href="#accordions">Element 2</a> + </li> + </ul> + </div> + </details> + </div> + </div> + +<!-- accordions --> +<pre class="code" data-lang="HTML"><code><span class="com"><!-- details and summary Accordions example --></span> +<<span class="tag">details</span> <span class="atn">class</span>=<span class="atv">"accordion"</span> <span class="atn">open</span>> + <<span class="tag">summary</span> <span class="atn">class</span>=<span class="atv">"accordion-header"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-right mr-1"</span>><<span class="tag">/i</span>> + Title + <<span class="tag">/summary</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion-body"</span>> + <span class="com"><!-- Accordions content --></span> + <<span class="tag">/div</span>> +<<span class="tag">/details</span>> +</code></pre> + </div> <div id="autocomplete" class="container"> @@ -497,7 +523,7 @@ <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> </div> -<!-- autocomplete example --> +<!-- autocomplete --> <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 form-input"</span>> @@ -594,7 +620,7 @@ </div> </div> -<!-- avatars example --> +<!-- avatars --> <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="atn">alt</span>=<span class="atv">"..."</span>> @@ -636,7 +662,7 @@ <p>Avatars support presence indicators. You can add an <code>i</code> element with the <code>avatar-presence</code> class, and add <code>online</code>, <code>busy</code> or <code>away</code> class for different status colors. The default is gray which means offline. </p> </div> -<!-- avatars example --> +<!-- avatars --> <pre class="code" data-lang="HTML"><code><<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="atn">alt</span>=<span class="atv">"..."</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"avatar-presence online"</span>><<span class="tag">/i</span>> @@ -701,7 +727,7 @@ <p>Badges support <code>button</code> and <code>avatars</code> elements as well. </p> </div> -<!-- badges example --> +<!-- badges --> <pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"badge"</span>> Notifications <<span class="tag">/span</span>> @@ -755,7 +781,7 @@ <p>There is the <code>bar-sm</code> class for thinner Bars. Also, you could use <a href="#tooltips">Tooltips</a> for any <code>bar-item</code>.</p> </div> -<!-- bars example --> +<!-- bars --> <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>> @@ -795,7 +821,7 @@ <p>If there are two <code>bar-item</code> divs in one bar-slider, you will have a range slider.</p> </div> -<!-- slider bars example --> +<!-- slider bars --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- slider --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar bar-slider"</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>> @@ -880,7 +906,7 @@ <p>Add a container element with the <code>breadcrumb</code> class. And add child elements with the <code>breadcrumb-item</code> class.</p> </div> -<!-- breadcrumbs example --> +<!-- breadcrumbs --> <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<<span class="tag">/a</span>> @@ -1006,7 +1032,7 @@ <p>Add a container element with the <code>card</code> class. And add child elements with the <code>card-image</code>, <code>card-header</code>, <code>card-body</code> and/or <code>card-footer</code> classes. The <code>card-image</code> can be placed in any position. </p> </div> -<!-- cards example --> +<!-- cards --> <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>> @@ -1069,7 +1095,7 @@ <p>Add a container element with the <code>chip</code> class. And add child text element, buttons or avatars with the <code>avatar</code> class.</p> </div> -<!-- chips example --> +<!-- chips --> <pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> Crime <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span> <span class="atn">role</span>=<span class="atv">"button"</span>><<span class="tag">/a</span>> @@ -1136,7 +1162,7 @@ <p>An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-subtitle</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p> </div> -<!-- empty states example --> +<!-- empty states --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"empty"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"empty-icon"</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-people"</span>><<span class="tag">/i</span>> @@ -1222,7 +1248,7 @@ <p>Add a container element with the <code>menu</code> class. And add child elements with the <code>menu-item</code> class. You can separate menu items with a <code>divider</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p> </div> -<!-- menus example --> +<!-- menus --> <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 text --></span> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"divider"</span> <span class="atn">data-content</span>=<span class="atv">"LINKS"</span>> @@ -1327,7 +1353,7 @@ <p>Also, you can implement your JS to interact with the dropdown menus by adding the <code>active</code> class to the <code>dropdown</code> container.</p> </div> -<!-- dropdowns example --> +<!-- dropdowns --> <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>> @@ -1484,7 +1510,7 @@ <p>Add the <code>modal-sm</code> class for a smaller modal dialog. </p> </div> -<!-- modals example --> +<!-- modals --> <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>> @@ -1559,7 +1585,7 @@ <p>Add a container element with the <code>pagination</code> class. And add child elements with the <code>page-item</code> class. The <code>page-item</code> with the <code>active</code> class will be highlighted. You can add the <code>disabled</code> to the <code>page-item</code> to have unclickable page links. </p> </div> -<!-- pagination example --> +<!-- pagination --> <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 disabled"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>Previous<<span class="tag">/a</span>> @@ -1607,7 +1633,7 @@ <p>You could use previous and next pagination to navigate. </p> </div> -<!-- pagination example --> +<!-- pagination --> <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>> @@ -1768,7 +1794,7 @@ <p>Add a container element with the <code>panel</code> class. And add child elements with the <code>panel-header</code>, <code>panel-nav</code>, <code>panel-body</code> and/or <code>panel-footer</code> class. The <code>panel-body</code> can be auto expanded and vertically scrollable. </p> </div> -<!-- panels example --> +<!-- panels --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"panel"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"panel-header"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"panel-title"</span>>Comments<<span class="tag">/div</span>> @@ -1825,7 +1851,7 @@ <p>Add a container element with the <code>nav</code> class. And add child elements with the <code>nav-item</code> class. The <code>nav-item</code> with the <code>active</code> class will be highlighted.</p> </div> -<!-- navs example --> +<!-- navs --> <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>> @@ -1954,7 +1980,7 @@ <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> </div> -<!-- popovers example --> +<!-- popovers --> <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>> @@ -2018,7 +2044,7 @@ <p>Add a container element with the <code>step</code> class. And add child elements with the <code>step-item</code> class. The <code>step-item</code> with the <code>active</code> class will be highlighted and indicate the current state of progress.</p> </div> -<!-- steps example --> +<!-- steps --> <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>> @@ -2091,7 +2117,7 @@ <p>Add a container element with the <code>tab</code> class. And add child elements with the <code>tab-item</code> class. You can add the <code>tab-block</code> class for a full-width tab. The <code>tab-item</code> or its child <a> with the <code>active</code> class will be highlighted.</p> </div> -<!-- tabs example --> +<!-- tabs --> <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>> @@ -2152,7 +2178,7 @@ <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>. </p> </div> -<!-- tabs with badges example --> +<!-- tabs with badges --> <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>> @@ -2199,7 +2225,7 @@ <p>You could add a search box or buttons inside a tab. Add the <code>tab-action</code> class to the <code>tab-item</code>. </p> </div> -<!-- tabs with badges example --> +<!-- tabs with badges --> <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>> @@ -2263,7 +2289,7 @@ <p>There are <code>tile-title</code> and <code>tile-subtitle</code> classes for title and subtitle text styles.</p> </div> -<!-- tiles example --> +<!-- tiles --> <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>> @@ -2304,7 +2330,7 @@ </div> </div> -<!-- tiles example --> +<!-- tiles --> <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>> @@ -2372,7 +2398,7 @@ <p>And you can add the <code>toast-primary</code>, <code>toast-success</code>, <code>toast-warning</code> or <code>toast-error</code> class for additional toast colors.</p> </div> -<!-- toasts example --> +<!-- toasts --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"toast"</span>> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <<span class="tag">/div</span>> @@ -2409,7 +2435,7 @@ <p>Add the <code>tooltip</code> class and the <code>data-tooltip</code> attribute, which contains the tooltip content, to non self closing elements. And add the <code>tooltip-right</code>, <code>tooltip-bottom</code> or <code>tooltip-left</code> class to define the position of a tooltip. By default, the tooltip appears above the element.</p> </div> -<!-- tooltips example --> +<!-- tooltips --> <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> |