File Manager

Editing 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>&lt;input type="number"&gt;</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">&lt;NumericInput/&gt;</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">&lt;NumericInput className="form-control"/&gt;</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">&lt;NumericInput className="form-control" style={ false }/&gt;</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">&lt;NumericInput min={0} max={100} value={50}/&gt;</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">&lt;NumericInput step={0.1} precision={2} value={50.3}/&gt;</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">&lt;NumericInput precision={2} value={50.3} step={0.1} format={myFormat}/&gt;</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 &amp; Read only</legend>
                <blockquote>
                    <div class="code jsx">&lt;NumericInput disabled value={23.45}/&gt;</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">&lt;NumericInput readOnly value={23.45}/&gt;</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">&lt;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)'
        }
    }}/&gt;</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">&lt;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"/&gt;</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">&lt;NumericInput mobile /&gt;</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">&lt;NumericInput mobile className="form-control" /&gt;</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