Component

JavaScript

This is a component page.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<button class="button" type="button">Button</a>

Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

Name	Type	Default Value	Description
`$var-basic`	Number	`true`	This is a basic variable.
`$var-multi`	Number or List	`10px`	This is a variable with multiple types.
`$var-map`	Map	`one: true two: false`	This ia a map.
`$var-since`	Number	`10px`	This is a variable with a changelog.

Mixins

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.

mixin-basic

Added in 6.2

@include mixin-basic($param1, $param2, $param3) { }

This is a mixin.

Aliases: mixin-alias()

Learn more: Foundation for Sites

Parameter	Type	Default Value	Description
`$param1`	Boolean	`None`	This is a required parameter.
`$param2`	Boolean	`false`	This is a parameter with a default value.
`$param3`	Number or List	`10px`	This is a parameter with multiple types.

mixin-deprecated

Deprecated in This mixin was replaced by `mixin-basic()` in version 6.2, and will be removed in 6.2.

@include mixin-deprecated;

This is a deprecated mixin.

Functions

square

square($num)

Multiplies a number by itself.

Parameter	Type	Default Value	Description
`$num`	Number	`None`	Number to square.

JavaScript Reference

Initializing

The file component.js must be included in your JavaScript to use this plugin, along with foundation.core.js. This plugin also requires these utility libraries:

foundation.core.js

Foundation.Plugin

This is a class constructor.

var elem = new Foundation.Plugin(element, options);

Fires these events: init.zf.event:plugin

Name	Type	Description
`param1`	object	This is a parameter.
`param2`	string	This is an optional parameter.
`param3`	boolean	This is an optional parameter with a default value.
`param4`	string	This is a parameter that accepts multiple types.

Events

These events will fire from any element with a Component plugin attached.

Name	Description
`plugin.zf.component`	Fires if the target element has the class after a toggle.

Methods

callbackFunction

$('#element').foundation('callbackFunction', cb);

This is a function with a callback parameter.

Name	Type	Description
`cb`	callbackFunctionCallback	Callback to run.

sinceFunction

$('#element').foundation('sinceFunction');

This function was added in a specific version.

exampleFunction

$('#element').foundation('exampleFunction');

This is a function with examples.