govlab-styleguide

<article class="docs-component" id="docs-{{escape title}}"> <a href="#docs-menu" class="small secondary expanded button hide-for-medium">Jump to Nav</a> <h1 class="docs-page-title">{{ title }}</h1> {{#if js}} <span data-tooltip title="Requires a JavaScript library." class="docs-js label">JavaScript</span> {{/if}} {{#if mui}} <span data-tooltip title="Supports Motion UI transitions." class="docs-mui label">Motion UI</span> {{/if}} {{#if library}} <span data-tooltip title="This is an external library." class="docs-lib label"><a href="{{ library.github }}" target="_blank">Library</a></span> {{/if}} <p class="lead docs-page-lead">{{ description }}</p> <hr> {{!-- Start container for docs and table of contents --}} <div class="row"> {{!-- Start container for docs --}} <div class="large-9 columns" id="docs"> {{ docs }} {{#if sass}} <hr> <section> {{#heading 2}}Sass Reference{{/heading}} {{#if sass.variable}} <section> {{#heading 3 'sass-variables'}}Variables{{/heading}} <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p> <table class="docs-variable-table"> <thead> <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr> </thead> {{#each sass.variable}} <tr> <td class="name"><code>${{this.context.name}}</code></td> <td>{{sassTypes this.type}}</td> <td class="{{toLower this.type}}"><code>{{sassValue this.context.value}}</code></td> <td>{{md this.description}}</td> </tr> {{/each}} </table> </section> {{/if}} {{#if sass.mixin}} {{#if sass.variable}}<hr>{{/if}} <section> {{#heading 3 'sass-mixins'}}Mixins{{/heading}} <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p> {{#each sass.mixin}}{{#filter this}} <section {{#if this.deprecated }}class="docs-deprecated"{{/if}}> {{#heading 4}}{{this.context.name}}{{/heading}} {{#if this.since}} <p class="docs-notice-added">Added in {{this.since.0.version}}</p> {{/if}} {{#if this.deprecated}} <p class="docs-notice-deprecated">Deprecated in {{this.deprecated}}</p> {{/if}} <div class="docs-code"> <pre><code>{{writeMixin this}}</code></pre> </div> {{md this.description}} {{#if this.aliased}} <p><strong>Aliases:</strong> {{#each this.aliased}}<code>{{this}}()</code>{{/each}}</p> {{/if}} {{externalLink this.link}} {{#if this.parameter}} <table class="docs-variable-table"> <thead> <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr> </thead> {{#each this.parameter}} <tr> <td><code>${{this.name}}</code></td> <td>{{sassTypes this.type}}</td> <td><code>{{sassValue this.default}}</code></td> <td>{{md this.description}}</td> </tr> {{/each}} </table> {{/if}} </section> {{#unless @last}}<hr>{{/unless}} {{#if sass.function}} <hr> {{/if}} {{/filter}}{{/each}} </section> {{/if}} {{#if sass.function}} <hr> <section> {{#heading 3 'sass-functions'}}Functions{{/heading}} {{#each sass.function}}{{#filter this}} <section {{#if this.deprecated }}class="docs-deprecated"{{/if}}> {{#heading 4}}{{this.context.name}}{{/heading}} {{#if this.since}} <p class="docs-notice-added">Added in {{this.since.0.version}}</p> {{/if}} {{#if this.deprecated}} <p class="docs-notice-deprecated">Deprecated in {{this.deprecated.version}}</p> {{/if}} <div class="docs-code"> <pre><code>{{writeFunction this}}</code></pre> </div> {{md this.description}} {{externalLink this.link}} {{#if this.parameter}} <table class="docs-variable-table"> <thead> <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr> </thead> {{#each this.parameter}} <tr> <td><code>${{this.name}}</code></td> <td>{{sassTypes this.type}}</td> <td><code>{{sassValue this.default}}</code></td> <td>{{md this.description}}</td> </tr> {{/each}} </table> {{/if}} </section> {{#unless @last}}<hr>{{/unless}} {{/filter}}{{/each}} </section> {{/if}} </section> {{/if}} {{#if js}} <hr> <section> {{#heading 2}}JavaScript Reference{{/heading}} {{#if js.module}}{{#with js.module.[0]}} <section> {{#heading 3 'js-module'}}Initializing{{/heading}} <p>The file <code>{{meta.filename}}</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>.{{#if requires}} <strong>This plugin also requires these utility libraries:</strong>{{/if}}</p> {{#if requires}}{{#each requires}} <ul> <li><code>{{jsModuleName this}}</code></li> </ul> {{/each}}{{/if}} </section> {{/with}}{{/if}} {{#each js.class}} <section> {{#heading 3 'js-class'}}Foundation.{{this.name}}{{/heading}} {{md this.description}} <div class="docs-code"><pre><code>var elem = new Foundation.{{this.name}}(element);</code></pre></div> {{#if this.fires}} <p><strong>Fires these events:</strong> {{#each this.fires}} {{this}} {{/each}} </p> {{/if}} {{#if this.params}} <table class="docs-variable-table"> <thead> <tr><th>Name</th><th>Type</th><th>Description</th></tr> </thead> {{#each this.params}} <tr> <td><code>{{this.name}}</code></td> <td>{{this.type.names.[0]}}</td> <td>{{this.description}}</td> </tr> {{/each}} </table> {{/if}} </section> {{/each}} <hr> {{#if js.member}} <section> {{#heading 3 'js-options'}}Plugin Options{{/heading}} <p>Use these options to customize an instance of {{title}}. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="#">Learn more about how JavaScript plugins are initialized.</a></p> <table class="docs-variable-table"> <thead> <tr><th>Name</th><th>Description</th><th>Example</th></tr> </thead> {{#each js.member}} <tr> <td>{{this.name}}</td> <td>{{this.description}}</td> <td><code>{{this.examples}}</code></td> </tr> {{/each}} </table> </section> {{/if}} <hr> {{#if js.event}} <section> {{#heading 3 'js-events'}}Events{{/heading}} <p>These events will fire from any element with a {{title}} plugin attached.</p> <table class="docs-variable-table"> <thead> <tr><th>Name</th><th>Description</th></tr> </thead> {{#each js.event}} <tr> <td>{{this.name}}.zf.{{toLower ../title}}</td> <td>{{this.description}}</td> </tr> {{/each}} </table> </section> {{/if}} <hr> {{#if js.function}} <section> {{#heading 3 'js-functions'}}Functions{{/heading}} {{#each js.function}} <section> {{#heading 4 this.name}}{{../../js.class.0.name}}.{{this.name}}{{/heading}} {{md this.description}} {{#if this.fires}} <p><strong>Fires these events:</strong> {{#each this.fires}} {{this}} {{/each}} </p> {{/if}} {{#if this.params}} <table class="docs-variable-table"> <thead> <tr><th>Name</th><th>Type</th><th>Description</th></tr> </thead> {{#each this.params}} <tr> <td><code>{{this.name}}</code></td> <td>{{this.type.names.[0]}}</td> <td>{{this.description}}</td> </tr> {{/each}} </table> {{/if}} {{#unless @last}}<hr>{{/unless}} </section> {{/each}} </section> {{/if}} </section> {{/if}} {{#if sass}}   {{/if}} </div> {{!-- End container for docs --}} {{!-- Start container for table of contents --}} <div class="large-3 columns" data-sticky-container> <nav class="columns" data-sticky data-anchor="docs" data-sticky-on="large"> <div class="docs-toc hide" id="docsTOC"> <ul class="vertical menu docs-sub-menu" data-docs-toc> <li class="docs-menu-title">On this page:</li> </ul> <ul class="vertical menu docs-sub-menu"> <li class="docs-menu-title">Contribute:</li> <li><a href="{{ editLink fileName }}">Edit this Page</a></li> {{#if library}} <li><a href="{{ library.github }}/issues">Report a Bug</a></li> {{else}} <li><a href="{{ issueLink title }}">Report a Bug</a></li> {{/if}} {{ sourceLink _adapterData }} </ul> </div> </nav> </div> {{!-- End container for table of contents --}} </div> {{!-- End container for docs and table of contents --}} </article>