#' Framework7 card
#'
#' \code{f7Card} creates a simple card container.
#'
#' @rdname card
#'
#' @param ... Card content.
#' @param image Card image if any. Displayed in the header.
#' @param title Card title.
#' @param footer Footer content, if any. Must be wrapped in a tagList.
#' @param outline Outline style. FALSE by default.
#' @param height Card height. NULL by default.
#'
#' @examples
#' # Simple card
#' if(interactive()){
#' library(shiny)
#' library(shinyMobile)
#'
#' shinyApp(
#' ui = f7Page(
#' title = "Cards",
#' f7SingleLayout(
#' navbar = f7Navbar(title = "f7Card"),
#' f7Card("This is a simple card with plain text,
#' but cards can also contain their own header,
#' footer, list view, image, or any other element."),
#' f7Card(
#' title = "Card header",
#' "This is a simple card with plain text,
#' but cards can also contain their own header,
#' footer, list view, image, or any other element.",
#' footer = tagList(
#' f7Button(color = "blue", label = "My button"),
#' f7Badge("Badge", color = "green")
#' )
#' ),
#' f7Card(
#' title = "Card header",
#' image = "https://loremflickr.com/320/240",
#' "This is a simple card with plain text,
#' but cards can also contain their own header,
#' footer, list view, image, or any other element.",
#' footer = tagList(
#' f7Button(color = "blue", label = "My button"),
#' f7Badge("Badge", color = "green")
#' )
#' )
#' )
#' ),
#' server = function(input, output) {}
#' )
#' }
#'
#' @author David Granjon, \email{dgranjon@@ymail.com}
#'
#' @export
f7Card <- function(..., image = NULL, title = NULL, footer = NULL, outline = FALSE,
height = NULL) {
cardCl <- "card"
if (!is.null(image)) cardCl <- paste0(cardCl, " demo-card-header-pic")
if (outline) cardCl <- paste0(cardCl, " card-outline")
cardStyle <- NULL
if (!is.null(height)) {
cardStyle <- paste0("height: ", shiny::validateCssUnit(height), "; overflow-y: auto;")
}
# content
contentTag <- shiny::tags$div(
class = "card-content card-content-padding",
style = cardStyle,
...
)
# header
headerTag <- if (!is.null(title)) {
if (!is.null(image)) {
shiny::tags$div(
style = paste0("background-image:url(", image, ")"),
class = "card-header align-items-flex-end",
title
)
} else {
shiny::tags$div(class = "card-header", title)
}
}
#footer
footerTag <- if (!is.null(footer)) {
shiny::tags$div(class = "card-footer", footer)
}
# main tag
mainTag <- if (!is.null(image)) {
shiny::tags$div(
class = "card demo-card-header-pic",
headerTag,
contentTag,
footerTag
)
} else {
shiny::tags$div(
class = cardCl,
headerTag,
contentTag,
footerTag
)
}
return(mainTag)
}
#' Framework7 social card
#'
#' \code{f7SocialCard} is a special card for social content.
#'
#' @rdname card
#'
#' @param ... Card content.
#' @param image Author img.
#' @param author Author.
#' @param date Date.
#' @param footer Footer content, if any. Must be wrapped in a tagList.
#'
#' @examples
#' # Social card
#' if(interactive()){
#' library(shiny)
#' library(shinyMobile)
#'
#' shinyApp(
#' ui = f7Page(
#' title = "Social Card",
#' f7SingleLayout(
#' navbar = f7Navbar(title = "f7SocialCard"),
#' f7SocialCard(
#' image = "https://loremflickr.com/g/320/240/paris",
#' author = "John Doe",
#' date = "Monday at 3:47 PM",
#' "What a nice photo i took yesterday!",
#' img(src = "https://loremflickr.com/g/320/240/paris", width = "100%"),
#' footer = tagList(
#' f7Badge("1", color = "yellow"),
#' f7Badge("2", color = "green"),
#' f7Badge("3", color = "blue")
#' )
#' )
#' )
#' ),
#' server = function(input, output) {}
#' )
#' }
#'
#' @export
f7SocialCard <- function(..., image = NULL, author = NULL, date = NULL,
footer = NULL) {
headerTag <- shiny::tags$div(
class = "card-header",
shiny::tags$div(
shiny::img(src = image, width = "34", height = "34")
),
shiny::tags$div(author),
shiny::tags$div(date)
)
contentTag <- shiny::tags$div(
class = "card-content card-content-padding",
...
)
footerTag <- if (!is.null(footer)) shiny::tags$div(class = "card-footer", footer)
shiny::tags$div(
class = "card",
headerTag,
contentTag,
footerTag
)
}
#' Framework7 expandable card
#'
#' \code{f7ExpandableCard} is a card that can expand. Ideal for a
#' gallery.
#'
#' @rdname card
#'
#' @param id Unique card id. Useful to handle multiple cards in the DOM.
#' @param ... Card content.
#' @param title Card title.
#' @param subtitle Card subtitle.
#' @param color Card background color. See \url{https://framework7.io/docs/cards.html}.
#' Not compatible with the img argument.
#' @param image Card background image url. Tje JPG format is prefered. Not compatible
#' with the color argument.
#' @param fullBackground Whether the image should cover the entire card.
#'
#' @note For \link{f7ExpandableCard}, image and color are not compatible. Choose one of them.
#'
#' @examples
#' # Expandable card
#' if(interactive()){
#' library(shiny)
#' library(shinyMobile)
#'
#' shinyApp(
#' ui = f7Page(
#' title = "Expandable Cards",
#' f7SingleLayout(
#' navbar = f7Navbar(
#' title = "Expandable Cards",
#' hairline = FALSE,
#' shadow = TRUE
#' ),
#' f7ExpandableCard(
#' id = "card1",
#' title = "Expandable Card 1",
#' color = "blue",
#' subtitle = "Click on me pleaaaaase",
#' "Framework7 - is a free and open source HTML mobile framework
#' to develop hybrid mobile apps or web apps with iOS or Android
#' native look and feel. It is also an indispensable prototyping apps tool
#' to show working app prototype as soon as possible in case you need to."
#' ),
#' f7ExpandableCard(
#' id = "card2",
#' title = "Expandable Card 2",
#' color = "green",
#' "Framework7 - is a free and open source HTML mobile framework
#' to develop hybrid mobile apps or web apps with iOS or Android
#' native look and feel. It is also an indispensable prototyping apps tool
#' to show working app prototype as soon as possible in case you need to."
#' ),
#' f7ExpandableCard(
#' id = "card3",
#' title = "Expandable Card 3",
#' image = "https://i.pinimg.com/originals/73/38/6e/73386e0513d4c02a4fbb814cadfba655.jpg",
#' "Framework7 - is a free and open source HTML mobile framework
#' to develop hybrid mobile apps or web apps with iOS or Android
#' native look and feel. It is also an indispensable prototyping apps tool
#' to show working app prototype as soon as possible in case you need to."
#' ),
#' f7ExpandableCard(
#' id = "card4",
#' title = "Expandable Card 4",
#' fullBackground = TRUE,
#' image = "https://i.ytimg.com/vi/8q_kmxwK5Rg/maxresdefault.jpg",
#' "Framework7 - is a free and open source HTML mobile framework
#' to develop hybrid mobile apps or web apps with iOS or Android
#' native look and feel. It is also an indispensable prototyping apps tool
#' to show working app prototype as soon as possible in case you need to."
#' )
#' )
#' ),
#' server = function(input, output) {}
#' )
#' }
#'
#' @export
f7ExpandableCard <- function(..., id = NULL, title = NULL,
subtitle = NULL, color = NULL,
image = NULL, fullBackground = FALSE) {
cardColorCl <- if (!is.null(color)) paste0("bg-color-", color)
# card header if any
cardHeader <- if (!is.null(title)) {
shiny::tags$div(
class = if (fullBackground) {
paste0("card-header text-color-white")
} else {
paste0("card-header display-block")
},
title,
style = if (!is.null(image) & !fullBackground) "height: 60px",
if (!is.null(subtitle)) {
shiny::tagList(
shiny::br(),
shiny::tags$small(style = "opacity: 0.7", subtitle)
)
}
)
}
# trigger to close the card
closeCard <- shiny::tags$a(
href = "#",
class = paste0("link card-close card-opened-fade-in color-white"),
style = "position: absolute; right: 15px; top: 15px;",
f7Icon("xmark_circle_fill")
)
# background image if any
backgroundImg <- if (!is.null(image)) {
if (fullBackground) {
shiny::tags$div(
style = paste0(
"background: url('", image, "') no-repeat center top;
background-size: cover;
height: 400px"
),
closeCard,
cardHeader
)
} else {
shiny::tags$div(
style = paste0(
"background: url('", image, "') no-repeat center bottom;
background-size: cover;
height: 240px"
)
)
}
}
# card content
cardContent <- shiny::tags$div(class = "card-content-padding", shiny::p(...))
# main wrapper
shiny::tags$div(
class = "card card-expandable",
`data-card` = paste0("#", id),
id = id,
shiny::tags$div(
class = "card-content",
if (!is.null(image)) {
if (!fullBackground) {
shiny::tagList(
backgroundImg,
closeCard,
cardHeader
)
} else {
backgroundImg
}
} else {
shiny::tags$div(
class = cardColorCl,
style = "height: 300px;",
cardHeader,
closeCard
)
},
cardContent
)
)
}
#' Update Framework7 expandable card
#'
#' \code{updateF7Card} maximizes an \link{f7ExpandableCard} on the client.
#'
#' @param id Card id.
#' @param session Shiny session object.
#'
#' @rdname card
#' @export
#'
#' @examples
#' # Update expandable card
#' if (interactive()) {
#' library(shiny)
#' library(shinyMobile)
#'
#' shinyApp(
#' ui = f7Page(
#' title = "Expandable Cards",
#' f7SingleLayout(
#' navbar = f7Navbar(
#' title = "Expandable Cards",
#' hairline = FALSE,
#' shadow = TRUE
#' ),
#' f7ExpandableCard(
#' id = "card1",
#' title = "Expandable Card 1",
#' image = "https://i.pinimg.com/originals/73/38/6e/73386e0513d4c02a4fbb814cadfba655.jpg",
#' "Framework7 - is a free and open source HTML mobile framework
#' to develop hybrid mobile apps or web apps with iOS or Android
#' native look and feel. It is also an indispensable prototyping apps tool
#' to show working app prototype as soon as possible in case you need to."
#' ),
#'
#' hr(),
#' f7BlockTitle(title = "Click below to expand the card!") %>% f7Align(side = "center"),
#' f7Button(inputId = "go", label = "Go"),
#' br(),
#' f7ExpandableCard(
#' id = "card2",
#' title = "Expandable Card 2",
#' fullBackground = TRUE,
#' image = "https://cdn.pixabay.com/photo/2017/10/03/18/55/mountain-2813667_960_720.png",
#' "Framework7 - is a free and open source HTML mobile framework
#' to develop hybrid mobile apps or web apps with iOS or Android
#' native look and feel. It is also an indispensable prototyping apps tool
#' to show working app prototype as soon as possible in case you need to."
#' )
#' )
#' ),
#' server = function(input, output, session) {
#'
#' observeEvent(input$go, {
#' updateF7Card(id = "card2")
#' })
#'
#' observe({
#' list(
#' print(input$card1),
#' print(input$card2)
#' )
#' })
#' }
#' )
#' }
updateF7Card <- function(id, session = shiny::getDefaultReactiveDomain()) {
session$sendInputMessage(id, NULL)
}
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.