Dashboard

Vadības panelis, lai apvienotu vairāku bērnu ievades lauku apstrādi.

Iespējas

• autoStart | boolean: ja iestatīts uz true, funkcija onGenerate tiek izpildīta palaišanas laikā ar noklusējuma ievades vērtībām.. Default: true.
• autoUpdate | boolean: nosaka, vai onGenerate funkcija jāizsauc automātiski, kad mainās kāds no pakārtotajiem ievades laukiem.. Default: false.
• description | (string|node): Vadības paneļa apraksts. Default: ''.
• disabled | boolean: kontrolē, vai instrumentu panelis ir atspējots.. Default: false.
• label | string: pogas etiķete. Default: none.
• maxWidth | number: maksimālais instrumentu paneļa platums. Default: 600.
• className | string: klases nosaukums. Default: ''.
• bodyClassName | string: kartes korpusa klases nosaukums. Default: 'd-grid gap-3'.
• style | object: CSS iebūvētie stili. Default: {}.
• onGenerate | function: funkcija, kas tiek izsaukta, kad tiek noklikšķināts uz pogas vai mainās kāda no paneļa ievades vērtībām (ja autoUpdate ir iestatīts uz true). Funkcija tiek izsaukta ar ievades lauku vērtībām tādā secībā, kādā tās ir izvietotas vadības panelī.. Default: onGenerate() {}.
• title | (string|node): kartes nosaukums. Default: ''.

Piemēri

Minimal

Tiešraides redaktors

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

Rezultāts

ReferenceError: Provider is not defined

Multiple Inputs

Tiešraides redaktors

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

Rezultāts

ReferenceError: Provider is not defined