Dashboard

Een dashboard voor het combineren van de afhandeling van meerdere kinderinvoervelden.

Opties

• autoStart | boolean: indien ingesteld op true, wordt de functie onGenerate bij het opstarten uitgevoerd met de standaard invoerwaarden. Default: true.
• autoUpdate | boolean: bepaalt of de onGenerate functie automatisch moet worden aangeroepen als een van de invoervelden van het kind verandert. Default: false.
• description | (string|node): dashboardbeschrijving. Default: ''.
• disabled | boolean: controleert of het dashboard moet worden uitgeschakeld. Default: false.
• label | string: knoplabel. Default: none.
• maxWidth | number: maximale breedte van het dashboard. Default: 600.
• className | string: klassennaam. Default: ''.
• bodyClassName | string: klassenaam voor de kaartbody. Default: 'd-grid gap-3'.
• style | object: CSS inline-stijlen. Default: {}.
• onGenerate | function: functie aangeroepen wanneer op de knop wordt geklikt of wanneer een van de invoerwaarden van het dashboard verandert (als autoUpdate is ingesteld op true). De functie wordt aangeroepen met de waarden van de invoervelden, in de volgorde waarin ze in het dashboard zijn geplaatst. Default: onGenerate() {}.
• title | (string|node): kaarttitel. Default: ''.

Voorbeelden

Minimal

Live redacteur

<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>

Resultaat

ReferenceError: Provider is not defined

Multiple Inputs

Live redacteur

<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>

Resultaat

ReferenceError: Provider is not defined