Dashboard

Un tablou de bord pentru combinarea manipulării mai multor câmpuri de intrare pentru copii.

Opțiuni

• autoStart | boolean: dacă este setată la true, funcția onGenerate este executată la pornire cu valorile de intrare implicite.. Default: true.
• autoUpdate | boolean: controlează dacă funcția onGenerate trebuie să fie invocată automat atunci când unul dintre câmpurile de intrare copil se modifică.. Default: false.
• description | (string|node): descrierea tabloului de bord. Default: ''.
• disabled | boolean: controlează dacă tabloul de bord trebuie dezactivat. Default: false.
• label | string: eticheta butonului. Default: none.
• maxWidth | number: lățimea maximă a tabloului de bord. Default: 600.
• className | string: numele clasei. Default: ''.
• bodyClassName | string: numele clasei pentru corpul cardului. Default: 'd-grid gap-3'.
• style | object: Stiluri inline CSS. Default: {}.
• onGenerate | function: invocată atunci când se face clic pe buton sau când se modifică una dintre valorile de intrare din tabloul de bord (dacă autoUpdate este setat la true). Funcția este apelată cu valorile câmpurilor de intrare, în ordinea în care acestea sunt plasate în tabloul de bord. Default: onGenerate() {}.
• title | (string|node): titlul cardului. Default: ''.

Exemple

Minimal

Editor live

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

Rezultat

ReferenceError: Provider is not defined

Multiple Inputs

Editor live

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

Rezultat

ReferenceError: Provider is not defined