iwmlib/doc/out/Button.html

3821 lines
96 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iwmlib API Documentation</title>
<meta name="description" content="The IWM Browser: One Browser for all apps." />
<meta property="og:title" content="iwmlib API Documentation"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content=""/>
<meta property="og:url" content="https://www.iwm-tuebingen.de"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<script src="scripts/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:400,700" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="styles/main.css">
<script>
var config = {"monospaceLinks":false,"cleverLinks":false,"applicationName":"iwmlib","disqus":"","googleAnalytics":"","openGraph":{"title":"iwmlib API Documentation","type":"website","image":"","site_name":"","url":"https://www.iwm-tuebingen.de"},"meta":{"title":"iwmlib API Documentation","description":"The IWM Browser: One Browser for all apps.","keyword":""},"linenums":true,"cleverlinks":true,"default":{"outputSourceFiles":true,"useLongnameInNav":false}};
</script>
</head>
<body>
<div id="wrap" class="clearfix">
<div class="navigation">
<h3 class="applicationName"><a href="index.html">iwmlib</a></h3>
<button id="menuToggle" class="btn btn-link btn-lg menu-toggle">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<div class="search">
<input id="search" type="text" class="form-control input-md" placeholder="Search...">
</div>
<ul class="list">
<li class="item" data-name="global">
<span class="title namespace ">
<span class="namespaceTag">
<span class="glyphicon glyphicon-globe"></span>
</span>
<a href="global.html">Global</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
<span class="subtitle">Typedefs</span>
<li class="parent" data-name="actionActiveCallback"><a href="global.html#actionActiveCallback">actionActiveCallback</a></li>
<li class="parent" data-name="actionCallback"><a href="global.html#actionCallback">actionCallback</a></li>
<li class="parent" data-name="actionCallback"><a href="global.html#actionCallback">actionCallback</a></li>
<li class="parent" data-name="afterActionCallback"><a href="global.html#afterActionCallback">afterActionCallback</a></li>
<li class="parent" data-name="afterActionCallback"><a href="global.html#afterActionCallback">afterActionCallback</a></li>
<li class="parent" data-name="beforeActionCallback"><a href="global.html#beforeActionCallback">beforeActionCallback</a></li>
<li class="parent" data-name="beforeActionCallback"><a href="global.html#beforeActionCallback">beforeActionCallback</a></li>
<li class="parent" data-name="onCompleteCallback"><a href="global.html#onCompleteCallback">onCompleteCallback</a></li>
<li class="parent" data-name="onCompleteCallback"><a href="global.html#onCompleteCallback">onCompleteCallback</a></li>
<li class="parent" data-name="onStartCallback"><a href="global.html#onStartCallback">onStartCallback</a></li>
<li class="parent" data-name="onStartCallback"><a href="global.html#onStartCallback">onStartCallback</a></li>
<li class="parent" data-name="onUpdateCallback"><a href="global.html#onUpdateCallback">onUpdateCallback</a></li>
<li class="parent" data-name="onUpdateCallback"><a href="global.html#onUpdateCallback">onUpdateCallback</a></li>
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="AbstractPopup">
<span class="title ">
<a href="AbstractPopup.html">AbstractPopup</a>
</span>
<ul class="members itemMembers">
<span class="subtitle">Members</span>
<li class="parent " data-name="AbstractPopup#content"><a href="AbstractPopup.html#content">content</a></li>
<li class="parent " data-name="AbstractPopup#header"><a href="AbstractPopup.html#header">header</a></li>
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class="parent " data-name="AbstractPopup#hide"><a href="AbstractPopup.html#hide">hide</a></li>
<li class="parent " data-name="AbstractPopup#layout"><a href="AbstractPopup.html#layout">layout</a></li>
<li class="parent " data-name="AbstractPopup#show"><a href="AbstractPopup.html#show">show</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Badge">
<span class="title ">
<a href="Badge.html">Badge</a>
</span>
<ul class="members itemMembers">
<span class="subtitle">Members</span>
<li class=" " data-name="Badge#content"><a href="Badge.html#content">content</a></li>
<li class=" " data-name="Badge#header"><a href="Badge.html#header">header</a></li>
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class=" " data-name="Badge#hide"><a href="Badge.html#hide">hide</a></li>
<li class=" " data-name="Badge#layout"><a href="Badge.html#layout">layout</a></li>
<li class=" " data-name="Badge#show"><a href="Badge.html#show">show</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="BlurFilter">
<span class="title ">
<a href="BlurFilter.html">BlurFilter</a>
</span>
<ul class="members itemMembers">
<span class="subtitle">Members</span>
<li class="parent " data-name="BlurFilter#blur"><a href="BlurFilter.html#blur">blur</a></li>
<li class="parent " data-name="BlurFilter#shape"><a href="BlurFilter.html#shape">shape</a></li>
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Button">
<span class="title ">
<a href="Button.html">Button</a>
</span>
<ul class="members itemMembers">
<span class="subtitle">Members</span>
<li class="parent " data-name="Button#active"><a href="Button.html#active">active</a></li>
<li class="parent " data-name="Button#disabled"><a href="Button.html#disabled">disabled</a></li>
<li class="parent " data-name="Button#iconColor"><a href="Button.html#iconColor">iconColor</a></li>
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class="parent " data-name="Button#capture"><a href="Button.html#capture">capture</a></li>
<li class="parent " data-name="Button#hide"><a href="Button.html#hide">hide</a></li>
<li class="parent " data-name="Button#layout"><a href="Button.html#layout">layout</a></li>
<li class="parent " data-name="Button#show"><a href="Button.html#show">show</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="ButtonGroup">
<span class="title ">
<a href="ButtonGroup.html">ButtonGroup</a>
</span>
<ul class="members itemMembers">
<span class="subtitle">Members</span>
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
<li class="parent " data-name="ButtonGroup#show"><a href="ButtonGroup.html#show">show</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="DeepZoomImage">
<span class="title ">
<a href="DeepZoomImage.html">DeepZoomImage</a>
</span>
<ul class="members itemMembers">
<span class="subtitle">Members</span>
<li class="parent " data-name="DeepZoomImage#baseSize"><a href="DeepZoomImage.html#baseSize">baseSize</a></li>
<li class="parent " data-name="DeepZoomImage#foreground"><a href="DeepZoomImage.html#foreground">foreground</a></li>
<li class="parent " data-name="DeepZoomImage#height"><a href="DeepZoomImage.html#height">height</a></li>
<li class="parent " data-name="DeepZoomImage#maxScale"><a href="DeepZoomImage.html#maxScale">maxScale</a></li>
<li class="parent " data-name="DeepZoomImage#pixelSize"><a href="DeepZoomImage.html#pixelSize">pixelSize</a></li>
<li class="parent " data-name="DeepZoomImage#width"><a href="DeepZoomImage.html#width">width</a></li>
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class="parent " data-name="DeepZoomImage#_calculateBounds"><a href="DeepZoomImage.html#_calculateBounds">_calculateBounds</a></li>
<li class="parent " data-name="DeepZoomImage#_createTiles"><a href="DeepZoomImage.html#_createTiles">_createTiles</a></li>
<li class="parent " data-name="DeepZoomImage#activate"><a href="DeepZoomImage.html#activate">activate</a></li>
<li class="parent " data-name="DeepZoomImage#addTiles"><a href="DeepZoomImage.html#addTiles">addTiles</a></li>
<li class="parent " data-name="DeepZoomImage#allTiles"><a href="DeepZoomImage.html#allTiles">allTiles</a></li>
<li class="parent " data-name="DeepZoomImage#bringTilesToFront"><a href="DeepZoomImage.html#bringTilesToFront">bringTilesToFront</a></li>
<li class="parent " data-name="DeepZoomImage#calculateBounds"><a href="DeepZoomImage.html#calculateBounds">calculateBounds</a></li>
<li class="parent " data-name="DeepZoomImage#changedTiles"><a href="DeepZoomImage.html#changedTiles">changedTiles</a></li>
<li class="parent " data-name="DeepZoomImage#deactivate"><a href="DeepZoomImage.html#deactivate">deactivate</a></li>
<li class="parent " data-name="DeepZoomImage#destroyObsoleteTiles"><a href="DeepZoomImage.html#destroyObsoleteTiles">destroyObsoleteTiles</a></li>
<li class="parent " data-name="DeepZoomImage#destroyTiles"><a href="DeepZoomImage.html#destroyTiles">destroyTiles</a></li>
<li class="parent " data-name="DeepZoomImage#destroyTilesAboveLevel"><a href="DeepZoomImage.html#destroyTilesAboveLevel">destroyTilesAboveLevel</a></li>
<li class="parent " data-name="DeepZoomImage#destroyUnneededTiles"><a href="DeepZoomImage.html#destroyUnneededTiles">destroyUnneededTiles</a></li>
<li class="parent " data-name="DeepZoomImage#ensureAllTiles"><a href="DeepZoomImage.html#ensureAllTiles">ensureAllTiles</a></li>
<li class="parent " data-name="DeepZoomImage#ensureTiles"><a href="DeepZoomImage.html#ensureTiles">ensureTiles</a></li>
<li class="parent " data-name="DeepZoomImage#levelAndAlphaForScale"><a href="DeepZoomImage.html#levelAndAlphaForScale">levelAndAlphaForScale</a></li>
<li class="parent " data-name="DeepZoomImage#levelForScale"><a href="DeepZoomImage.html#levelForScale">levelForScale</a></li>
<li class="parent " data-name="DeepZoomImage#neededTiles"><a href="DeepZoomImage.html#neededTiles">neededTiles</a></li>
<li class="parent " data-name="DeepZoomImage#populateAllTiles"><a href="DeepZoomImage.html#populateAllTiles">populateAllTiles</a></li>
<li class="parent " data-name="DeepZoomImage#populateTiles"><a href="DeepZoomImage.html#populateTiles">populateTiles</a></li>
<li class="parent " data-name="DeepZoomImage#setup"><a href="DeepZoomImage.html#setup">setup</a></li>
<li class="parent " data-name="DeepZoomImage#setupTiles"><a href="DeepZoomImage.html#setupTiles">setupTiles</a></li>
<li class="parent " data-name="DeepZoomImage#thumbnail"><a href="DeepZoomImage.html#thumbnail">thumbnail</a></li>
<li class="parent " data-name="DeepZoomImage#tintObsoleteTiles"><a href="DeepZoomImage.html#tintObsoleteTiles">tintObsoleteTiles</a></li>
<li class="parent " data-name="DeepZoomImage#transformed"><a href="DeepZoomImage.html#transformed">transformed</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="DeepZoomInfo">
<span class="title ">
<a href="DeepZoomInfo.html">DeepZoomInfo</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class="parent " data-name="DeepZoomInfo#dimensions"><a href="DeepZoomInfo.html#dimensions">dimensions</a></li>
<li class="parent " data-name="DeepZoomInfo#getDimensions"><a href="DeepZoomInfo.html#getDimensions">getDimensions</a></li>
<li class="parent " data-name="DeepZoomInfo#getNumTiles"><a href="DeepZoomInfo.html#getNumTiles">getNumTiles</a></li>
<li class="parent " data-name="DeepZoomInfo#getScale"><a href="DeepZoomInfo.html#getScale">getScale</a></li>
<li class="parent " data-name="DeepZoomInfo#imageForURL"><a href="DeepZoomInfo.html#imageForURL">imageForURL</a></li>
<li class="parent " data-name="DeepZoomInfo#urlForTile"><a href="DeepZoomInfo.html#urlForTile">urlForTile</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Flippable">
<span class="title ">
<a href="Flippable.html">Flippable</a>
</span>
<ul class="members itemMembers">
<span class="subtitle">Members</span>
<li class="parent " data-name="Flippable#flipped"><a href="Flippable.html#flipped">flipped</a></li>
<li class="parent " data-name="Flippable#frontSideInFront"><a href="Flippable.html#frontSideInFront">frontSideInFront</a></li>
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class="parent " data-name="Flippable#layout"><a href="Flippable.html#layout">layout</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="FontInfo">
<span class="title ">
<a href="FontInfo.html">FontInfo</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Hypenate">
<span class="title ">
<a href="Hypenate.html">Hypenate</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class="parent " data-name="Hypenate.splitLines"><a href="Hypenate.html#.splitLines">splitLines</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="InteractivePopup">
<span class="title ">
<a href="InteractivePopup.html">InteractivePopup</a>
</span>
<ul class="members itemMembers">
<span class="subtitle">Members</span>
<li class=" " data-name="InteractivePopup#content"><a href="InteractivePopup.html#content">content</a></li>
<li class=" " data-name="InteractivePopup#header"><a href="InteractivePopup.html#header">header</a></li>
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class=" " data-name="InteractivePopup#hide"><a href="InteractivePopup.html#hide">hide</a></li>
<li class="parent " data-name="InteractivePopup#layout"><a href="InteractivePopup.html#layout">layout</a></li>
<li class=" " data-name="InteractivePopup#show"><a href="InteractivePopup.html#show">show</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="LabeledGraphics">
<span class="title ">
<a href="LabeledGraphics.html">LabeledGraphics</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class="parent " data-name="LabeledGraphics#clear"><a href="LabeledGraphics.html#clear">clear</a></li>
<li class="parent " data-name="LabeledGraphics#debugInfos"><a href="LabeledGraphics.html#debugInfos">debugInfos</a></li>
<li class="parent " data-name="LabeledGraphics#ensureLabel"><a href="LabeledGraphics.html#ensureLabel">ensureLabel</a></li>
<li class="parent " data-name="LabeledGraphics#getLabel"><a href="LabeledGraphics.html#getLabel">getLabel</a></li>
<li class="parent " data-name="LabeledGraphics#hideLabel"><a href="LabeledGraphics.html#hideLabel">hideLabel</a></li>
<li class="parent " data-name="LabeledGraphics#removeLabel"><a href="LabeledGraphics.html#removeLabel">removeLabel</a></li>
<li class="parent " data-name="LabeledGraphics#truncateLabel"><a href="LabeledGraphics.html#truncateLabel">truncateLabel</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="LabeledGraphics.exports.LabeledGraphics">
<span class="title ">
<a href="LabeledGraphics.exports.LabeledGraphics.html">LabeledGraphics.exports.LabeledGraphics</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="List">
<span class="title ">
<a href="List.html">List</a>
</span>
<ul class="members itemMembers">
<span class="subtitle">Members</span>
<li class="parent " data-name="List#innerHeight"><a href="List.html#innerHeight">innerHeight</a></li>
<li class="parent " data-name="List#innerWidth"><a href="List.html#innerWidth">innerWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class="parent " data-name="List#capture"><a href="List.html#capture">capture</a></li>
<li class="parent " data-name="List#layout"><a href="List.html#layout">layout</a></li>
<li class="parent " data-name="List#resize"><a href="List.html#resize">resize</a></li>
<li class="parent " data-name="List#setItems"><a href="List.html#setItems">setItems</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Message">
<span class="title ">
<a href="Message.html">Message</a>
</span>
<ul class="members itemMembers">
<span class="subtitle">Members</span>
<li class=" " data-name="Message#content"><a href="Message.html#content">content</a></li>
<li class=" " data-name="Message#header"><a href="Message.html#header">header</a></li>
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class=" " data-name="Message#hide"><a href="Message.html#hide">hide</a></li>
<li class="parent " data-name="Message#layout"><a href="Message.html#layout">layout</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="MessageInteractivePopup">
<span class="title ">
<a href="MessageInteractivePopup.html">MessageInteractivePopup</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="MessageMessageInteractivePopup">
<span class="title ">
<a href="MessageMessageInteractivePopup.html">MessageMessageInteractivePopup</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Modal">
<span class="title ">
<a href="Modal.html">Modal</a>
</span>
<ul class="members itemMembers">
<span class="subtitle">Members</span>
<li class="parent " data-name="Modal#content"><a href="Modal.html#content">content</a></li>
<li class="parent " data-name="Modal#header"><a href="Modal.html#header">header</a></li>
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class="parent " data-name="Modal#hide"><a href="Modal.html#hide">hide</a></li>
<li class="parent " data-name="Modal#layout"><a href="Modal.html#layout">layout</a></li>
<li class="parent " data-name="Modal#show"><a href="Modal.html#show">show</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="ModalInteractivePopup">
<span class="title ">
<a href="ModalInteractivePopup.html">ModalInteractivePopup</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="ModalModalInteractivePopup">
<span class="title ">
<a href="ModalModalInteractivePopup.html">ModalModalInteractivePopup</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="PIXIApp">
<span class="title ">
<a href="PIXIApp.html">PIXIApp</a>
</span>
<ul class="members itemMembers">
<span class="subtitle">Members</span>
<li class="parent " data-name="PIXIApp#center"><a href="PIXIApp.html#center">center</a></li>
<li class="parent " data-name="PIXIApp#size"><a href="PIXIApp.html#size">size</a></li>
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class="parent " data-name="PIXIApp#addFpsDisplay"><a href="PIXIApp.html#addFpsDisplay">addFpsDisplay</a></li>
<li class="parent " data-name="PIXIApp#checkOrientation"><a href="PIXIApp.html#checkOrientation">checkOrientation</a></li>
<li class="parent " data-name="PIXIApp#convertPointFromNodeToPage"><a href="PIXIApp.html#convertPointFromNodeToPage">convertPointFromNodeToPage</a></li>
<li class="parent " data-name="PIXIApp#convertPointFromPageToNode"><a href="PIXIApp.html#convertPointFromPageToNode">convertPointFromPageToNode</a></li>
<li class="parent " data-name="PIXIApp#draw"><a href="PIXIApp.html#draw">draw</a></li>
<li class="parent " data-name="PIXIApp#expandRenderer"><a href="PIXIApp.html#expandRenderer">expandRenderer</a></li>
<li class="parent " data-name="PIXIApp#layout"><a href="PIXIApp.html#layout">layout</a></li>
<li class="parent " data-name="PIXIApp#loadSprites"><a href="PIXIApp.html#loadSprites">loadSprites</a></li>
<li class="parent " data-name="PIXIApp#loadTextures"><a href="PIXIApp.html#loadTextures">loadTextures</a></li>
<li class="parent " data-name="PIXIApp#message"><a href="PIXIApp.html#message">message</a></li>
<li class="parent " data-name="PIXIApp#modal"><a href="PIXIApp.html#modal">modal</a></li>
<li class="parent " data-name="PIXIApp#mutate"><a href="PIXIApp.html#mutate">mutate</a></li>
<li class="parent " data-name="PIXIApp#orientation"><a href="PIXIApp.html#orientation">orientation</a></li>
<li class="parent " data-name="PIXIApp#orientationChanged"><a href="PIXIApp.html#orientationChanged">orientationChanged</a></li>
<li class="parent " data-name="PIXIApp#progress"><a href="PIXIApp.html#progress">progress</a></li>
<li class="parent " data-name="PIXIApp#query"><a href="PIXIApp.html#query">query</a></li>
<li class="parent " data-name="PIXIApp#resize"><a href="PIXIApp.html#resize">resize</a></li>
<li class="parent " data-name="PIXIApp#setup"><a href="PIXIApp.html#setup">setup</a></li>
<li class="parent " data-name="PIXIApp#subscribe"><a href="PIXIApp.html#subscribe">subscribe</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Popup">
<span class="title ">
<a href="Popup.html">Popup</a>
</span>
<ul class="members itemMembers">
<span class="subtitle">Members</span>
<li class=" " data-name="Popup#content"><a href="Popup.html#content">content</a></li>
<li class=" " data-name="Popup#header"><a href="Popup.html#header">header</a></li>
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class=" " data-name="Popup#hide"><a href="Popup.html#hide">hide</a></li>
<li class=" " data-name="Popup#layout"><a href="Popup.html#layout">layout</a></li>
<li class=" " data-name="Popup#show"><a href="Popup.html#show">show</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="PopupInteractivePopup">
<span class="title ">
<a href="PopupInteractivePopup.html">PopupInteractivePopup</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="PopupMenu">
<span class="title ">
<a href="PopupMenu.html">PopupMenu</a>
</span>
<ul class="members itemMembers">
<span class="subtitle">Members</span>
<li class=" " data-name="PopupMenu#content"><a href="PopupMenu.html#content">content</a></li>
<li class=" " data-name="PopupMenu#header"><a href="PopupMenu.html#header">header</a></li>
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class=" " data-name="PopupMenu#hide"><a href="PopupMenu.html#hide">hide</a></li>
<li class=" " data-name="PopupMenu#layout"><a href="PopupMenu.html#layout">layout</a></li>
<li class=" " data-name="PopupMenu#show"><a href="PopupMenu.html#show">show</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="PopupMenuPopupInteractivePopup">
<span class="title ">
<a href="PopupMenuPopupInteractivePopup.html">PopupMenuPopupInteractivePopup</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="PopupMenuPopupMenuPopupInteractivePopup">
<span class="title ">
<a href="PopupMenuPopupMenuPopupInteractivePopup.html">PopupMenuPopupMenuPopupInteractivePopup</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="PopupMenuPopupMenuPopupPopupInteractivePopup">
<span class="title ">
<a href="PopupMenuPopupMenuPopupPopupInteractivePopup.html">PopupMenuPopupMenuPopupPopupInteractivePopup</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="PopupMenuPopupPopupInteractivePopup">
<span class="title ">
<a href="PopupMenuPopupPopupInteractivePopup.html">PopupMenuPopupPopupInteractivePopup</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="PopupPopupInteractivePopup">
<span class="title ">
<a href="PopupPopupInteractivePopup.html">PopupPopupInteractivePopup</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Progress">
<span class="title ">
<a href="Progress.html">Progress</a>
</span>
<ul class="members itemMembers">
<span class="subtitle">Members</span>
<li class="parent " data-name="Progress#progress"><a href="Progress.html#progress">progress</a></li>
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class="parent " data-name="Progress#hide"><a href="Progress.html#hide">hide</a></li>
<li class="parent " data-name="Progress#layout"><a href="Progress.html#layout">layout</a></li>
<li class="parent " data-name="Progress#show"><a href="Progress.html#show">show</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Scrollview">
<span class="title ">
<a href="Scrollview.html">Scrollview</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class="parent " data-name="Scrollview#layout"><a href="Scrollview.html#layout">layout</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Slider">
<span class="title ">
<a href="Slider.html">Slider</a>
</span>
<ul class="members itemMembers">
<span class="subtitle">Members</span>
<li class="parent " data-name="Slider#disabled"><a href="Slider.html#disabled">disabled</a></li>
<li class="parent " data-name="Slider#value"><a href="Slider.html#value">value</a></li>
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class="parent " data-name="Slider#hide"><a href="Slider.html#hide">hide</a></li>
<li class="parent " data-name="Slider#layout"><a href="Slider.html#layout">layout</a></li>
<li class="parent " data-name="Slider#show"><a href="Slider.html#show">show</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Switch">
<span class="title ">
<a href="Switch.html">Switch</a>
</span>
<ul class="members itemMembers">
<span class="subtitle">Members</span>
<li class="parent " data-name="Switch#active"><a href="Switch.html#active">active</a></li>
<li class="parent " data-name="Switch#disabled"><a href="Switch.html#disabled">disabled</a></li>
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class="parent " data-name="Switch#hide"><a href="Switch.html#hide">hide</a></li>
<li class="parent " data-name="Switch#layout"><a href="Switch.html#layout">layout</a></li>
<li class="parent " data-name="Switch#show"><a href="Switch.html#show">show</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="TextLabel.TextLabel">
<span class="title ">
<a href="TextLabel.TextLabel.html">TextLabel.TextLabel</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Theme">
<span class="title ">
<a href="Theme.html">Theme</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class="parent " data-name="Theme.fromString"><a href="Theme.html#.fromString">fromString</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="ThemeDark">
<span class="title ">
<a href="ThemeDark.html">ThemeDark</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="ThemeLight">
<span class="title ">
<a href="ThemeLight.html">ThemeLight</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="ThemeRed">
<span class="title ">
<a href="ThemeRed.html">ThemeRed</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="TileQuadNode">
<span class="title ">
<a href="TileQuadNode.html">TileQuadNode</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class="parent " data-name="TileQuadNode#link"><a href="TileQuadNode.html#link">link</a></li>
<li class="parent " data-name="TileQuadNode#noQuads"><a href="TileQuadNode.html#noQuads">noQuads</a></li>
<li class="parent " data-name="TileQuadNode#unlink"><a href="TileQuadNode.html#unlink">unlink</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Tooltip">
<span class="title ">
<a href="Tooltip.html">Tooltip</a>
</span>
<ul class="members itemMembers">
<span class="subtitle">Members</span>
<li class=" " data-name="Tooltip#content"><a href="Tooltip.html#content">content</a></li>
<li class=" " data-name="Tooltip#header"><a href="Tooltip.html#header">header</a></li>
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class=" " data-name="Tooltip#hide"><a href="Tooltip.html#hide">hide</a></li>
<li class=" " data-name="Tooltip#layout"><a href="Tooltip.html#layout">layout</a></li>
<li class=" " data-name="Tooltip#show"><a href="Tooltip.html#show">show</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="UITest">
<span class="title ">
<a href="UITest.html">UITest</a>
</span>
<ul class="members itemMembers">
<span class="subtitle">Members</span>
<li class="parent " data-name="UITest#timeline"><a href="UITest.html#timeline">timeline</a></li>
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class="parent " data-name="UITest#clear"><a href="UITest.html#clear">clear</a></li>
<li class="parent " data-name="UITest#pan"><a href="UITest.html#pan">pan</a></li>
<li class="parent " data-name="UITest#pinch"><a href="UITest.html#pinch">pinch</a></li>
<li class="parent " data-name="UITest#restart"><a href="UITest.html#restart">restart</a></li>
<li class="parent " data-name="UITest#start"><a href="UITest.html#start">start</a></li>
<li class="parent " data-name="UITest#stop"><a href="UITest.html#stop">stop</a></li>
<li class="parent " data-name="UITest#tap"><a href="UITest.html#tap">tap</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Volatile">
<span class="title ">
<a href="Volatile.html">Volatile</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li class="parent " data-name="Volatile#layout"><a href="Volatile.html#layout">layout</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
</ul>
</div>
<div class="main">
<h1 class="page-title" data-filename="Button.html">Class: Button</h1>
<section>
<header>
<div class="header content-size">
<h2>Button
</h2>
<div class="class-description"><p>Class that represents a PixiJS Button.</p></div>
</div>
</header>
<article class="content-size">
<div class="container-overview">
<dt>
<div class="nameContainer">
<h4 class="name" id="Button">
<a class="share-icon" href="#Button"><span class="glyphicon glyphicon-link"></span></a>
<span class="">
new Button
</span>
<span class="signature">(<span class="optional">opts</span>)</span>
</h4>
<div class="tag-source">
<a href="pixi_button.js.html#line109">button.js:109</a>
</div>
</div>
</dt>
<dd>
<div class="description">
<p>Creates an instance of a Button.</p>
</div>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>opts</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">
<span class="optional">optional</span>
<p>An options object to specify to style and behaviour of the button.</p>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>id</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
auto generated
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The id of the button.</p></td>
</tr>
<tr>
<td class="name"><code>label</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="default">
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The label of the button.</p></td>
</tr>
<tr>
<td class="name"><code>x</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
0
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The x position of the button. Can be also set after creation with button.x = 0.</p></td>
</tr>
<tr>
<td class="name"><code>y</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
0
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The y position of the button. Can be also set after creation with button.y = 0.</p></td>
</tr>
<tr>
<td class="name"><code>theme</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type"><a href="Theme.html">Theme</a></span>
</td>
<td class="default">
dark
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The theme to use for this button. Possible values are dark, light, red
or a Theme object.</p></td>
</tr>
<tr>
<td class="name"><code>minWidth</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
44
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The minimum width of the button.</p></td>
</tr>
<tr>
<td class="name"><code>minHeight</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
44
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The minimum height of the button.</p></td>
</tr>
<tr>
<td class="name"><code>padding</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
Theme.padding
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The inner spacing (distance from icon and/or label) to the border.</p></td>
</tr>
<tr>
<td class="name"><code>icon</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">PIXI.DisplayObject</span>
</td>
<td class="default">
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The icon of the button. Can be a predefined one, an URL or an PIXI.DisplayObject.</p></td>
</tr>
<tr>
<td class="name"><code>iconActive</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">PIXI.DisplayObject</span>
</td>
<td class="default">
icon
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The icon of the button when activated. Can be a predefined one, an URL or an PIXI.DisplayObject.</p></td>
</tr>
<tr>
<td class="name"><code>iconPosition</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="default">
left
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The position of the icon in relation to the label. Can be left or right.</p></td>
</tr>
<tr>
<td class="name"><code>iconColor</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
Theme.iconColor
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The color of the icon (set by the tint property) as a hex value.</p></td>
</tr>
<tr>
<td class="name"><code>iconColorActive</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
Theme.iconColorActive
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The color of the icon when activated.</p></td>
</tr>
<tr>
<td class="name"><code>fill</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
Theme.fill
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The color of the button background as a hex value.</p></td>
</tr>
<tr>
<td class="name"><code>fillAlpha</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
Theme.fillAlpha
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The alpha value of the background.</p></td>
</tr>
<tr>
<td class="name"><code>fillActive</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
Theme.fillActive
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The color of the button background when activated.</p></td>
</tr>
<tr>
<td class="name"><code>fillActiveAlpha</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
Theme.fillActiveAlpha
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The alpha value of the background when activated.</p></td>
</tr>
<tr>
<td class="name"><code>stroke</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
Theme.stroke
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The color of the border as a hex value.</p></td>
</tr>
<tr>
<td class="name"><code>strokeWidth</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
Theme.strokeWidth
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The width of the border in pixel.</p></td>
</tr>
<tr>
<td class="name"><code>strokeAlpha</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
Theme.strokeAlpha
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The alpha value of the border.</p></td>
</tr>
<tr>
<td class="name"><code>strokeActive</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
Theme.strokeActive
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The color of the border when activated.</p></td>
</tr>
<tr>
<td class="name"><code>strokeActiveWidth</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
Theme.strokeActiveWidth
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The width of the border in pixel when activated.</p></td>
</tr>
<tr>
<td class="name"><code>strokeActiveAlpha</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
Theme.strokeActiveAlpha
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The alpha value of the border when activated.</p></td>
</tr>
<tr>
<td class="name"><code>textStyle</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="default">
Theme.textStyle
</td>
<td class="description last">
<span class="optional">optional</span>
<p>A textstyle object for the styling of the label. See PIXI.TextStyle
for possible options.</p></td>
</tr>
<tr>
<td class="name"><code>textStyleActive</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
Theme.textStyleActive
</td>
<td class="description last">
<span class="optional">optional</span>
<p>A textstyle object for the styling of the label when the
button is activated. See PIXI.TextStyle for possible options.</p></td>
</tr>
<tr>
<td class="name"><code>style</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="default">
default
</td>
<td class="description last">
<span class="optional">optional</span>
<p>A shortcut for styling options. Possible values are default, link.</p></td>
</tr>
<tr>
<td class="name"><code>radius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
Theme.radius
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The radius of the four corners of the button (which is a rounded rectangle).</p></td>
</tr>
<tr>
<td class="name"><code>disabled</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="default">
false
</td>
<td class="description last">
<span class="optional">optional</span>
<p>Is the button disabled? When disabled, the button has a lower alpha value
and cannot be clicked (interactive is set to false).</p></td>
</tr>
<tr>
<td class="name"><code>active</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="default">
false
</td>
<td class="description last">
<span class="optional">optional</span>
<p>Is the button initially active?</p></td>
</tr>
<tr>
<td class="name"><code>action</code></td>
<td class="type">
<span class="param-type"><a href="global.html#actionCallback">actionCallback</a></span>
</td>
<td class="default">
</td>
<td class="description last">
<span class="optional">optional</span>
<p>Executed when the button was triggered (by pointerup).</p></td>
</tr>
<tr>
<td class="name"><code>beforeAction</code></td>
<td class="type">
<span class="param-type"><a href="global.html#beforeActionCallback">beforeActionCallback</a></span>
</td>
<td class="default">
</td>
<td class="description last">
<span class="optional">optional</span>
<p>Executed before the main action is triggered.</p></td>
</tr>
<tr>
<td class="name"><code>afterAction</code></td>
<td class="type">
<span class="param-type"><a href="global.html#afterActionCallback">afterActionCallback</a></span>
</td>
<td class="default">
</td>
<td class="description last">
<span class="optional">optional</span>
<p>Executed after the main action was triggered.</p></td>
</tr>
<tr>
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="default">
default
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The type of the button. Can be default or checkbox. When the type is
checkbox, the active state is toggled automatically.</p></td>
</tr>
<tr>
<td class="name"><code>align</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="default">
center
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The horizontal position of the label and the icon. Possible values are
left, center and right. Only affects the style when the minWidth is bigger than the width of the icon and label.</p></td>
</tr>
<tr>
<td class="name"><code>verticalAlign</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="default">
middle
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The vertical position of the label and the icon. Possible values are
top, middle and button. Only affects the style when the minHeight is bigger than the height of the icon and label.</p></td>
</tr>
<tr>
<td class="name"><code>tooltip</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">object</span>
</td>
<td class="default">
</td>
<td class="description last">
<span class="optional">optional</span>
<p>A string for the label of the tooltip or an object to configure the tooltip
to display.</p></td>
</tr>
<tr>
<td class="name"><code>badge</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">object</span>
</td>
<td class="default">
</td>
<td class="description last">
<span class="optional">optional</span>
<p>A string for the label of the badge or an object to configure the badge to display.
If the parameter is an object, all badge options can be set plus the following:</p>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>align</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="default">
right
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The horizontal alignment of the badge. Possible values: left, center, right</p></td>
</tr>
<tr>
<td class="name"><code>verticalAlign</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="default">
top
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The vertical alignment of the badge. Possible values: top, middle, bottom</p></td>
</tr>
<tr>
<td class="name"><code>offsetLeft</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
0
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The horizontal shift of the badge.</p></td>
</tr>
<tr>
<td class="name"><code>offsetTop</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
0
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The vertical shift of the badge.</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="name"><code>visible</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="default">
true
</td>
<td class="description last">
<span class="optional">optional</span>
<p>Is the button initially visible (property visible)?</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a target="_blank" href="http://pixijs.download/dev/docs/PIXI.Container.html">PIXI.Container</a></li>
<li><a target="_blank" href="https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/button.html">DocTest</a></li>
</ul>
</dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>// Create the button
const button = new Button({
label: 'My Button',
action: () => console.log('Button was clicked')
})
// Add the button to a DisplayObject
app.scene.addChild(button)</code></pre>
</dd>
</div>
<h3 class="subsection-title">Extends</h3>
<ul>
<li>PIXI.Container</li>
</ul>
<h3 class="subsection-title">Members</h3>
<dl class="list-members">
<dt>
<div class="nameContainer">
<h4 class="name" id="active">
<a class="share-icon" href="#active"><span class="glyphicon glyphicon-link"></span></a>
<span class="">active</span>
<span class="type-signature type">boolean</span>
</h4>
</div>
</dt>
<dd>
<div class="description">
<p>Gets or sets the active state.</p>
</div>
<dl class="details">
</dl>
</dd>
<dt>
<div class="nameContainer">
<h4 class="name" id="disabled">
<a class="share-icon" href="#disabled"><span class="glyphicon glyphicon-link"></span></a>
<span class="">disabled</span>
<span class="type-signature type">boolean</span>
</h4>
</div>
</dt>
<dd>
<div class="description">
<p>Gets or sets the disabled state. When disabled, the button cannot be clicked.</p>
</div>
<dl class="details">
</dl>
</dd>
<dt>
<div class="nameContainer">
<h4 class="name" id="iconColor">
<a class="share-icon" href="#iconColor"><span class="glyphicon glyphicon-link"></span></a>
<span class="">iconColor</span>
<span class="type-signature type">number</span>
</h4>
</div>
</dt>
<dd>
<div class="description">
<p>Gets or sets the color of the current icon (no matter how the status is). Changing the color, changes
the tint property of the icon sprite.</p>
</div>
<dl class="details">
</dl>
</dd>
</dl>
<h3 class="subsection-title">Methods</h3>
<dl class="list-methods">
<dt>
<div class="nameContainer">
<h4 class="name" id="capture">
<a class="share-icon" href="#capture"><span class="glyphicon glyphicon-link"></span></a>
<span class="">
capture
</span>
<span class="signature">(event)</span>
</h4>
<div class="tag-source">
<a href="pixi_button.js.html#line207">button.js:207</a>
</div>
</div>
</dt>
<dd>
<div class="description">
<p>Captures an event to inform InteractionMapper about processed events.</p>
</div>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>event</code></td>
<td class="type">
<span class="param-type">event</span>
|
<span class="param-type">PIXI.InteractionEvent</span>
</td>
<td class="description last">
<p>The PIXI event to capture.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<dt>
<div class="nameContainer">
<h4 class="name" id="hide">
<a class="share-icon" href="#hide"><span class="glyphicon glyphicon-link"></span></a>
<span class="">
hide
</span>
<span class="signature">()</span><span class="type-signature"><a href="Button.html">Button</a></span>
</h4>
<div class="tag-source">
<a href="pixi_button.js.html#line659">button.js:659</a>
</div>
</div>
</dt>
<dd>
<div class="description">
<p>Hides the button (sets his alpha values to 0).</p>
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<table class="params">
<thead>
<tr>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="type">
<a href="Button.html">Button</a>
</td>
<td class="description last">A reference to the button for chaining.</td>
</tr>
</tbody>
</table>
</dd>
<dt>
<div class="nameContainer">
<h4 class="name" id="layout">
<a class="share-icon" href="#layout"><span class="glyphicon glyphicon-link"></span></a>
<span class="">
layout
</span>
<span class="signature">()</span><span class="type-signature"><a href="Button.html">Button</a></span>
</h4>
<div class="tag-source">
<a href="pixi_button.js.html#line402">button.js:402</a>
</div>
</div>
</dt>
<dd>
<div class="description">
<p>Should be called to refresh the layout of the button. Can be used after resizing.</p>
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<table class="params">
<thead>
<tr>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="type">
<a href="Button.html">Button</a>
</td>
<td class="description last">A reference to the button for chaining.</td>
</tr>
</tbody>
</table>
</dd>
<dt>
<div class="nameContainer">
<h4 class="name" id="show">
<a class="share-icon" href="#show"><span class="glyphicon glyphicon-link"></span></a>
<span class="">
show
</span>
<span class="signature">()</span><span class="type-signature"><a href="Button.html">Button</a></span>
</h4>
<div class="tag-source">
<a href="pixi_button.js.html#line643">button.js:643</a>
</div>
</div>
</dt>
<dd>
<div class="description">
<p>Shows the button (sets his alpha values to 1).</p>
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<table class="params">
<thead>
<tr>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="type">
<a href="Button.html">Button</a>
</td>
<td class="description last">A reference to the button for chaining.</td>
</tr>
</tbody>
</table>
</dd>
</dl>
</article>
</section>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>
</div>
<script>prettyPrint();</script>
<script src="scripts/main.js"></script>
</body>
</html>