# Cards

# 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

← Buttons Collapse →