| Title: | Dashboard with Fomantic UI Support for Shiny |
|---|---|
| Description: | It offers functions for creating dashboard with Fomantic UI. |
| Authors: | Filip Stachura [aut], Dominik Krzeminski [aut], Krystian Igras [aut], Michał Maj [ctb], Michał Drzazga [ctb], Developers Appsilon [cre], Appsilon [cph] |
| Maintainer: | Developers Appsilon <[email protected]> |
| License: | MIT + file LICENSE |
| Version: | 0.2.1 |
| Built: | 2026-05-15 08:50:17 UTC |
| Source: | https://github.com/appsilon/semantic.dashboard |
Create a box with additional UI elements.
box( ..., title = NULL, color = "", ribbon = TRUE, title_side = "top right", collapsible = TRUE, width = 8, id = NULL, collapse_icon = "minus", expand_icon = "plus" )box( ..., title = NULL, color = "", ribbon = TRUE, title_side = "top right", collapsible = TRUE, width = 8, id = NULL, collapse_icon = "minus", expand_icon = "plus" )
... |
UI elements to include within the box. |
title |
Label of the box. |
color |
Color of the box. One of |
ribbon |
Should label be presented as ribbon. |
title_side |
Side of a label. One of |
collapsible |
Should minimize button be added to label. |
width |
Width of the box. |
id |
ID of the box. |
collapse_icon |
Icon class to be used for collapsing (when |
expand_icon |
Icon class to be used for expanding (when |
A box that can be passed to dashboardBody
box(title = "Sample box", color = "blue", width = 11, "This is a box content" )box(title = "Sample box", color = "blue", width = 11, "This is a box content" )
Create a column with additional UI elements.
column(width, ...)column(width, ...)
width |
Width of the column. Between 1 and 16. |
... |
UI elements to include within the column. |
A column that can be passed to dashboardPage
Create a body of a dashboard with tabs and other additional UI elements.
dashboard_body(..., class = "") dashboardBody(..., class = "")dashboard_body(..., class = "") dashboardBody(..., class = "")
... |
UI elements to include within the body. |
class |
CSS class to be applied to the container of |
A tab that can be passed to dashboardPage
dashboardBody(): Create a body of a dashboard (alias for dashboard_body for
compatibility with shinydashboard)
if(interactive()){ library(shiny) library(semantic.dashboard) ui <- dashboardPage( dashboardHeader(color = "blue"), dashboardSidebar(side = "left", size = "thin", color = "teal", sidebarMenu( menuItem(tabName = "tab1", "Tab 1"), menuItem(tabName = "tab2", "Tab 2"))), dashboardBody(tabItems( tabItem(tabName = "tab1", p("Tab 1")), tabItem(tabName = "tab2", p("Tab 2")))) ) server <- function(input, output) { } shinyApp(ui, server) }if(interactive()){ library(shiny) library(semantic.dashboard) ui <- dashboardPage( dashboardHeader(color = "blue"), dashboardSidebar(side = "left", size = "thin", color = "teal", sidebarMenu( menuItem(tabName = "tab1", "Tab 1"), menuItem(tabName = "tab2", "Tab 2"))), dashboardBody(tabItems( tabItem(tabName = "tab1", p("Tab 1")), tabItem(tabName = "tab2", p("Tab 2")))) ) server <- function(input, output) { } shinyApp(ui, server) }
Create a header of a dashboard with other additional UI elements.
Hint: use shiny::tagList() if you want to add multiple elements in
left / center or right.
dashboard_header( ..., left = NULL, center = NULL, right = NULL, title = NULL, titleWidth = "thin", logo_align = "center", logo_path = "", color = "", inverted = FALSE, disable = FALSE, show_menu_button = TRUE, menu_button_label = "Menu", class = "" ) dashboardHeader( ..., left = NULL, center = NULL, right = NULL, title = NULL, titleWidth = "thin", logo_align = "center", logo_path = "", color = "", inverted = FALSE, disable = FALSE, show_menu_button = TRUE, menu_button_label = "Menu", class = "" )dashboard_header( ..., left = NULL, center = NULL, right = NULL, title = NULL, titleWidth = "thin", logo_align = "center", logo_path = "", color = "", inverted = FALSE, disable = FALSE, show_menu_button = TRUE, menu_button_label = "Menu", class = "" ) dashboardHeader( ..., left = NULL, center = NULL, right = NULL, title = NULL, titleWidth = "thin", logo_align = "center", logo_path = "", color = "", inverted = FALSE, disable = FALSE, show_menu_button = TRUE, menu_button_label = "Menu", class = "" )
... |
UI elements to include within the header. They will be displayed on the right side. |
left |
UI element to put on the left of the header. It will be placed after (to the right) the title and menu button (if they exist). |
center |
UI element to put in the center of the header. |
right |
UI element to put to the right of the header. It will be placed before elements
defined in |
title |
Dashboard title to be displayed in the upper left corner. If NULL, will not display any title field. Use "" for an empty title. |
titleWidth |
Title field width, one of |
logo_align |
Where should logo be placed. One of |
logo_path |
Path or URL of the logo to be shown in the header. |
color |
Color of the sidebar / text / icons (depending on the value of 'inverted' parameter.
One of |
inverted |
If FALSE sidebar will be white and text will be colored. \
If TRUE text will be white and background will be colored. Default is |
disable |
If |
show_menu_button |
If |
menu_button_label |
Text of the menu button. Default is |
class |
CSS class to be applied to the container of |
A header that can be passed to dashboardPage
dashboardHeader(): Create a header of a dashboard (alias for dashboard_header
for compatibility with shinydashboard)
if(interactive()) { library(shiny) library(semantic.dashboard) ui <- dashboardPage( dashboardHeader(color = "blue", inverted = TRUE), dashboardSidebar(side = "left", size = "thin", color = "teal", sidebarMenu( menuItem(tabName = "tab1", "Tab 1"), menuItem(tabName = "tab2", "Tab 2"))), dashboardBody(tabItems( tabItem(tabName = "tab1", p("Tab 1")), tabItem(tabName = "tab2", p("Tab 2")))) ) server <- function(input, output) { } shinyApp(ui, server) }if(interactive()) { library(shiny) library(semantic.dashboard) ui <- dashboardPage( dashboardHeader(color = "blue", inverted = TRUE), dashboardSidebar(side = "left", size = "thin", color = "teal", sidebarMenu( menuItem(tabName = "tab1", "Tab 1"), menuItem(tabName = "tab2", "Tab 2"))), dashboardBody(tabItems( tabItem(tabName = "tab1", p("Tab 1")), tabItem(tabName = "tab2", p("Tab 2")))) ) server <- function(input, output) { } shinyApp(ui, server) }
Create a page with menu item sidebar and body containing tabs and other additional elements.
dashboard_page( header, sidebar, body, title = "", suppress_bootstrap = TRUE, theme = NULL, margin = TRUE, class = "", sidebar_and_body_container_class = "" ) dashboardPage( header, sidebar, body, title = "", suppress_bootstrap = TRUE, theme = NULL, margin = TRUE, class = "", sidebar_and_body_container_class = "" )dashboard_page( header, sidebar, body, title = "", suppress_bootstrap = TRUE, theme = NULL, margin = TRUE, class = "", sidebar_and_body_container_class = "" ) dashboardPage( header, sidebar, body, title = "", suppress_bootstrap = TRUE, theme = NULL, margin = TRUE, class = "", sidebar_and_body_container_class = "" )
header |
Header of a dashboard. |
sidebar |
Sidebar of a dashboard. |
body |
Body of a dashboard. |
title |
Title of a dashboard. |
suppress_bootstrap |
There are some conflicts in CSS styles between
FomanticUI and Bootstrap. For the time being it's better to suppress Bootstrap.
If |
theme |
Theme name or path. For possible options see
|
margin |
If |
class |
CSS class to be applied to the page container ( |
sidebar_and_body_container_class |
CSS class to be applied to the |
Dashboard.
dashboardPage(): Create a dashboard (alias for dashboard_page for compatibility
with shinydashboard)
if(interactive()){ library(shiny) library(semantic.dashboard) ui <- dashboardPage( dashboardHeader(color = "blue"), dashboardSidebar(side = "left", size = "thin", color = "teal", sidebarMenu( menuItem(tabName = "tab1", "Tab 1"), menuItem(tabName = "tab2", "Tab 2"))), dashboardBody(tabItems( tabItem(tabName = "tab1", p("Tab 1")), tabItem(tabName = "tab2", p("Tab 2")))) ) server <- function(input, output) { } shinyApp(ui, server) }if(interactive()){ library(shiny) library(semantic.dashboard) ui <- dashboardPage( dashboardHeader(color = "blue"), dashboardSidebar(side = "left", size = "thin", color = "teal", sidebarMenu( menuItem(tabName = "tab1", "Tab 1"), menuItem(tabName = "tab2", "Tab 2"))), dashboardBody(tabItems( tabItem(tabName = "tab1", p("Tab 1")), tabItem(tabName = "tab2", p("Tab 2")))) ) server <- function(input, output) { } shinyApp(ui, server) }
Create a pushable sidebar of a dashboard with menu items and other additional UI elements.
dashboard_sidebar( ..., side = "left", size = "thin", color = "", inverted = FALSE, closable = FALSE, pushable = TRUE, center = FALSE, visible = TRUE, disable = FALSE, overlay = FALSE, dim_page = FALSE, class = "" ) dashboardSidebar( ..., side = "left", size = "thin", color = "", inverted = FALSE, closable = FALSE, pushable = TRUE, center = FALSE, visible = TRUE, disable = FALSE, overlay = FALSE, dim_page = FALSE, class = "" )dashboard_sidebar( ..., side = "left", size = "thin", color = "", inverted = FALSE, closable = FALSE, pushable = TRUE, center = FALSE, visible = TRUE, disable = FALSE, overlay = FALSE, dim_page = FALSE, class = "" ) dashboardSidebar( ..., side = "left", size = "thin", color = "", inverted = FALSE, closable = FALSE, pushable = TRUE, center = FALSE, visible = TRUE, disable = FALSE, overlay = FALSE, dim_page = FALSE, class = "" )
... |
UI elements to include within the sidebar. |
side |
Placement of the sidebar. One of |
size |
Size of the sidebar. One of |
color |
Color of the sidebar / text / icons (depending on the value of 'inverted'
parameter. One of |
inverted |
If FALSE sidebar will be white and text will be colored. \
If TRUE text will be white and background will be colored. Default is |
closable |
If |
pushable |
If |
center |
Should label and icon be centerd on menu items. Default to |
visible |
Should sidebar be visible on start. Default to |
disable |
If |
overlay |
If |
dim_page |
If |
class |
CSS class to be applied to the container of |
A sidebar that can be passed to dashboardPage
dashboardSidebar(): Create a sidebar of a dashboard (alias for dashboard_sidebar
for compatibility with shinydashboard)
if(interactive()){ library(shiny) library(semantic.dashboard) ui <- dashboardPage( dashboardHeader(color = "blue"), dashboardSidebar(side = "left", size = "thin", color = "teal", sidebarMenu( menuItem(tabName = "tab1", "Tab 1"), menuItem(tabName = "tab2", "Tab 2"))), dashboardBody(tabItems( tabItem(tabName = "tab1", p("Tab 1")), tabItem(tabName = "tab2", p("Tab 2")))) ) server <- function(input, output) { } shinyApp(ui, server) }if(interactive()){ library(shiny) library(semantic.dashboard) ui <- dashboardPage( dashboardHeader(color = "blue"), dashboardSidebar(side = "left", size = "thin", color = "teal", sidebarMenu( menuItem(tabName = "tab1", "Tab 1"), menuItem(tabName = "tab2", "Tab 2"))), dashboardBody(tabItems( tabItem(tabName = "tab1", p("Tab 1")), tabItem(tabName = "tab2", p("Tab 2")))) ) server <- function(input, output) { } shinyApp(ui, server) }
icon for compatibility with shinydashboard)This creates an icon tag using Semantic UI styles.
icon(type, ...)icon(type, ...)
type |
A name of an icon. Look at http://semantic-ui.com/elements/icon.html for all possibilities. |
... |
Other arguments to be added as attributes of the tag (e.g. style, class etc.) |
icon("dog")icon("dog")
Semantic light colors https://github.com/Semantic-Org/Semantic-UI/blob/master/src/themes/default/globals/site.variables
light_semantic_palettelight_semantic_palette
An object of class character of length 13.
Create a message item.
message_item(from, message, ..., icon = "user") messageItem(from, message, ..., icon = "user")message_item(from, message, ..., icon = "user") messageItem(from, message, ..., icon = "user")
from |
Who the message is from. |
message |
Text of the message. |
... |
Additional UI elements to include within the dropdown menu. |
icon |
Additional icon. |
A message item that can be passed to dropdownMenu
messageItem(): Create a message item (alias for message_item for compatibility
with shinydashboard)
messageItem("Marek", "Another test!", icon = "warning")messageItem("Marek", "Another test!", icon = "warning")
Create a notification item.
notification_item(text, icon = "warning", color = "") notificationItem(text, icon = "warning", color = "")notification_item(text, icon = "warning", color = "") notificationItem(text, icon = "warning", color = "")
text |
Text of the notification. |
icon |
Additional icon. |
color |
Color of the notification item. One of
|
A notification item that can be passed to dropdownMenu
notificationItem(): Create a notification item (alias for notification_item for
compatibility with shinydashboard)
notificationItem("This is notification!", color = "red")notificationItem("This is notification!", color = "red")
Server-side function for dynamic valueBox.
render_value_box(expr, env = parent.frame(), quoted = FALSE) renderValueBox(expr, env = parent.frame(), quoted = FALSE) renderInfoBox(expr, env = parent.frame(), quoted = FALSE)render_value_box(expr, env = parent.frame(), quoted = FALSE) renderValueBox(expr, env = parent.frame(), quoted = FALSE) renderInfoBox(expr, env = parent.frame(), quoted = FALSE)
expr |
ValueBox. |
env |
The environment in which to evaluate expr. |
quoted |
Is expr a quoted expression (with |
A dynamic valueBox that can be assigned to output.
renderValueBox(): Create a value box output (alias for render_value_box)
renderInfoBox(): Create a value box output (alias for render_value_box)
## Not run: valueBoxOutput("value_box") output$value_box <- renderValueBox({ valueBox( value = 33.45, subtitle = "Simple valuebox", icon = icon("bar chart"), color = "purple", width = 5) }) ## End(Not run)## Not run: valueBoxOutput("value_box") output$value_box <- renderValueBox({ valueBox( value = 33.45, subtitle = "Simple valuebox", icon = icon("bar chart"), color = "purple", width = 5) }) ## End(Not run)
Semantic colors https://github.com/Semantic-Org/Semantic-UI/blob/master/src/themes/default/globals/site.variables
semantic_palettesemantic_palette
An object of class character of length 13.
This creates an user panel using Semantic UI styles.
sidebar_user_panel(name, subtitle = NULL, image = NULL, image_size = "tiny") sidebarUserPanel(name, subtitle = NULL, image = NULL, image_size = "tiny")sidebar_user_panel(name, subtitle = NULL, image = NULL, image_size = "tiny") sidebarUserPanel(name, subtitle = NULL, image = NULL, image_size = "tiny")
name |
Name of the user |
subtitle |
Information to be displayed below the name (for example if the user is online) |
image |
Path to an image. This can be a relative link to an existing 'www/' directory, or an URL to an image |
image_size |
CSS class to display the image, see Semantic documentation for all sizes (goes from 'mini' to 'massive') |
A div tag with the user panel
sidebarUserPanel(): Create a sidebar user panel (alias for
sidebar_user_panel for compatibility with shinydashboard)
sidebarUserPanel( "Some Name", subtitle = shiny::a(href = "#", icon("circle"), "Online"), # Image file should be in www/ subdir # or a link to a image image = "some_image_located_inside_www_dir.jpg", image_size = "mini" ) ui_user <- sidebarUserPanel( "Jane Smith", subtitle = shiny::a(href = "#", icon("circle"), "Online"), # Image file should be in www/ subdir # or a link to a image image = base::system.file( file.path('examples', "www", "jane_smith.jpg"), package = "semantic.dashboard" ), image_size = "mini" ) if (interactive()) { ui <- dashboardPage( dashboardHeader(), dashboardSidebar( ui_user, sidebarMenu( menuItem("Tab 1", tabName = "tab1"), menuItem("Tab 2", tabName = "tab2") ) ), body = dashboardBody( tabItems( tabItem(tabName = "tab1", h2("Tab 1")), tabItem(tabName = "tab2", h2("Tab 2")) ) ) ) server <- function(input, output, session) {} shinyApp(ui, server) }sidebarUserPanel( "Some Name", subtitle = shiny::a(href = "#", icon("circle"), "Online"), # Image file should be in www/ subdir # or a link to a image image = "some_image_located_inside_www_dir.jpg", image_size = "mini" ) ui_user <- sidebarUserPanel( "Jane Smith", subtitle = shiny::a(href = "#", icon("circle"), "Online"), # Image file should be in www/ subdir # or a link to a image image = base::system.file( file.path('examples', "www", "jane_smith.jpg"), package = "semantic.dashboard" ), image_size = "mini" ) if (interactive()) { ui <- dashboardPage( dashboardHeader(), dashboardSidebar( ui_user, sidebarMenu( menuItem("Tab 1", tabName = "tab1"), menuItem("Tab 2", tabName = "tab2") ) ), body = dashboardBody( tabItems( tabItem(tabName = "tab1", h2("Tab 1")), tabItem(tabName = "tab2", h2("Tab 2")) ) ) ) server <- function(input, output, session) {} shinyApp(ui, server) }
Create a tab box with additional UI elements.
tab_box( tabs, title = NULL, color = "", ribbon = TRUE, title_side = "top right", collapsible = TRUE, width = 8, id = NULL, ... ) tabBox( tabs, title = NULL, color = "", ribbon = TRUE, title_side = "top right", collapsible = TRUE, width = 8, id = NULL, ... )tab_box( tabs, title = NULL, color = "", ribbon = TRUE, title_side = "top right", collapsible = TRUE, width = 8, id = NULL, ... ) tabBox( tabs, title = NULL, color = "", ribbon = TRUE, title_side = "top right", collapsible = TRUE, width = 8, id = NULL, ... )
tabs |
Tabs to include within the box. |
title |
Label of the box. |
color |
Color of the box. One of |
ribbon |
Should label be presented as ribbon. |
title_side |
Side of a label. One of |
collapsible |
Should minimize button be added to label. |
width |
Width of the box. |
id |
ID of the box. |
... |
other elements of the box. |
A box that can be passed to dashboardBody
tabBox(): Create a tab box (alias for tab_box for compatibility with
shinydashboard)
tabBox(title = "Sample tab box", color = "blue", width = 5, tabs = list( list(menu = "First Tab", content = "This is first tab"), list(menu = "Second Tab", content = "This is second tab") ))tabBox(title = "Sample tab box", color = "blue", width = 5, tabs = list( list(menu = "First Tab", content = "This is first tab"), list(menu = "Second Tab", content = "This is second tab") ))
Create a tab panel with additional UI elements.
tab_item(tabName, ..., fluid = TRUE) tabItem(tabName, ..., fluid = TRUE)tab_item(tabName, ..., fluid = TRUE) tabItem(tabName, ..., fluid = TRUE)
tabName |
Id of the tab. |
... |
UI elements to include within the tab. |
fluid |
Controls whether tab width should be 100% (TRUE) or limited by Foomantic UI breakpoints (FALSE). |
A tab that can be passed to dashboardBody
tabItem(): Create a tab (alias for tab_item for compatibility with
shinydashboard)
tab_item(tabName = "tab1", "Tab 1")tab_item(tabName = "tab1", "Tab 1")
Create a panel with tabs.
tab_items(...) tabItems(...)tab_items(...) tabItems(...)
... |
Tabs. |
A panel with tabs that can be passed to dashboardBody
tabItems(): Create a panel with tabs (alias for tab_items for compatibility
with shinydashboard)
tabItems( tabItem(tabName = "tab1", "Tab 1"), tabItem(tabName = "tab2", "Tab 2"))tabItems( tabItem(tabName = "tab1", "Tab 1"), tabItem(tabName = "tab2", "Tab 2"))
Create a task item.
task_item(text, value, color = "") taskItem(text, value, color = "")task_item(text, value, color = "") taskItem(text, value, color = "")
text |
Progress bar label. |
value |
Progress bar value. |
color |
Color of the task item. One of |
A task item that can be passed to dropdownMenu
taskItem(): Create a task item (alias for taks_item for compatibility with
shinydashboard)
taskItem("Project progress...", 50.777, color = "red")taskItem("Project progress...", 50.777, color = "red")
Change the selected tab on the client
update_tab_items(session = shiny::getDefaultReactiveDomain(), tab) updateTabItems(session = shiny::getDefaultReactiveDomain(), tab)update_tab_items(session = shiny::getDefaultReactiveDomain(), tab) updateTabItems(session = shiny::getDefaultReactiveDomain(), tab)
session |
The session object passed to function given to shinyServer |
tab |
The name of the tab that should be selected |
updateTabItems(): Change the selected item on the client (alias for
update_tab_items for compatibility with shinydashboard)
if (interactive()) { ui <- dashboardPage( dashboardSidebar( sidebarMenu( menuItem("Tab 1", tabName = "tab1"), menuItem("Tab 2", tabName = "tab2") ) ), dashboardBody( tabItems( tabItem(tabName = "tab1", h2("Tab 1")), tabItem(tabName = "tab2", h2("Tab 2")) ) ) ) server <- function(input, output, session) { update_tab_items(tab = "tab2") } shinyApp(ui, server) }if (interactive()) { ui <- dashboardPage( dashboardSidebar( sidebarMenu( menuItem("Tab 1", tabName = "tab1"), menuItem("Tab 2", tabName = "tab2") ) ), dashboardBody( tabItems( tabItem(tabName = "tab1", h2("Tab 1")), tabItem(tabName = "tab2", h2("Tab 2")) ) ) ) server <- function(input, output, session) { update_tab_items(tab = "tab2") } shinyApp(ui, server) }
Create a valueBox with additional UI elements.
value_box(subtitle, value, icon = NULL, color = "blue", width = 5, size = "") valueBox(subtitle, value, icon = NULL, color = "blue", width = 5, size = "") infoBox(subtitle, value, icon = NULL, color = "blue", width = 5, size = "")value_box(subtitle, value, icon = NULL, color = "blue", width = 5, size = "") valueBox(subtitle, value, icon = NULL, color = "blue", width = 5, size = "") infoBox(subtitle, value, icon = NULL, color = "blue", width = 5, size = "")
subtitle |
Label of the valueBox. |
value |
Value of the valueBox. |
icon |
Icon of the valueBox. |
color |
Color of the valueBox. One of |
width |
Width of the valueBox. |
size |
Size of value. One of |
A valueBox that can be passed to dashboardBody
valueBox(): Create a valueBox (alias for value_box)
infoBox(): Create a valueBox (alias for value_box)
valueBox("Unread Mail", 44, icon("mail"), color = "blue", width = 5, size = "tiny")valueBox("Unread Mail", 44, icon("mail"), color = "blue", width = 5, size = "tiny")
UI-side function for dynamic valueBox.
value_box_output(outputId, width = 5) valueBoxOutput(outputId, width = 5) infoBoxOutput(outputId, width = 5)value_box_output(outputId, width = 5) valueBoxOutput(outputId, width = 5) infoBoxOutput(outputId, width = 5)
outputId |
Id of the output. |
width |
Width of the valueBox. |
A value box that can be passed to dashboardBody
valueBoxOutput(): Create a valueBox output (alias for value_box_output)
infoBoxOutput(): Create a valueBox output (alias for value_box_output)
## Not run: valueBoxOutput("value_box") output$value_box <- renderValueBox({ valueBox( value = 33.45, subtitle = "Simple valuebox", icon = icon("bar chart"), color = "purple", width = 5) }) ## End(Not run)## Not run: valueBoxOutput("value_box") output$value_box <- renderValueBox({ valueBox( value = 33.45, subtitle = "Simple valuebox", icon = icon("bar chart"), color = "purple", width = 5) }) ## End(Not run)