diff --git a/R/accordion.R b/R/accordion.R index 68def9eaf..c55831a7a 100644 --- a/R/accordion.R +++ b/R/accordion.R @@ -3,6 +3,12 @@ #' @description #' `r lifecycle::badge("experimental")` #' +#' An accordion can be used to organize UI elements and content in a limited +#' space. It comprises multiple, vertically stacked panels that expand or +#' collapse when clicked, providing a compact layout that works well for +#' grouping input elements in a [sidebar()] or for organizing detailed +#' context-specific information. +#' #' @param ... Named arguments become attributes on the `
` #' element. Unnamed arguments should be `accordion_panel()`s. #' @param id If provided, you can use `input$id` in your server logic to @@ -17,12 +23,25 @@ #' @param class Additional CSS classes to include on the accordion div. #' @param width,height Any valid CSS unit; for example, height="100%". #' -#' @references -#' #' @export -#' @seealso [accordion_panel_set()] -#' @examplesIf rlang::is_interactive() +#' @family Components +#' +#' @references bslib's accordion component is derived from the [Bootstrap +#' Accordion +#' component](https://getbootstrap.com/docs/5.3/components/accordion/). +#' Accordions are also featured on the bslib website: +#' +#' * [Get Started: Dashboards](https://rstudio.github.io/bslib/articles/dashboards/index.html#accordions) +#' * [Sidebars: Accordions](https://rstudio.github.io/bslib/articles/dashboards/index.html#accordions) #' +#' @seealso [accordion_panel_set()], [accordion_panel_open()] and +#' [accordion_panel_close()] programmatically interact with the state of an +#' accordion panel. +#' @seealso [accordion_panel_insert()], [accordion_panel_remove()] and +#' [accordion_panel_update()] add or remove accordion panels from an +#' accordion. +#' +#' @examplesIf rlang::is_interactive() #' items <- lapply(LETTERS, function(x) { #' accordion_panel(paste("Section", x), paste("Some narrative for section", x)) #' }) @@ -167,9 +186,9 @@ accordion_panel <- function(title, ..., value = title, icon = NULL) { #' @description #' `r lifecycle::badge("experimental")` #' -#' Dynamically (i.e., programmatically) update/modify [`accordion()`]s in a -#' Shiny app. These functions require an `id` to be provided to the -#' `accordion()` and must also be called within an active Shiny session. +#' Dynamically update/modify [`accordion()`]s in a Shiny app. To be updated +#' programmatically, the [accordion()] must have an `id`. These functions +#' require an active Shiny session and only work with a running Shiny app. #' #' @param id an character string that matches an existing [accordion()]'s `id`. #' @param values either a character string (used to identify particular @@ -177,8 +196,12 @@ accordion_panel <- function(title, ..., value = title, icon = NULL) { #' @param session a shiny session object (the default should almost always be #' used). #' +#' @seealso [accordion()] and [accordion_panel()] create the accordion +#' component. +#' #' @describeIn accordion_panel_set same as `accordion_panel_open()`, except it #' also closes any currently open panels. +#' #' @export accordion_panel_set <- function(id, values, session = get_current_session()) { send_panel_message( diff --git a/R/breakpoints.R b/R/breakpoints.R index 5c8c238db..c160bd15b 100644 --- a/R/breakpoints.R +++ b/R/breakpoints.R @@ -4,13 +4,16 @@ #' `r lifecycle::badge("experimental")` #' #' A generic constructor for responsive breakpoints. +#' #' @param sm Values to apply at the `sm` breakpoint. #' @param md Values to apply at the `md` breakpoint. #' @param lg Values to apply at the `lg` breakpoint. #' @param ... Other breakpoints (e.g., `xl`). #' -#' @seealso [layout_columns()] -#' @references +#' @seealso `breakpoints()` is used by [layout_columns()]. +#' @references Bootstrap's +#' [Breakpoints article](https://getbootstrap.com/docs/5.3/layout/breakpoints/) +#' provides more detail on breakpoints and how they are used and customized. #' #' @examples #' breakpoints(sm = c(4, 4, 4), md = c(3, 3, 6), lg = c(-2, 8, -2)) diff --git a/R/bs-current-theme.R b/R/bs-current-theme.R index 366857ed1..d475d80a2 100644 --- a/R/bs-current-theme.R +++ b/R/bs-current-theme.R @@ -26,7 +26,9 @@ #' #' @param session The current Shiny session (if any). #' -#' @return a [bs_theme()] object. +#' @return Returns a [bs_theme()] object. +#' +#' @family Bootstrap theme functions #' @export bs_current_theme <- function(session = get_current_session(FALSE)) { # If we're able to make a reactive read of the theme, then do it diff --git a/R/bs-dependencies.R b/R/bs-dependencies.R index 5b97ed205..9d224eb03 100644 --- a/R/bs-dependencies.R +++ b/R/bs-dependencies.R @@ -10,12 +10,12 @@ #' @section Sass caching and precompilation: #' #' If Shiny Developer Mode is enabled (by setting `options(shiny.devmode = -#' TRUE)` or calling `shiny::devmode(TRUE)`), both \pkg{sass} caching and \pkg{bslib} -#' precompilation are disabled by default; that is, a call to +#' TRUE)` or calling `shiny::devmode(TRUE)`), both \pkg{sass} caching and +#' \pkg{bslib} precompilation are disabled by default; that is, a call to #' `bs_theme_dependencies(theme)` expands to `bs_theme_dependencies(theme, cache -#' = F, precompiled = F)`). This is useful for local development as -#' enabling caching/precompilation may produce incorrect results if local -#' changes are made to bslib's source files. +#' = F, precompiled = F)`). This is useful for local development as enabling +#' caching/precompilation may produce incorrect results if local changes are +#' made to bslib's source files. #' #' @inheritParams bs_theme_update #' @param sass_options a [sass::sass_options()] object. @@ -24,25 +24,24 @@ #' precompiled CSS file for the [theme_version()]. If `precompiled = TRUE` #' and a precompiled CSS file exists for the theme object, it will be fetched #' immediately and not compiled. At the moment, we only provide precompiled -#' CSS for "stock" builds of Bootstrap (i.e., no theming additions, bootswatch +#' CSS for "stock" builds of Bootstrap (i.e., no theming additions, Bootswatch #' themes, or non-default `sass_options`). #' @inheritParams sass::sass #' -#' @return a list of HTML dependencies containing Bootstrap CSS, Bootstrap -#' JavaScript, and `jquery`. This list may contain additional HTML +#' @return Returns a list of HTML dependencies containing Bootstrap CSS, +#' Bootstrap JavaScript, and `jquery`. This list may contain additional HTML #' dependencies if bundled with the `theme`. #' #' @export -#' @seealso [bs_theme()], [bs_dependency()] -#' @examples +#' @family Bootstrap theme functions +#' +#' @examplesIf rlang::is_interactive() #' #' # Function to preview the styling a (primary) Bootstrap button #' library(htmltools) #' button <- tags$a(class = "btn btn-primary", href = "#", role = "button", "Hello") #' preview_button <- function(theme) { -#' if (interactive()) { -#' browsable(tags$body(bs_theme_dependencies(theme), button)) -#' } +#' browsable(tags$body(bs_theme_dependencies(theme), button)) #' } #' #' # Latest Bootstrap @@ -182,12 +181,15 @@ bs_theme_dependencies <- function( #' @param .sass_args A list of additional arguments to pass to #' [sass::sass_partial()]. #' @inheritParams htmltools::htmlDependency -#' @references -#' #' +#' @references +#' * [Theming: Custom components](https://rstudio.github.io/bslib/articles/custom-components/index.html) +#' gives a tutorial on creating a dynamically themable custom component. #' #' @return `bs_dependency()` returns an [htmltools::htmlDependency()] and #' `bs_dependency_defer()` returns an [htmltools::tagFunction()] +#' +#' @family Bootstrap theme functions #' @export bs_dependency <- function(input = list(), theme, name, version, cache_key_extra = NULL, .dep_args = list(), .sass_args = list()) @@ -242,6 +244,7 @@ bs_dependency <- function(input = list(), theme, name, version, do.call(htmlDependency, c(dep_args, .dep_args)) } +#' @rdname bs_dependency #' @param func a _non-anonymous_ function, with a _single_ argument. #' This function should accept a [bs_theme()] object and return a single #' [htmlDependency()], a list of them, or `NULL`. @@ -251,12 +254,10 @@ bs_dependency <- function(input = list(), theme, name, version, #' that you may want to avoid memoisation if `func` relies on side-effects #' (e.g., files on-disk) that need to change for each themable widget #' instance. -#' @export -#' -#' @examples #' -#' \dontrun{ +#' @export #' +#' @examplesIf rlang::is_interactive() #' myWidgetVersion <- "1.2.3" #' #' myWidgetDependency <- function() { @@ -306,9 +307,6 @@ bs_dependency <- function(input = list(), theme, name, version, #' myWidgetDependency() #' ) #' } -#' } -#' -#' @rdname bs_dependency bs_dependency_defer <- function(func, memoise = TRUE) { # func() most likely calls stuff like sass_file() and bs_dependency() -> # sass_partial() -> sass() (e.g., see example section above) Even though diff --git a/R/bs-global.R b/R/bs-global.R index 3d67658df..2985a6108 100644 --- a/R/bs-global.R +++ b/R/bs-global.R @@ -1,36 +1,58 @@ #' Global theming #' -#' `bs_global_theme()` creates a new (global) Bootstrap Sass theme which -#' [bs_theme_dependencies()] (or [sass_partial()]) can consume (their `theme` -#' argument defaults to `bs_global_get()`, which get the current global theme). +#' `bs_global_theme()` creates and sets the global Bootstrap Sass theme. This +#' theme is typically found by [bs_theme_dependencies()] in the app or document +#' where the global theme is being used. You can obtain the current global theme +#' with [bs_global_get()] or directly set the global theme with +#' [bs_global_set()]. #' #' @inheritParams bs_theme #' -#' @return functions that modify the global theme (e.g., `bs_global_set()`) +#' @return Functions that modify the global theme (e.g., `bs_global_set()`) #' invisibly return the previously set theme. `bs_global_get()` returns the #' current global theme. #' -#' @seealso [bs_theme()], [bs_theme_preview()] -#' @examples +#' @family Bootstrap theme functions #' +#' @examples #' # Remember the global state now (so we can restore later) #' theme <- bs_global_get() +#' #' # Use Bootstrap 3 (globally) with some theme customization #' bs_global_theme(3, bg = "#444", fg = "#e4e4e4", primary = "#e39777") -#' if (interactive()) bs_theme_preview(with_themer = FALSE) +#' if (rlang::is_interactive()) { +#' bs_theme_preview(with_themer = FALSE) +#' } +#' #' # If no global theme is active, bs_global_get() returns NULL #' bs_global_clear() #' bs_global_get() +#' #' # Restore the original state #' bs_global_set(theme) #' #' @export -bs_global_theme <- function(version = version_default(), bootswatch = NULL, bg = NULL, fg = NULL, - primary = NULL, secondary = NULL, success = NULL, info = NULL, warning = NULL, - danger = NULL, base_font = NULL, code_font = NULL, heading_font = NULL, ...) { +bs_global_theme <- function( + version = version_default(), + bootswatch = NULL, + bg = NULL, + fg = NULL, + primary = NULL, + secondary = NULL, + success = NULL, + info = NULL, + warning = NULL, + danger = NULL, + base_font = NULL, + code_font = NULL, + heading_font = NULL, + ... +) { bs_global_set(bs_theme( - version, bootswatch, - bg = bg, fg = fg, + version, + bootswatch, + bg = bg, + fg = fg, primary = primary, secondary = secondary, success = success, diff --git a/R/bs-remove.R b/R/bs-remove.R index d62aa8e1d..1c1203b54 100644 --- a/R/bs-remove.R +++ b/R/bs-remove.R @@ -1,20 +1,33 @@ #' Remove or retrieve Sass code from a theme #' +#' A Bootstrap theme created with [bs_theme()] is comprised of +#' [many Sass layers](https://rstudio.github.io/sass/articles/sass.html#layering). +#' `bs_remove()` and `bs_retrieve()` allow you to remove or retrieve an +#' individual layer, either to reduce the size of the compiled CSS or to extract +#' styles from a theme. +#' #' @inheritParams bs_theme_update #' @param ids a character vector of ids #' -#' @return a modified [bs_theme()] object. +#' @return Returns a modified [bs_theme()] object. #' #' @export +#' @family Bootstrap theme functions +#' #' @examples +#' bs4 <- bs_theme(version = 4) +#' +#' # Retrieve sass bundle for print styles +#' bs_retrieve(bs4, "_print", include_unnamed = FALSE) #' #' # Remove CSS rules for print and carousels -#' bs4 <- bs_theme(version = 4) -#' bs_remove(bs4, c("_print", "_carousel")) +#' bs4_no_print <- bs_remove(bs4, c("_print", "_carousel")) +#' suppressWarnings( +#' bs_retrieve(bs4_no_print, "_print", include_unnamed = FALSE) +#' ) #' #' # Remove BS3 compatibility layer -#' bs_remove(bs4, "bs3compat") -#' +#' bs4_no_compat <- bs_remove(bs4, "bs3compat") bs_remove <- function(theme, ids = character(0)) { ids <- retain_valid_ids(theme, ids) sass_bundle_remove(theme, ids) diff --git a/R/bs-theme-layers.R b/R/bs-theme-layers.R index 0b649290b..8c7061679 100644 --- a/R/bs-theme-layers.R +++ b/R/bs-theme-layers.R @@ -1,13 +1,22 @@ #' Add low-level theming customizations #' -#' Compared to higher-level theme customization available in [bs_theme()], these functions -#' are a more direct interface to Bootstrap Sass, and therefore, do nothing to -#' ensure theme customizations are portable between major Bootstrap versions. +#' These functions provide direct access to the layers of a bslib theme created +#' with [bs_theme()]. Learn more about [composable Sass +#' layers](https://rstudio.github.io/sass/articles/sass.html#layering) on the +#' \pkg{sass} website. +#' +#' @details +#' Compared to higher-level theme customization available in [bs_theme()], these +#' functions are a more direct interface to Bootstrap Sass, and therefore, do +#' nothing to ensure theme customizations are portable between major Bootstrap +#' versions. #' #' @inheritParams bs_theme_update #' @param ... -#' * `bs_add_variables()`: Should be named Sass variables or values that can be passed in directly to the `defaults` argument of a [sass::sass_layer()]. -#' * `bs_bundle()`: Should be arguments that can be handled by [sass::sass_bundle()] to be appended to the `theme` +#' * `bs_add_variables()`: Should be named Sass variables or values that can be +#' passed in directly to the `defaults` argument of a [sass::sass_layer()]. +#' * `bs_bundle()`: Should be arguments that can be handled by +#' [sass::sass_bundle()] to be appended to the `theme` #' @param .where Whether to place the variable definitions before other Sass #' `"defaults"`, after other Sass `"declarations"`, or after other Sass #' `"rules"`. @@ -15,19 +24,27 @@ #' variable expressions. It's recommended to keep this as `TRUE` when `.where #' = "defaults"`. #' -#' @return a modified [bs_theme()] object. +#' @return Returns a modified [bs_theme()] object. +#' +#' @family Bootstrap theme functions +#' +#' @seealso [bs_theme()] creates a Bootstrap theme object, and is the best place +#' to start learning about bslib's theming capabilities. +#' +#' @references +#' * bslib's theming capabilities are powered by +#' [the {sass} package](https://rstudio.github.io/sass/). +#' * Learn more about +#' [composable Sass layers](https://rstudio.github.io/sass/articles/sass.html#layering) +#' on the \pkg{sass} website. #' -#' @references \url{https://getbootstrap.com/docs/4.4/getting-started/theming/} -#' @references \url{https://rstudio.github.io/sass/articles/sass.html#layering} -#' @examples +#' @examplesIf rlang::is_interactive() #' #' # Function to preview the styling a (primary) Bootstrap button #' library(htmltools) #' button <- tags$a(class = "btn btn-primary", href = "#", role = "button", "Hello") #' preview_button <- function(theme) { -#' if (interactive()) { -#' browsable(tags$body(bs_theme_dependencies(theme), button)) -#' } +#' browsable(tags$body(bs_theme_dependencies(theme), button)) #' } #' #' # Here we start with a theme based on a Bootswatch theme, @@ -52,6 +69,7 @@ #' # 'person card' #' person_rules <- system.file("custom", "person.scss", package = "bslib") #' theme <- bs_add_rules(bs_theme(), sass::sass_file(person_rules)) +#' #' # Include custom CSS that leverages bootstrap Sass variables #' person <- function(name, title, company) { #' tags$div( @@ -61,16 +79,16 @@ #' div(class = "company", company) #' ) #' } -#' if (interactive()) { -#' browsable(shiny::fluidPage( -#' theme = theme, -#' person("Andrew Carnegie", "Owner", "Carnegie Steel Company"), -#' person("John D. Rockefeller", "Chairman", "Standard Oil") -#' )) -#' } #' +#' page_fluid( +#' theme = theme, +#' person("Andrew Carnegie", "Owner", "Carnegie Steel Company"), +#' person("John D. Rockefeller", "Chairman", "Standard Oil") +#' ) +#' +#' @describeIn bs_bundle Add Bootstrap Sass +#' [variable defaults](http://rstudio.github.io/bslib/articles/bs5-variables/index.html). #' @export -#' @describeIn bs_bundle Add Bootstrap Sass [variable defaults](https://getbootstrap.com/docs/4.4/getting-started/theming/#variable-defaults) bs_add_variables <- function(theme, ..., .where = "defaults", .default_flag = identical(.where, "defaults")) { assert_bs_theme(theme) @@ -116,7 +134,8 @@ ensure_default_flag <- function(x) { ) } -#' @describeIn bs_bundle Add additional [Sass rules](https://sass-lang.com/documentation/style-rules) +#' @describeIn bs_bundle Add additional +#' [Sass rules](https://sass-lang.com/documentation/style-rules). #' @param rules Sass rules. Anything understood by [sass::as_sass()] may be #' provided (e.g., a list, character vector, [sass::sass_file()], etc) #' @export @@ -125,7 +144,7 @@ bs_add_rules <- function(theme, rules) { } #' @describeIn bs_bundle Add additional [Sass -#' functions](https://rstudio.github.io/sass/articles/sass.html#functions) +#' functions](https://rstudio.github.io/sass/articles/sass.html#functions). #' @param functions A character vector or [sass::sass_file()] containing #' functions definitions. #' @export @@ -134,7 +153,7 @@ bs_add_functions <- function(theme, functions) { } #' @describeIn bs_bundle Add additional [Sass -#' mixins](https://rstudio.github.io/sass/articles/sass.html#mixins) +#' mixins](https://rstudio.github.io/sass/articles/sass.html#mixins). #' @param mixins A character vector or [sass::sass_file()] containing #' mixin definitions. #' @export @@ -142,7 +161,8 @@ bs_add_mixins <- function(theme, mixins) { bs_bundle(theme, sass_layer(mixins = mixins)) } -#' @describeIn bs_bundle Add additional [sass::sass_bundle()] objects to an existing `theme`. +#' @describeIn bs_bundle Add additional [sass::sass_bundle()] objects to an +#' existing `theme`. #' @export bs_bundle <- function(theme, ...) { assert_bs_theme(theme) diff --git a/R/bs-theme-preset-bootswatch.R b/R/bs-theme-preset-bootswatch.R index d76e931d2..a670ad6eb 100644 --- a/R/bs-theme-preset-bootswatch.R +++ b/R/bs-theme-preset-bootswatch.R @@ -1,9 +1,10 @@ #' Obtain a list of all available bootswatch themes. #' -#' @param version the major version of Bootswatch. -#' @param full_path whether to return a path to the installed theme. +#' @param version The major version of Bootswatch. +#' @param full_path Whether to return a path to the installed theme. +#' @return Returns a character vector of Bootswatch themes. +#' @family Bootstrap theme utility functions #' @export -#' @return a character vector of Bootswatch themes. bootswatch_themes <- function(version = version_default(), full_path = FALSE) { list.dirs(bootswatch_dist(version), full.names = full_path, recursive = FALSE) } @@ -11,7 +12,8 @@ bootswatch_themes <- function(version = version_default(), full_path = FALSE) { #' Obtain a theme's Bootswatch theme name #' #' @inheritParams bs_theme_update -#' @return the Bootswatch theme named used (if any) in the `theme`. +#' @return Returns the Bootswatch theme named used (if any) in the `theme`. +#' @family Bootstrap theme utility functions #' @export theme_bootswatch <- function(theme) { if (!is_bs_theme(theme)) return(NULL) @@ -22,7 +24,8 @@ theme_bootswatch <- function(theme) { #' Obtain a theme's Bootstrap version #' #' @inheritParams bs_theme_update -#' @return the major version of Bootstrap used in the `theme`. +#' @return Returns the major version of Bootstrap used in the `theme`. +#' @family Bootstrap theme utility functions #' @export theme_version <- function(theme) { if (!is_bs_theme(theme)) return(NULL) diff --git a/R/bs-theme-preset-builtin.R b/R/bs-theme-preset-builtin.R index a77bf454a..65b018dd1 100644 --- a/R/bs-theme-preset-builtin.R +++ b/R/bs-theme-preset-builtin.R @@ -2,8 +2,12 @@ #' #' @param version the major version of Bootstrap. #' @param full_path whether to return a path to the installed theme. +#' +#' @return Returns a character vector of built-in themes provided by +#' \pkg{bslib}. +#' +#' @family Bootstrap theme utility functions #' @export -#' @return a character vector of built-in themes provided by \pkg{bslib}. builtin_themes <- function(version = version_default(), full_path = FALSE) { path_builtins <- path_builtin_theme(version = version) if (is.null(path_builtins)) return(NULL) diff --git a/R/bs-theme-preview.R b/R/bs-theme-preview.R index 36ef000e5..86d34a9a0 100644 --- a/R/bs-theme-preview.R +++ b/R/bs-theme-preview.R @@ -1,24 +1,32 @@ #' @include utils.R NULL -#' Preview the currently set theme +#' Preview a Bootstrap theme #' -#' Launches an example shiny app via `run_with_themer()` and -#' `bs_theme_dependencies()`. Useful for getting a quick preview of the current -#' theme setting as well as an interactive GUI for tweaking some of the main -#' theme settings. +#' Launches an example shiny app that can be used to get a quick preview of a +#' [bs_theme()], as well as an interactive GUI for tweaking some of the +#' main theme settings. Calling `bs_theme_preview()` with no arguments starts +#' the theme preview app with the default theme, which is a great way to see +#' the available theme presets or to start creating your own theme. #' -#' The app that this launches is subject to change. +#' The app that this launches is subject to change as new features are +#' developed in \pkg{bslib} and \pkg{shiny}. #' #' @inheritParams bs_theme_update #' @param ... passed along to [shiny::runApp()]. #' @param with_themer whether or not to run the app with [run_with_themer()]. +#' #' @return nothing, this function is called for its side-effects (launching an #' application). -#' @seealso [run_with_themer()] -#' @examples +#' +#' @seealso Use [run_with_themer()] or [bs_themer()] to add the theming UI to +#' an existing shiny app. +#' +#' @examplesIf rlang::is_interactive() #' theme <- bs_theme(bg = "#6c757d", fg = "white", primary = "orange") -#' if (interactive()) bs_theme_preview(theme) +#' bs_theme_preview(theme) +#' +#' @family Bootstrap theme functions #' @export bs_theme_preview <- function(theme = bs_theme(), ..., with_themer = TRUE) { assert_bs_theme(theme) @@ -596,21 +604,27 @@ gfont_key <- function() { #' Retrieve Sass variable values from the current theme #' -#' Useful for retriving a variable from the current theme and using +#' Useful for retrieving a variable from the current theme and using #' the value to inform another R function. #' #' @inheritParams bs_theme_update -#' @param varnames a character string referencing a Sass variable -#' in the current theme. -#' @return a character string containing a CSS/Sass value. -#' If the variable(s) are not defined, their value is `NA`. +#' @param varnames A character string referencing a Sass variable in the current +#' theme. +#' +#' @return Returns a character string containing a CSS/Sass value. If the +#' variable(s) are not defined, their value is `NA`. +#' +#' @references [Theming: Bootstrap 5 variables](https://rstudio.github.io/bslib/articles/bs5-variables/index.html) +#' provides a searchable reference of all theming variables available in +#' Bootstrap 5. #' #' @export +#' @family Bootstrap theme utility functions +#' #' @examples #' vars <- c("body-bg", "body-color", "primary", "border-radius") #' bs_get_variables(bs_theme(), varnames = vars) #' bs_get_variables(bs_theme(bootswatch = "darkly"), varnames = vars) -#' bs_get_variables <- function(theme, varnames) { if (length(varnames) == 0) { return(stats::setNames(character(0), character(0))) diff --git a/R/bs-theme.R b/R/bs-theme.R index 55c6bf143..eefdb3b12 100644 --- a/R/bs-theme.R +++ b/R/bs-theme.R @@ -10,7 +10,9 @@ #' `bg`, `fg`, `primary`, etc). #' * Customize other, lower-level, Bootstrap Sass variable defaults via `...`. #' -#' To learn more about how to implement custom themes, as well as how to use them inside Shiny and R Markdown, [see here](https://rstudio.github.io/bslib/articles/theming.html). +#' To learn more about how to implement custom themes, as well as how to use +#' them inside Shiny and R Markdown, [see +#' here](https://rstudio.github.io/bslib/articles/theming.html). #' #' @section Colors: #' @@ -28,32 +30,51 @@ #' both set CSS properties _and_ import font files, consider using the various #' [font_face()] helpers. #' -#' Each `*_font` argument may be collection of character vectors, -#' [font_google()]s, [font_link()]s and/or [font_face()]s. Note that a -#' character vector can have: +#' Each `*_font` argument may be a single font or a `font_collection()`. +#' A font can be created with [font_google()], [font_link()], or [font_face()], +#' or it can be a character vector of font names in the following format: #' * A single unquoted name (e.g., `"Source Sans Pro"`). #' * A single quoted name (e.g., `"'Source Sans Pro'"`). #' * A comma-separated list of names w/ individual names quoted as necessary. #' (e.g. `c("Open Sans", "'Source Sans Pro'", "'Helvetica Neue', Helvetica, sans-serif")`) #' -#' Since `font_google(..., local = TRUE)` guarantees that the client has access to -#' the font family, meaning it's relatively safe to specify just one font -#' family, for instance: +#' `font_google()` sets `local = TRUE` by default, which ensures that the font +#' files are downloaded from [Google Fonts](https://fonts.google.com/) when +#' your document or app is rendered. This guarantees that the client has access +#' to the font family, making it relatively safe to specify just one font +#' family: #' -#' ``` +#' ```r #' bs_theme(base_font = font_google("Pacifico", local = TRUE)) #' ``` #' -#' However, specifying multiple "fallback" font families is recommended, -#' especially when relying on remote and/or system fonts being available, for -#' instance. Fallback fonts are useful not only for handling missing fonts, but -#' also for handling a Flash of Invisible Text (FOIT) which can be quite -#' noticeable with remote web fonts on a slow internet connection. +#' That said, we recommend you specify multiple "fallback" font families, +#' especially when relying on remote and/or system fonts being available. +#' Fallback fonts are useful not only for handling missing fonts, but also +#' ensure that your users don't experience a Flash of Invisible Text (FOIT) +#' which can be quite noticeable with remote web fonts on a slow internet +#' connection. #' -#' ``` +#' ```r #' bs_theme(base_font = font_collection(font_google("Pacifico", local = FALSE), "Roboto", "sans-serif")) #' ```` #' +#' @references +#' * [Get Started: Theming](https://rstudio.github.io/bslib/articles/theming/index.html) +#' introduces theming with bslib in Shiny apps and R Markdown documents. +#' * [Theming: Bootstrap 5 variables](https://rstudio.github.io/bslib/articles/bs5-variables/index.html) +#' provides a searchable reference of all theming variables available in +#' Bootstrap 5. +#' * [Theming: Custom components](https://rstudio.github.io/bslib/articles/custom-components/index.html) +#' gives a tutorial on creating a dynamically themable custom component. +#' * bslib's theming capabilities are powered by +#' [the {sass} package](https://rstudio.github.io/sass/). +#' * [Bootstrap's utility classes](https://rstudio.github.io/bslib/articles/utility-classes/index.html) +#' can be helpful when you want to change the appearance of an element +#' without writing CSS or customizing your `bs_theme()`. +#' +#' @family Bootstrap theme functions +#' #' @param version The major version of Bootstrap to use (see [versions()] #' for possible values). Defaults to the currently recommended version #' for new projects (currently Bootstrap 5). @@ -91,12 +112,9 @@ #' example, a value of `1.5` scales font sizes to 150% and a value of `0.8` #' scales to 80%. Must be a positive number. #' -#' @return a [sass::sass_bundle()] (list-like) object. +#' @return Returns a [sass::sass_bundle()] (list-like) object. #' -#' @references \url{https://rstudio.github.io/bslib/articles/theming.html} -#' @references \url{https://rstudio.github.io/sass/} -#' @seealso [bs_add_variables()], [bs_theme_preview()] -#' @examples +#' @examplesIf rlang::is_interactive() #' #' theme <- bs_theme( #' # Controls the default grayscale palette @@ -109,9 +127,8 @@ #' # Can also add lower-level customization #' "input-border-color" = "#EA80FC" #' ) -#' if (interactive()) { -#' bs_theme_preview(theme) -#' } +#' +#' bs_theme_preview(theme) #' #' # Lower-level bs_add_*() functions allow you to work more #' # directly with the underlying Sass code @@ -119,12 +136,24 @@ #' theme <- bs_add_rules(theme, ".my-class { color: $my-class-color }") #' #' @export -bs_theme <- function(version = version_default(), preset = NULL, ..., - bg = NULL, fg = NULL, primary = NULL, secondary = NULL, - success = NULL, info = NULL, warning = NULL, danger = NULL, - base_font = NULL, code_font = NULL, heading_font = NULL, - font_scale = NULL, bootswatch = NULL) { - +bs_theme <- function( + version = version_default(), + preset = NULL, + ..., + bg = NULL, + fg = NULL, + primary = NULL, + secondary = NULL, + success = NULL, + info = NULL, + warning = NULL, + danger = NULL, + base_font = NULL, + code_font = NULL, + heading_font = NULL, + font_scale = NULL, + bootswatch = NULL +) { if (is.null(preset) && is.null(bootswatch) && version >= 5) { preset <- "shiny" } @@ -158,13 +187,26 @@ bs_theme <- function(version = version_default(), preset = NULL, ..., } #' @rdname bs_theme -#' @param theme a [bs_theme()] object. +#' @param theme A [bs_theme()] object. #' @export -bs_theme_update <- function(theme, ..., preset = NULL, bg = NULL, fg = NULL, - primary = NULL, secondary = NULL, success = NULL, - info = NULL, warning = NULL, danger = NULL, - base_font = NULL, code_font = NULL, heading_font = NULL, - font_scale = NULL, bootswatch = NULL) { +bs_theme_update <- function( + theme, + ..., + preset = NULL, + bg = NULL, + fg = NULL, + primary = NULL, + secondary = NULL, + success = NULL, + info = NULL, + warning = NULL, + danger = NULL, + base_font = NULL, + code_font = NULL, + heading_font = NULL, + font_scale = NULL, + bootswatch = NULL +) { assert_bs_theme(theme) preset <- resolve_bs_preset(preset, bootswatch, version = theme_version(theme)) diff --git a/R/card.R b/R/card.R index 0ad0a8e3b..6e0554f95 100644 --- a/R/card.R +++ b/R/card.R @@ -4,8 +4,9 @@ #' `r lifecycle::badge("experimental")` #' #' A general purpose container for grouping related UI elements together with a -#' border and optional padding. To learn more about [card()]s, see [this -#' article](https://rstudio.github.io/bslib/articles/cards.html). +#' border and optional padding. To learn more about [card()]s, see [the Cards +#' article](https://rstudio.github.io/bslib/articles/cards/index.html) or the +#' other articles listed in the _References_ section below. #' #' @param ... Unnamed arguments can be any valid child of an [htmltools #' tag][htmltools::tags] (which includes card items such as [card_body()]. @@ -31,29 +32,43 @@ #' @return A [htmltools::div()] tag. #' #' @export -#' @seealso [card_body()] for putting stuff inside the card. -#' @seealso [navset_card_tab()] for cards with multiple tabs. -#' @seealso [layout_column_wrap()] for laying out multiple cards (or multiple -#' columns inside a card). -#' @examples +#' @family Components #' +#' @seealso [Card item functions][card_body()] create the various parts of a +#' card. +#' @seealso [navset_card_tab()], [navset_card_pill()] and +#' [navset_card_underline()] create cards with tabbed navigation. +#' @seealso [layout_columns()] and [layout_column_wrap()] help position multiple +#' cards into columns and rows and can also be used inside a card. +#' @seealso [layout_sidebar()] adds a sidebar to a card when nested in [card()] +#' or [card_body()]. +#' @seealso [value_box()] uses [card()] to highlight a showcase a key piece of +#' information. +#' +#' @references Several articles on the bslib website feature the card component: +#' +#' * [Cards](https://rstudio.github.io/bslib/articles/cards/index.html) +#' * [Get Started: Dashboards](https://rstudio.github.io/bslib/articles/dashboards/index.html) +#' * [Get Started: Any Project](https://rstudio.github.io/bslib/articles/any-project/index.html) +#' * [Column-based layouts](https://rstudio.github.io/bslib/articles/column-layout/index.html) +#' * [Filling layouts: Full-screen cards](https://rstudio.github.io/bslib/articles/filling/index.html#full-screen-cards) +#' +#' @examplesIf rlang::is_interactive() #' library(htmltools) #' -#' if (interactive()) { -#' card( -#' full_screen = TRUE, -#' card_header( -#' "This is the header" -#' ), -#' card_body( -#' p("This is the body."), -#' p("This is still the body.") -#' ), -#' card_footer( -#' "This is the footer" -#' ) +#' card( +#' full_screen = TRUE, +#' card_header( +#' "This is the header" +#' ), +#' card_body( +#' p("This is the body."), +#' p("This is still the body.") +#' ), +#' card_footer( +#' "This is the footer" #' ) -#' } +#' ) #' card <- function(..., full_screen = FALSE, height = NULL, max_height = NULL, min_height = NULL, fill = TRUE, class = NULL, wrapper = card_body) { @@ -120,8 +135,10 @@ as_card_items <- function(children, wrapper) { #' Card items #' #' Components designed to be provided as direct children of a [card()]. For a -#' general overview of the [card()] API, see [this -#' article](https://rstudio.github.io/bslib/articles/cards.html). +#' general overview of the [card()] API, see [the Cards +#' article](https://rstudio.github.io/bslib/articles/cards/index.html) or the +#' other articles listed in the _References_ section of the [card()] +#' documentation. #' #' @param ... Unnamed arguments can be any valid child of an [htmltools #' tag][htmltools::tags]. Named arguments become HTML attributes on returned @@ -140,10 +157,14 @@ as_card_items <- function(children, wrapper) { #' @return An [htmltools::div()] tag. #' #' @export -#' @seealso [card()] for creating a card component. -#' @seealso [navset_card_tab()] for cards with multiple tabs. -#' @seealso [layout_column_wrap()] for laying out multiple cards (or multiple -#' columns inside a card). +#' +#' @seealso [card()] creates a card component. +#' @seealso [navset_card_tab()], [navset_card_pill()] and +#' [navset_card_underline()] create cards with tabbed navigation. +#' @seealso [layout_columns()] and [layout_column_wrap()] help position multiple +#' cards into columns and rows and can also be used inside a card. +#' @seealso [layout_sidebar()] adds a sidebar to a card when nested in [card()] +#' or [card_body()]. #' #' @describeIn card_body A general container for the "main content" of a [card()]. card_body <- function(..., fillable = TRUE, min_height = NULL, max_height = NULL, max_height_full_screen = max_height, height = NULL, padding = NULL, gap = NULL, fill = TRUE, class = NULL) { diff --git a/R/fill.R b/R/fill.R index 065a0d0e2..a27a2735f 100644 --- a/R/fill.R +++ b/R/fill.R @@ -8,7 +8,12 @@ #' properties on arbitrary [htmltools::tag()], which these functions are #' designed to do. #' -#' @references +#' @references The [Filling Layouts](https://rstudio.github.io/bslib/articles/filling.html) +#' article on the bslib website introduces the concept of fillable containers +#' and fill items. +#' +#' @seealso These functions provide a convenient interface to the underlying +#' [htmltools::bindFillRole()] function. #' #' @details #' Although `as_fill()`, `as_fillable()`, and `as_fill_carrier()` can work with @@ -42,8 +47,8 @@ #' with length matching the number of top-level tags that possess the relevant #' fill properties. #' -#' @param x a [htmltools::tag()]. -#' @param ... currently ignored. +#' @param x An [htmltools::tag()]. +#' @param ... Currently ignored. #' @param min_height,max_height Any valid [CSS unit][htmltools::validateCssUnit] #' (e.g., `150`). #' @param gap Any valid [CSS unit][htmltools::validateCssUnit]. @@ -52,6 +57,7 @@ #' @param css_selector A character string containing a CSS selector for #' targeting particular (inner) tag(s) of interest. For more details on what #' selector(s) are supported, see [tagAppendAttributes()]. +#' #' @export as_fill_carrier <- function(x, ..., min_height = NULL, max_height = NULL, gap = NULL, class = NULL, style = NULL, css_selector = NULL) { diff --git a/R/layout.R b/R/layout.R index 57dad2c7a..29d1979be 100644 --- a/R/layout.R +++ b/R/layout.R @@ -5,8 +5,8 @@ #' #' Wraps a 1d sequence of UI elements into a 2d grid. The number of columns (and #' rows) in the grid dependent on the column `width` as well as the size of the -#' display. For more explanation and illustrative examples, see -#' [here](https://rstudio.github.io/bslib/articles/cards.html#multiple-cards). +#' display. For more explanation and illustrative examples, see the _References_ +#' section below. #' #' @param ... Unnamed arguments should be UI elements (e.g., [card()]). Named #' arguments become attributes on the containing [htmltools::tag] element. @@ -40,8 +40,16 @@ #' @inheritParams card #' @inheritParams card_body #' -#' @examples +#' @export +#' @family Column layouts +#' +#' @references The bslib website features `layout_column_wrap()` in two places: +#' * [Column-based layouts](https://rstudio.github.io/bslib/articles/column-layout/index.html) +#' * [Cards: Multiple cards](https://rstudio.github.io/bslib/articles/cards/index.html#multiple-cards) +#' +#' @examplesIf rlang::is_interactive() #' x <- card("A simple card") +#' #' # Always has 2 columns (on non-mobile) #' layout_column_wrap(width = 1/2, x, x, x) #' @@ -171,10 +179,10 @@ is_probably_a_css_unit <- function(x) { #' above. #' @param row_heights One of the following: #' * A numeric vector, where each value represents the -#' [fractional unit](https://css-tricks.com/introduction-fr-css-unit/) (`fr`) -#' height of the relevant row. If there are more rows than values provided, -#' the pattern will repeat. For example, `row_heights = c(1, 2)` allows even -#' rows to take up twice as much space as odd rows. +#' [fractional unit](https://css-tricks.com/introduction-fr-css-unit/) +#' (`fr`) height of the relevant row. If there are more rows than values +#' provided, the pattern will repeat. For example, `row_heights = c(1, 2)` +#' allows even rows to take up twice as much space as odd rows. #' * A list of numeric and [CSS length units][htmltools::validateCssUnit()], #' where each value represents the height of the relevant row. If more rows #' are needed than values provided, the pattern will repeat. For example, @@ -186,10 +194,15 @@ is_probably_a_css_unit <- function(x) { #' * A [breakpoints()] object, where each breakpoint may be either of the above. #' #' @export -#' @seealso [breakpoints()] for more information on breakpoints. -#' @examplesIf rlang::is_interactive() +#' @family Column layouts #' +#' @references [Column-based layouts](https://rstudio.github.io/bslib/articles/column-layout/index.html) +#' on the bslib website. #' +#' @seealso [breakpoints()] for more information on specifying column widths at +#' responsive breakpoints. +#' +#' @examplesIf rlang::is_interactive() #' x <- card("A simple card") #' #' page_fillable( diff --git a/R/nav-items.R b/R/nav-items.R index 7d26c5d70..cb81aeb79 100644 --- a/R/nav-items.R +++ b/R/nav-items.R @@ -24,7 +24,15 @@ #' #' @return A nav item that may be passed to a nav container (e.g. [navset_tab()]). #' -#' @seealso [navset_tab()], [nav_select()]. +#' @seealso [navset] create the navigation container holding the nav panels. +#' @seealso [nav_menu()], [nav_item()], [nav_spacer()] create menus, items, or +#' space in the navset control area. +#' @seealso [nav_insert()], [nav_remove()] programmatically add or remove nav +#' panels. +#' @seealso [nav_select()], [nav_show()], [nav_hide()] change the state of a +#' [nav_panel()] in a navset. +#' +#' @family Panel container functions #' @name nav-items NULL diff --git a/R/nav-update.R b/R/nav-update.R index 9cdcf72d1..8b27d3841 100644 --- a/R/nav-update.R +++ b/R/nav-update.R @@ -7,12 +7,21 @@ #' @param id a character string used to identify the nav container. #' @param selected a character string used to identify a particular #' [nav_panel()] item. -#' @param session a shiny session object (the default should almost always be used). +#' @param session a shiny session object (the default should almost always be +#' used). +#' +#' @seealso [Navset functions][navset] create the navigation container holding +#' the nav panels. +#' @seealso [nav_panel()], [nav_panel_hidden()] create panels of content. +#' @seealso [nav_menu()], [nav_item()], [nav_spacer()] create menus, items, or +#' space in the navset control area. +#' #' @export -#' @seealso [nav_panel()], [navset_tab()]. +#' @family Panel container functions +#' #' @examples #' -#' can_browse <- function() interactive() && require("shiny") +#' can_browse <- function() rlang::is_interactive() && require("shiny") #' #' # Selecting a tab #' if (can_browse()) { diff --git a/R/navs-legacy.R b/R/navs-legacy.R index d59fdf244..60630e025 100644 --- a/R/navs-legacy.R +++ b/R/navs-legacy.R @@ -15,7 +15,15 @@ #' @param header UI element(s) ([tags]) to display _above_ the nav content. #' @param footer UI element(s) ([tags]) to display _below_ the nav content. #' -#' @seealso [nav_panel()], [nav_select()]. +#' @seealso [nav_panel()], [nav_panel_hidden()] create panels of content. +#' @seealso [nav_menu()], [nav_item()], [nav_spacer()] create menus, items, or +#' space in the navset control area. +#' @seealso [nav_insert()], [nav_remove()] programmatically add or remove nav +#' panels. +#' @seealso [nav_select()], [nav_show()], [nav_hide()] change the state of a +#' [nav_panel()] in a navset. +#' +#' @family Panel container functions #' @rdname navset #' @name navset #' @export diff --git a/R/popover.R b/R/popover.R index f45c8d5c1..621308e3e 100644 --- a/R/popover.R +++ b/R/popover.R @@ -67,9 +67,17 @@ #' ``` #' #' @describeIn popover Add a popover to a UI element -#' @references +#' #' @export -#' @seealso [tooltip()] +#' @family Components +#' +#' @references Popovers are based on [Bootstrap's Popover +#' component](https://getbootstrap.com/docs/5.3/components/popovers/). See the +#' bslib website for an [interactive introduction to tooltips and +#' popovers](https://rstudio.github.io/bslib/articles/tooltips-popovers/index.html). +#' +#' @seealso [tooltip()] provides an alternative way to display informational +#' text on demand, typically when focusing or hovering over a trigger element. #' #' @examplesIf rlang::is_interactive() #' diff --git a/R/sidebar.R b/R/sidebar.R index 5859d5f4d..7f2f8d969 100644 --- a/R/sidebar.R +++ b/R/sidebar.R @@ -1,25 +1,33 @@ #' Sidebar layouts #' -#' @description -#' `r lifecycle::badge("experimental")` +#' @description `r lifecycle::badge("experimental")` #' -#' Create a collapsing sidebar layout by providing a `sidebar()` object to the -#' `sidebar` argument of: +#' Sidebar layouts place UI elements, like input controls or additional context, +#' next to the main content area which often holds output elements like plots or +#' tables. #' -#' * [page_sidebar()] -#' * Creates a "page-level" sidebar. -#' * [page_navbar()] -#' * Creates a multi-page app with a "page-level" sidebar. -#' * Creates a multi page/tab UI with a singular `sidebar()` (which is -#' shown on every page/tab). -#' * `layout_sidebar()` -#' * Creates a "floating" sidebar layout component which can be dropped -#' inside any [page()] and/or [card()] context. -#' * [navset_card_tab()] and [navset_card_pill()] -#' * Creates a multi-tab card with a sidebar inside of it. +#' There are several page, navigation, and layout functions that allow you to +#' create a sidebar layout. In each case, you can create a collapsing sidebar +#' layout by providing a `sidebar()` object to the `sidebar` argument the +#' following functions. #' -#' See [this article](https://rstudio.github.io/bslib/articles/sidebars.html) -#' to learn more. +#' * [page_sidebar()] creates a "page-level" sidebar. +#' * [page_navbar()] creates a multi-panel app with an (optional, page-level) +#' sidebar that is shown on every panel. +#' * `layout_sidebar()` creates a "floating" sidebar layout component which can +#' be used inside any [page()] and/or [card()] context. +#' * [navset_card_tab()] and [navset_card_pill()] create multi-tab cards with a +#' shared sidebar that is accessible from every panel. +#' +#' See [the Sidebars article](https://rstudio.github.io/bslib/articles/sidebars.html) +#' on the bslib website to learn more. +#' +#' @references Sidebar layouts are featured in a number of pages on the bslib +#' website: +#' +#' * [Sidebars](https://rstudio.github.io/bslib/articles/sidebars.html) +#' * [Cards: Sidebars](https://rstudio.github.io/bslib/articles/cards/index.html#sidebars) +#' * [Getting Started: Dashboards](https://rstudio.github.io/bslib/articles/dashboards/index.html) #' #' @param ... Unnamed arguments can be any valid child of an [htmltools #' tag][htmltools::tags] and named arguments become HTML attributes on @@ -292,8 +300,8 @@ toggle_sidebar <- function(id, open = NULL, session = get_current_session()) { session$onFlush(callback, once = TRUE) } -#' @describeIn sidebar An alias for [toggle_sidebar()]. -#' @keywords internal +#' @rdname sidebar +#' @usage NULL #' @export sidebar_toggle <- toggle_sidebar diff --git a/R/tooltip.R b/R/tooltip.R index 8a36d957f..50d8a6064 100644 --- a/R/tooltip.R +++ b/R/tooltip.R @@ -56,9 +56,19 @@ #' ``` #' #' @describeIn tooltip Add a tooltip to a UI element -#' @references +#' #' @export -#' @seealso [popover()] +#' @family Components +#' +#' @references Tooltips are based on [Bootstrap's Tooltip +#' component](https://getbootstrap.com/docs/5.3/components/tooltips/). See the +#' bslib website for an [interactive introduction to tooltips and +#' popovers](https://rstudio.github.io/bslib/articles/tooltips-popovers/index.html). +#' +#' @seealso [popover()] provides a an alternative and more persistent container +#' for additional elements, typically revealed by clicking on a target +#' element. +#' #' @examplesIf rlang::is_interactive() #' #' tooltip( diff --git a/R/value-box.R b/R/value-box.R index b9a2bdf86..13ace3d6e 100644 --- a/R/value-box.R +++ b/R/value-box.R @@ -6,12 +6,14 @@ #' An opinionated ([card()]-powered) box, designed for displaying a `value` and #' `title`. Optionally, a `showcase` can provide for context for what the #' `value` represents (for example, it could hold a [bsicons::bs_icon()], or -#' even a [shiny::plotOutput()]). +#' even a [shiny::plotOutput()]). Find examples and template code you can use to +#' create engaging [value boxes on the bslib +#' website](https://rstudio.github.io/bslib/articles/value-boxes/index.html). #' -#' @section Build a Box App: +#' @section Build-a-Box App: #' #' Explore all of the `value_box()` options and layouts interactively with the -#' [Build a Box app](https://bslib.shinyapps.io/build-a-box/), available +#' [Build-a-Box app](https://bslib.shinyapps.io/build-a-box/), available #' online thanks to [shinyapps.io](https://www.shinyapps.io/). Or, you can #' run the app locally with: #' @@ -56,6 +58,16 @@ #' @inheritParams card #' @param theme_color `r lifecycle::badge("deprecated")` Use `theme` instead. #' +#' @seealso Value boxes are a specialized form of a [card()] component. +#' @seealso [layout_columns()] and [layout_column_wrap()] help position multiple +#' value boxes into columns and rows. +#' +#' @references Value boxes are featured on the bslib website in a few articles: +#' +#' * [Value boxes](https://rstudio.github.io/bslib/articles/value-boxes/index.html) +#' * [Build-a-Box App](https://bslib.shinyapps.io/build-a-box) +#' * [Get Started: Dashboards](https://rstudio.github.io/bslib/articles/dashboards/index.html#value-boxes) +#' #' @examplesIf rlang::is_interactive() #' library(htmltools) #' @@ -70,7 +82,7 @@ #' theme = "success" #' ) #' -#' @seealso [card()] +#' @family Components #' @export value_box <- function( title, diff --git a/R/version-default.R b/R/version-default.R index 64e8ecb36..ca6c41b2c 100644 --- a/R/version-default.R +++ b/R/version-default.R @@ -1,7 +1,8 @@ #' Available Bootstrap versions #' -#' @return A list of the Bootstrap versions available. +#' @return Returns a list of the Bootstrap versions available. #' +#' @family Bootstrap theme utility functions #' @export versions <- function() { rlang::set_names( diff --git a/_pkgdown.yml b/_pkgdown.yml index 79bef0b08..d5ae8f154 100644 --- a/_pkgdown.yml +++ b/_pkgdown.yml @@ -213,8 +213,11 @@ reference: - bs_add_variables - font_face - subtitle: Interactive theming - desc: | - Interactively customize themes. + desc: > + Preview and interactively modify Bootstrap themes. Use `bs_theme_preview()` + for a preview of your theme in a Shiny app with many example components. Use + `run_with_themer()` to run an existing Shiny app with the theme editor or + `bs_themer()` to add the theme editor UI to your app or R Markdown document. contents: - bs_theme_preview - run_with_themer diff --git a/man/accordion.Rd b/man/accordion.Rd index f64e8e6f3..e1b063cda 100644 --- a/man/accordion.Rd +++ b/man/accordion.Rd @@ -45,10 +45,15 @@ when \code{multiple=TRUE}.} } \description{ \ifelse{html}{\href{https://lifecycle.r-lib.org/articles/stages.html#experimental}{\figure{lifecycle-experimental.svg}{options: alt='[Experimental]'}}}{\strong{[Experimental]}} + +An accordion can be used to organize UI elements and content in a limited +space. It comprises multiple, vertically stacked panels that expand or +collapse when clicked, providing a compact layout that works well for +grouping input elements in a \code{\link[=sidebar]{sidebar()}} or for organizing detailed +context-specific information. } \examples{ \dontshow{if (rlang::is_interactive()) (if (getRversion() >= "3.4") withAutoprint else force)(\{ # examplesIf} - items <- lapply(LETTERS, function(x) { accordion_panel(paste("Section", x), paste("Some narrative for section", x)) }) @@ -79,8 +84,26 @@ shinyApp(ui, server) \dontshow{\}) # examplesIf} } \references{ -\url{https://getbootstrap.com/docs/5.2/components/accordion/} +bslib's accordion component is derived from the \href{https://getbootstrap.com/docs/5.3/components/accordion/}{Bootstrap Accordion component}. +Accordions are also featured on the bslib website: +\itemize{ +\item \href{https://rstudio.github.io/bslib/articles/dashboards/index.html#accordions}{Get Started: Dashboards} +\item \href{https://rstudio.github.io/bslib/articles/dashboards/index.html#accordions}{Sidebars: Accordions} +} } \seealso{ -\code{\link[=accordion_panel_set]{accordion_panel_set()}} +\code{\link[=accordion_panel_set]{accordion_panel_set()}}, \code{\link[=accordion_panel_open]{accordion_panel_open()}} and +\code{\link[=accordion_panel_close]{accordion_panel_close()}} programmatically interact with the state of an +accordion panel. + +\code{\link[=accordion_panel_insert]{accordion_panel_insert()}}, \code{\link[=accordion_panel_remove]{accordion_panel_remove()}} and +\code{\link[=accordion_panel_update]{accordion_panel_update()}} add or remove accordion panels from an +accordion. + +Other Components: +\code{\link{card}()}, +\code{\link{popover}()}, +\code{\link{tooltip}()}, +\code{\link{value_box}()} } +\concept{Components} diff --git a/man/accordion_panel_set.Rd b/man/accordion_panel_set.Rd index c9a2b22f4..b43e38a96 100644 --- a/man/accordion_panel_set.Rd +++ b/man/accordion_panel_set.Rd @@ -65,9 +65,9 @@ element. Unnamed arguments should be \code{accordion_panel()}s.} \description{ \ifelse{html}{\href{https://lifecycle.r-lib.org/articles/stages.html#experimental}{\figure{lifecycle-experimental.svg}{options: alt='[Experimental]'}}}{\strong{[Experimental]}} -Dynamically (i.e., programmatically) update/modify \code{\link[=accordion]{accordion()}}s in a -Shiny app. These functions require an \code{id} to be provided to the -\code{accordion()} and must also be called within an active Shiny session. +Dynamically update/modify \code{\link[=accordion]{accordion()}}s in a Shiny app. To be updated +programmatically, the \code{\link[=accordion]{accordion()}} must have an \code{id}. These functions +require an active Shiny session and only work with a running Shiny app. } \section{Functions}{ \itemize{ @@ -85,3 +85,7 @@ also closes any currently open panels. \item \code{accordion_panel_update()}: update a \code{\link[=accordion_panel]{accordion_panel()}}. }} +\seealso{ +\code{\link[=accordion]{accordion()}} and \code{\link[=accordion_panel]{accordion_panel()}} create the accordion +component. +} diff --git a/man/as_fill_carrier.Rd b/man/as_fill_carrier.Rd index bcc212122..60cf2ec0b 100644 --- a/man/as_fill_carrier.Rd +++ b/man/as_fill_carrier.Rd @@ -51,9 +51,9 @@ is_fillable_container(x) is_fill_item(x) } \arguments{ -\item{x}{a \code{\link[htmltools:builder]{htmltools::tag()}}.} +\item{x}{An \code{\link[htmltools:builder]{htmltools::tag()}}.} -\item{...}{currently ignored.} +\item{...}{Currently ignored.} \item{min_height, max_height}{Any valid \link[htmltools:validateCssUnit]{CSS unit} (e.g., \code{150}).} @@ -114,5 +114,11 @@ shinyApp( \dontshow{\}) # examplesIf} } \references{ -\url{https://rstudio.github.io/bslib/articles/filling.html} +The \href{https://rstudio.github.io/bslib/articles/filling.html}{Filling Layouts} +article on the bslib website introduces the concept of fillable containers +and fill items. +} +\seealso{ +These functions provide a convenient interface to the underlying +\code{\link[htmltools:bindFillRole]{htmltools::bindFillRole()}} function. } diff --git a/man/bootswatch_themes.Rd b/man/bootswatch_themes.Rd index a5413e348..1affbc473 100644 --- a/man/bootswatch_themes.Rd +++ b/man/bootswatch_themes.Rd @@ -7,13 +7,22 @@ bootswatch_themes(version = version_default(), full_path = FALSE) } \arguments{ -\item{version}{the major version of Bootswatch.} +\item{version}{The major version of Bootswatch.} -\item{full_path}{whether to return a path to the installed theme.} +\item{full_path}{Whether to return a path to the installed theme.} } \value{ -a character vector of Bootswatch themes. +Returns a character vector of Bootswatch themes. } \description{ Obtain a list of all available bootswatch themes. } +\seealso{ +Other Bootstrap theme utility functions: +\code{\link{bs_get_variables}()}, +\code{\link{builtin_themes}()}, +\code{\link{theme_bootswatch}()}, +\code{\link{theme_version}()}, +\code{\link{versions}()} +} +\concept{Bootstrap theme utility functions} diff --git a/man/breakpoints.Rd b/man/breakpoints.Rd index faff491eb..e1ab8d858 100644 --- a/man/breakpoints.Rd +++ b/man/breakpoints.Rd @@ -25,8 +25,10 @@ breakpoints(sm = c(4, 4, 4), md = c(3, 3, 6), lg = c(-2, 8, -2)) } \references{ -\url{https://getbootstrap.com/docs/5.3/layout/breakpoints/} +Bootstrap's +\href{https://getbootstrap.com/docs/5.3/layout/breakpoints/}{Breakpoints article} +provides more detail on breakpoints and how they are used and customized. } \seealso{ -\code{\link[=layout_columns]{layout_columns()}} +\code{breakpoints()} is used by \code{\link[=layout_columns]{layout_columns()}}. } diff --git a/man/bs_bundle.Rd b/man/bs_bundle.Rd index 10f5d773f..262585a40 100644 --- a/man/bs_bundle.Rd +++ b/man/bs_bundle.Rd @@ -24,11 +24,13 @@ bs_add_mixins(theme, mixins) bs_bundle(theme, ...) } \arguments{ -\item{theme}{a \code{\link[=bs_theme]{bs_theme()}} object.} +\item{theme}{A \code{\link[=bs_theme]{bs_theme()}} object.} \item{...}{\itemize{ -\item \code{bs_add_variables()}: Should be named Sass variables or values that can be passed in directly to the \code{defaults} argument of a \code{\link[sass:sass_layer]{sass::sass_layer()}}. -\item \code{bs_bundle()}: Should be arguments that can be handled by \code{\link[sass:sass_layer]{sass::sass_bundle()}} to be appended to the \code{theme} +\item \code{bs_add_variables()}: Should be named Sass variables or values that can be +passed in directly to the \code{defaults} argument of a \code{\link[sass:sass_layer]{sass::sass_layer()}}. +\item \code{bs_bundle()}: Should be arguments that can be handled by +\code{\link[sass:sass_layer]{sass::sass_bundle()}} to be appended to the \code{theme} }} \item{.where}{Whether to place the variable definitions before other Sass @@ -48,35 +50,43 @@ functions definitions.} mixin definitions.} } \value{ -a modified \code{\link[=bs_theme]{bs_theme()}} object. +Returns a modified \code{\link[=bs_theme]{bs_theme()}} object. } \description{ -Compared to higher-level theme customization available in \code{\link[=bs_theme]{bs_theme()}}, these functions -are a more direct interface to Bootstrap Sass, and therefore, do nothing to -ensure theme customizations are portable between major Bootstrap versions. +These functions provide direct access to the layers of a bslib theme created +with \code{\link[=bs_theme]{bs_theme()}}. Learn more about \href{https://rstudio.github.io/sass/articles/sass.html#layering}{composable Sass layers} on the +\pkg{sass} website. +} +\details{ +Compared to higher-level theme customization available in \code{\link[=bs_theme]{bs_theme()}}, these +functions are a more direct interface to Bootstrap Sass, and therefore, do +nothing to ensure theme customizations are portable between major Bootstrap +versions. } \section{Functions}{ \itemize{ -\item \code{bs_add_variables()}: Add Bootstrap Sass \href{https://getbootstrap.com/docs/4.4/getting-started/theming/#variable-defaults}{variable defaults} +\item \code{bs_add_variables()}: Add Bootstrap Sass +\href{http://rstudio.github.io/bslib/articles/bs5-variables/index.html}{variable defaults}. -\item \code{bs_add_rules()}: Add additional \href{https://sass-lang.com/documentation/style-rules}{Sass rules} +\item \code{bs_add_rules()}: Add additional +\href{https://sass-lang.com/documentation/style-rules}{Sass rules}. -\item \code{bs_add_functions()}: Add additional \href{https://rstudio.github.io/sass/articles/sass.html#functions}{Sass functions} +\item \code{bs_add_functions()}: Add additional \href{https://rstudio.github.io/sass/articles/sass.html#functions}{Sass functions}. -\item \code{bs_add_mixins()}: Add additional \href{https://rstudio.github.io/sass/articles/sass.html#mixins}{Sass mixins} +\item \code{bs_add_mixins()}: Add additional \href{https://rstudio.github.io/sass/articles/sass.html#mixins}{Sass mixins}. -\item \code{bs_bundle()}: Add additional \code{\link[sass:sass_layer]{sass::sass_bundle()}} objects to an existing \code{theme}. +\item \code{bs_bundle()}: Add additional \code{\link[sass:sass_layer]{sass::sass_bundle()}} objects to an +existing \code{theme}. }} \examples{ +\dontshow{if (rlang::is_interactive()) (if (getRversion() >= "3.4") withAutoprint else force)(\{ # examplesIf} # Function to preview the styling a (primary) Bootstrap button library(htmltools) button <- tags$a(class = "btn btn-primary", href = "#", role = "button", "Hello") preview_button <- function(theme) { - if (interactive()) { - browsable(tags$body(bs_theme_dependencies(theme), button)) - } + browsable(tags$body(bs_theme_dependencies(theme), button)) } # Here we start with a theme based on a Bootswatch theme, @@ -101,6 +111,7 @@ preview_button(theme) # 'person card' person_rules <- system.file("custom", "person.scss", package = "bslib") theme <- bs_add_rules(bs_theme(), sass::sass_file(person_rules)) + # Include custom CSS that leverages bootstrap Sass variables person <- function(name, title, company) { tags$div( @@ -110,17 +121,34 @@ person <- function(name, title, company) { div(class = "company", company) ) } -if (interactive()) { - browsable(shiny::fluidPage( - theme = theme, - person("Andrew Carnegie", "Owner", "Carnegie Steel Company"), - person("John D. Rockefeller", "Chairman", "Standard Oil") - )) -} +page_fluid( + theme = theme, + person("Andrew Carnegie", "Owner", "Carnegie Steel Company"), + person("John D. Rockefeller", "Chairman", "Standard Oil") +) +\dontshow{\}) # examplesIf} } \references{ -\url{https://getbootstrap.com/docs/4.4/getting-started/theming/} - -\url{https://rstudio.github.io/sass/articles/sass.html#layering} +\itemize{ +\item bslib's theming capabilities are powered by +\href{https://rstudio.github.io/sass/}{the {sass} package}. +\item Learn more about +\href{https://rstudio.github.io/sass/articles/sass.html#layering}{composable Sass layers} +on the \pkg{sass} website. +} +} +\seealso{ +\code{\link[=bs_theme]{bs_theme()}} creates a Bootstrap theme object, and is the best place +to start learning about bslib's theming capabilities. + +Other Bootstrap theme functions: +\code{\link{bs_current_theme}()}, +\code{\link{bs_dependency}()}, +\code{\link{bs_global_theme}()}, +\code{\link{bs_remove}()}, +\code{\link{bs_theme_dependencies}()}, +\code{\link{bs_theme_preview}()}, +\code{\link{bs_theme}()} } +\concept{Bootstrap theme functions} diff --git a/man/bs_current_theme.Rd b/man/bs_current_theme.Rd index a6ce51293..88d4f28ec 100644 --- a/man/bs_current_theme.Rd +++ b/man/bs_current_theme.Rd @@ -10,7 +10,7 @@ bs_current_theme(session = get_current_session(FALSE)) \item{session}{The current Shiny session (if any).} } \value{ -a \code{\link[=bs_theme]{bs_theme()}} object. +Returns a \code{\link[=bs_theme]{bs_theme()}} object. } \description{ Intended for advanced use by developers to obtain the currently active theme @@ -38,3 +38,14 @@ is called, which is relevant for \code{\link[rmarkdown:html_document]{rmarkdown: possibly other static rendering contexts. } } +\seealso{ +Other Bootstrap theme functions: +\code{\link{bs_add_variables}()}, +\code{\link{bs_dependency}()}, +\code{\link{bs_global_theme}()}, +\code{\link{bs_remove}()}, +\code{\link{bs_theme_dependencies}()}, +\code{\link{bs_theme_preview}()}, +\code{\link{bs_theme}()} +} +\concept{Bootstrap theme functions} diff --git a/man/bs_dependency.Rd b/man/bs_dependency.Rd index aa5267e2d..6df9b7afe 100644 --- a/man/bs_dependency.Rd +++ b/man/bs_dependency.Rd @@ -68,9 +68,7 @@ is first rendered, and may be invoked again with a new \code{theme} whenever \link[shiny:session]{shiny::session}'s \code{setCurrentTheme()} is called. } \examples{ - -\dontrun{ - +\dontshow{if (rlang::is_interactive()) (if (getRversion() >= "3.4") withAutoprint else force)(\{ # examplesIf} myWidgetVersion <- "1.2.3" myWidgetDependency <- function() { @@ -120,9 +118,22 @@ myWidget <- function(id) { myWidgetDependency() ) } -} - +\dontshow{\}) # examplesIf} } \references{ -\url{https://rstudio.github.io/bslib/articles/custom-components.html} +\itemize{ +\item \href{https://rstudio.github.io/bslib/articles/custom-components/index.html}{Theming: Custom components} +gives a tutorial on creating a dynamically themable custom component. +} +} +\seealso{ +Other Bootstrap theme functions: +\code{\link{bs_add_variables}()}, +\code{\link{bs_current_theme}()}, +\code{\link{bs_global_theme}()}, +\code{\link{bs_remove}()}, +\code{\link{bs_theme_dependencies}()}, +\code{\link{bs_theme_preview}()}, +\code{\link{bs_theme}()} } +\concept{Bootstrap theme functions} diff --git a/man/bs_get_variables.Rd b/man/bs_get_variables.Rd index 55c7ffae9..1d4be6592 100644 --- a/man/bs_get_variables.Rd +++ b/man/bs_get_variables.Rd @@ -10,17 +10,17 @@ bs_get_variables(theme, varnames) bs_get_contrast(theme, varnames) } \arguments{ -\item{theme}{a \code{\link[=bs_theme]{bs_theme()}} object.} +\item{theme}{A \code{\link[=bs_theme]{bs_theme()}} object.} -\item{varnames}{a character string referencing a Sass variable -in the current theme.} +\item{varnames}{A character string referencing a Sass variable in the current +theme.} } \value{ -a character string containing a CSS/Sass value. -If the variable(s) are not defined, their value is \code{NA}. +Returns a character string containing a CSS/Sass value. If the +variable(s) are not defined, their value is \code{NA}. } \description{ -Useful for retriving a variable from the current theme and using +Useful for retrieving a variable from the current theme and using the value to inform another R function. } \examples{ @@ -28,7 +28,6 @@ vars <- c("body-bg", "body-color", "primary", "border-radius") bs_get_variables(bs_theme(), varnames = vars) bs_get_variables(bs_theme(bootswatch = "darkly"), varnames = vars) - bs_get_contrast(bs_theme(), c("primary", "dark", "light")) library(htmltools) @@ -40,3 +39,17 @@ div( ) } +\references{ +\href{https://rstudio.github.io/bslib/articles/bs5-variables/index.html}{Theming: Bootstrap 5 variables} +provides a searchable reference of all theming variables available in +Bootstrap 5. +} +\seealso{ +Other Bootstrap theme utility functions: +\code{\link{bootswatch_themes}()}, +\code{\link{builtin_themes}()}, +\code{\link{theme_bootswatch}()}, +\code{\link{theme_version}()}, +\code{\link{versions}()} +} +\concept{Bootstrap theme utility functions} diff --git a/man/bs_global_theme.Rd b/man/bs_global_theme.Rd index 1203e0e9b..bf0ba6bc3 100644 --- a/man/bs_global_theme.Rd +++ b/man/bs_global_theme.Rd @@ -101,7 +101,7 @@ Typically a shade of blue-green.} \item{...}{arguments passed along to \code{\link[=bs_add_variables]{bs_add_variables()}}.} -\item{theme}{a \code{\link[=bs_theme]{bs_theme()}} object.} +\item{theme}{A \code{\link[=bs_theme]{bs_theme()}} object.} \item{.where}{Whether to place the variable definitions before other Sass \code{"defaults"}, after other Sass \code{"declarations"}, or after other Sass @@ -120,29 +120,43 @@ provide a value of \code{"bootstrap"} (this value will also work in \code{bs_theme_update()} to remove a \code{preset} or \code{bootswatch} theme).} } \value{ -functions that modify the global theme (e.g., \code{bs_global_set()}) +Functions that modify the global theme (e.g., \code{bs_global_set()}) invisibly return the previously set theme. \code{bs_global_get()} returns the current global theme. } \description{ -\code{bs_global_theme()} creates a new (global) Bootstrap Sass theme which -\code{\link[=bs_theme_dependencies]{bs_theme_dependencies()}} (or \code{\link[=sass_partial]{sass_partial()}}) can consume (their \code{theme} -argument defaults to \code{bs_global_get()}, which get the current global theme). +\code{bs_global_theme()} creates and sets the global Bootstrap Sass theme. This +theme is typically found by \code{\link[=bs_theme_dependencies]{bs_theme_dependencies()}} in the app or document +where the global theme is being used. You can obtain the current global theme +with \code{\link[=bs_global_get]{bs_global_get()}} or directly set the global theme with +\code{\link[=bs_global_set]{bs_global_set()}}. } \examples{ - # Remember the global state now (so we can restore later) theme <- bs_global_get() + # Use Bootstrap 3 (globally) with some theme customization bs_global_theme(3, bg = "#444", fg = "#e4e4e4", primary = "#e39777") -if (interactive()) bs_theme_preview(with_themer = FALSE) +if (rlang::is_interactive()) { + bs_theme_preview(with_themer = FALSE) +} + # If no global theme is active, bs_global_get() returns NULL bs_global_clear() bs_global_get() + # Restore the original state bs_global_set(theme) } \seealso{ -\code{\link[=bs_theme]{bs_theme()}}, \code{\link[=bs_theme_preview]{bs_theme_preview()}} +Other Bootstrap theme functions: +\code{\link{bs_add_variables}()}, +\code{\link{bs_current_theme}()}, +\code{\link{bs_dependency}()}, +\code{\link{bs_remove}()}, +\code{\link{bs_theme_dependencies}()}, +\code{\link{bs_theme_preview}()}, +\code{\link{bs_theme}()} } +\concept{Bootstrap theme functions} diff --git a/man/bs_remove.Rd b/man/bs_remove.Rd index 75d38f01d..b0e02dcb6 100644 --- a/man/bs_remove.Rd +++ b/man/bs_remove.Rd @@ -10,7 +10,7 @@ bs_remove(theme, ids = character(0)) bs_retrieve(theme, ids = character(0), include_unnamed = TRUE) } \arguments{ -\item{theme}{a \code{\link[=bs_theme]{bs_theme()}} object.} +\item{theme}{A \code{\link[=bs_theme]{bs_theme()}} object.} \item{ids}{a character vector of ids} @@ -18,18 +18,38 @@ bs_retrieve(theme, ids = character(0), include_unnamed = TRUE) (e.g., Bootstrap Sass variables, functions, and mixins).} } \value{ -a modified \code{\link[=bs_theme]{bs_theme()}} object. +Returns a modified \code{\link[=bs_theme]{bs_theme()}} object. } \description{ -Remove or retrieve Sass code from a theme +A Bootstrap theme created with \code{\link[=bs_theme]{bs_theme()}} is comprised of +\href{https://rstudio.github.io/sass/articles/sass.html#layering}{many Sass layers}. +\code{bs_remove()} and \code{bs_retrieve()} allow you to remove or retrieve an +individual layer, either to reduce the size of the compiled CSS or to extract +styles from a theme. } \examples{ +bs4 <- bs_theme(version = 4) + +# Retrieve sass bundle for print styles +bs_retrieve(bs4, "_print", include_unnamed = FALSE) # Remove CSS rules for print and carousels -bs4 <- bs_theme(version = 4) -bs_remove(bs4, c("_print", "_carousel")) +bs4_no_print <- bs_remove(bs4, c("_print", "_carousel")) +suppressWarnings( + bs_retrieve(bs4_no_print, "_print", include_unnamed = FALSE) +) # Remove BS3 compatibility layer -bs_remove(bs4, "bs3compat") - +bs4_no_compat <- bs_remove(bs4, "bs3compat") +} +\seealso{ +Other Bootstrap theme functions: +\code{\link{bs_add_variables}()}, +\code{\link{bs_current_theme}()}, +\code{\link{bs_dependency}()}, +\code{\link{bs_global_theme}()}, +\code{\link{bs_theme_dependencies}()}, +\code{\link{bs_theme_preview}()}, +\code{\link{bs_theme}()} } +\concept{Bootstrap theme functions} diff --git a/man/bs_theme.Rd b/man/bs_theme.Rd index e5b467004..6f18cf737 100644 --- a/man/bs_theme.Rd +++ b/man/bs_theme.Rd @@ -99,12 +99,12 @@ for possible values). When provided to \code{bs_theme_update()}, any previous Bootswatch theme is first removed before the new one is applied (use \code{bootswatch = "bootstrap"} to effectively remove the Bootswatch theme).} -\item{theme}{a \code{\link[=bs_theme]{bs_theme()}} object.} +\item{theme}{A \code{\link[=bs_theme]{bs_theme()}} object.} \item{x}{an object.} } \value{ -a \code{\link[sass:sass_layer]{sass::sass_bundle()}} (list-like) object. +Returns a \code{\link[sass:sass_layer]{sass::sass_bundle()}} (list-like) object. } \description{ Creates a Bootstrap theme object, where you can: @@ -116,7 +116,8 @@ Creates a Bootstrap theme object, where you can: \item Customize other, lower-level, Bootstrap Sass variable defaults via \code{...}. } -To learn more about how to implement custom themes, as well as how to use them inside Shiny and R Markdown, \href{https://rstudio.github.io/bslib/articles/theming.html}{see here}. +To learn more about how to implement custom themes, as well as how to use +them inside Shiny and R Markdown, \href{https://rstudio.github.io/bslib/articles/theming.html}{see here}. } \section{Colors}{ @@ -137,9 +138,9 @@ CSS properties, but don't necessarily import the relevant font files. To both set CSS properties \emph{and} import font files, consider using the various \code{\link[=font_face]{font_face()}} helpers. -Each \verb{*_font} argument may be collection of character vectors, -\code{\link[=font_google]{font_google()}}s, \code{\link[=font_link]{font_link()}}s and/or \code{\link[=font_face]{font_face()}}s. Note that a -character vector can have: +Each \verb{*_font} argument may be a single font or a \code{font_collection()}. +A font can be created with \code{\link[=font_google]{font_google()}}, \code{\link[=font_link]{font_link()}}, or \code{\link[=font_face]{font_face()}}, +or it can be a character vector of font names in the following format: \itemize{ \item A single unquoted name (e.g., \code{"Source Sans Pro"}). \item A single quoted name (e.g., \code{"'Source Sans Pro'"}). @@ -147,24 +148,28 @@ character vector can have: (e.g. \code{c("Open Sans", "'Source Sans Pro'", "'Helvetica Neue', Helvetica, sans-serif")}) } -Since \code{font_google(..., local = TRUE)} guarantees that the client has access to -the font family, meaning it's relatively safe to specify just one font -family, for instance: +\code{font_google()} sets \code{local = TRUE} by default, which ensures that the font +files are downloaded from \href{https://fonts.google.com/}{Google Fonts} when +your document or app is rendered. This guarantees that the client has access +to the font family, making it relatively safe to specify just one font +family: -\if{html}{\out{
}}\preformatted{bs_theme(base_font = font_google("Pacifico", local = TRUE)) +\if{html}{\out{
}}\preformatted{bs_theme(base_font = font_google("Pacifico", local = TRUE)) }\if{html}{\out{
}} -However, specifying multiple "fallback" font families is recommended, -especially when relying on remote and/or system fonts being available, for -instance. Fallback fonts are useful not only for handling missing fonts, but -also for handling a Flash of Invisible Text (FOIT) which can be quite -noticeable with remote web fonts on a slow internet connection. +That said, we recommend you specify multiple "fallback" font families, +especially when relying on remote and/or system fonts being available. +Fallback fonts are useful not only for handling missing fonts, but also +ensure that your users don't experience a Flash of Invisible Text (FOIT) +which can be quite noticeable with remote web fonts on a slow internet +connection. -\if{html}{\out{
}}\preformatted{bs_theme(base_font = font_collection(font_google("Pacifico", local = FALSE), "Roboto", "sans-serif")) +\if{html}{\out{
}}\preformatted{bs_theme(base_font = font_collection(font_google("Pacifico", local = FALSE), "Roboto", "sans-serif")) }\if{html}{\out{
}} } \examples{ +\dontshow{if (rlang::is_interactive()) (if (getRversion() >= "3.4") withAutoprint else force)(\{ # examplesIf} theme <- bs_theme( # Controls the default grayscale palette @@ -177,21 +182,39 @@ theme <- bs_theme( # Can also add lower-level customization "input-border-color" = "#EA80FC" ) -if (interactive()) { - bs_theme_preview(theme) -} + +bs_theme_preview(theme) # Lower-level bs_add_*() functions allow you to work more # directly with the underlying Sass code theme <- bs_add_variables(theme, "my-class-color" = "red") theme <- bs_add_rules(theme, ".my-class { color: $my-class-color }") - +\dontshow{\}) # examplesIf} } \references{ -\url{https://rstudio.github.io/bslib/articles/theming.html} - -\url{https://rstudio.github.io/sass/} +\itemize{ +\item \href{https://rstudio.github.io/bslib/articles/theming/index.html}{Get Started: Theming} +introduces theming with bslib in Shiny apps and R Markdown documents. +\item \href{https://rstudio.github.io/bslib/articles/bs5-variables/index.html}{Theming: Bootstrap 5 variables} +provides a searchable reference of all theming variables available in +Bootstrap 5. +\item \href{https://rstudio.github.io/bslib/articles/custom-components/index.html}{Theming: Custom components} +gives a tutorial on creating a dynamically themable custom component. +\item bslib's theming capabilities are powered by +\href{https://rstudio.github.io/sass/}{the {sass} package}. +\item \href{https://rstudio.github.io/bslib/articles/utility-classes/index.html}{Bootstrap's utility classes} +can be helpful when you want to change the appearance of an element +without writing CSS or customizing your \code{bs_theme()}. +} } \seealso{ -\code{\link[=bs_add_variables]{bs_add_variables()}}, \code{\link[=bs_theme_preview]{bs_theme_preview()}} +Other Bootstrap theme functions: +\code{\link{bs_add_variables}()}, +\code{\link{bs_current_theme}()}, +\code{\link{bs_dependency}()}, +\code{\link{bs_global_theme}()}, +\code{\link{bs_remove}()}, +\code{\link{bs_theme_dependencies}()}, +\code{\link{bs_theme_preview}()} } +\concept{Bootstrap theme functions} diff --git a/man/bs_theme_dependencies.Rd b/man/bs_theme_dependencies.Rd index 1976fd9be..e2482505d 100644 --- a/man/bs_theme_dependencies.Rd +++ b/man/bs_theme_dependencies.Rd @@ -13,7 +13,7 @@ bs_theme_dependencies( ) } \arguments{ -\item{theme}{a \code{\link[=bs_theme]{bs_theme()}} object.} +\item{theme}{A \code{\link[=bs_theme]{bs_theme()}} object.} \item{sass_options}{a \code{\link[sass:sass_options]{sass::sass_options()}} object.} @@ -26,12 +26,12 @@ object created by \code{\link[sass:sass_file_cache]{sass_file_cache()}}, or \cod precompiled CSS file for the \code{\link[=theme_version]{theme_version()}}. If \code{precompiled = TRUE} and a precompiled CSS file exists for the theme object, it will be fetched immediately and not compiled. At the moment, we only provide precompiled -CSS for "stock" builds of Bootstrap (i.e., no theming additions, bootswatch +CSS for "stock" builds of Bootstrap (i.e., no theming additions, Bootswatch themes, or non-default \code{sass_options}).} } \value{ -a list of HTML dependencies containing Bootstrap CSS, Bootstrap -JavaScript, and \code{jquery}. This list may contain additional HTML +Returns a list of HTML dependencies containing Bootstrap CSS, +Bootstrap JavaScript, and \code{jquery}. This list may contain additional HTML dependencies if bundled with the \code{theme}. } \description{ @@ -45,22 +45,21 @@ component, see \code{\link[=bs_dependency]{bs_dependency()}}. \section{Sass caching and precompilation}{ -If Shiny Developer Mode is enabled (by setting \code{options(shiny.devmode = TRUE)} or calling \code{shiny::devmode(TRUE)}), both \pkg{sass} caching and \pkg{bslib} -precompilation are disabled by default; that is, a call to -\code{bs_theme_dependencies(theme)} expands to \code{bs_theme_dependencies(theme, cache = F, precompiled = F)}). This is useful for local development as -enabling caching/precompilation may produce incorrect results if local -changes are made to bslib's source files. +If Shiny Developer Mode is enabled (by setting \code{options(shiny.devmode = TRUE)} or calling \code{shiny::devmode(TRUE)}), both \pkg{sass} caching and +\pkg{bslib} precompilation are disabled by default; that is, a call to +\code{bs_theme_dependencies(theme)} expands to \code{bs_theme_dependencies(theme, cache = F, precompiled = F)}). This is useful for local development as enabling +caching/precompilation may produce incorrect results if local changes are +made to bslib's source files. } \examples{ +\dontshow{if (rlang::is_interactive()) (if (getRversion() >= "3.4") withAutoprint else force)(\{ # examplesIf} # Function to preview the styling a (primary) Bootstrap button library(htmltools) button <- tags$a(class = "btn btn-primary", href = "#", role = "button", "Hello") preview_button <- function(theme) { - if (interactive()) { - browsable(tags$body(bs_theme_dependencies(theme), button)) - } + browsable(tags$body(bs_theme_dependencies(theme), button)) } # Latest Bootstrap @@ -71,8 +70,16 @@ preview_button(bs_theme(3)) preview_button(bs_theme(4, bootswatch = "minty")) # Bootswatch 4 sketchy theme preview_button(bs_theme(4, bootswatch = "sketchy")) - +\dontshow{\}) # examplesIf} } \seealso{ -\code{\link[=bs_theme]{bs_theme()}}, \code{\link[=bs_dependency]{bs_dependency()}} +Other Bootstrap theme functions: +\code{\link{bs_add_variables}()}, +\code{\link{bs_current_theme}()}, +\code{\link{bs_dependency}()}, +\code{\link{bs_global_theme}()}, +\code{\link{bs_remove}()}, +\code{\link{bs_theme_preview}()}, +\code{\link{bs_theme}()} } +\concept{Bootstrap theme functions} diff --git a/man/bs_theme_preview.Rd b/man/bs_theme_preview.Rd index bc9464407..0588af329 100644 --- a/man/bs_theme_preview.Rd +++ b/man/bs_theme_preview.Rd @@ -2,12 +2,12 @@ % Please edit documentation in R/bs-theme-preview.R \name{bs_theme_preview} \alias{bs_theme_preview} -\title{Preview the currently set theme} +\title{Preview a Bootstrap theme} \usage{ bs_theme_preview(theme = bs_theme(), ..., with_themer = TRUE) } \arguments{ -\item{theme}{a \code{\link[=bs_theme]{bs_theme()}} object.} +\item{theme}{A \code{\link[=bs_theme]{bs_theme()}} object.} \item{...}{passed along to \code{\link[shiny:runApp]{shiny::runApp()}}.} @@ -18,18 +18,33 @@ nothing, this function is called for its side-effects (launching an application). } \description{ -Launches an example shiny app via \code{run_with_themer()} and -\code{bs_theme_dependencies()}. Useful for getting a quick preview of the current -theme setting as well as an interactive GUI for tweaking some of the main -theme settings. +Launches an example shiny app that can be used to get a quick preview of a +\code{\link[=bs_theme]{bs_theme()}}, as well as an interactive GUI for tweaking some of the +main theme settings. Calling \code{bs_theme_preview()} with no arguments starts +the theme preview app with the default theme, which is a great way to see +the available theme presets or to start creating your own theme. } \details{ -The app that this launches is subject to change. +The app that this launches is subject to change as new features are +developed in \pkg{bslib} and \pkg{shiny}. } \examples{ +\dontshow{if (rlang::is_interactive()) (if (getRversion() >= "3.4") withAutoprint else force)(\{ # examplesIf} theme <- bs_theme(bg = "#6c757d", fg = "white", primary = "orange") -if (interactive()) bs_theme_preview(theme) +bs_theme_preview(theme) +\dontshow{\}) # examplesIf} } \seealso{ -\code{\link[=run_with_themer]{run_with_themer()}} +Use \code{\link[=run_with_themer]{run_with_themer()}} or \code{\link[=bs_themer]{bs_themer()}} to add the theming UI to +an existing shiny app. + +Other Bootstrap theme functions: +\code{\link{bs_add_variables}()}, +\code{\link{bs_current_theme}()}, +\code{\link{bs_dependency}()}, +\code{\link{bs_global_theme}()}, +\code{\link{bs_remove}()}, +\code{\link{bs_theme_dependencies}()}, +\code{\link{bs_theme}()} } +\concept{Bootstrap theme functions} diff --git a/man/builtin_themes.Rd b/man/builtin_themes.Rd index 5498c53bb..500542cec 100644 --- a/man/builtin_themes.Rd +++ b/man/builtin_themes.Rd @@ -12,8 +12,18 @@ builtin_themes(version = version_default(), full_path = FALSE) \item{full_path}{whether to return a path to the installed theme.} } \value{ -a character vector of built-in themes provided by \pkg{bslib}. +Returns a character vector of built-in themes provided by +\pkg{bslib}. } \description{ Obtain a list of all available built-in \pkg{bslib} themes. } +\seealso{ +Other Bootstrap theme utility functions: +\code{\link{bootswatch_themes}()}, +\code{\link{bs_get_variables}()}, +\code{\link{theme_bootswatch}()}, +\code{\link{theme_version}()}, +\code{\link{versions}()} +} +\concept{Bootstrap theme utility functions} diff --git a/man/card.Rd b/man/card.Rd index 65498bae1..cb6e3c429 100644 --- a/man/card.Rd +++ b/man/card.Rd @@ -48,34 +48,58 @@ A \code{\link[htmltools:builder]{htmltools::div()}} tag. \ifelse{html}{\href{https://lifecycle.r-lib.org/articles/stages.html#experimental}{\figure{lifecycle-experimental.svg}{options: alt='[Experimental]'}}}{\strong{[Experimental]}} A general purpose container for grouping related UI elements together with a -border and optional padding. To learn more about \code{\link[=card]{card()}}s, see \href{https://rstudio.github.io/bslib/articles/cards.html}{this article}. +border and optional padding. To learn more about \code{\link[=card]{card()}}s, see \href{https://rstudio.github.io/bslib/articles/cards/index.html}{the Cards article} or the +other articles listed in the \emph{References} section below. } \examples{ - +\dontshow{if (rlang::is_interactive()) (if (getRversion() >= "3.4") withAutoprint else force)(\{ # examplesIf} library(htmltools) -if (interactive()) { - card( - full_screen = TRUE, - card_header( - "This is the header" - ), - card_body( - p("This is the body."), - p("This is still the body.") - ), - card_footer( - "This is the footer" - ) +card( + full_screen = TRUE, + card_header( + "This is the header" + ), + card_body( + p("This is the body."), + p("This is still the body.") + ), + card_footer( + "This is the footer" ) +) +\dontshow{\}) # examplesIf} +} +\references{ +Several articles on the bslib website feature the card component: +\itemize{ +\item \href{https://rstudio.github.io/bslib/articles/cards/index.html}{Cards} +\item \href{https://rstudio.github.io/bslib/articles/dashboards/index.html}{Get Started: Dashboards} +\item \href{https://rstudio.github.io/bslib/articles/any-project/index.html}{Get Started: Any Project} +\item \href{https://rstudio.github.io/bslib/articles/column-layout/index.html}{Column-based layouts} +\item \href{https://rstudio.github.io/bslib/articles/filling/index.html#full-screen-cards}{Filling layouts: Full-screen cards} } - } \seealso{ -\code{\link[=card_body]{card_body()}} for putting stuff inside the card. +\link[=card_body]{Card item functions} create the various parts of a +card. + +\code{\link[=navset_card_tab]{navset_card_tab()}}, \code{\link[=navset_card_pill]{navset_card_pill()}} and +\code{\link[=navset_card_underline]{navset_card_underline()}} create cards with tabbed navigation. + +\code{\link[=layout_columns]{layout_columns()}} and \code{\link[=layout_column_wrap]{layout_column_wrap()}} help position multiple +cards into columns and rows and can also be used inside a card. + +\code{\link[=layout_sidebar]{layout_sidebar()}} adds a sidebar to a card when nested in \code{\link[=card]{card()}} +or \code{\link[=card_body]{card_body()}}. -\code{\link[=navset_card_tab]{navset_card_tab()}} for cards with multiple tabs. +\code{\link[=value_box]{value_box()}} uses \code{\link[=card]{card()}} to highlight a showcase a key piece of +information. -\code{\link[=layout_column_wrap]{layout_column_wrap()}} for laying out multiple cards (or multiple -columns inside a card). +Other Components: +\code{\link{accordion}()}, +\code{\link{popover}()}, +\code{\link{tooltip}()}, +\code{\link{value_box}()} } +\concept{Components} diff --git a/man/card_body.Rd b/man/card_body.Rd index 96ea3883a..ce29c2a78 100644 --- a/man/card_body.Rd +++ b/man/card_body.Rd @@ -97,7 +97,9 @@ An \code{\link[htmltools:builder]{htmltools::div()}} tag. } \description{ Components designed to be provided as direct children of a \code{\link[=card]{card()}}. For a -general overview of the \code{\link[=card]{card()}} API, see \href{https://rstudio.github.io/bslib/articles/cards.html}{this article}. +general overview of the \code{\link[=card]{card()}} API, see \href{https://rstudio.github.io/bslib/articles/cards/index.html}{the Cards article} or the +other articles listed in the \emph{References} section of the \code{\link[=card]{card()}} +documentation. } \section{Functions}{ \itemize{ @@ -117,10 +119,14 @@ general overview of the \code{\link[=card]{card()}} API, see \href{https://rstud }} \seealso{ -\code{\link[=card]{card()}} for creating a card component. +\code{\link[=card]{card()}} creates a card component. -\code{\link[=navset_card_tab]{navset_card_tab()}} for cards with multiple tabs. +\code{\link[=navset_card_tab]{navset_card_tab()}}, \code{\link[=navset_card_pill]{navset_card_pill()}} and +\code{\link[=navset_card_underline]{navset_card_underline()}} create cards with tabbed navigation. -\code{\link[=layout_column_wrap]{layout_column_wrap()}} for laying out multiple cards (or multiple -columns inside a card). +\code{\link[=layout_columns]{layout_columns()}} and \code{\link[=layout_column_wrap]{layout_column_wrap()}} help position multiple +cards into columns and rows and can also be used inside a card. + +\code{\link[=layout_sidebar]{layout_sidebar()}} adds a sidebar to a card when nested in \code{\link[=card]{card()}} +or \code{\link[=card_body]{card_body()}}. } diff --git a/man/fragments/value-box-themes.Rmd b/man/fragments/value-box-themes.Rmd index 9a488c835..0cb3773b0 100644 --- a/man/fragments/value-box-themes.Rmd +++ b/man/fragments/value-box-themes.Rmd @@ -17,8 +17,10 @@ knitr::opts_chunk$set( The appearance of a `value_box()` can be controlled via the `theme` argument in one of two ways: -(1) a character value describing the theme, e.g. `theme = "primary"` -or (2) `theme = value_box_theme()` to create a custom theme. +1. a character value describing the theme, + such as `theme = "primary"` or `theme = "blue"`; or +3. `theme = value_box_theme()` to create a custom theme. + We recommend using named themes for most value boxes (the first approach), because these themes will automatically match your Bootstrap theme. diff --git a/man/input_switch.Rd b/man/input_switch.Rd index 3631e5b14..bce859930 100644 --- a/man/input_switch.Rd +++ b/man/input_switch.Rd @@ -22,7 +22,8 @@ toggle_switch(id, value = NULL, session = get_current_session()) \item{width}{Any valid \link[htmltools:validateCssUnit]{CSS unit} (e.g., \code{width="200px"}).} -\item{session}{a shiny session object (the default should almost always be used).} +\item{session}{a shiny session object (the default should almost always be +used).} } \value{ Returns a UI element for a switch input control. The server value diff --git a/man/layout_column_wrap.Rd b/man/layout_column_wrap.Rd index 0753cd584..a73c33d42 100644 --- a/man/layout_column_wrap.Rd +++ b/man/layout_column_wrap.Rd @@ -76,11 +76,13 @@ devices (or narrow windows).} Wraps a 1d sequence of UI elements into a 2d grid. The number of columns (and rows) in the grid dependent on the column \code{width} as well as the size of the -display. For more explanation and illustrative examples, see -\href{https://rstudio.github.io/bslib/articles/cards.html#multiple-cards}{here}. +display. For more explanation and illustrative examples, see the \emph{References} +section below. } \examples{ +\dontshow{if (rlang::is_interactive()) (if (getRversion() >= "3.4") withAutoprint else force)(\{ # examplesIf} x <- card("A simple card") + # Always has 2 columns (on non-mobile) layout_column_wrap(width = 1/2, x, x, x) @@ -91,5 +93,17 @@ layout_column_wrap(x, x, x) # To use larger column widths by default, set `width`. # This example has 3 columns when the screen is at least 900px wide: layout_column_wrap(width = "300px", x, x, x) - +\dontshow{\}) # examplesIf} +} +\references{ +The bslib website features \code{layout_column_wrap()} in two places: +\itemize{ +\item \href{https://rstudio.github.io/bslib/articles/column-layout/index.html}{Column-based layouts} +\item \href{https://rstudio.github.io/bslib/articles/cards/index.html#multiple-cards}{Cards: Multiple cards} +} +} +\seealso{ +Other Column layouts: +\code{\link{layout_columns}()} } +\concept{Column layouts} diff --git a/man/layout_columns.Rd b/man/layout_columns.Rd index cce213f66..f8ea30f04 100644 --- a/man/layout_columns.Rd +++ b/man/layout_columns.Rd @@ -38,10 +38,10 @@ above. \item{row_heights}{One of the following: \itemize{ \item A numeric vector, where each value represents the -\href{https://css-tricks.com/introduction-fr-css-unit/}{fractional unit} (\code{fr}) -height of the relevant row. If there are more rows than values provided, -the pattern will repeat. For example, \code{row_heights = c(1, 2)} allows even -rows to take up twice as much space as odd rows. +\href{https://css-tricks.com/introduction-fr-css-unit/}{fractional unit} +(\code{fr}) height of the relevant row. If there are more rows than values +provided, the pattern will repeat. For example, \code{row_heights = c(1, 2)} +allows even rows to take up twice as much space as odd rows. \item A list of numeric and \link[htmltools:validateCssUnit]{CSS length units}, where each value represents the height of the relevant row. If more rows are needed than values provided, the pattern will repeat. For example, @@ -72,8 +72,6 @@ Create responsive, column-based grid layouts, based on a 12-column grid. } \examples{ \dontshow{if (rlang::is_interactive()) (if (getRversion() >= "3.4") withAutoprint else force)(\{ # examplesIf} - - x <- card("A simple card") page_fillable( @@ -108,6 +106,15 @@ page_fillable( ) \dontshow{\}) # examplesIf} } +\references{ +\href{https://rstudio.github.io/bslib/articles/column-layout/index.html}{Column-based layouts} +on the bslib website. +} \seealso{ -\code{\link[=breakpoints]{breakpoints()}} for more information on breakpoints. +\code{\link[=breakpoints]{breakpoints()}} for more information on specifying column widths at +responsive breakpoints. + +Other Column layouts: +\code{\link{layout_column_wrap}()} } +\concept{Column layouts} diff --git a/man/nav-items.Rd b/man/nav-items.Rd index 250ef90db..ed724ae51 100644 --- a/man/nav-items.Rd +++ b/man/nav-items.Rd @@ -69,5 +69,19 @@ forms, links to external content, etc.) }} \seealso{ -\code{\link[=navset_tab]{navset_tab()}}, \code{\link[=nav_select]{nav_select()}}. +\link{navset} create the navigation container holding the nav panels. + +\code{\link[=nav_menu]{nav_menu()}}, \code{\link[=nav_item]{nav_item()}}, \code{\link[=nav_spacer]{nav_spacer()}} create menus, items, or +space in the navset control area. + +\code{\link[=nav_insert]{nav_insert()}}, \code{\link[=nav_remove]{nav_remove()}} programmatically add or remove nav +panels. + +\code{\link[=nav_select]{nav_select()}}, \code{\link[=nav_show]{nav_show()}}, \code{\link[=nav_hide]{nav_hide()}} change the state of a +\code{\link[=nav_panel]{nav_panel()}} in a navset. + +Other Panel container functions: +\code{\link{nav_select}()}, +\code{\link{navset}} } +\concept{Panel container functions} diff --git a/man/nav_prepend.Rd b/man/nav_prepend.Rd index 0cc9b62b2..0174113f1 100644 --- a/man/nav_prepend.Rd +++ b/man/nav_prepend.Rd @@ -30,7 +30,8 @@ nav_append( \item{select}{Should \code{nav} be selected upon being inserted?} -\item{session}{a shiny session object (the default should almost always be used).} +\item{session}{a shiny session object (the default should almost always be +used).} } \description{ Exported for use by \code{\link[shiny:insertTab]{shiny::prependTab()}}/\code{\link[shiny:insertTab]{shiny::appendTab()}}. These diff --git a/man/nav_select.Rd b/man/nav_select.Rd index 36c6176f8..606eaf0de 100644 --- a/man/nav_select.Rd +++ b/man/nav_select.Rd @@ -31,7 +31,8 @@ nav_hide(id, target, session = get_current_session()) \item{selected}{a character string used to identify a particular \code{\link[=nav_panel]{nav_panel()}} item.} -\item{session}{a shiny session object (the default should almost always be used).} +\item{session}{a shiny session object (the default should almost always be +used).} \item{nav}{a \code{\link[=nav_panel]{nav_panel()}} item.} @@ -48,7 +49,7 @@ specified and must be called within an active Shiny session. } \examples{ -can_browse <- function() interactive() && require("shiny") +can_browse <- function() rlang::is_interactive() && require("shiny") # Selecting a tab if (can_browse()) { @@ -95,5 +96,16 @@ if (can_browse()) { } \seealso{ -\code{\link[=nav_panel]{nav_panel()}}, \code{\link[=navset_tab]{navset_tab()}}. +\link[=navset]{Navset functions} create the navigation container holding +the nav panels. + +\code{\link[=nav_panel]{nav_panel()}}, \code{\link[=nav_panel_hidden]{nav_panel_hidden()}} create panels of content. + +\code{\link[=nav_menu]{nav_menu()}}, \code{\link[=nav_item]{nav_item()}}, \code{\link[=nav_spacer]{nav_spacer()}} create menus, items, or +space in the navset control area. + +Other Panel container functions: +\code{\link{nav-items}}, +\code{\link{navset}} } +\concept{Panel container functions} diff --git a/man/navset.Rd b/man/navset.Rd index da8b121b9..661c4f80f 100644 --- a/man/navset.Rd +++ b/man/navset.Rd @@ -383,5 +383,19 @@ Note also that the underline styling can be removed via the \code{underline} arg } \seealso{ -\code{\link[=nav_panel]{nav_panel()}}, \code{\link[=nav_select]{nav_select()}}. +\code{\link[=nav_panel]{nav_panel()}}, \code{\link[=nav_panel_hidden]{nav_panel_hidden()}} create panels of content. + +\code{\link[=nav_menu]{nav_menu()}}, \code{\link[=nav_item]{nav_item()}}, \code{\link[=nav_spacer]{nav_spacer()}} create menus, items, or +space in the navset control area. + +\code{\link[=nav_insert]{nav_insert()}}, \code{\link[=nav_remove]{nav_remove()}} programmatically add or remove nav +panels. + +\code{\link[=nav_select]{nav_select()}}, \code{\link[=nav_show]{nav_show()}}, \code{\link[=nav_hide]{nav_hide()}} change the state of a +\code{\link[=nav_panel]{nav_panel()}} in a navset. + +Other Panel container functions: +\code{\link{nav-items}}, +\code{\link{nav_select}()} } +\concept{Panel container functions} diff --git a/man/popover.Rd b/man/popover.Rd index 60df7ad98..051892190 100644 --- a/man/popover.Rd +++ b/man/popover.Rd @@ -161,8 +161,17 @@ shinyApp(ui, server) \dontshow{\}) # examplesIf} } \references{ -\url{https://getbootstrap.com/docs/5.3/components/popovers/} +Popovers are based on \href{https://getbootstrap.com/docs/5.3/components/popovers/}{Bootstrap's Popover component}. See the +bslib website for an \href{https://rstudio.github.io/bslib/articles/tooltips-popovers/index.html}{interactive introduction to tooltips and popovers}. } \seealso{ -\code{\link[=tooltip]{tooltip()}} +\code{\link[=tooltip]{tooltip()}} provides an alternative way to display informational +text on demand, typically when focusing or hovering over a trigger element. + +Other Components: +\code{\link{accordion}()}, +\code{\link{card}()}, +\code{\link{tooltip}()}, +\code{\link{value_box}()} } +\concept{Components} diff --git a/man/precompiled_css_path.Rd b/man/precompiled_css_path.Rd index 541062b19..7da04dc05 100644 --- a/man/precompiled_css_path.Rd +++ b/man/precompiled_css_path.Rd @@ -7,7 +7,7 @@ precompiled_css_path(theme = bs_theme()) } \arguments{ -\item{theme}{a \code{\link[=bs_theme]{bs_theme()}} object.} +\item{theme}{A \code{\link[=bs_theme]{bs_theme()}} object.} } \value{ The path to the precompiled CSS file, if it exists, or \code{NULL}, if diff --git a/man/sidebar.Rd b/man/sidebar.Rd index 9040a3a8a..b69b9542b 100644 --- a/man/sidebar.Rd +++ b/man/sidebar.Rd @@ -38,8 +38,6 @@ layout_sidebar( ) toggle_sidebar(id, open = NULL, session = get_current_session()) - -sidebar_toggle(id, open = NULL, session = get_current_session()) } \arguments{ \item{...}{Unnamed arguments can be any valid child of an \link[htmltools:builder]{htmltools tag} and named arguments become HTML attributes on @@ -127,39 +125,39 @@ used).} \description{ \ifelse{html}{\href{https://lifecycle.r-lib.org/articles/stages.html#experimental}{\figure{lifecycle-experimental.svg}{options: alt='[Experimental]'}}}{\strong{[Experimental]}} -Create a collapsing sidebar layout by providing a \code{sidebar()} object to the -\code{sidebar} argument of: -\itemize{ -\item \code{\link[=page_sidebar]{page_sidebar()}} -\itemize{ -\item Creates a "page-level" sidebar. -} -\item \code{\link[=page_navbar]{page_navbar()}} -\itemize{ -\item Creates a multi-page app with a "page-level" sidebar. -\item Creates a multi page/tab UI with a singular \code{sidebar()} (which is -shown on every page/tab). -} -\item \code{layout_sidebar()} -\itemize{ -\item Creates a "floating" sidebar layout component which can be dropped -inside any \code{\link[=page]{page()}} and/or \code{\link[=card]{card()}} context. -} -\item \code{\link[=navset_card_tab]{navset_card_tab()}} and \code{\link[=navset_card_pill]{navset_card_pill()}} +Sidebar layouts place UI elements, like input controls or additional context, +next to the main content area which often holds output elements like plots or +tables. + +There are several page, navigation, and layout functions that allow you to +create a sidebar layout. In each case, you can create a collapsing sidebar +layout by providing a \code{sidebar()} object to the \code{sidebar} argument the +following functions. \itemize{ -\item Creates a multi-tab card with a sidebar inside of it. -} +\item \code{\link[=page_sidebar]{page_sidebar()}} creates a "page-level" sidebar. +\item \code{\link[=page_navbar]{page_navbar()}} creates a multi-panel app with an (optional, page-level) +sidebar that is shown on every panel. +\item \code{layout_sidebar()} creates a "floating" sidebar layout component which can +be used inside any \code{\link[=page]{page()}} and/or \code{\link[=card]{card()}} context. +\item \code{\link[=navset_card_tab]{navset_card_tab()}} and \code{\link[=navset_card_pill]{navset_card_pill()}} create multi-tab cards with a +shared sidebar that is accessible from every panel. } -See \href{https://rstudio.github.io/bslib/articles/sidebars.html}{this article} -to learn more. +See \href{https://rstudio.github.io/bslib/articles/sidebars.html}{the Sidebars article} +on the bslib website to learn more. } \section{Functions}{ \itemize{ \item \code{toggle_sidebar()}: Toggle a \code{sidebar()} state during an active Shiny user session. -\item \code{sidebar_toggle()}: An alias for \code{\link[=toggle_sidebar]{toggle_sidebar()}}. - }} -\keyword{internal} +\references{ +Sidebar layouts are featured in a number of pages on the bslib +website: +\itemize{ +\item \href{https://rstudio.github.io/bslib/articles/sidebars.html}{Sidebars} +\item \href{https://rstudio.github.io/bslib/articles/cards/index.html#sidebars}{Cards: Sidebars} +\item \href{https://rstudio.github.io/bslib/articles/dashboards/index.html}{Getting Started: Dashboards} +} +} diff --git a/man/theme_bootswatch.Rd b/man/theme_bootswatch.Rd index 7dc3bc1e2..11dd1b186 100644 --- a/man/theme_bootswatch.Rd +++ b/man/theme_bootswatch.Rd @@ -7,11 +7,20 @@ theme_bootswatch(theme) } \arguments{ -\item{theme}{a \code{\link[=bs_theme]{bs_theme()}} object.} +\item{theme}{A \code{\link[=bs_theme]{bs_theme()}} object.} } \value{ -the Bootswatch theme named used (if any) in the \code{theme}. +Returns the Bootswatch theme named used (if any) in the \code{theme}. } \description{ Obtain a theme's Bootswatch theme name } +\seealso{ +Other Bootstrap theme utility functions: +\code{\link{bootswatch_themes}()}, +\code{\link{bs_get_variables}()}, +\code{\link{builtin_themes}()}, +\code{\link{theme_version}()}, +\code{\link{versions}()} +} +\concept{Bootstrap theme utility functions} diff --git a/man/theme_version.Rd b/man/theme_version.Rd index 82e5d8d0e..3567462ef 100644 --- a/man/theme_version.Rd +++ b/man/theme_version.Rd @@ -7,11 +7,20 @@ theme_version(theme) } \arguments{ -\item{theme}{a \code{\link[=bs_theme]{bs_theme()}} object.} +\item{theme}{A \code{\link[=bs_theme]{bs_theme()}} object.} } \value{ -the major version of Bootstrap used in the \code{theme}. +Returns the major version of Bootstrap used in the \code{theme}. } \description{ Obtain a theme's Bootstrap version } +\seealso{ +Other Bootstrap theme utility functions: +\code{\link{bootswatch_themes}()}, +\code{\link{bs_get_variables}()}, +\code{\link{builtin_themes}()}, +\code{\link{theme_bootswatch}()}, +\code{\link{versions}()} +} +\concept{Bootstrap theme utility functions} diff --git a/man/tooltip.Rd b/man/tooltip.Rd index 640a8d2bf..bb93a8b7b 100644 --- a/man/tooltip.Rd +++ b/man/tooltip.Rd @@ -130,8 +130,18 @@ card( \dontshow{\}) # examplesIf} } \references{ -\url{https://getbootstrap.com/docs/5.3/components/tooltips/} +Tooltips are based on \href{https://getbootstrap.com/docs/5.3/components/tooltips/}{Bootstrap's Tooltip component}. See the +bslib website for an \href{https://rstudio.github.io/bslib/articles/tooltips-popovers/index.html}{interactive introduction to tooltips and popovers}. } \seealso{ -\code{\link[=popover]{popover()}} +\code{\link[=popover]{popover()}} provides a an alternative and more persistent container +for additional elements, typically revealed by clicking on a target +element. + +Other Components: +\code{\link{accordion}()}, +\code{\link{card}()}, +\code{\link{popover}()}, +\code{\link{value_box}()} } +\concept{Components} diff --git a/man/value_box.Rd b/man/value_box.Rd index 00e006197..c464df878 100644 --- a/man/value_box.Rd +++ b/man/value_box.Rd @@ -116,13 +116,14 @@ Accepted values in the second category are \code{"auto"}, \code{"min-content"}, An opinionated (\code{\link[=card]{card()}}-powered) box, designed for displaying a \code{value} and \code{title}. Optionally, a \code{showcase} can provide for context for what the \code{value} represents (for example, it could hold a \code{\link[bsicons:bs_icon]{bsicons::bs_icon()}}, or -even a \code{\link[shiny:plotOutput]{shiny::plotOutput()}}). +even a \code{\link[shiny:plotOutput]{shiny::plotOutput()}}). Find examples and template code you can use to +create engaging \href{https://rstudio.github.io/bslib/articles/value-boxes/index.html}{value boxes on the bslib website}. } -\section{Build a Box App}{ +\section{Build-a-Box App}{ Explore all of the \code{value_box()} options and layouts interactively with the -\href{https://bslib.shinyapps.io/build-a-box/}{Build a Box app}, available +\href{https://bslib.shinyapps.io/build-a-box/}{Build-a-Box app}, available online thanks to \href{https://www.shinyapps.io/}{shinyapps.io}. Or, you can run the app locally with: @@ -136,8 +137,12 @@ run the app locally with: The appearance of a \code{value_box()} can be controlled via the \code{theme} argument in one of two ways: -(1) a character value describing the theme, e.g. \code{theme = "primary"} -or (2) \code{theme = value_box_theme()} to create a custom theme. +\enumerate{ +\item a character value describing the theme, +such as \code{theme = "primary"} or \code{theme = "blue"}; or +\item \code{theme = value_box_theme()} to create a custom theme. +} + We recommend using named themes for most value boxes (the first approach), because these themes will automatically match your Bootstrap theme. \subsection{Named themes}{ @@ -370,6 +375,24 @@ value_box( ) \dontshow{\}) # examplesIf} } +\references{ +Value boxes are featured on the bslib website in a few articles: +\itemize{ +\item \href{https://rstudio.github.io/bslib/articles/value-boxes/index.html}{Value boxes} +\item \href{https://bslib.shinyapps.io/build-a-box}{Build-a-Box App} +\item \href{https://rstudio.github.io/bslib/articles/dashboards/index.html#value-boxes}{Get Started: Dashboards} +} +} \seealso{ -\code{\link[=card]{card()}} +Value boxes are a specialized form of a \code{\link[=card]{card()}} component. + +\code{\link[=layout_columns]{layout_columns()}} and \code{\link[=layout_column_wrap]{layout_column_wrap()}} help position multiple +value boxes into columns and rows. + +Other Components: +\code{\link{accordion}()}, +\code{\link{card}()}, +\code{\link{popover}()}, +\code{\link{tooltip}()} } +\concept{Components} diff --git a/man/versions.Rd b/man/versions.Rd index f49a76dfd..e06ebd2d7 100644 --- a/man/versions.Rd +++ b/man/versions.Rd @@ -10,8 +10,17 @@ versions() version_default() } \value{ -A list of the Bootstrap versions available. +Returns a list of the Bootstrap versions available. } \description{ Available Bootstrap versions } +\seealso{ +Other Bootstrap theme utility functions: +\code{\link{bootswatch_themes}()}, +\code{\link{bs_get_variables}()}, +\code{\link{builtin_themes}()}, +\code{\link{theme_bootswatch}()}, +\code{\link{theme_version}()} +} +\concept{Bootstrap theme utility functions}