foundation-toggleable¶
foundation-toggleable
is a vocabulary about the concept of an element that can be toggled in term of visibility.
A good example is a modal dialog, where it can shown to the user and closed accordingly.
Markup¶
.foundation-toggleable¶
Indicates the element is a toggleable.
Selector Rule:
.foundation-toggleable
Event¶
foundation-toggleable-show¶
The event that MUST be triggered when the toggleable is shown (from hidden previously).
The event has the following interface:
interface FoundationToggleableShowEvent {
(): void;
}
Example:
$(document).on("foundation-toggleable-show", function(e) {});
foundation-toggleable-hide¶
The event that MUST be triggered when the toggleable is hidden (from shown previously).
The event has the following interface:
interface FoundationToggleableHideEvent {
(): void;
}
Example:
$(document).on("foundation-toggleable-hide", function(e) {});
AdaptTo Interface¶
- type
foundation-toggleable
- condition
.foundation-toggleable
- returned type
FoundationToggleable
interface FoundationToggleable {
/**
* Returns <code>true</code> if the toggleable is currently showned to the user; <code>false</code> otherwise.
*/
isOpen(): boolean;
/**
* Shows the toggleable to the user.
* This method will trigger <code>foundation-toggleable-show</code> event.
*
* @param anchor The anchor that can be used as a reference when showing the element.
* Note that this param MAY be overloaded in the future (e.g. MouseEvent is passed).
* As such the implementor is REQUIRED to cater for the param that it doesn't understand.
*/
show(anchor?: Element): void;
/**
* Hides the toggleable from the user.
* This method will trigger <code>foundation-toggleable-hide</code> event.
*/
hide(): void;
}