Description Usage Arguments Value Note Examples
View source: R/vars-bootstrap.R
Those variables can be used to customize
navigation bar component (e.g. shiny::navbarPage
) in Bootstrap and Bootswatch themes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | bs_vars_navbar(
height = NULL,
margin_bottom = NULL,
border_radius = NULL,
padding_horizontal = NULL,
padding_vertical = NULL,
collapse_max_height = NULL,
default_color = NULL,
default_bg = NULL,
default_border = NULL,
default_link_color = NULL,
default_link_active_color = NULL,
default_link_active_bg = NULL,
default_link_hover_color = NULL,
default_link_hover_bg = NULL,
inverse_color = NULL,
inverse_bg = NULL,
inverse_border = NULL,
inverse_link_color = NULL,
inverse_link_active_color = NULL,
inverse_link_active_bg = NULL,
inverse_link_hover_color = NULL,
inverse_link_hover_bg = NULL
)
|
height |
Height of the navbar, e.g. |
margin_bottom |
Bottom margin of navbar. |
border_radius |
Radius border (rounded corner). |
padding_horizontal |
Horizontal padding. |
padding_vertical |
= Vertical padding. |
collapse_max_height |
Max height when collapsed. |
default_color |
Color of text in the navbar. |
default_bg |
Background color of the navbar. |
default_border |
Border color of the navbar. |
default_link_color |
Link color. |
default_link_active_color |
Color for active link (selected tab). |
default_link_active_bg |
Background color for active link (selected tab). |
default_link_hover_color |
Color of links when hovered. |
default_link_hover_bg |
Background color of links when hovered. |
inverse_color |
Color of text for inverted navbar. |
inverse_bg |
Background color for inverted navbar. |
inverse_border |
Border color for inverted navbar. |
inverse_link_color |
Link color for inverted navbar. |
inverse_link_active_color |
Color for active link (selected tab) for inverted navbar. |
inverse_link_active_bg |
Background color for active link (selected tab) for inverted navbar. |
inverse_link_hover_color |
Color of links when hovered for inverted navbar. |
inverse_link_hover_bg |
Background color of links when hovered for inverted navbar. |
a list
that can be used in create_theme
.
See default parameters for Bootstrap: https://getbootstrap.com/docs/3.4/customize/.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | # Change background color of the navbar
bs_vars_navbar(
default_bg = "#75b8d1",
default_color = "#FFFFFF",
default_link_color = "#FFFFFF",
default_link_active_color = "#FFFFFF"
)
if (interactive()) {
library(shiny)
ui <- navbarPage(
title = "Custom navbar",
header = use_theme(
create_theme(
theme = "default",
bs_vars_navbar(
default_bg = "#75b8d1",
default_color = "#FFFFFF",
default_link_color = "#FFFFFF",
default_link_active_color = "#75b8d1",
default_link_active_bg = "#FFFFFF",
default_link_hover_color = "firebrick"
),
output_file = NULL
)
),
tabPanel("Tab 1"),
tabPanel("Tab 2")
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
}
|
$`navbar-default-color`
[1] "#FFFFFF"
$`navbar-default-bg`
[1] "#75b8d1"
$`navbar-default-link-color`
[1] "#FFFFFF"
$`navbar-default-link-active-color`
[1] "#FFFFFF"
attr(,"class")
[1] "fresh_sass_vars" "bootstrap_vars" "list"
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.