Dashboard

Ένα ταμπλό για το συνδυασμό του χειρισμού πολλαπλών παιδικών πεδίων εισόδου.

Επιλογές

• autoStart | boolean: αν οριστεί σε true, η συνάρτηση onGenerate εκτελείται κατά την εκκίνηση με τις προεπιλεγμένες τιμές εισόδου. Default: true.
• autoUpdate | boolean: ελέγχει αν η συνάρτηση onGenerate θα πρέπει να καλείται αυτόματα όταν αλλάζει ένα από τα πεδία εισόδου των παιδιών.. Default: false.
• description | (string|node): περιγραφή ταμπλό. Default: ''.
• disabled | boolean: ελέγχει αν το ταμπλό θα απενεργοποιηθεί. Default: false.
• label | string: ετικέτα κουμπιού. Default: none.
• maxWidth | number: μέγιστο πλάτος του ταμπλό. Default: 600.
• className | string: όνομα κλάσης. Default: ''.
• bodyClassName | string: όνομα κλάσης για το σώμα της κάρτας. Default: 'd-grid gap-3'.
• style | object: Στυλ γραμμής CSS. Default: {}.
• onGenerate | function: συνάρτηση που καλείται όταν γίνεται κλικ στο κουμπί ή όταν αλλάζει μια από τις τιμές εισόδου του ταμπλό (αν η επιλογή autoUpdate έχει οριστεί σε true). Η συνάρτηση καλείται με τις τιμές των πεδίων εισόδου, με τη σειρά με την οποία έχουν τοποθετηθεί στο ταμπλό. Default: onGenerate() {}.
• title | (string|node): τίτλος κάρτας. Default: ''.

Παραδείγματα

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>

Αποτέλεσμα

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>

Αποτέλεσμα

ReferenceError: Provider is not defined