Viewing File: /home/ubuntu/todaykat-frontend-base/node_modules/react-numeric-input/docs/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React number input examples</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css">
<style media="screen">
.code {
background : transparent;
font-family: Menlo, monospace;
font-size : 1.4rem !important;
white-space: pre-wrap;
}
fieldset {
margin: 30px 0 60px;
}
blockquote:after {
content: "";
clear:both;
display: block;
height: 0;
}
.demo .table > tbody > tr > th,
.demo .table > tbody > tr > td {
vertical-align: middle;
}
.unselectable {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/prop-types/prop-types.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<script src="react-numeric-input.js"></script>
</head>
<body>
<div class="container">
<fieldset>
<legend class="text-success">Minimal Usage</legend>
<p>
This will behave exactly like <code><input type="number"></code>.
It will create an empty numeric input that starts changing from zero.
The difference is that this works on any browser and does have the same
appearance everywhere.
</p>
<blockquote>
<div class="code jsx"><NumericInput/></div>
<script class="jsx" type="text/plain">{}</script>
</blockquote>
</fieldset>
<fieldset>
<legend class="text-success">With className</legend>
<p>
You can use <code>className</code> for adding CSS classes.
This component was designed play well with Bootstrap and
here is an example with <code>.form-control</code> class.
</p>
<blockquote>
<div class="code jsx"><NumericInput className="form-control"/></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">{"className": "form-control"}</script>
</div>
</blockquote>
</fieldset>
<fieldset>
<legend class="text-success">With inline styles disabled</legend>
<p>
You can use <code>style={ false }</code> to disable the
inline styles. It's up to you to provide your own CSS in this case.
</p>
<blockquote>
<div class="code jsx"><NumericInput className="form-control" style={ false }/></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">{"className": "form-control", "style": false }</script>
</div>
</blockquote>
</fieldset>
<fieldset>
<legend class="text-success">Typical Usage</legend>
<p>
Most of the time you will need to specify <code>min</code>,
<code>max</code> and <code>value</code>:
</p>
<blockquote>
<div class="code jsx"><NumericInput min={0} max={100} value={50}/></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">
{"className": "form-control","min":0,"max":100,"value":50}
</script>
</div>
</blockquote>
</fieldset>
<fieldset>
<legend class="text-success">Working with floats</legend>
<p>
You can use to use <code>step</code> and <code>precision</code>
props to make your input working with floating point numbers:
</p>
<blockquote>
<div class="code jsx"><NumericInput step={0.1} precision={2} value={50.3}/></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">
{"className":"form-control","step":0.1,"precision":2,"value":50.3}
</script>
</div>
</blockquote>
</fieldset>
<fieldset>
<legend class="text-success">Custom format</legend>
<p>
By default the component displays the value number as is. However,
you can provide your own <code>format</code> funtion that will be
called with the numeric value and is expected to return the string
that will be rendered in the input:
</p>
<blockquote>
<div class="code js">function myFormat(num) {
return num + '$';
}</div>
<div class="code jsx"><NumericInput precision={2} value={50.3} step={0.1} format={myFormat}/></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">
{
className: "form-control",
precision: 2,
value: 50.3,
step: 0.1,
format: function(num) {
return num + '$';
}
}
</script>
</div>
</blockquote>
</fieldset>
<fieldset>
<legend class="text-success">Disabled & Read only</legend>
<blockquote>
<div class="code jsx"><NumericInput disabled value={23.45}/></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">
{
value: 23.45,
disabled: true,
className : 'form-control'
}
</script>
</div>
</blockquote>
<blockquote>
<div class="code jsx"><NumericInput readOnly value={23.45}/></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">
{
value: 23.45,
readOnly: true,
className : 'form-control'
}
</script>
</div>
</blockquote>
</fieldset>
<fieldset>
<legend class="text-success">Custom style</legend>
<blockquote>
<div class="code xml"><NumericInput
value={-23.45}
precision={2}
size={6}
step={0.01}
mobile={false}
style={{
wrap: {
background: '#E2E2E2',
boxShadow: '0 0 1px 1px #fff inset, 1px 1px 5px -1px #000',
padding: '2px 2.26ex 2px 2px',
borderRadius: '6px 3px 3px 6px',
fontSize: 32
},
input: {
borderRadius: '4px 2px 2px 4px',
color: '#988869',
padding: '0.1ex 1ex',
border: '1px solid #ccc',
marginRight: 4,
display: 'block',
fontWeight: 100,
textShadow: 1px 1px 1px rgba(0, 0, 0, 0.1)
},
'input:focus' : {
border: '1px inset #69C',
outline: 'none'
},
arrowUp: {
borderBottomColor: 'rgba(66, 54, 0, 0.63)'
},
arrowDown: {
borderTopColor: 'rgba(66, 54, 0, 0.63)'
}
}}/></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">
{
value: -23.45,
precision : 2,
size: 6,
step: 0.01,
mobile: false,
style : {
wrap: {
background: '#E2E2E2',
boxShadow: '0 0 1px 1px #fff inset, 1px 1px 5px -1px #000',
padding: '2px 2.26ex 2px 2px',
borderRadius: '6px 3px 3px 6px',
fontSize: 32
},
input: {
borderRadius: '4px 2px 2px 4px',
color : '#988869',
padding : '0.1ex 1ex',
border : '1px solid #ccc',
marginRight : 4,
display : 'block',
fontWeight : 100,
textShadow : '1px 1px 1px rgba(0, 0, 0, 0.1)'
},
'input:focus' : {
border: '1px inset #69C',
outline: 'none'
},
arrowUp: {
borderBottomColor: 'rgba(66, 54, 0, 0.63)'
},
arrowDown: {
borderTopColor: 'rgba(66, 54, 0, 0.63)'
}
}
}
</script>
</div>
</blockquote>
</fieldset>
<fieldset>
<legend class="text-success">Other HTML props</legend>
<p>
You can use any additional HTML attributes that make
sence, just don't forget to camelCase them as JSX
requires. Only the <code>type</code> attribute will
be overriden to <code>text</code>. Here is an example:
</p>
<blockquote>
<div class="code xml"><NumericInput
name="my_number"
readOnly
disabled={false}
autoComplete="on"
autoCorrect="on"
autoFocus={false}
form="some-form"
placeholder="Enter a number"
required
size="14"
spellcheck="false"
tabindex="5"/></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">
{
name : "my_number",
readOnly : true,
disabled : false,
autoComplete: "on",
autoCorrect : "on",
autoFocus : false,
form : "some-form",
placeholder : "Enter a number",
required : true,
size : "14",
spellCheck : "false",
tabIndex : "5"
}
</script>
</div>
</blockquote>
</fieldset>
<fieldset>
<legend class="text-success">Mobile Version</legend>
<p>
The widget can be switched to mobile appearance using the
<code>mobile</code> prop. It can be <code>true</code>,
<code>false</code> or <code>"auto"</code>. The default value
is <code>auto</code> which evaluates to the result of
<code>('ontouchstart' in document)</code>. You can use true
or false to force it staing into one mode or to trovide your
custom detection logic like <code>mobile={ myTestFuncton() }</code>
but keep in mind that this will only be used once when the
component is created.
</p>
<blockquote>
<div class="code xml"><NumericInput mobile /></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">{ mobile: true }</script>
</div>
<br/>
<br/>
<div class="code xml"><NumericInput mobile className="form-control" /></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">{ mobile: true, className: "form-control" }</script>
</div>
<br/>
<br/>
<div class="col-xs-12">
<label onmousedown="return false">
<input type="checkbox" id="example-mobile" onchange="$('#example-mobile-dynamic').closest('div').data('widget').setState({})"/>
Interactive example (click to toggle)
</label>
</div>
<br/>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">
{
mobile: function() {
return $('#example-mobile').prop('checked')
},
className: "form-control",
id: "example-mobile-dynamic"
}
</script>
</div>
</blockquote>
</fieldset>
<fieldset>
<legend class="text-success">Interactive Demo</legend>
<div class="row">
<div class="col-xs-12 demo"></div>
</div>
</fieldset>
<br/>
<br/>
</div>
<script src="./examples.js"></script>
</body>
</html>
Back to Directory
File Manager