itsa-react-button
Version:
Interactive button, like a normal button, but with extended behaviour
1,403 lines (822 loc) • 36.8 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Button - itsa-react-button</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
<link rel="icon" href="../assets/favicon.ico">
<script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
<div id="doc">
<div id="hd" class="yui3-g header">
<div class="yui3-u-3-4">
<h1><img src="https://avatars0.githubusercontent.com/u/8314644?v=3&s=84" title="itsa-react-button"></h1>
</div>
<div class="yui3-u-1-4 version">
<em>API Docs for: 0.0.1</em>
</div>
</div>
<div id="bd" class="yui3-g">
<div class="yui3-u-1-4">
<div id="docs-sidebar" class="sidebar apidocs">
<div id="api-list">
<h2 class="off-left">APIs</h2>
<div id="api-tabview" class="tabview">
<ul class="tabs">
<li><a href="#api-classes">Classes</a></li>
<li><a href="#api-modules">Modules</a></li>
</ul>
<div id="api-tabview-filter">
<input type="search" id="api-filter" placeholder="Type to filter APIs">
</div>
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="../classes/Button.html">Button</a></li>
</ul>
<ul id="api-modules" class="apis modules">
<li><a href="../modules/itsa-react-button.html">itsa-react-button</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui3-u-3-4">
<div id="api-options">
Show:
<label for="api-show-inherited">
<input type="checkbox" id="api-show-inherited" checked>
Inherited
</label>
<label for="api-show-protected">
<input type="checkbox" id="api-show-protected">
Protected
</label>
<label for="api-show-private">
<input type="checkbox" id="api-show-private">
Private
</label>
<label for="api-show-deprecated">
<input type="checkbox" id="api-show-deprecated">
Deprecated
</label>
</div>
<div class="apidocs">
<div id="docs-main">
<div class="content">
<h1>Button Class</h1>
<div class="box meta">
<div class="foundat">
Defined in: <a href="../files/lib_component.jsx.html#l3"><code>lib/component.jsx:3</code></a>
</div>
Module: <a href="../modules/itsa-react-button.html">itsa-react-button</a>
</div>
<div class="box intro">
<p>React-Component: refined Button.</p>
<p><i>Copyright (c) 2016 ItsAsbreuk - <a href="http://itsasbreuk.nl">http://itsasbreuk.nl</a></i><br>
New BSD License - <a href="http://choosealicense.com/licenses/bsd-3-clause/">http://choosealicense.com/licenses/bsd-3-clause/</a></p>
</div>
<div id="classdocs" class="tabview">
<ul class="api-class-tabs">
<li class="api-class-tab index"><a href="#index">Index</a></li>
<li class="api-class-tab methods"><a href="#methods">Methods</a></li>
<li class="api-class-tab properties"><a href="#properties">Properties</a></li>
</ul>
<div>
<div id="index" class="api-class-tabpanel index">
<h2 class="off-left">Item Index</h2>
<div class="index-section methods">
<h3>Methods</h3>
<ul class="index-list methods">
<li class="index-item method private">
<a href="#method__getDataAttrs">_getDataAttrs</a>
</li>
<li class="index-item method private">
<a href="#method__processKeyUp">_processKeyUp</a>
</li>
<li class="index-item method private">
<a href="#method__saveHTML">_saveHTML</a>
</li>
<li class="index-item method">
<a href="#method_blur">blur</a>
</li>
<li class="index-item method">
<a href="#method_componentDidMount">componentDidMount</a>
</li>
<li class="index-item method">
<a href="#method_componentWillUnmount">componentWillUnmount</a>
</li>
<li class="index-item method">
<a href="#method_focus">focus</a>
</li>
<li class="index-item method">
<a href="#method_handleClick">handleClick</a>
</li>
<li class="index-item method">
<a href="#method_handleKeyDown">handleKeyDown</a>
</li>
<li class="index-item method">
<a href="#method_handleKeyUp">handleKeyUp</a>
</li>
<li class="index-item method">
<a href="#method_handleMouseDown">handleMouseDown</a>
</li>
<li class="index-item method">
<a href="#method_handleMouseUp">handleMouseUp</a>
</li>
<li class="index-item method">
<a href="#method_press">press</a>
</li>
<li class="index-item method">
<a href="#method_render">render</a>
</li>
</ul>
</div>
<div class="index-section properties">
<h3>Properties</h3>
<ul class="index-list properties">
<li class="index-item property">
<a href="#property_activatedBy">activatedBy</a>
</li>
<li class="index-item property">
<a href="#property_aria-label">aria-label</a>
</li>
<li class="index-item property">
<a href="#property_autoFocus">autoFocus</a>
</li>
<li class="index-item property">
<a href="#property_buttonHTML">buttonHTML</a>
</li>
<li class="index-item property">
<a href="#property_buttonPressTime">buttonPressTime</a>
</li>
<li class="index-item property">
<a href="#property_buttonText">buttonText</a>
</li>
<li class="index-item property">
<a href="#property_children">children</a>
</li>
<li class="index-item property">
<a href="#property_className">className</a>
</li>
<li class="index-item property">
<a href="#property_directResponse">directResponse</a>
</li>
<li class="index-item property">
<a href="#property_disabled">disabled</a>
</li>
<li class="index-item property">
<a href="#property_name">name</a>
</li>
<li class="index-item property">
<a href="#property_onClick">onClick</a>
</li>
<li class="index-item property">
<a href="#property_onMiddleClick">onMiddleClick</a>
</li>
<li class="index-item property">
<a href="#property_onRightClick">onRightClick</a>
</li>
<li class="index-item property">
<a href="#property_readOnly">readOnly</a>
</li>
<li class="index-item property">
<a href="#property_showActivated">showActivated</a>
</li>
<li class="index-item property">
<a href="#property_style">style</a>
</li>
<li class="index-item property">
<a href="#property_tabIndex">tabIndex</a>
</li>
<li class="index-item property">
<a href="#property_toggled">toggled</a>
</li>
</ul>
</div>
</div>
<div id="methods" class="api-class-tabpanel">
<h2 class="off-left">Methods</h2>
<div id="method__getDataAttrs" class="method item private">
<h3 class="name"><code>_getDataAttrs</code></h3>
<span class="paren">()</span>
<span class="returns-inline">
<span class="type"></span>
</span>
<span class="flag private">private</span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l406"><code>lib/component.jsx:406</code></a>
</p>
<p>Available since 0.0.3</p>
</div>
<div class="description">
<p>Extracts the <code>data-*</code> attributes from props.</p>
</div>
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<p>object all the data-* attributes</p>
</div>
</div>
</div>
<div id="method__processKeyUp" class="method item private">
<h3 class="name"><code>_processKeyUp</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>Boolean</code>
</li>
<li class="arg">
<code>Boolean</code>
</li>
<li class="arg">
<code>Boolean</code>
</li>
</ul><span class="paren">)</span>
</div>
<span class="flag private">private</span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l425"><code>lib/component.jsx:425</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>React render-method --> renderes the Component.</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">Boolean</code>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<div class="param-description">
<p>manual whether this routine gets called manually (keypress), or from a click-event</p>
</div>
</li>
<li class="param">
<code class="param-name">Boolean</code>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<div class="param-description">
<p>directResponse Whether to direct response or wait for the button to raise up</p>
</div>
</li>
<li class="param">
<code class="param-name">Boolean</code>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<div class="param-description">
<p>force whether to force (initiated by the method <code>press</code>)</p>
</div>
</li>
</ul>
</div>
</div>
<div id="method__saveHTML" class="method item private">
<h3 class="name"><code>_saveHTML</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>String</code>
</li>
</ul><span class="paren">)</span>
</div>
<span class="returns-inline">
<span class="type"></span>
</span>
<span class="flag private">private</span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l461"><code>lib/component.jsx:461</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>Returns a save string</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">String</code>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<div class="param-description">
<p>html the text that should be removed from any html-entities</p>
</div>
</li>
</ul>
</div>
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<p>String</p>
</div>
</div>
</div>
<div id="method_blur" class="method item">
<h3 class="name"><code>blur</code></h3>
<span class="paren">()</span>
<span class="flag chainable">chainable</span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l58"><code>lib/component.jsx:58</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>Blurs the Component.</p>
</div>
</div>
<div id="method_componentDidMount" class="method item">
<h3 class="name"><code>componentDidMount</code></h3>
<span class="paren">()</span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l71"><code>lib/component.jsx:71</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>componentDidMount does some initialization.</p>
</div>
</div>
<div id="method_componentWillUnmount" class="method item">
<h3 class="name"><code>componentWillUnmount</code></h3>
<span class="paren">()</span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l86"><code>lib/component.jsx:86</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>componentWilUnmount does some cleanup.</p>
</div>
</div>
<div id="method_focus" class="method item">
<h3 class="name"><code>focus</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code class="optional">[transitionTime]</code>
</li>
</ul><span class="paren">)</span>
</div>
<span class="flag chainable">chainable</span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l104"><code>lib/component.jsx:104</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>Sets the focus on the Component.</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name optional">[transitionTime]</code>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>transition-time to focus the element into the view</p>
</div>
</li>
</ul>
</div>
</div>
<div id="method_handleClick" class="method item">
<h3 class="name"><code>handleClick</code></h3>
<span class="paren">()</span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l122"><code>lib/component.jsx:122</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>Callback-fn for the onClick-event.
Will invoke <code>this.props.onChange</code></p>
</div>
</div>
<div id="method_handleKeyDown" class="method item">
<h3 class="name"><code>handleKeyDown</code></h3>
<span class="paren">()</span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l160"><code>lib/component.jsx:160</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>Callback-fn for the onKeyDown-event.</p>
</div>
</div>
<div id="method_handleKeyUp" class="method item">
<h3 class="name"><code>handleKeyUp</code></h3>
<span class="paren">()</span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l213"><code>lib/component.jsx:213</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>Callback-fn for the onKeyUp-event.</p>
</div>
</div>
<div id="method_handleMouseDown" class="method item">
<h3 class="name"><code>handleMouseDown</code></h3>
<span class="paren">()</span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l234"><code>lib/component.jsx:234</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>Callback-fn for the onMouseDown-event.</p>
</div>
</div>
<div id="method_handleMouseUp" class="method item">
<h3 class="name"><code>handleMouseUp</code></h3>
<span class="paren">()</span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l289"><code>lib/component.jsx:289</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>Callback-fn for the onMouseUp-event.</p>
</div>
</div>
<div id="method_press" class="method item">
<h3 class="name"><code>press</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>boolean</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l308"><code>lib/component.jsx:308</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>Callback-fn for the onClick-event.
Will invoke <code>this.props.onChange</code></p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">boolean</code>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<div class="param-description">
<p>[directResponse] whether directly call onClick, or wait until the button raises up.</p>
</div>
</li>
</ul>
</div>
</div>
<div id="method_render" class="method item">
<h3 class="name"><code>render</code></h3>
<span class="paren">()</span>
<span class="returns-inline">
<span class="type"></span>
</span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l320"><code>lib/component.jsx:320</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>React render-method --> renderes the Component.</p>
</div>
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<p>ReactComponent</p>
</div>
</div>
</div>
</div>
<div id="properties" class="api-class-tabpanel">
<h2 class="off-left">Properties</h2>
<div id="property_activatedBy" class="property item">
<h3 class="name"><code>activatedBy</code></h3>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l476"><code>lib/component.jsx:476</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>Array with the keys that can press the button when focussed.
Default: [13, 32]</p>
</div>
</div>
<div id="property_aria-label" class="property item">
<h3 class="name"><code>aria-label</code></h3>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l486"><code>lib/component.jsx:486</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>The aria-label. When not set, it will equal the buttonText</p>
</div>
</div>
<div id="property_autoFocus" class="property item">
<h3 class="name"><code>autoFocus</code></h3>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l495"><code>lib/component.jsx:495</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>Whether to autofocus the Component.</p>
</div>
</div>
<div id="property_buttonHTML" class="property item">
<h3 class="name"><code>buttonHTML</code></h3>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l513"><code>lib/component.jsx:513</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>The Button-text, retaining html-code. If you don't need HTML,
then <code>buttonText</code> is preferred.</p>
</div>
</div>
<div id="property_buttonPressTime" class="property item">
<h3 class="name"><code>buttonPressTime</code></h3>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l523"><code>lib/component.jsx:523</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>The time that the button retains in its <code>pressed-state</code> when activated by a key-press.</p>
<p>Default: 300ms</p>
</div>
</div>
<div id="property_buttonText" class="property item">
<h3 class="name"><code>buttonText</code></h3>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l504"><code>lib/component.jsx:504</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>The Button-text. Will be escaped. If you need HTML, then use <code>buttonHTML</code> instead.</p>
</div>
</div>
<div id="property_children" class="property item">
<h3 class="name"><code>children</code></h3>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l656"><code>lib/component.jsx:656</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>The type of the button
Default: "button"</p>
</div>
</div>
<div id="property_className" class="property item">
<h3 class="name"><code>className</code></h3>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l534"><code>lib/component.jsx:534</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>The class that should be set on the element</p>
</div>
</div>
<div id="property_directResponse" class="property item">
<h3 class="name"><code>directResponse</code></h3>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l543"><code>lib/component.jsx:543</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>Whether the button resonses rapidly (keydown and mousedown).
Note: native HTMLButtonElements don't resonse rapidly --> the onClick event happens on mouseUp.</p>
<p>Default: true</p>
</div>
</div>
<div id="property_disabled" class="property item">
<h3 class="name"><code>disabled</code></h3>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l555"><code>lib/component.jsx:555</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>Whether the button is disabled</p>
</div>
</div>
<div id="property_name" class="property item">
<h3 class="name"><code>name</code></h3>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l564"><code>lib/component.jsx:564</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>The name-attribute of the button</p>
</div>
</div>
<div id="property_onClick" class="property item">
<h3 class="name"><code>onClick</code></h3>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l573"><code>lib/component.jsx:573</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>Callback whenever the button gets clicked by the left mousebutton.</p>
</div>
</div>
<div id="property_onMiddleClick" class="property item">
<h3 class="name"><code>onMiddleClick</code></h3>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l582"><code>lib/component.jsx:582</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>Callback wheneveer the button gets clicked by the middle mousebuttin.</p>
</div>
</div>
<div id="property_onRightClick" class="property item">
<h3 class="name"><code>onRightClick</code></h3>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l599"><code>lib/component.jsx:599</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>Callback wheneveer the button gets clicked by the right mouse-button.</p>
</div>
</div>
<div id="property_readOnly" class="property item">
<h3 class="name"><code>readOnly</code></h3>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l608"><code>lib/component.jsx:608</code></a>
</p>
<p>Available since 15.2.0</p>
</div>
<div class="description">
<p>Whether the checkbox is readonly</p>
</div>
<p><strong>Default:</strong> false</p>
</div>
<div id="property_showActivated" class="property item">
<h3 class="name"><code>showActivated</code></h3>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l618"><code>lib/component.jsx:618</code></a>
</p>
<p>Available since 0.0.5</p>
</div>
<div class="description">
<p>Whether keypress should show active status. (should be set <code>false</code> for file-uploadbuttons)
Default: true</p>
</div>
</div>
<div id="property_style" class="property item">
<h3 class="name"><code>style</code></h3>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l628"><code>lib/component.jsx:628</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>Inline style</p>
</div>
</div>
<div id="property_tabIndex" class="property item">
<h3 class="name"><code>tabIndex</code></h3>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l637"><code>lib/component.jsx:637</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>The tabIndex</p>
</div>
</div>
<div id="property_toggled" class="property item">
<h3 class="name"><code>toggled</code></h3>
<span class="type"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
<div class="meta">
<p>
Defined in
<a href="../files/lib_component.jsx.html#l646"><code>lib/component.jsx:646</code></a>
</p>
<p>Available since 0.0.1</p>
</div>
<div class="description">
<p>Whether the button is in a toggle-state.
You don;t need to use this directly: use the module ToggleButton instead.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>