Multi Cards

Компонент на ISLE, който ви позволява да създавате и управлявате множество обръщащи се карти (например в играта Memory).

Опции

animation | object: ако е зададено, компонентът използва входна анимация; обектът съдържа име (например anim-scale-up) и продължителност (например 1.7s = 1.7 секунди). Default: {}.
memory | boolean: дали да се активира режимът на игра с памет, при който трябва да се съпоставят двойки от предоставените стойности. Default: none.
onChange | function: функция, която получава матрицата на обръщаемите карти. Default: onChange() {}.
onMemoryComplete | function: обратна връзка, която се извиква, ако играта с памет е завършена. Default: onMemoryComplete() {}.
oneTime | boolean: указва дали процесът на обръщане може да се изпълни само веднъж. 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

Редактор в реално време

<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

Опции​

Примери​

Опции

Примери