Calcite Theme for the ArcGIS JS API ( Devtopia Wiki: https://devtopia.esri.com/WebGIS/arcgis-js-api/wiki/calcite )
JS API Widgets | Dojo Dijits
This is a combo button used in a form only.
<div data-dojo-type="dijit/form/ComboButton" class="btn">
<span>dijit/form/ComboButton</span>
<div data-dojo-type="dijit/DropDownMenu">
<div data-dojo-type="dijit/MenuItem">jojo</div>
<div data-dojo-type="dijit/MenuItem">dquery</div>
</div>
</div>
This is a drop down button used in a form only.
<div data-dojo-type="dijit/form/DropDownButton" class="btn">
<span>dijit/form/DropDownButton</span>
<div data-dojo-type="dijit/TooltipDialog">
<label for="name">Name:</label> <input data-dojo-type="dijit/form/TextBox" id="name" name="name"><br>
<label for="hobby">Hobby:</label> <input data-dojo-type="dijit/form/TextBox" id="hobby" name="hobby"><br>
<button data-dojo-type="dijit/form/Button" type="submit" class="btn secondary">Save</button>
</div>
</div>
This is a toggle button used in a form only.
<button data-dojo-type="dijit/form/ToggleButton" data-dojo-props="iconClass:'dijitCheckBoxIcon', checked: true">
dijit/form/ToggleButton
</button>
This is a select used in a form only.
<select name="select1" data-dojo-type="dijit/form/Select">
<option value="TN">Tennessee</option>
<option value="VA" selected="selected">Virginia</option>
<option value="WA">Washington</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
</select>
NOTE: Dijit / Form / Select
This is a combobox used in a form only.
<select data-dojo-type="dijit/form/ComboBox" id="fruit" name="fruit">
<option>Apples</option>
<option selected>Oranges</option>
<option>Pears</option>
</select>
This is a filter used in a form only.
<select data-dojo-type="dijit/form/FilteringSelect" id="fruit1" name="fruit1">
<option value="AP">Apples</option>
<option value="OR" selected>Oranges</option>
<option value="PE" >Pears</option>
</select>
This is a multi select used in a form only.
<select data-dojo-type="dijit/form/MultiSelect" id="fruit2" name="fruit2" size="4">
<option value="AP">Apples</option>
<option value="OR">Oranges</option>
<option value="PE" selected="selected">Pears</option>
</select>
This is a currency text box used in a form only.
<input type="text" name="income1" id="income1" value="54775.53" required="true"
data-dojo-type="dijit/form/CurrencyTextBox"
data-dojo-props="constraints:{fractional:true},
currency:'USD',
invalidMessage:'Invalid amount. Cents are required.'" />
This is a date text box used in a form only.
<input type="text" name="date1" id="date1" value="2005-12-30"
data-dojo-type="dijit/form/DateTextBox"
required="true" />
This is a number spinner used in a form only.
<input data-dojo-type="dijit/form/NumberSpinner"
id="integerspinner2"
value="1000"
data-dojo-props="smallDelta:10, constraints:{min:9,max:1550,places:0}"
name="someNumber"
/>
This is a number text box used in a form only.
<input id="q05" type="text"
data-dojo-type="dijit/form/NumberTextBox"
name= "elevation"
required="true"
value="3000"
data-dojo-props="constraints:{min:-20000,max:20000,places:0},
invalidMessage:'Invalid elevation.'" />
This is a simple text area used in a form only.
<textarea id="textarea1" name="textarea1" data-dojo-type="dijit/form/SimpleTextarea" rows="4" cols="50" style="width:auto;">
Bandwidth supply-chains cross-platform e-business benchmark bleeding-edge grow methodologies scale. Grow, aggregate paradigms initiatives ecologies synthesize, mission-critical wikis e-markets strategic innovative generate; next-generation e-tailers; sexy disintermediate; maximize functionalities standards-compliant seize back-end integrated. Enable architect solutions incubate brand, architect, synergize networks strategize cutting-edge networks social podcasts. E-business incubate impactful communities supply-chains; semantic webservices, engage compelling. Convergence, clicks-and-mortar. Source: http://bullshitipsum.com/?paragraphs=1
</textarea>
This is a text area used in a form only.
<textarea id="textarea2" name="textarea2" data-dojo-type="dijit/form/Textarea" style="width:200px;">
Envisioneer dynamic seize scalable integrate channels models communities recontextualize, one-to-one, social. Cluetrain dynamic communities killer reinvent semantic enable compelling global, distributed integrated, vortals reinvent implement. Seamless plug-and-play front-end sticky; interactive; collaborative architectures--visualize user-centric drive benchmark exploit ROI!
</textarea>
This is a text box used in a form only.
<input id="dtb" data-dojo-type="dijit/form/TextBox" />
This is a time text box used in a form only.
<input type="text" name="date1" id="time1" value="T15:00:00" data-dojo-type="dijit/form/TimeTextBox" onChange="require(['dojo/dom'], function(dom){dom.byId('val').value=dom.byId('time1').value.toString().replace(/.*1970\s(\S+).*/,'T$1')})" required="true" />
<br><br>
string value: <input id="val" value="value not changed" readonly="readonly" disabled="disabled" />
This is a validation text box used in a form only.
<input type="text" name="zip" value="00000" required="true" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="regExp:'\\d{5}', invalidMessage:'Invalid zip code.'" />
This is a check box used in a form only.
<input id="mycheck" name="mycheck" data-dojo-type="dijit/form/CheckBox" value="agreed" checked />
This is a radio button used in a form only.
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="drink" id="radioOne" checked value="tea"/>
<label for="radioOne">Tea</label><br>
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="drink" id="radioTwo" value="coffee"/>
<label for="radioTwo">Coffee</label>
Tab containers.
<div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-dojo-props="selected:true">
Lorem ipsum and all around...
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="My last tab" data-dojo-props="closable:true">
Lorem ipsum and all around - last...
</div>
This is a modal window.
<div data-dojo-type="dijit/Dialog" data-dojo-id="myDialog" title="Name and Address" class="calcite">
<table class="dijitDialogPaneContentArea">
<tr>
<td><label for="name">Name:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="name"></td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="address"></td>
</tr>
</table>
<div class="dijitDialogPaneActionBar">
<button data-dojo-type="dijit/form/Button" type="submit" class="btn secondary">OK</button>
<button data-dojo-type="dijit/form/Button" type="button" data-dojo-props="onClick:function(){myDialog.hide();}" id="cancel" class="btn">Cancel</button>
</div>
</div>
<button data-dojo-type="dijit/form/Button" type="button" onClick="myDialog.show();" class="btn secondary">Modal Open!</button>
This is rarely used.
I'm awesome and I know it! Yes, yes you are.
This is rarely used.
This is a toolbar
.
.
Choose a theme from the list below, a theme will be loaded dynamically, and the charts will be rendered using it.