grid_card_text.RdMakes a grid_card that contains just text that is vertically centered within the panel. Useful for app titles or displaying text-based statistics.
grid_card_text(
area,
content = NULL,
...,
alignment = "start",
img_height = "55px",
icon = NULL,
wrapping_tag = "h2",
is_title = FALSE
)Name of grid area, should match an area defined in the layout
section of the wrapping grid_page() or grid_container().
Whatever you want the title to say. Typically just text but
any tag or tag-list is possible. All will get wrapped in an h3 tag.
Arguments passed on to grid_card
Horizontal alignment of text. Typical options include
start", "center", "end". For full list of options, see the css-spec for align-items.
If the passed icon is a path to an image, how tall should that image be rendered (preserves aspect ratio.)
Optional icon/image for left of text. Supports image locations
(those ending in .png, .jpg, .jpeg or .svg), ids of font-awesome icons
(i.e. that works with fontawesome::fa(icon)], or fontawesome icons as
returned by fontawesome::fa() (if customization of icon style is
desired.)
What tag should the text be wrapped in. Takes either an
htmltools tag function or the string of a tag accessible via
htmltools::tags[[wrapping_tag]].
Should the text of this panel be passed on as the title of the page? This will make the text show up in the browser tab or when you bookmark the app etc..
# Typically you'll just pass a character string to the function
grid_card_text(area = "header", "This is my header")
#> <div class="card grid_card_text" style="align-items:start;grid-area:header;" data-gridlayout-area="header">
#> <h2>This is my header</h2>
#> </div>
# Icons from `fontawesome` can be used:
# Either with just the id
grid_card_text(area = "header", "Here's my text", icon = "r-project")
#> <div class="card grid_card_text" style="align-items:start;grid-area:header;" data-gridlayout-area="header">
#> <h2>
#> <svg aria-hidden="true" role="img" viewBox="0 0 581 512" style="height:1em;width:1.13em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M581 226.6C581 119.1 450.9 32 290.5 32S0 119.1 0 226.6C0 322.4 103.3 402 239.4 418.1V480h99.1v-61.5c24.3-2.7 47.6-7.4 69.4-13.9L448 480h112l-67.4-113.7c54.5-35.4 88.4-84.9 88.4-139.7zm-466.8 14.5c0-73.5 98.9-133 220.8-133s211.9 40.7 211.9 133c0 50.1-26.5 85-70.3 106.4-2.4-1.6-4.7-2.9-6.4-3.7-10.2-5.2-27.8-10.5-27.8-10.5s86.6-6.4 86.6-92.7-90.6-87.9-90.6-87.9h-199V361c-74.1-21.5-125.2-67.1-125.2-119.9zm225.1 38.3v-55.6c57.8 0 87.8-6.8 87.8 27.3 0 36.5-38.2 28.3-87.8 28.3zm-.9 72.5H365c10.8 0 18.9 11.7 24 19.2-16.1 1.9-33 2.8-50.6 2.9v-22.1z"/></svg>
#> Here's my text
#> </h2>
#> </div>
# Or by directly passing the icon object if you want more customization
grid_card_text(
"header",
"Here's my text",
icon = fontawesome::fa("r-project", fill = "steelblue")
)
#> <div class="card grid_card_text" style="align-items:start;grid-area:header;" data-gridlayout-area="header">
#> <h2>
#> <svg aria-hidden="true" role="img" viewBox="0 0 581 512" style="height:1em;width:1.13em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:steelblue;overflow:visible;position:relative;"><path d="M581 226.6C581 119.1 450.9 32 290.5 32S0 119.1 0 226.6C0 322.4 103.3 402 239.4 418.1V480h99.1v-61.5c24.3-2.7 47.6-7.4 69.4-13.9L448 480h112l-67.4-113.7c54.5-35.4 88.4-84.9 88.4-139.7zm-466.8 14.5c0-73.5 98.9-133 220.8-133s211.9 40.7 211.9 133c0 50.1-26.5 85-70.3 106.4-2.4-1.6-4.7-2.9-6.4-3.7-10.2-5.2-27.8-10.5-27.8-10.5s86.6-6.4 86.6-92.7-90.6-87.9-90.6-87.9h-199V361c-74.1-21.5-125.2-67.1-125.2-119.9zm225.1 38.3v-55.6c57.8 0 87.8-6.8 87.8 27.3 0 36.5-38.2 28.3-87.8 28.3zm-.9 72.5H365c10.8 0 18.9 11.7 24 19.2-16.1 1.9-33 2.8-50.6 2.9v-22.1z"/></svg>
#> Here's my text
#> </h2>
#> </div>
# You can also pass arbitrary image locations for the icon
grid_card_text(
"header",
"Here's my text",
icon = "https://cran.r-project.org/Rlogo.svg"
)
#> <div class="card grid_card_text" style="align-items:start;grid-area:header;" data-gridlayout-area="header">
#> <h2>
#> <img src="https://cran.r-project.org/Rlogo.svg" height="55px"/>
#> Here's my text
#> </h2>
#> </div>
# These images can have their size controlled
grid_card_text(
"header",
"Here's my text",
icon = "https://cran.r-project.org/Rlogo.svg",
img_height = "20px"
)
#> <div class="card grid_card_text" style="align-items:start;grid-area:header;" data-gridlayout-area="header">
#> <h2>
#> <img src="https://cran.r-project.org/Rlogo.svg" height="20px"/>
#> Here's my text
#> </h2>
#> </div>
# Commonly you may want to use the text panel text as the title of your app
grid_card_text(area = "header", "My App Name", is_title = TRUE)
#> <div class="card grid_card_text" style="align-items:start;grid-area:header;" data-gridlayout-area="header">
#> <h2>My App Name</h2>
#> </div>
if (FALSE) {
library(gridlayout)
library(shiny)
library(bslib)
shinyApp(
ui = grid_page(
layout = c(
"header header",
"sidebar distPlot"
),
row_sizes = c("50px", "1fr"),
col_sizes = c("200px", "1fr"),
grid_card_text("header", "This is my header"),
grid_card(
area = "sidebar",
card_header("Settings"),
card_body(
sliderInput("bins", "Number of bins:", 1, 50, 30, width = "100%")
)
),
grid_card_plot("distPlot")
),
server = function(input, output) {
output$distPlot <- renderPlot({
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
}
)
}