Jump to Nav

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.

NameTypeDefault ValueDescription
$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

ParameterTypeDefault ValueDescription
$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.

ParameterTypeDefault ValueDescription
$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

NameTypeDescription
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.

NameDescription
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.

NameTypeDescription
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.