Learn R Programming

card.pro: Lightweight and highly customizable card component for shiny

shiny demo: https://rpkg.shinyapps.io/cardpro/

This high customization card.pro() component provides a flexible and extensible content container with multiple variants and options. It allows shiny app developers to display content in an organized and uniform manner in the form of cards.

While is merely a flexible div with a lot of options for customization, You can add images, text, lists and other content inside. It allows options to help style the title and text respectively.

For layout, you can stack multiple cards within a moveable() container and make them moveable by the user.

There are options for you to include toolbars that extensively improve the card functionality.

A great feature of this package is that you are able to rearrange the cards on the page, change titles, change header color, expand cards. When you refresh the page, the changes are preserved across refresh and various sessions.

Example shiny app code

install.package("card.pro")
library(shiny)
library(card.pro)


ui <- fluidPage(
  
  titlePanel("Advanced Card: Expand, Edit, Rearrange and Refresh"),
  
  use.cardpro(theme = "a"), # themes a,b,c,d, or e
  
  # add card
  moveable(
    card.pro("History something",title = "A random content", collapse=TRUE),
    card.pro("Card B","cONTENT 2", title = "a title", width = 4, header.bg = "darken"),
    card.pro("Card C",title ="Card 3", width = 8, header.bg = "red"),
    
    
    
    card.pro(
      "Hello graph",
      sidebar = div(
        "Plot settings",
        textInput("testy", "Y-axis title", "Concentration"),
        textInput("testx", "X-axis title", "Time"),
        textInput("dpi", "Image dpi", "300"),
        textInput("strp", "Subset", "NA"),
        actionButton("test3", "Re-graph")
      ),
      title = "Card with side bar",
      width = 6,
      icon = icon("globe"),
      header.bg = "blue",
      footer = "Footnote or legend..."
    ),
    
    
    card.pro(
      "Lorem ipsum odor amet.",
      title = "Card with tabs",
      width = 6,
      icon = icon("fire"),
      tabs = list(
        tabEntry("Tab 1",
                 textInput("nor1", "Enter name"), "Content for 1"),
        tabEntry("Tab 2",
                 actionButton("nor1", "Try to click"), "sample")
      )
    )
  )
  
)

shinyApp(ui = ui, server = empty.server)

Copy Link

Version

Install

install.packages('card.pro')

Monthly Downloads

221

Version

2.3.0

License

MIT + file LICENSE

Maintainer

Obinna Obianom

Last Published

January 15th, 2025

Functions in card.pro (2.3.0)

template.loc

Template location full text
tabEntry

Create a tab panel item
row

Generate a row div
nav

Nav tag
moveable

Generate a moveable grid
empty.server

Empty server function
add.JQuery

Attach jQuery to current document
card.pro

Generate a flexible and extensible card container
progressInput

Create simple progress bar
altPanel

New sidebar panel to display content
collapseEntry

Create a collapsible container panel item
primePanel

Main panel to display content
titlePanel2

Create a title and footer bar
wrapper

A wrapper for panels
use.cardpro

Include stylesheets and scripts