Skip to main content

Multi Cards

An ISLE component that allows you to create and control multiple flippable cards (e.g. in a game of Memory).

Options#

  • animation | object: if set the component uses an entry animation; the object contains a name (like anim-scale-up) and a duration (like 1.7s = 1.7 seconds). Default: {}.
  • memory | boolean: whether to enable the memory game mode in which one has to match pairs of the supplied values. Default: none.
  • onChange | function: a function that receives the matrix of the flippable cards. Default: onChange() {}.
  • onMemoryComplete | function: callback invoked if the memory game is complete. Default: onMemoryComplete() {}.
  • oneTime | boolean: indicates whether the flip process may be executed just once. Default: false.
  • values | array<object>: the values for the respective cards, input in an array that has entry fields for a front and back value. Such a value could be a string, but also a full fledged ISLE component. Default: [].
  • style | object: CSS inline styles. Default: {}.
  • containerStyle | object: CSS style of the card containers. Default: {}.
  • frontStyle | object: CSS style of the front of the cards. Default: {}.
  • backStyle | object: CSS style of the back of the cards. Default: {}.

Examples#

Live Editor
Result
Last updated on by Planeshifter