Dashboard

Un tableau de bord permettant de combiner le traitement de plusieurs champs de saisie enfant.

Options

• autoStart | boolean: si elle est définie à "true", la fonction "onGenerate" est exécutée au démarrage avec les valeurs d'entrée par défaut. Default: true.
• autoUpdate | boolean: contrôle si la fonction "onGenerate" doit être invoquée automatiquement lorsqu'un des champs de saisie enfant change. Default: false.
• description | (string|node): description du tableau de bord. Default: ''.
• disabled | boolean: contrôle si le tableau de bord doit être désactivé. Default: false.
• label | string: étiquette du bouton. Default: none.
• maxWidth | number: largeur maximale du tableau de bord. Default: 600.
• className | string: nom de la classe. Default: ''.
• bodyClassName | string: nom de la classe pour le corps de la carte. Default: 'd-grid gap-3'.
• style | object: Styles CSS en ligne. Default: {}.
• onGenerate | function: invoquée lorsque l'on clique sur le bouton ou que l'une des valeurs d'entrée du tableau de bord change (si "autoUpdate" est réglé sur "true"). La fonction est appelée avec les valeurs des champs de saisie, dans l'ordre dans lequel ils sont placés dans le tableau de bord. Default: onGenerate() {}.
• title | (string|node): titre de la carte. Default: ''.

Exemples

Minimal

Éditeur en direct

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

Résultat

ReferenceError: Provider is not defined

Multiple Inputs

Éditeur en direct

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

Résultat

ReferenceError: Provider is not defined