Multi Cards

Un composant ISLE qui vous permet de créer et de contrôler plusieurs cartes retournables (par exemple dans un jeu de mémoire).

Options

• animation | object: si set, le composant utilise une animation d'entrée ; l'objet contient un nom (comme "anim-scale-up") et une durée (comme "1,7s" = 1,7 secondes). Default: {}.
• memory | boolean: s'il faut activer le mode "jeu de mémoire" dans lequel il faut faire correspondre des paires de valeurs fournies. Default: none.
• onChange | function: une fonction qui reçoit la matrice des cartes à feuilleter. Default: onChange() {}.
• onMemoryComplete | function: rappel invoqué si le jeu de mémoire est terminé. Default: onMemoryComplete() {}.
• oneTime | boolean: indique si le processus de retournement peut être exécuté une seule fois. Default: false.
• values | array<object>: les valeurs pour les cartes respectives, introduites dans un tableau qui comporte des champs d'entrée pour une valeur "front" et "back". Une telle valeur peut être une chaîne de caractères, mais aussi un composant ISLE à part entière. Default: [].
• style | object: Styles CSS en ligne. Default: {}.
• containerStyle | object: Style CSS des conteneurs de cartes. Default: {}.
• frontStyle | object: Style CSS du recto des cartes. Default: {}.
• backStyle | object: Style CSS du dos des cartes. Default: {}.

Exemples

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

Éditeur en direct

<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'}
    ]}
/>

Résultat

ReferenceError: Provider is not defined