f7Card
creates a simple card container.
f7SocialCard
is a special card for social content.
f7ExpandableCard
is a card that can expand. Ideal for a
gallery.
updateF7Card
maximizes an f7ExpandableCard on the client.
Usage
f7Card(
...,
image = NULL,
title = NULL,
footer = NULL,
outline = FALSE,
height = NULL
)
f7SocialCard(..., image = NULL, author = NULL, date = NULL, footer = NULL)
f7ExpandableCard(
...,
id = NULL,
title = NULL,
subtitle = NULL,
color = NULL,
image = NULL,
fullBackground = FALSE
)
updateF7Card(id, session = shiny::getDefaultReactiveDomain())
Arguments
- ...
Card content.
- image
Card background image url. Tje JPG format is prefered. Not compatible with the color argument.
- title
Card title.
- footer
Footer content, if any. Must be wrapped in a tagList.
- outline
Outline style. FALSE by default.
- height
Card height. NULL by default.
- author
Author.
- date
Date.
- id
Card id.
- subtitle
Card subtitle.
- color
Card background color. See https://framework7.io/docs/cards.html. Not compatible with the img argument.
- fullBackground
Whether the image should cover the entire card.
- session
Shiny session object.
Author
David Granjon, dgranjon@ymail.com
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) {}
)
}
# 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) {}
)
}
# 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) {}
)
}
# 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)
)
})
}
)
}