{{ description }}
The default styles of this component can be customized using these Sass variables in your project's settings file.
Name | Type | Default Value | Description |
---|---|---|---|
${{this.context.name}} |
{{sassTypes this.type}} | {{sassValue this.context.value}} |
{{md this.description}} |
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.
{{#each sass.mixin}}{{#filter this}}Added in {{this.since.0.version}}
{{/if}} {{#if this.deprecated}}Deprecated in {{this.deprecated}}
{{/if}}{{writeMixin this}}
Aliases: {{#each this.aliased}}{{this}}()
{{/each}}
Parameter | Type | Default Value | Description |
---|---|---|---|
${{this.name}} |
{{sassTypes this.type}} | {{sassValue this.default}} |
{{md this.description}} |
Added in {{this.since.0.version}}
{{/if}} {{#if this.deprecated}}Deprecated in {{this.deprecated.version}}
{{/if}}{{writeFunction this}}
Parameter | Type | Default Value | Description |
---|---|---|---|
${{this.name}} |
{{sassTypes this.type}} | {{sassValue this.default}} |
{{md this.description}} |
The file {{meta.filename}}
must be included in your JavaScript to use this plugin, along with foundation.core.js
.{{#if requires}} This plugin also requires these utility libraries:{{/if}}
{{jsModuleName this}}
To import as an AMD module (for use with RequireJS):
define(['{{memberof}}.{{name}}'], function({{name}}) {
});
To import as a CommonJS module (for use with Browserify or Webpack):
var {{name}} = require('{{memberof}}.{{name}}');
Note that when importing plugins with module loaders, the plugins are not initialized by default. They must be manually registered with Foundation, like this:
var {{name}} = require('{{memberof}}.{{name}}');
Foundation.plugin({{name}});
var elem = new Foundation.{{this.name}}(element);
Fires these events: {{#each this.fires}} {{this}} {{/each}}
{{/if}} {{#if this.params}}Name | Type | Description |
---|---|---|
{{this.name}} |
{{this.type.names.[0]}} | {{this.description}} |
Use these options to customize an instance of {{title}}. Plugin options can be set as individual data attributes, one combined data-options
attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.
Name | Description | Example |
---|---|---|
{{this.name}} | {{this.description}} | {{this.examples}} |
These events will fire from any element with a {{title}} plugin attached.
Name | Description |
---|---|
{{this.name}}.zf.{{../title}} | {{this.description}} |
Fires these events: {{#each this.fires}} {{this}} {{/each}}
{{/if}} {{#if this.params}}Name | Type | Description |
---|---|---|
{{this.name}} |
{{this.type.names.[0]}} | {{this.description}} |
Building Blocks is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:
These are placeholder items. If you have ideas for building blocks for this component, we're taking ideas on GitHub.