315 lines
7.9 KiB
HTML
315 lines
7.9 KiB
HTML
|
<article class="docs-component" id="docs-{{escape title}}">
|
||
|
|
|
||
|
|
<h1 class="docs-page-title">{{ title }}</h1>
|
||
|
|
|
||
|
|
<p class="lead docs-page-lead">{{ description }}</p>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
{{!-- Start container for docs and table of contents --}}
|
||
|
|
<div class="row">
|
||
|
|
|
||
|
|
{{!-- Start container for table of contents --}}
|
||
|
|
<nav>
|
||
|
|
<div class="large-3 large-push-9 columns">
|
||
|
|
<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>
|
||
|
|
<li><a href="{{ issueLink title }}">Report a Bug</a></li>
|
||
|
|
{{ sourceLink _adapterData }}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
{{!-- End container for table of contents --}}
|
||
|
|
|
||
|
|
{{!-- Start container for docs --}}
|
||
|
|
<div class="large-9 large-pull-3 columns">
|
||
|
|
|
||
|
|
{{ 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}}
|
||
|
|
<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}}
|
||
|
|
|
||
|
|
{{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}}
|
||
|
|
|
||
|
|
{{/each}}
|
||
|
|
</section>
|
||
|
|
{{/if}}
|
||
|
|
|
||
|
|
{{#if sass.function}}
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
{{#heading 3 'sass-functions'}}Functions{{/heading}}
|
||
|
|
|
||
|
|
{{#each sass.function}}
|
||
|
|
<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}}
|
||
|
|
{{/each}}
|
||
|
|
</section>
|
||
|
|
{{/if}}
|
||
|
|
|
||
|
|
</section>
|
||
|
|
{{/if}}
|
||
|
|
|
||
|
|
{{#if js}}
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
{{#heading 2}}JavaScript Reference{{/heading}}
|
||
|
|
|
||
|
|
{{#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, options);</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>Sample!</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.{{../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 'js-class'}}{{../../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}}
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<section class="docs-building-blocks">
|
||
|
|
{{#heading 2 'building-blocks'}}Building Blocks using {{title}}{{/heading}}
|
||
|
|
|
||
|
|
<p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
|
||
|
|
|
||
|
|
<div class="row up-1 medium-up-2 large-up-3" data-building-blocks>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
{{/if}}
|
||
|
|
|
||
|
|
</div>
|
||
|
|
{{!-- End container for docs --}}
|
||
|
|
|
||
|
|
</div>
|
||
|
|
{{!-- End container for docs and table of contents --}}
|
||
|
|
|
||
|
|
</article>
|