Multi Cards

Ένα στοιχείο ISLE που σας επιτρέπει να δημιουργήσετε και να ελέγξετε πολλαπλές αναδιπλούμενες κάρτες (π.χ. σε ένα παιχνίδι Memory).

Επιλογές

• animation | object: αν οριστεί, το στοιχείο χρησιμοποιεί ένα animation εισόδου- το αντικείμενο περιέχει ένα όνομα (όπως anim-scale-up) και μια διάρκεια (όπως 1.7s = 1.7 δευτερόλεπτα). Default: {}.
• memory | boolean: αν θα ενεργοποιήσετε τη λειτουργία παιχνιδιού μνήμης στην οποία πρέπει να αντιστοιχίσετε ζεύγη των παρεχόμενων τιμών. Default: none.
• onChange | function: μια συνάρτηση που λαμβάνει τον πίνακα των αναδιπλούμενων καρτών. Default: onChange() {}.
• onMemoryComplete | function: callback που καλείται αν το παιχνίδι μνήμης έχει ολοκληρωθεί. Default: onMemoryComplete() {}.
• oneTime | boolean: υποδεικνύει αν η διαδικασία flip μπορεί να εκτελεστεί μόνο μία φορά. Default: false.
• values | array<object>: τις τιμές για τις αντίστοιχες κάρτες, που εισάγονται σε έναν πίνακα που έχει πεδία εισόδου για μια τιμή "μπροστά" και "πίσω". Μια τέτοια τιμή θα μπορούσε να είναι μια συμβολοσειρά, αλλά και ένα πλήρες συστατικό ISLE.. Default: [].
• style | object: Στυλ γραμμής CSS. Default: {}.
• containerStyle | object: Στυλ CSS των δοχείων της κάρτας. Default: {}.
• frontStyle | object: Στυλ CSS για το μπροστινό μέρος των καρτών. Default: {}.
• backStyle | object: Στυλ CSS για το πίσω μέρος των καρτών. Default: {}.

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

• Minimal
• Front Image
• Memory
• Memory with Solved Callback

Live Editor

<MultiCards containerStyle={{ width: 250, height: 250, marginBottom: 10 }} frontStyle={{ color:'white', textShadow: '0px 0px 3px black', fontWeight: 800, fontSize: 30, cursor: 'pointer', textAlign: 'center', boxShadow: '1px 1px 10px black', background: 'silver' }} backStyle={{ color: 'black', fontSize: 20, fontWeight: 800, fontFamily: 'Oswald', textAlign: 'left', paddingLeft: '10px', background: 'ghostwhite', boxShadow: '1px 1px 10px black', }} values={[ { front: "number 1", back: 'back side of #1'}, { front: "number 2", back: 'back side of #2'}, { front: "number 3", back: 'back side of #3'}, { front: "number 4", back: 'back side of #4'} ]} />

<MultiCards
    containerStyle={{
        width: 250,
        height: 250,
        marginBottom: 10
    }}
    frontStyle={{
        color:'white',
        textShadow: '0px 0px 3px black',
        fontWeight: 800,
        fontSize: 30,
        cursor: 'pointer',
        textAlign: 'center',
        boxShadow: '1px 1px 10px black',
        background: 'silver'
    }}
    backStyle={{
        color: 'black',
        fontSize: 20,
        fontWeight: 800,
        fontFamily: 'Oswald',
        textAlign: 'left',
        paddingLeft: '10px',
        background: 'ghostwhite',
        boxShadow: '1px 1px 10px black',
    }}
    values={[
        { front: "number 1", back: 'back side of #1'},
        { front: "number 2", back: 'back side of #2'},
        { front: "number 3", back: 'back side of #3'},
        { front: "number 4", back: 'back side of #4'}
    ]}
/>

Αποτέλεσμα

ReferenceError: Provider is not defined