Multi Cards

ISLE komponents, kas ļauj izveidot un kontrolēt vairākas apgriežamas kartes (piemēram, spēlē Memory).

Iespējas

• animation | object: ja iestatīts, komponents izmanto ievades animāciju; objekts satur nosaukumu (piemēram, anim-scale-up) un ilgumu (piemēram, 1.7s = 1,7 sekundes).. Default: {}.
• memory | boolean: vai ieslēgt atmiņas spēles režīmu, kurā jāatrod atbilžu pāri starp norādītajām vērtībām.. Default: none.
• onChange | function: funkcija, kas saņem apgriežamo karšu matricu.. Default: onChange() {}.
• onMemoryComplete | function: atsauces zvans, kas tiek izsaukts, ja atmiņas spēle ir pabeigta.. Default: onMemoryComplete() {}.
• oneTime | boolean: norāda, vai apgriešanas procesu var izpildīt tikai vienu reizi.. Default: false.
• values | array<object>: attiecīgo karšu vērtības, ievadītas masīvā, kurā ir ievades lauki priekšējā un pakaļējā vērtībai. Šāda vērtība var būt gan virkne, gan arī pilnvērtīgs ISLE komponents.. Default: [].
• style | object: CSS iebūvētie stili. Default: {}.
• containerStyle | object: Karšu konteineru CSS stils. Default: {}.
• frontStyle | object: Kartiņu priekšpuses CSS stils. Default: {}.
• backStyle | object: Kartiņu aizmugures CSS stils. Default: {}.

Piemēri

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

Tiešraides redaktors

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

Rezultāts

ReferenceError: Provider is not defined