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>
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 |
This ia a map. |
$var-since |
Number | 10px |
This is a variable with a changelog. |
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.
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. |
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.
square($num)
Multiplies a number by itself.
Parameter | Type | Default Value | Description |
---|---|---|---|
$num |
Number | None |
Number to square. |
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
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. |
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. |
$('#element').foundation('callbackFunction', cb);
This is a function with a callback parameter.
Name | Type | Description |
---|---|---|
cb |
callbackFunctionCallback | Callback to run. |
$('#element').foundation('sinceFunction');
This function was added in a specific version.
$('#element').foundation('exampleFunction');
This is a function with examples.