Dashboard

A dashboard for combining the handling of multiple child input fields.

Options

• autoStart | boolean: if set to true, the onGenerate function is executed at startup with the default input values. Default: true.
• autoUpdate | boolean: controls whether the onGenerate function should be invoked automatically when one of the child input fields changes. Default: false.
• description | (string|node): dashboard description. Default: ''.
• disabled | boolean: controls whether the dashboard shall be disabled. Default: false.
• label | string: button label. Default: none.
• maxWidth | number: maximum width of dashboard. Default: 600.
• className | string: class name. Default: ''.
• bodyClassName | string: class name for the card body. Default: 'd-grid gap-3'.
• style | object: CSS inline styles. Default: {}.
• onGenerate | function: function invoked when the button is clicked or one of the dashboard input values changes (if autoUpdate is set to true). The function is called with the values of the input fields, in the order in which they are placed in the dashboard. Default: onGenerate() {}.
• title | (string|node): card title. Default: ''.

Examples

Minimal

Live Editor

<Dashboard title="Alerter" onGenerate={( x ) => { alert( x ); }} autoStart={false} > <SliderInput legend="Input value" /> </Dashboard>

<Dashboard title="Alerter" onGenerate={( x ) => { alert( x ); }} autoStart={false} >
    <SliderInput
        legend="Input value"
    />
</Dashboard>

Result

ReferenceError: Provider is not defined

Multiple Inputs

Live Editor

<Dashboard title="Multiply three numbers." style={{ width: 600, boxShadow: '0 0 24px black' }} onGenerate={( x, y, z ) => { alert( x*y*z ); }} autoStart={false} > <SliderInput legend="First Input Value" rangeInputStyle = {{ width: 360 }} /> <hr /> <SliderInput legend="Second Input Value" rangeInputStyle = {{ width: 360 }} /> <hr /> <SliderInput legend="Third Input Value" rangeInputStyle = {{ width: 360 }} /> <hr /> </Dashboard>

<Dashboard 
    title="Multiply three numbers."
    style={{ width: 600, boxShadow: '0 0 24px black' }}
    onGenerate={( x, y, z ) => { alert( x*y*z ); }} 
    autoStart={false} 
>
    <SliderInput
        legend="First Input Value"
        rangeInputStyle = {{ width: 360 }}
    />
    <hr />
    <SliderInput
        legend="Second Input Value"
        rangeInputStyle = {{ width: 360 }}
    />
    <hr />
    <SliderInput
        legend="Third Input Value"
        rangeInputStyle = {{ width: 360 }}
    />
    <hr />
</Dashboard>

Result

ReferenceError: Provider is not defined