Variables for Shiny

library(fresh)
library(shiny)
library(shinyWidgets)
library(htmltools)

{shiny} is powered by Bootstrap, the main components are personalizable using a large number of variables. Below, we give some examples of parameters that you can modify to change the appearance of elements created by {shiny} functions.

Buttons

Buttons and their variants can be modified by variables from bs_vars_button(). Here we create square buttons with bold labels and custom colors:


With default theme, it will render as:

With our {fresh} theme it will look like:

Status

Buttons like several components in Bootstrap are styled wit statuses colors, there’s 5 options: primary, success, danger, warning and info. It’s possible with bs_vars_color() to modify theses colors to alter all components depending on them:

{shiny} code:

{fresh} variables:



With default theme, it will render as:

80%

With our {fresh} theme it will look like:

80%

wellPanel

In {shiny}, wellPanel create a box with a grey background, it’s also used in sidebarPanel(), you can change these default settings with bs_vars_wells():

{shiny} code:

{fresh} variables:

With default theme, it will render as:

This is a wellPanel (or sidebarPanel)

With our {fresh} theme it will look like:

This is a wellPanel (or sidebarPanel)

Global

bs_vars_global() allow to define some global options like background and text color, but also the number of columns in the grid system (when using fluidRow) :

{shiny} code:

{fresh} variables:

In the first two examples, we can’t use column because it’s limited to a maximum width of 12.

With default theme, it will render as:

width=6 - 2 columns
width=6 - 2 columns
width=4 - 3 columns
width=4 - 3 columns
width=4 - 3 columns

With our {fresh} theme it will look like:

width=15 - 2 columns
width=15 - 2 columns
width=10 - 3 columns
width=10 - 3 columns
width=10 - 3 columns
width=6 - 5 columns
width=6 - 5 columns
width=6 - 5 columns
width=6 - 5 columns
width=6 - 5 columns

Here we now have a grid system where it’s possible to have 5 columns.

tabPanel

Default tabPanel can be customized with bs_vars_tabs(), if type = "pills" in tabsetPanel, use bs_vars_pills(). Some options are common to both and can be set in bs_vars_nav().

{shiny} code:

{fresh} variables:

With default theme, it will render as:

With our {fresh} theme it will look like:

Font size

Font size can be set with bs_vars_font, the argument size_base is the base font size, meaning that other sizes are calculated from this value, nonetheless you set absolute size for headings if you want.

{shiny} code:

{fresh} variables:

With default theme, it will render as:

With our {fresh} theme it will look like: