react-card-slide

geeknection/react-card-slide

React Jsx component used to create Card Item and Slide of Card Items

Getting started

yarn add react-card-slide

or

npm install react-card-slide --save

Usage

Example with slide

import { CardSlide } from 'react-card-slide/dist';

  <CardSlide items={[{
        cardName: 'Card Name',
        cardDescription: 'Description',
        cardTotal: 0,
        showBodyImage: true,
        bodyImage: 'https://via.placeholder.com/350x350'
      },{
        cardName: 'Card Name 2',
        cardDescription: 'Description 2',
        cardTotal: 1
      },{
        cardName: 'Carde Name 3',
        cardDescription: 'Description 3',
        cardTotal: 2
      }]}/>

Example without slide

import { CardSlideItem } from 'react-card-slide/dist';

  <CardSlideItem
    cardName='Card Name'
    cardDescription='Description',
    cardTotal={0},
    showBodyImage={true},
    bodyImage='https://via.placeholder.com/350x350'/>

Props

• items
• cardSelected
• cardHeaderIcon
• cardName
• cardDescription
• cardTotal
• cardData
• cardGraphLineColor
• cardGraphBgColor
• showFooter
• showBodyImage
• showBodyText
• bodyImage

---

items

Used to render layout list of CardSlide.

Type	Required
Array	Yes

---

cardSelected

Used to know what is CardSlideItem that will show in slide list.

Type	Required
Boolean	No

---

cardHeaderIcon

Icon that will be show on top-left of header CardSlideItem.

Type	Required
Image	Year

---

cardName

Card name that will be show on top-left of header CardSlideItem.

Type	Required
String	Yes

---

cardDescription

Card description that will be show on body of CardSlideItem.

Type	Required
String	No

---

cardTotal

Total value that will be show on body of CardSlideItem.

Type	Required
Number	No

---

cardData

Graphic data that will be show on body of CardSlideItem.

Type	Required
Array	No

---

cardGraphLineColor

Line that is defined to points in Graphic (In future).

Type	Required
String	No

---

cardGraphBgColor

Background color of Graphic (In future).

Type	Required
String	No

---

showFooter

Show footer in CardSlideItem.

Type	Required
Boolean	No

---

showBodyImage

Show image on body of CardSlideItem.

Type	Required
Boolean	No

---

bodyImage

Image body of CardSlideItem.

Type	Required
Image	No

---

showBodyText

Show card description on body of CardSlideItem.

Type	Required
Boolean	No

---

Contributors

This module was extracted from React Js core. Please reffer to https://github.com/geeknection/react-card-slide/graphs/contributors for the complete list of contributors.

License

The library is released under the MIT licence. For more information see LICENSE.