Documented modals
This commit is contained in:
Angelos Chalaris
parent
cf064473ef
commit
6af3ce713f
4 changed files with 106 additions and 3 deletions
|
|
@ -25,5 +25,5 @@ module.exports = [
|
|||
grid, cards, cardSections,
|
||||
formsAndInput, buttons, inputGrouping,
|
||||
header, navigationBar, footer, drawer,
|
||||
textHighlighting, toasts, tooltips,// modalDialogs
|
||||
textHighlighting, toasts, tooltips, modalDialogs
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
module.exports = {
|
||||
id: 'modal-dialogs',
|
||||
title: 'Modal dialogs',
|
||||
keywords: [`modal`, `dialog`, `contextual`, `alert`, `notification`],
|
||||
description: `<p><strong>mini.css</strong> provides you with a modal dialog component to display messages to users. It is composed of three components - the modal dialog, the toggle button and the close button:</p>
|
||||
<ul><li>To create a modal dialog, simply create a checkbox input, applying the appropriate class to it (<code>.modal</code>), immediately followed by a <code><div></code> container. The former serves as your modal dialog's control, while the latter is the actual modal dialog container.</li>
|
||||
<li>Create a label anywhere outside your modal dialog's container for the checkbox controlling your modal dialog. This will serve as the toggle button for your modal dialog.</li>
|
||||
<li>Finally, inside your modal dialog's container, add another label for the checkbox controlling your modal dialog, applying the appropriate class (.modal-close). This will serve as the close button for your modal dialog.</li>
|
||||
</ul>`,
|
||||
example: `<input type="checkbox" class="modal" id="modal-example"><div class="modal"><div class="card"><label for="modal-example" class="modal-close"></label><h3 class="section double-padded">Modal</h3><p class="section double-padded">This is a modal dialog!</p></div></div><label for="modal-example" class="button">Show modal dialog</label>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"modal-control"</span><span class="highlight-a">></span>Show modal<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"></span>
|
||||
<span class="code-line"><span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"modal-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"modal"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"card"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"modal-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"modal-close"</span> <span class="highlight-a">></span><span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><h3</span> <span class="highlight-b">class</span>=<span class="highlight-c">"section"</span><span class="highlight-a">></span>Modal<span class="highlight-a"></h3></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p</span> <span class="highlight-b">class</span>=<span class="highlight-c">"section"</span><span class="highlight-a">></span>This is a modal dialog!<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre>`],
|
||||
notes: [
|
||||
`Modal dialogs should be used in combination with the <a href="#card">card</a> component for best results.`,
|
||||
`Remember to apply the appropriate classes to any and all elements, as indicated in the examples. Failing to do so will result in the modal dialog not rendering or behaving properly.`,
|
||||
`You can omit the toggle for the modal dialog and use Javascript to show/hide it, instead. You can also use any correctly linked label inside the modal dialog to change its state.`
|
||||
],
|
||||
customization: [
|
||||
`Background color for the modal dialog overlay can be changed by changing the value of <code>--modal-overlay-color</code>.`,
|
||||
`Text color for the modal dialog close button can be changed by changing the value of the <code>--modal-close-color</code>.`,
|
||||
`Background color for the modal dialog close button when focused or hovered over can be changed by changing the value of the <code>--modal-close-hover-color</code>.`,
|
||||
`Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`,
|
||||
`Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.`,
|
||||
`Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.`
|
||||
],
|
||||
modifiers: [],
|
||||
dos: [
|
||||
{
|
||||
description: `You can use the <code>role="dialog"</code> to add accessibility to your modal dialogs. Remember to properly label it and manage keyboard focus, as required.`,
|
||||
sample: `<pre><span class="code-line"><span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"modal-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"modal"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">role</span>=<span class="highlight-c">"dialog"</span> <span class="highlight-b">aria-labelledby</span>=<span class="highlight-c">"dialog-title"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"card"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"modal-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"modal-close"</span> <span class="highlight-a">></span><span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><h3</span> <span class="highlight-b">class</span>=<span class="highlight-c">"section"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"dialog-title"</span><span class="highlight-a">></span>Modal<span class="highlight-a"></h3></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p</span> <span class="highlight-b">class</span>=<span class="highlight-c">"section"</span><span class="highlight-a">></span>This is a modal dialog!<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre>`
|
||||
}
|
||||
],
|
||||
donts: [
|
||||
{
|
||||
description: `You should not place anything between the checkbox controlling the modal dialog and the container.`,
|
||||
sample: `<pre><span class="code-line"><span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"modal-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"modal"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"><span class="highlight-c"><!-- Do not place other stuff between these --></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"card"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"modal-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"modal-close"</span> <span class="highlight-a">></span><span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><h3</span> <span class="highlight-b">class</span>=<span class="highlight-c">"section"</span><span class="highlight-a">></span>Modal<span class="highlight-a"></h3></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p</span> <span class="highlight-b">class</span>=<span class="highlight-c">"section"</span><span class="highlight-a">></span>This is a modal dialog!<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre>`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -234,3 +234,7 @@
|
|||
## 20171217
|
||||
|
||||
- Documented `.tooltip`.
|
||||
|
||||
## 20171228
|
||||
|
||||
- Documented `.modal`.
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
</header>
|
||||
<div class="row" id="doc-wrapper">
|
||||
<input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
|
||||
<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><div><input style="width: 100%; margin: 0px;" placeholder="Search..." type="search" id="search-bar" oninput="search()"></div><a href="#getting-started" id="link-to-getting-started">Getting started</a><a href="#common-textual-elements" id="link-to-common-textual-elements">Common textual elements</a><a href="#heading" id="link-to-heading">Headings</a><a href="#images-captions" id="link-to-images-captions">Images & captions</a><a href="#lists" id="link-to-lists">Lists</a><a href="#code-and-quotations" id="link-to-code-and-quotations">Code & quotations</a><a href="#grid" id="link-to-grid">Grid system</a><a href="#cards" id="link-to-cards">Cards</a><a href="#card-sections" id="link-to-card-sections">Card sections</a><a href="#forms-and-input" id="link-to-forms-and-input">Forms & input</a><a href="#buttons" id="link-to-buttons">Buttons</a><a href="#input-grouping" id="link-to-input-grouping">Input grouping</a><a href="#header" id="link-to-header">Header</a><a href="#navigation-bar" id="link-to-navigation-bar">Navigation bar</a><a href="#footer" id="link-to-footer">Footer</a><a href="#drawer" id="link-to-drawer">Menu drawer</a><a href="#text-highlighting" id="link-to-text-highlighting">Text highlighting</a><a href="#toasts" id="link-to-toasts">Toasts</a><a href="#tooltips" id="link-to-tooltips">Tooltips</a><span id="no-results">No results found</span></nav>
|
||||
<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><div><input style="width: 100%; margin: 0px;" placeholder="Search..." type="search" id="search-bar" oninput="search()"></div><a href="#getting-started" id="link-to-getting-started">Getting started</a><a href="#common-textual-elements" id="link-to-common-textual-elements">Common textual elements</a><a href="#heading" id="link-to-heading">Headings</a><a href="#images-captions" id="link-to-images-captions">Images & captions</a><a href="#lists" id="link-to-lists">Lists</a><a href="#code-and-quotations" id="link-to-code-and-quotations">Code & quotations</a><a href="#grid" id="link-to-grid">Grid system</a><a href="#cards" id="link-to-cards">Cards</a><a href="#card-sections" id="link-to-card-sections">Card sections</a><a href="#forms-and-input" id="link-to-forms-and-input">Forms & input</a><a href="#buttons" id="link-to-buttons">Buttons</a><a href="#input-grouping" id="link-to-input-grouping">Input grouping</a><a href="#header" id="link-to-header">Header</a><a href="#navigation-bar" id="link-to-navigation-bar">Navigation bar</a><a href="#footer" id="link-to-footer">Footer</a><a href="#drawer" id="link-to-drawer">Menu drawer</a><a href="#text-highlighting" id="link-to-text-highlighting">Text highlighting</a><a href="#toasts" id="link-to-toasts">Toasts</a><a href="#tooltips" id="link-to-tooltips">Tooltips</a><a href="#modal-dialogs" id="link-to-modal-dialogs">Modal dialogs</a><span id="no-results">No results found</span></nav>
|
||||
<main class="col-sm-12 col-md-8 col-lg-9" id="doc-content"><div id="getting-started" class="card fluid">
|
||||
<h2 class="section double-padded">Getting started</h2>
|
||||
<div class="section"><p>You can get started using <strong>mini.css</strong> in one of many ways. It is published on <strong>npm</strong> and <strong>yarn</strong>, so you can easily download it, using your preferred package manager:</p>
|
||||
|
|
@ -639,11 +639,48 @@
|
|||
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>Tooltips depend on the <code>aria-label</code> property, so they are fully accessible on screen readers.</li></ul></div>
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for tooltips can be changed by changing the value of the <code>--tooltip-fore-color</code> variable.</li><li>Background color for tooltips can be changed by changing the value of the <code>--tooltip-back-color</code> variable.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="modal-dialogs" class="card fluid">
|
||||
<h2 class="section double-padded">Modal dialogs</h2>
|
||||
<div class="section"><p><strong>mini.css</strong> provides you with a modal dialog component to display messages to users. It is composed of three components - the modal dialog, the toggle button and the close button:</p>
|
||||
<ul><li>To create a modal dialog, simply create a checkbox input, applying the appropriate class to it (<code>.modal</code>), immediately followed by a <code><div></code> container. The former serves as your modal dialog's control, while the latter is the actual modal dialog container.</li>
|
||||
<li>Create a label anywhere outside your modal dialog's container for the checkbox controlling your modal dialog. This will serve as the toggle button for your modal dialog.</li>
|
||||
<li>Finally, inside your modal dialog's container, add another label for the checkbox controlling your modal dialog, applying the appropriate class (.modal-close). This will serve as the close button for your modal dialog.</li>
|
||||
</ul></div>
|
||||
<div class="section"><h3>Example</h3><input type="checkbox" class="modal" id="modal-example"><div class="modal"><div class="card"><label for="modal-example" class="modal-close"></label><h3 class="section double-padded">Modal</h3><p class="section double-padded">This is a modal dialog!</p></div></div><label for="modal-example" class="button">Show modal dialog</label></div>
|
||||
<div class="section double-padded prefiller-example"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"modal-control"</span><span class="highlight-a">></span>Show modal<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"></span>
|
||||
<span class="code-line"><span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"modal-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"modal"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"card"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"modal-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"modal-close"</span> <span class="highlight-a">></span><span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><h3</span> <span class="highlight-b">class</span>=<span class="highlight-c">"section"</span><span class="highlight-a">></span>Modal<span class="highlight-a"></h3></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p</span> <span class="highlight-b">class</span>=<span class="highlight-c">"section"</span><span class="highlight-a">></span>This is a modal dialog!<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre></div>
|
||||
|
||||
<div class="section double-padded"><h3>Best practices</h3><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"modal-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"modal"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">role</span>=<span class="highlight-c">"dialog"</span> <span class="highlight-b">aria-labelledby</span>=<span class="highlight-c">"dialog-title"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"card"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"modal-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"modal-close"</span> <span class="highlight-a">></span><span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><h3</span> <span class="highlight-b">class</span>=<span class="highlight-c">"section"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"dialog-title"</span><span class="highlight-a">></span>Modal<span class="highlight-a"></h3></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p</span> <span class="highlight-b">class</span>=<span class="highlight-c">"section"</span><span class="highlight-a">></span>This is a modal dialog!<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="do">Do:</mark> You can use the <code>role="dialog"</code> to add accessibility to your modal dialogs. Remember to properly label it and manage keyboard focus, as required.</p></div></div><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"modal-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"modal"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"><span class="highlight-c"><!-- Do not place other stuff between these --></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"card"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"modal-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"modal-close"</span> <span class="highlight-a">></span><span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><h3</span> <span class="highlight-b">class</span>=<span class="highlight-c">"section"</span><span class="highlight-a">></span>Modal<span class="highlight-a"></h3></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p</span> <span class="highlight-b">class</span>=<span class="highlight-c">"section"</span><span class="highlight-a">></span>This is a modal dialog!<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> You should not place anything between the checkbox controlling the modal dialog and the container.</p></div></div></div>
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>Modal dialogs should be used in combination with the <a href="#card">card</a> component for best results.</li><li>Remember to apply the appropriate classes to any and all elements, as indicated in the examples. Failing to do so will result in the modal dialog not rendering or behaving properly.</li><li>You can omit the toggle for the modal dialog and use Javascript to show/hide it, instead. You can also use any correctly linked label inside the modal dialog to change its state.</li></ul></div>
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Background color for the modal dialog overlay can be changed by changing the value of <code>--modal-overlay-color</code>.</li><li>Text color for the modal dialog close button can be changed by changing the value of the <code>--modal-close-color</code>.</li><li>Background color for the modal dialog close button when focused or hovered over can be changed by changing the value of the <code>--modal-close-hover-color</code>.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><footer><p><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo" target="_blank">@Chalarangelo</a>. Source code licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>.</p><p>Icons provided by <a href="https://feathericons.com/" target="_blank">Feather</a>. Search powered by <a href="http://fusejs.io/" target="_blank">Fuse.js</a>.</p></footer></main>
|
||||
</div></div>
|
||||
<script>
|
||||
// Search script
|
||||
var docs= [{id: "getting-started", keys: ["html","viewport","head","meta","getting started","introduction","browser support","installation","usage","setup","cdn","npm","yarn"] },{id: "common-textual-elements", keys: ["p","paragraph","text","textual elements","strong","bold","b","em","i","emphasis","italics","small","a","link","hr","horizontal rule","sub","subscript","sup","exponent","superscript","normalize","reset"] },{id: "heading", keys: ["heading","h1","h2","h3","h4","h5","h6","small","title","subtitle","subheading"] },{id: "images-captions", keys: ["img","image","responsive","responsiveness","caption","figure","figcaption"] },{id: "lists", keys: ["list","ul","ol","li"] },{id: "code-and-quotations", keys: ["code","pre","kbd","blockquote","quotation"] },{id: "grid", keys: ["grid","grid system","col","column","layout","row","container","small","medium","large","sm","md","lg","cols","predefined","offset","order","reorder","first","last","normal"] },{id: "cards", keys: ["card","row","section","container","col","column","small","large","fluid","warning","error"] },{id: "card-sections", keys: ["card","row","section","container","col","column","media","double-padded","dark"] },{id: "forms-and-input", keys: ["form","fieldset","legend","input","type","text","checkbox","radio","email","password","tel","input-group","input group","row","col","column","vertical","fluid","file","upload","select","textarea","option","label"] },{id: "buttons", keys: ["button","input","reset","submit","link","a","label","primary","secondary","tertiary","aria","small","large","inverse"] },{id: "input-grouping", keys: ["input group","input-group","vertical","fluid","input","button","button group","button-group"] },{id: "header", keys: ["navigation","header","sticky","button","logo","link"] },{id: "navigation-bar", keys: ["navigation","bar","nav","link"] },{id: "footer", keys: ["navigation","footer","sticky","link"] },{id: "drawer", keys: ["drawer","checkbox","toggle","close","drawer-toggle","drawer-close","menu","navigation","hamburger"] },{id: "text-highlighting", keys: ["mark","highlight","text highlighting","tag","primary","secondary","tertiary","inline-block"] },{id: "toasts", keys: ["span","toast","mobile","contextual","message"] },{id: "tooltips", keys: ["tooltip","aria-label","contextual","bottom","span"] }];
|
||||
var docs= [{id: "getting-started", keys: ["html","viewport","head","meta","getting started","introduction","browser support","installation","usage","setup","cdn","npm","yarn"] },{id: "common-textual-elements", keys: ["p","paragraph","text","textual elements","strong","bold","b","em","i","emphasis","italics","small","a","link","hr","horizontal rule","sub","subscript","sup","exponent","superscript","normalize","reset"] },{id: "heading", keys: ["heading","h1","h2","h3","h4","h5","h6","small","title","subtitle","subheading"] },{id: "images-captions", keys: ["img","image","responsive","responsiveness","caption","figure","figcaption"] },{id: "lists", keys: ["list","ul","ol","li"] },{id: "code-and-quotations", keys: ["code","pre","kbd","blockquote","quotation"] },{id: "grid", keys: ["grid","grid system","col","column","layout","row","container","small","medium","large","sm","md","lg","cols","predefined","offset","order","reorder","first","last","normal"] },{id: "cards", keys: ["card","row","section","container","col","column","small","large","fluid","warning","error"] },{id: "card-sections", keys: ["card","row","section","container","col","column","media","double-padded","dark"] },{id: "forms-and-input", keys: ["form","fieldset","legend","input","type","text","checkbox","radio","email","password","tel","input-group","input group","row","col","column","vertical","fluid","file","upload","select","textarea","option","label"] },{id: "buttons", keys: ["button","input","reset","submit","link","a","label","primary","secondary","tertiary","aria","small","large","inverse"] },{id: "input-grouping", keys: ["input group","input-group","vertical","fluid","input","button","button group","button-group"] },{id: "header", keys: ["navigation","header","sticky","button","logo","link"] },{id: "navigation-bar", keys: ["navigation","bar","nav","link"] },{id: "footer", keys: ["navigation","footer","sticky","link"] },{id: "drawer", keys: ["drawer","checkbox","toggle","close","drawer-toggle","drawer-close","menu","navigation","hamburger"] },{id: "text-highlighting", keys: ["mark","highlight","text highlighting","tag","primary","secondary","tertiary","inline-block"] },{id: "toasts", keys: ["span","toast","mobile","contextual","message"] },{id: "tooltips", keys: ["tooltip","aria-label","contextual","bottom","span"] },{id: "modal-dialogs", keys: ["modal","dialog","contextual","alert","notification"] }];
|
||||
var options = {threshold:0.4, keys:["keys"]};
|
||||
var fuse = new Fuse(docs,options);
|
||||
function search(){
|
||||
|
|
|
|||
Loading…
Reference in a new issue