# Cards

# Demo

Demo

# CardRow

# Usage

<CardRow
  :id="1"
  title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  overview="Nunc et tincidunt tortor. Integer pellentesque bibendum neque, ultricies semper neque vulputate congue. Nunc fringilla mi sed nisi finibus vulputate. Nunc eu risus velit."
  :thumbnail="potato"
  :views="100"
  status="Draft"
  dateTime="1638982148"
/>

# Props

Property Type Default Required Description
id number no Id of the item
title string no Title of the card
thumbnail string no Thumbnail Image
views number no Number of views
status string no Status i.e. Draft, Published
dateTime string no DateTime in unix format
selected boolean false no Is the card selected
onTogggleSelection function no Callback function when the card selection is toggled

# CardColumn

# Usage

<CardColumn
  :id="1"
  title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  overview="Nunc et tincidunt tortor. Integer pellentesque bibendum neque, ultricies semper neque vulputate congue. Nunc fringilla mi sed nisi finibus vulputate. Nunc eu risus velit."
  :thumbnail="tomato"
  :views="100"
  status="Draft"
  dateTime="1648017540"
/>

# Props

Property Type Default Required Description
id number no Id of the item
title string no Title of the card
thumbnail string no Thumbnail Image
views number no Number of views
status string no Status i.e. Draft, Published
dateTime string no DateTime in unix format
selected boolean false no Is the card selected
onTogggleSelection function no Callback function when the card selection is toggled

# CardList

# Usage

<CardList
  :id="1"
  title="Potato"
  :thumbnail="breakfast"
  dateTime="1652727063"
/>

# Props

Property Type Default Required Description
id number no Id of the item
title string no Title of the card
thumbnail string no Thumbnail Image
type string no Type of list (audio/mp3, video/mp4, document/pdf)
dateTime string no DateTime in unix format
selected boolean false no Is the card selected
onTogggleSelection function no Callback function when the card selection is toggled

# Pagination

# Usage

<Pagination
  :currentPage="currentPage"
  :totalCount="50"
  :pageSize="pageSize"
  :onPageChange="(page) => setCurrentPage(page)"
  :onPageSizeChange="(size) => setPageSize(size)"
/>

# Props

Property Type Default Required Description
currentPage number no Current page index
totalCount number no Total numbers of items to be paginated
siblingCount number 1 no Number of sibling shown in the pagination
showFist boolean false no Show First Page link
showLast boolean false no Show Last Page link
pageSize number no Number of items to be shown per page
onPageChange function no Callback function when the page is changed
onPageSizeChange function no Callback function when the pageSize is changed