Semantic UI wrapper for Shiny

Description

With this library it’s easy to wrap Shiny with Semantic UI components. Add a few simple lines of code and some CSS classes to give your UI a fresh, modern and highly interactive look.

Options

There are a number of global options that affect shiny.semantic as well as Shiny behavior.The options can be set globally with 'options()'

shiny.custom.semantic.cdn (defaults to 'NULL')

This controls from where the css and javascripts will be downloaded.

shiny.custom.semantic (defaults to 'NULL')

This allows to set custom local path to semantic dependencies.

shiny.minified (defaults to 'TRUE')

Defines including JavaScript as a minified or un-minified file.

Author(s)

Maintainer: Jakub Nowicki opensource+kuba@appsilon.com

Authors:

• Filip Stachura filip@appsilon.com

• Dominik Krzeminski

• Krystian Igras

• Adam Forys

• Paweł Przytuła pawel@appsilon.com

• Jakub Chojna jakub.chojna@appsilon.com

• Olga Mierzwa-Sulima olga@appsilon.com

• Tymoteusz Makowski tymoteusz.makowski@appsilon.com

Other contributors:

• Ashley Baldry [contributor]

• Pedro Manuel Coutinho da Silva pedro@appsilon.com [contributor]

• Kamil Żyła kamil@appsilon.com [contributor]

• Rabii Bouhestine [contributor]

• Federico Rivandeira federico@appsilon.com [contributor]

• Appsilon Sp. z o.o. [copyright holder]

See Also

Useful links:

• https://appsilon.github.io/shiny.semantic/

• https://github.com/Appsilon/shiny.semantic

• Report bugs at https://github.com/Appsilon/shiny.semantic/issues

::: hack solution to pass CRAN checks

Description

::: hack solution to pass CRAN checks

Usage

pkg %:::% name

Arguments

Value

function

Internal function that expose javascript bindings to Shiny app.

Description

Internal function that expose javascript bindings to Shiny app.

Usage

.onLoad(libname, pkgname)

Arguments

Semantic colors

Description

https://github.com/Semantic-Org/Semantic-UI/blob/master/src/themes/default/globals/site.variables

Usage

COLOR_PALETTE

Format

An object of class character of length 13.

Reporting progress (object-oriented API)

Description

Reporting progress (object-oriented API)

Reporting progress (object-oriented API)

Details

Reports progress to the user during long-running operations.

This package exposes two distinct programming APIs for working with progress. [withProgress()] and [setProgress()] together provide a simple function-based interface, while the 'Progress' reference class provides an object-oriented API.

Instantiating a 'Progress' object causes a progress panel to be created, and it will be displayed the first time the 'set' method is called. Calling 'close' will cause the progress panel to be removed.

As of version 0.14, the progress indicators use Shiny's new notification API. If you want to use the old styling (for example, you may have used customized CSS), you can use 'style="old"' each time you call ‘Progress$new()'. If you don’t want to set the style each time 'Progress$new' is called, you can instead call ['shinyOptions(progress.style="old")'][shinyOptions] just once, inside the server function.

Methods

Public methods

• Progress$new()

• Progress$set()

• Progress$inc()

• Progress$getMin()

• Progress$getMax()

• Progress$getValue()

• Progress$close()

• Progress$clone()

Method new()

Creates a new progress panel (but does not display it).

Usage

Progress$new(session = getDefaultReactiveDomain(), min = 0, max = 1, ...)

Arguments

Method set()

Updates the progress panel. When called the first time, the progress panel is displayed.

Usage

Progress$set(value = NULL, message = NULL, ...)

Arguments

Method inc()

Like 'set', this updates the progress panel. The difference is that 'inc' increases the progress bar by 'amount', instead of setting it to a specific value.

Usage

Progress$inc(amount = 0.1, message = NULL, ...)

Arguments

Method getMin()

Returns the minimum value.

Usage

Progress$getMin()

Method getMax()

Returns the maximum value.

Usage

Progress$getMax()

Method getValue()

Returns the current value.

Usage

Progress$getValue()

Method close()

Removes the progress panel. Future calls to 'set' and 'close' will be ignored.

Usage

Progress$close()

Method clone()

The objects of this class are cloneable with this method.

Usage

Progress$clone(deep = FALSE)

Arguments

See Also

[with_progress()]

Examples

## Only run examples in interactive R sessions
if (interactive()) {

ui <- semanticPage(
  plotOutput("plot")
)

server <- function(input, output, session) {
  output$plot <- renderPlot({
    progress <- Progress$new(session, min=1, max=15)
    on.exit(progress$close())

    progress$set(message = 'Calculation in progress')

    for (i in 1:15) {
      progress$set(value = i)
      Sys.sleep(0.5)
    }
    plot(cars)
  })
}

shinyApp(ui, server)
}

Allowed sizes

Description

Allowed sizes

Usage

SIZE_LEVELS

Format

An object of class character of length 7.

Accordion UI

Description

In accordion you may display a list of elements that can be hidden or shown with one click.

Usage

accordion(
  accordion_list,
  fluid = TRUE,
  active_title = "",
  styled = TRUE,
  custom_style = ""
)

Arguments

Value

shiny tag list with accordion UI

Examples

if (interactive()) {
library(shiny)
library(shiny.semantic)
accordion_content <- list(
  list(title = "AA", content = h2("a a a a")),
  list(title = "BB", content = p("b b b b"))
)
shinyApp(
  ui = semanticPage(
    accordion(accordion_content, fluid = F, active_title = "AA",
              custom_style = "background: #babade;")
  ),
  server = function(input, output) {}
)
}

Action button

Description

Creates an action button whose value is initially zero, and increments by one each time it is pressed.

Usage

action_button(input_id, label, icon = NULL, width = NULL, ...)

actionButton(inputId, label, icon = NULL, width = NULL, ...)

Arguments

Examples

if (interactive()){
library(shiny)
library(shiny.semantic)
ui <- shinyUI(semanticPage(
  actionButton("action_button", "Press Me!"),
  textOutput("button_output")
))
server <- function(input, output, session) {
  output$button_output <- renderText(as.character(input$action_button))
}
shinyApp(ui, server)
}

Internal function that creates the rule for a specific setting or behavior of the modal.

Description

Internal function that creates the rule for a specific setting or behavior of the modal.

Usage

attach_rule(id, behavior, target, value)

Arguments

Create Semantic UI Button

Description

Create Semantic UI Button

Usage

button(input_id, label, icon = NULL, class = NULL, ...)

Arguments

Examples

if (interactive()){
library(shiny)
library(shiny.semantic)
ui <- semanticPage(
  shinyUI(
    button("simple_button", "Press Me!")
  )
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
}

Create Semantic UI Calendar

Description

This creates a default calendar input using Semantic UI. The input is available under input[[input_id]].

This function updates the date on a calendar

Usage

calendar(
  input_id,
  value = NULL,
  placeholder = NULL,
  type = "date",
  min = NA,
  max = NA
)

update_calendar(session, input_id, value = NULL, min = NULL, max = NULL)

Arguments

Examples

# Basic calendar
if (interactive()) {

  library(shiny)
  library(shiny.semantic)

  ui <- shinyUI(
    semanticPage(
      title = "Calendar example",
      calendar("date"),
      p("Selected date:"),
      textOutput("selected_date")
    )
  )

   server <- shinyServer(function(input, output, session) {
     output$selected_date <- renderText(
       as.character(input$date)
     )
   })

   shinyApp(ui = ui, server = server)
 }

## Not run: 
# Calendar with max and min
calendar(
  name = "date_finish",
  placeholder = "Select End Date",
  min = "2019-01-01",
  max = "2020-01-01"
)

# Selecting month
calendar(
  name = "month",
  type = "month"
)

## End(Not run)

Create Semantic UI card tag

Description

This creates a card tag using Semantic UI styles.

Usage

card(..., class = "")

Arguments

Examples

## Only run examples in interactive R sessions
if (interactive()){
  library(shiny)
  library(shiny.semantic)

  ui <- shinyUI(semanticPage(
    card(
      div(class="content",
          div(class="header", "Elliot Fu"),
          div(class="meta", "Friend"),
          div(class="description", "Elliot Fu is a film-maker from New York.")
      )
    )
  ))
  server <- shinyServer(function(input, output) {
  })

  shinyApp(ui, server)
}

Create Semantic UI cards tag

Description

This creates a cards tag using Semantic UI styles.

Usage

cards(..., class = "")

Arguments

Examples

## Only run examples in interactive R sessions
if (interactive()){
  library(shiny)
  library(shiny.semantic)

  ui <- shinyUI(semanticPage(
    cards(
      class = "two",
      card(
        div(class="content",
            div(class="header", "Elliot Fu"),
            div(class="meta", "Friend"),
            div(class="description", "Elliot Fu is a film-maker from New York.")
        )
      ),
      card(
        div(class="content",
            div(class="header", "John Bean"),
            div(class="meta", "Friend"),
            div(class="description", "John Bean is a film-maker from London.")
        )
      )
    )
  ))
  server <- shinyServer(function(input, output) {
  })

  shinyApp(ui, server)
}

Check if color is set from Fomantic-UI palette

Description

Check if color is set from Fomantic-UI palette

Usage

check_proper_color(color)

Arguments

Value

Error when color does not belong to palette

Examples

check_proper_color("blue")

Checks whether argument included as shiny exclusive parameter

Description

A quick function to check a shiny.semantic wrapper of a shiny function to see whether any extra arguments are called that aren't required for the shiny.semantic version

Usage

check_shiny_param(name, func, ...)

Arguments

Value

If the shiny exclusive argument is called in a shiny.semantic, then a message is posted in the UI

Create Semantic UI checkbox

Description

Create Semantic UI checkbox

Usage

checkbox_input(
  input_id,
  label = "",
  type = NULL,
  is_marked = TRUE,
  style = NULL
)

checkboxInput(inputId, label = "", value = FALSE, width = NULL)

toggle(input_id, label = "", is_marked = TRUE, style = NULL)

Arguments

Details

The inputs are updateable by using updateCheckboxInput.

The following types are allowed:

• NULL The standard checkbox (default)

• toggle Each checkbox has a toggle form

• slider Each checkbox has a simple slider form

Examples

if (interactive()){
  ui <- shinyUI(
    semanticPage(
      p("Simple checkbox:"),
      checkbox_input("example", "Check me", is_marked = FALSE),
      p(),
      p("Simple toggle:"),
      toggle("tog1", "My Label", TRUE)
    )
  )
  server <- function(input, output, session) {
    observeEvent(input$tog1, {
      print(input$tog1)
    })
  }
  shinyApp(ui, server)
}

Counter Button

Description

Creates a counter button whose value increments by one each time it is pressed.

Usage

counter_button(
  input_id,
  label = "",
  icon = NULL,
  value = 0,
  color = "",
  size = "",
  big_mark = " "
)

Arguments

Value

counter button object

Examples

if (interactive()) {
library(shiny)
library(shiny.semantic)
ui <-semanticPage(
     counter_button("counter", "My Counter Button",
                   icon = icon("world"),
                   size = "big", color = "purple")
 )
server <- function(input, output) {
 observeEvent(input$counter,{
   print(input$counter)
  })
 }
shinyApp(ui, server)
}

Allows for the creation of modals in the server side without being tied to a specific HTML element.

Description

Allows for the creation of modals in the server side without being tied to a specific HTML element.

Usage

create_modal(
  ui_modal,
  show = TRUE,
  session = shiny::getDefaultReactiveDomain()
)

showModal(ui, session = shiny::getDefaultReactiveDomain())

Arguments

See Also

modal

Generate CSS string representing grid template areas.

Description

Generate CSS string representing grid template areas.

Usage

data_frame_to_css_grid_template_areas(areas_dataframe)

Arguments

Details

This is a helper function used in grid_template()

areas_dataframe <- rbind(
   c("header", "header", "header"),
   c("menu",   "main",   "right1"),
   c("menu",   "main",   "right2")
)

result == "'header header header' 'menu main right1' 'menu main right2'"

Value

character

Define simple date input with Semantic UI styling

Description

Define simple date input with Semantic UI styling

Usage

date_input(
  input_id,
  label = NULL,
  value = NULL,
  min = NULL,
  max = NULL,
  style = NULL,
  icon_name = "calendar"
)

dateInput(
  inputId,
  label = NULL,
  icon = NULL,
  value = NULL,
  min = NULL,
  max = NULL,
  width = NULL,
  ...
)

Arguments

Examples

if (interactive()) {
# Below example shows how to implement simple date range input using \code{date_input}

library(shiny)
library(shiny.semantic)

ui <- shinyUI(
  semanticPage(
    title = "Date range example",
    uiOutput("date_range"),
    p("Selected dates:"),
    textOutput("selected_dates")
  )
)

server <- shinyServer(function(input, output, session) {
  output$date_range <- renderUI({
    tagList(
      tags$div(tags$div(HTML("From")),
               date_input("date_from", value = Sys.Date() - 30, style = "width: 10%;")),
      tags$div(tags$div(HTML("To")),
               date_input("date_to", value = Sys.Date(), style = "width: 10%;"))
    )
  })

  output$selected_dates <- renderPrint({
    c(input$date_from, input$date_to)
  })
})

shinyApp(ui = ui, server = server)
}

Define search type if multiple

Description

Define search type if multiple

Usage

define_selection_type(input_id, multiple)

Arguments

Helper function that transforms digits to words

Description

Helper function that transforms digits to words

Usage

digits2words(number)

Arguments

Value

character with number word

Display grid template in a browser for easy debugging

Description

Display grid template in a browser for easy debugging

Usage

display_grid(grid_template)

Arguments

Details

Opens a browser and displays grid template with styled border to highlight existing areas.

Warning: CSS can't be displayed in RStudio viewer pane. CSS grid is supported only by modern browsers. You can see list of supported browsers here: https://www.w3schools.com/css/css_grid.asp

Create dropdown Semantic UI component

Description

This creates a default *dropdown_input* using Semantic UI styles with Shiny input. Dropdown is already initialized and available under input[[input_id]].

Usage

dropdown_input(
  input_id,
  choices,
  choices_value = choices,
  default_text = "Select",
  value = NULL,
  type = "selection fluid"
)

Arguments

Examples

## Only run examples in interactive R sessions
if (interactive()) {
library(shiny)
library(shiny.semantic)
ui <- semanticPage(
  title = "Dropdown example",
  dropdown_input("simple_dropdown", LETTERS, value = "A"),
  p("Selected letter:"),
  textOutput("dropdown")
)
server <- function(input, output) {
  output$dropdown <- renderText(input[["simple_dropdown"]])
}

shinyApp(ui = ui, server = server)
}

Create Semantic UI Dropdown

Description

This creates a dropdown using Semantic UI.

Usage

dropdown_menu(
  ...,
  class = "",
  name,
  is_menu_item = FALSE,
  dropdown_specs = list()
)

Arguments

Examples

## Only run examples in interactive R sessions
if (interactive()){
  library(shiny)
  library(shiny.semantic)

  ui <- shinyUI(semanticPage(
    dropdown_menu(
      "Dropdown menu",
      icon(class = "dropdown"),
      menu(
        menu_header("Header"),
        menu_divider(),
        menu_item("Option 1"),
        menu_item("Option 2")
      ),
      name = "dropdown_menu",
      dropdown_specs = list("duration: 500")
    )

  ))
  server <- shinyServer(function(input, output) {
  })

  shinyApp(ui, server)
}

Extract icon name

Description

Extract icon name

Usage

extract_icon_name(icon)

Arguments

Value

character with icon name

Create Semantic UI field tag

Description

This creates a field tag using Semantic UI styles.

Usage

field(..., class = "")

Arguments

Examples

## Only run examples in interactive R sessions
if (interactive()){
  library(shiny)
  library(shiny.semantic)

  ui <- shinyUI(semanticPage(
    form(
      field(
        tags$label("Name"),
        text_input("name", value = "", type = "text", placeholder = "Enter Name...")
      ),
      # error field
      field(
        class = "error",
        tags$label("Name"),
        text_input("name", value = "", type = "text", placeholder = "Enter Name...")
      ),
      # disabled
      field(
        class = "disabled",
        tags$label("Name"),
        text_input("name", value = "", type = "text", placeholder = "Enter Name...")
      )
    )
  ))
  server <- shinyServer(function(input, output) {
  })

  shinyApp(ui, server)
}

Create Semantic UI fields tag

Description

This creates a fields tag using Semantic UI styles.

Usage

fields(..., class = "")

Arguments

Examples

## Only run examples in interactive R sessions
if (interactive()){
  library(shiny)
  library(shiny.semantic)

  ui <- shinyUI(semanticPage(
    form(
      fields(class = "two",
             field(
               tags$label("Name"),
               text_input("name", value = "", type = "text", placeholder = "Enter Name...")
             ),
             field(
               tags$label("Surname"),
               text_input("surname", value = "", type = "text", placeholder = "Enter Surname...")
             ))
    )
  ))
  server <- shinyServer(function(input, output) {
  })

  shinyApp(ui, server)
}

Create Semantic UI File Input

Description

This creates a default file input using Semantic UI. The input is available under input[[input_id]].

Usage

file_input(
  input_id,
  label,
  multiple = FALSE,
  accept = NULL,
  button_label = "Browse...",
  type = NULL,
  placeholder = "no file selected",
  ...
)

fileInput(
  inputId,
  label,
  multiple = FALSE,
  accept = NULL,
  width = NULL,
  buttonLabel = "Browse...",
  placeholder = "No file selected",
  ...
)

Arguments

Examples

## Only run examples in interactive R sessions
if (interactive()) {
  library(shiny)
  library(shiny.semantic)
  ui <- semanticPage(
    form(
      div(
        class = "ui grid",
        div(
          class = "four wide column",
          file_input("ex", "Select file"),
          header("File type selected:", textOutput("ex_file"))
        )
      )
    )
  )
  server <- function(input, output, session) {
    output$ex_file <- renderText({
      if (is.null(input)) return("No file uploaded")
      tools::file_ext(input$ex$datapath)
    })
  }
  shinyApp(ui, server)
}

Flow layout

Description

Lays out elements in a left-to-right, top-to-bottom arrangement. The elements on a given row will be top-aligned with each other.

Usage

flow_layout(
  ...,
  cell_args = list(),
  min_cell_width = "208px",
  max_cell_width = "1fr",
  column_gap = "12px",
  row_gap = "0px"
)

flowLayout(..., cellArgs = list())

Arguments

Details

The width of the elements and spacing between them is configurable. Lengths can be given as numeric values (interpreted as pixels) or character values (interpreted as CSS lengths). With the default settings this layout closely resembles the flowLayout from Shiny.

Examples

if (interactive()) {
  ui <- semanticPage(
    flow_layout(
      numericInput("rows", "How many rows?", 5),
      selectInput("letter", "Which letter?", LETTERS),
      sliderInput("value", "What value?", 0, 100, 50)
    )
  )
  shinyApp(ui, server = function(input, output) {})
}

Create Semantic UI form tag

Description

This creates a form tag using Semantic UI styles.

Usage

form(..., class = "")

Arguments

Examples

## Only run examples in interactive R sessions
if (interactive()){
  library(shiny)
  library(shiny.semantic)

  ui <- shinyUI(semanticPage(
    form(
      field(
        tags$label("Text"),
        text_input("text_ex", value = "", type = "text", placeholder = "Enter Text...")
      )
    ),
    # loading form
    form(class = "loading form",
         field(
           tags$label("Text"),
           text_input("text_ex", value = "", type = "text", placeholder = "Enter Text...")
         )),
    # size variations mini form
    form(class = "mini",
         field(
           tags$label("Text"),
           text_input("text_ex", value = "", type = "text", placeholder = "Enter Text...")
         )),
    # massive
    form(class = "massive",
         field(
           tags$label("Text"),
           text_input("text_ex", value = "", type = "text", placeholder = "Enter Text...")
         ))
  ))
  server <- shinyServer(function(input, output) {
  })

  shinyApp(ui, server)
}

Some elements require input id, but this does not need to be specified by the user. Thus we assign random value with prefix where needed.

Description

Some elements require input id, but this does not need to be specified by the user. Thus we assign random value with prefix where needed.

Usage

generate_random_id(prefix, id_length = 20)

Arguments

Get css file

Description

Get css file

Usage

get_css_file(type, theme = NULL, minified = NULL)

Arguments

Value

css file name

Add dashboard dependencies to html

Description

Internal function that adds dashboard dependencies to html.

Usage

get_dependencies(theme = NULL)

Arguments

Value

Content with appended dependencies.

Get dependencies path

Description

Get dependencies path

Usage

get_dependencies_path()

Value

path with css and js files

Extracts numeric values

Description

Extracts numeric values

Usage

get_numeric(value)

Arguments

Value

Numeric value

Use CSS grid template in Shiny UI

Description

Use CSS grid template in Shiny UI

Usage

grid(
  grid_template,
  id = paste(sample(letters, 5), collapse = ""),
  container_style = "",
  area_styles = list(),
  display_mode = FALSE,
  ...
)

Arguments

Details

Grids can be nested.

Value

Rendered HTML ready to use by Shiny UI. See htmltools::htmlTemplate() for more details.

Examples

myGrid <- grid_template(default = list(
  areas = rbind(
    c("header", "header", "header"),
    c("menu",   "main",   "right1"),
    c("menu",   "main",   "right2")
  ),
  rows_height = c("50px", "auto", "100px"),
  cols_width = c("100px", "2fr", "1fr")
))

subGrid <- grid_template(default = list(
  areas = rbind(
    c("top_left", "top_right"),
    c("bottom_left", "bottom_right")
  ),
  rows_height = c("50%", "50%"),
  cols_width = c("50%", "50%")
))

if (interactive()){
library(shiny)
library(shiny.semantic)
shinyApp(
  ui = semanticPage(
    grid(myGrid,
         container_style = "border: 1px solid #f00",
         area_styles = list(header = "background: #0099f9",
                            menu = "border-right: 1px solid #0099f9"),
         header = div(shiny::tags$h1("Hello CSS Grid!")),
         menu = checkbox_input("example", "Check me", is_marked = FALSE),
         main = grid(subGrid,
                     top_left = calendar("my_calendar"),
                     top_right = div("hello 1"),
                     bottom_left = div("hello 2"),
                     bottom_right = div("hello 3")
         ),
         right1 = div(
           toggle("toggle", "let's toggle"),
           multiple_checkbox("mycheckbox", "mycheckbox",
                             c("option A","option B","option C"))),
         right2 = div("right 2")
    )
  ),
  server = shinyServer(function(input, output) {})
)
}

Generate template string representing CSS styles of grid container div.

Description

Generate template string representing CSS styles of grid container div.

Usage

grid_container_css(css_grid_template_areas, rows_height, cols_width)

Arguments

Details

This is a helper function used in grid_template()

  grid_container_css(
    "'a a a' 'b b b'",
    c("50%", "50%"),
    c("100px", "2fr", "1fr")
  )

returns

  "display: grid;
   height: 100%;
   grid-template-rows: 50% 50%;
   grid-template-columns: 100px 2fr 1fr;
   grid-template-areas: 'a a a' 'b b b';
   {{ custom_style_grid_container }}"

Value

character

Define a template of a CSS grid

Description

Define a template of a CSS grid

Usage

grid_template(default = NULL, mobile = NULL)

Arguments

Value

list(template = [character], area_names = [vector of character])

template - contains template that can be parsed by htmlTemplate() function

area_names - contains all unique area names used in grid definition

Examples

myGrid <- grid_template(
  default = list(
    areas = rbind(
      c("header", "header", "header"),
      c("menu",   "main",   "right1"),
      c("menu",   "main",   "right2")
    ),
    rows_height = c("50px", "auto", "100px"),
    cols_width = c("100px", "2fr", "1fr")
  ),
  mobile = list(
    areas = rbind(
      "header",
      "menu",
      "main",
      "right1",
      "right2"
    ),
    rows_height = c("50px", "50px", "auto", "150px", "150px"),
    cols_width = c("100%")
  )
)
if (interactive()) display_grid(myGrid)
subGrid <- grid_template(default = list(
  areas = rbind(
    c("top_left", "top_right"),
    c("bottom_left", "bottom_right")
  ),
  rows_height = c("50%", "50%"),
  cols_width = c("50%", "50%")
))

if (interactive()) display_grid(subGrid)

Create Semantic UI header

Description

This creates a header with optional icon using Semantic UI styles.

Usage

header(title, description, icon = NULL)

Arguments

Examples

## Only run examples in interactive R sessions
if (interactive()){
  library(shiny)
  library(shiny.semantic)

  ui <- shinyUI(semanticPage(
    header(title = "Header with description", description = "Description"),
    header(title = "Header with icon", description = "Description", icon = "dog")
  ))
  server <- shinyServer(function(input, output) {
  })

  shinyApp(ui, server)
}

Horizontal menu

Description

Renders UI with horizontal menu

Usage

horizontal_menu(menu_items, active_location = "", logo = NULL)

Arguments

Value

shiny div with horizontal menu

Examples

library(shiny.semantic)
menu_content <- list(
 list(name = "AA", link = "http://example.com", icon = "dog"),
 list(name = "BB", link = "#", icon="cat"),
 list(name = "CC")
)
if (interactive()){
  ui <- semanticPage(
   horizontal_menu(menu_content)
  )
  server <- function(input, output, session) {}
  shinyApp(ui, server)
}

Create Semantic UI icon tag

Description

This creates an icon tag using Semantic UI styles.

Usage

icon(class = "", ...)

Arguments

Examples

if (interactive()){
library(shiny)
library(shiny.semantic)

ui <- function() {
  shinyUI(
    semanticPage(
      # Basic icon
      icon("home"),
      br(),
      # Different size
      icon("small home"),
      icon("large home"),
      br(),
      # Disabled icon
      icon("disabled home"),
      br(),
      # Loading icon
      icon("spinner loading"),
      br(),
      # Icon formatted as link
      icon("close link"),
      br(),
      # Flipped
      icon("horizontally flipped cloud"),
      icon("vertically flipped cloud"),
      br(),
      # Rotated
      icon("clockwise rotated cloud"),
      icon("counterclockwise rotated cloud"),
      br(),
      # Circular
      icon("circular home"),
      br(),
      # Bordered
      icon("bordered home"),
      br(),
      # Colored
      icon("red home"),
      br(),
      # inverted
      segment(class = "inverted", icon("inverted home"))
    )
  )
}

server <- shinyServer(function(input, output, session) {

})

shinyApp(ui = ui(), server = server)
}

Create Semantic UI label tag

Description

This creates a div or a tag with with class ui label using Semantic UI.

Usage

label(..., class = "", is_link = TRUE)

Arguments

Examples

## Only run examples in interactive R sessions
if (interactive()){
  library(shiny)
  library(shiny.semantic)

  ui <- shinyUI(
    semanticPage(
      ## label
      label(icon = icon("mail icon"), 23),
      p(),
      ## pointing label
      field(
        text_input("ex", label = "", type = "text", placeholder = "Your name")),
      label("Please enter a valid name", class = "pointing red basic"),
      p(),
      ## tag
      label(class = "tag", "New"),
      label(class = "red tag", "Upcoming"),
      label(class =" teal tag","Featured"),
      ## ribbon
      segment(class = "ui raised segment",
              label(class = "ui red ribbon", "Overview"),
              "Text"),
      ## attached
      segment(class = "ui raised segment",
              label(class = "top attached", "HTML"),
              p("Text"))
    ))
  server <- function(input, output, session) {
  }
  shinyApp(ui, server)
}

Create Semantic UI list with header, description and icons

Description

This creates a list with icons using Semantic UI

Usage

list_container(content_list, is_divided = FALSE)

Arguments

Examples

library(shiny)
library(shiny.semantic)
list_content <- list(
  list(header = "Head", description = "Lorem ipsum", icon = "cat"),
  list(header = "Head 2", icon = "tree"),
  list(description = "Lorem ipsum 2", icon = "dog")
)
if (interactive()){
  ui <- semanticPage(
    list_container(list_content, is_divided = TRUE)
 )
  server <- function(input, output) {}
  shinyApp(ui, server)
}

Helper function to render list element

Description

Helper function to render list element

Usage

list_element(header = NULL, description = NULL, icon_name = NULL)

Arguments

Generate list of HTML div elements representing grid areas.

Description

Generate list of HTML div elements representing grid areas.

Usage

list_of_area_tags(area_names)

Arguments

Details

This is a helper function used in grid_template()

  list_of_area_tags(c("header", "main", "footer"))

returns the following list:

  [[1]] <div id="{{ grid_id }}-header" style="grid-area: header; {{ header_custom_css }}">{{ header }}</div>
  [[2]] <div id="{{ grid_id }}-main" style="grid-area: main; {{ main_custom_css }}">{{ main }}</div>
  [[3]] <div id="{{ grid_id }}-footer" style="grid-area: footer; {{ footer_custom_css }}">{{ footer }}</div>

Value

list of shiny::tags$div

Create Semantic UI Menu

Description

This creates a menu using Semantic UI.

Usage

menu(..., class = "")

Arguments

Examples

## Only run examples in interactive R sessions
if (interactive()) {
  library(shiny)
  library(shiny.semantic)

  ui <- function() {
    shinyUI(
      semanticPage(
        title = "My page",
        menu(menu_item("Menu"),
             dropdown_menu(
               "Action",
               menu(
                 menu_header(icon("file"), "File", is_item = FALSE),
                 menu_item(icon("wrench"), "Open"),
                 menu_item(icon("upload"), "Upload"),
                 menu_item(icon("remove"), "Upload"),
                 menu_divider(),
                 menu_header(icon("user"), "User", is_item = FALSE),
                 menu_item(icon("add user"), "Add"),
                 menu_item(icon("remove user"), "Remove")),
               class = "",
               name = "unique_name",
               is_menu_item = TRUE),
             menu_item(icon("user"), "Profile", href = "#index", item_feature = "active"),
             menu_item("Projects", href = "#projects"),
             menu_item(icon("users"), "Team"),
             menu(menu_item(icon("add icon"), "New tab"), class = "right"))
      )
    )
  }
  server <- shinyServer(function(input, output) {})
  shinyApp(ui = ui(), server = server)
}

Create Semantic UI Divider Item

Description

This creates a menu divider item using Semantic UI.

Usage

menu_divider(...)

Arguments

See Also

menu

Create Semantic UI Header Item

Description

This creates a dropdown header item using Semantic UI.

Usage

menu_header(..., is_item = TRUE)

Arguments

See Also

menu

Create Semantic UI Menu Item

Description

This creates a menu item using Semantic UI

Usage

menu_item(..., item_feature = "", style = NULL, href = NULL)

Arguments

See Also

menu

Create Semantic UI Message box

Description

Create Semantic UI Message box

Usage

message_box(header, content, class = "", icon_name, closable = FALSE)

Arguments

Examples

## Only run examples in interactive R sessions
if (interactive()){
  library(shiny)
  library(shiny.semantic)

  ui <- shinyUI(semanticPage(
    message_box(header = "Main header", content = "text"),
    # message with icon
    message_box(class = "icon", header = "Main header", content = "text", icon_name = "dog"),
    # closable message
    message_box(header = "Main header", content = "text", closable =  TRUE),
    # floating
    message_box(class = "floating", header = "Main header", content = "text"),
    # compact
    message_box(class = "compact", header = "Main header", content = "text"),
    # warning
    message_box(class = "warning", header = "Warning", content = "text"),
    # info
    message_box(class = "info", header = "Info", content = "text")
  ))
  server <- shinyServer(function(input, output) {
  })

  shinyApp(ui, server)
}

Create Semantic UI modal

Description

This creates a modal using Semantic UI styles.

Usage

modal(
  ...,
  id = "",
  class = "",
  header = NULL,
  content = NULL,
  footer = div(class = "ui button positive", "OK"),
  target = NULL,
  settings = NULL,
  modal_tags = NULL
)

modalDialog(..., title = NULL, footer = NULL)

Arguments

Examples

## Create a simple server modal
if (interactive()) {
library(shiny)
library(shiny.semantic)

ui <- function() {
  shinyUI(
    semanticPage(
      actionButton("show", "Show modal dialog")
    )
  )
}

server = function(input, output) {
  observeEvent(input$show, {
    create_modal(modal(
      id = "simple-modal",
      header = h2("Important message"),
      "This is an important message!"
    ))
  })
}
shinyApp(ui, server)
}
## Create a simple UI modal

if (interactive()) {
library(shiny)
library(shiny.semantic)
ui <- function() {
  shinyUI(
    semanticPage(
      title = "Modal example - Static UI modal",
      div(id = "modal-open-button", class = "ui button", "Open Modal"),
      modal(
        div("Example content"),
        id = "example-modal",
        target = "modal-open-button"
      )
    )
  )
}

## Observe server side actions
library(shiny)
library(shiny.semantic)
ui <- function() {
  shinyUI(
    semanticPage(
      title = "Modal example - Server side actions",
      uiOutput("modalAction"),
      actionButton("show", "Show by calling show_modal")
    )
  )
}

server <- shinyServer(function(input, output) {
  observeEvent(input$show, {
    show_modal('action-example-modal')
  })
  observeEvent(input$hide, {
    hide_modal('action-example-modal')
  })

  output$modalAction <- renderUI({
    modal(
      actionButton("hide", "Hide by calling hide_modal"),
      id = "action-example-modal",
      header = "Modal example",
      footer = "",
      class = "tiny"
    )
  })
})
shinyApp(ui, server)
}

## Changing attributes of header and content.
if (interactive()) {
library(shiny)
library(shiny.semantic)

ui <- function() {
  shinyUI(
    semanticPage(
      actionButton("show", "Show modal dialog")
    )
  )
}

server = function(input, output) {
  observeEvent(input$show, {
    create_modal(modal(
      id = "simple-modal",
      title = "Important message",
      header = list("!!!", style = "background: lightcoral"),
      content = list(style = "background: lightblue",
                     `data-custom` = "value", "This is an important message!"),
      p("This is also part of the content!")
    ))
  })
}
shinyApp(ui, server)
}

## Modal that closes automatically after specific time
if (interactive()) {
library(shiny)
library(shiny.semantic)
ui <- function() {
  shinyUI(
    semanticPage(
      actionButton("show", "Show modal dialog")
    )
  )
}

server <- shinyServer(function(input, output, session) {
  observeEvent(input$show, {
    create_modal(
      modal(
        id = "simple-modal",
        title = "Important message",
        header = "Example modal",
        content = "This modal will close after 3 sec.",
        footer = NULL,
      )
    )
    Sys.sleep(3)
    hide_modal(id = "simple-modal")
  })
})

shinyApp(ui = ui(), server = server)
}

Create Semantic UI multiple checkbox

Description

This creates a multiple checkbox using Semantic UI styles.

Usage

multiple_checkbox(
  input_id,
  label,
  choices,
  choices_value = choices,
  selected = NULL,
  position = "grouped",
  type = NULL,
  ...
)

multiple_radio(
  input_id,
  label,
  choices,
  choices_value = choices,
  selected = choices_value[1],
  position = "grouped",
  type = "radio",
  ...
)

Arguments

Details

The following types are allowed:

• NULL The standard checkbox (default)

• toggle Each checkbox has a toggle form

• slider Each checkbox has a simple slider form

Examples

## Only run examples in interactive R sessions
if (interactive()) {
  # Checkbox
  library(shiny)
  library(shiny.semantic)

  ui <- function() {
      shinyUI(
        semanticPage(
          title = "Checkbox example",
          h1("Checkboxes"),
          multiple_checkbox("checkboxes", "Select Letters", LETTERS[1:6], selected = "A"),
          p("Selected letters:"),
          textOutput("selected_letters"),
          tags$br(),
          h1("Radioboxes"),
          multiple_radio("radioboxes", "Select Letter", LETTERS[1:6], selected = "A"),
          p("Selected letter:"),
          textOutput("selected_letter")
       )
     )
  }

  server <- shinyServer(function(input, output) {
     output$selected_letters <- renderText(paste(input$checkboxes, collapse = ", "))
     output$selected_letter <- renderText(input$radioboxes)
  })

  shinyApp(ui = ui(), server = server)
}

Create Semantic UI Numeric Input

Description

This creates a default numeric input using Semantic UI. The input is available under input[[input_id]].

Usage

numeric_input(
  input_id,
  label,
  value = NULL,
  min = NA,
  max = NA,
  step = NA,
  type = NULL,
  icon = NULL,
  placeholder = NULL,
  ...
)

numericInput(
  inputId,
  label,
  value = NULL,
  min = NA,
  max = NA,
  step = NA,
  width = NULL,
  placeholder = NULL,
  ...
)

Arguments

Details

Either 'value' or 'placeholder' should be defined. The inputs are updateable by using updateNumericInput.

Examples

## Only run examples in interactive R sessions
if (interactive()) {
  library(shiny)
  library(shiny.semantic)
  ui <- semanticPage(
    numeric_input("ex", "Select number", 10),
  )
  server <- function(input, output, session) {}
  shinyApp(ui, server)
}

Parse the 'shiny_input' value from JSON

Description

Parse the 'shiny_input' value from JSON

Usage

parse_val(val)

Arguments

Value

Value of type defined in 'shiny_input'

Create progress Semantic UI component

Description

This creates a default progress using Semantic UI styles with Shiny input. Progress is already initialized and available under input[[input_id]].

Usage

progress(
  input_id,
  value = NULL,
  total = NULL,
  percent = NULL,
  progress_lab = FALSE,
  label = NULL,
  label_complete = NULL,
  size = "",
  class = NULL
)

Arguments

Details

To initialize the progress bar, you can either choose value and total, or percent.

Examples

## Only run examples in interactive R sessions
if (interactive()) {

  library(shiny)
  library(shiny.semantic)
  ui <- function() {
      shinyUI(
        semanticPage(
          title = "Progress example",
          progress("progress", percent = 24, label = "{percent}% complete"),
          p("Progress completion:"),
          textOutput("progress")
       )
     )
  }
  server <- shinyServer(function(input, output) {
     output$progress <- renderText(input$progress)
  })

  shinyApp(ui = ui(), server = server)
}

Rating Input.

Description

Crates rating component

Usage

rating_input(
  input_id,
  label = "",
  value = 0,
  max = 3,
  icon = "star",
  color = "yellow",
  size = ""
)

Arguments

Value

rating object

Examples

## Only run examples in interactive R sessions
if (interactive()) {
  library(shiny)
  library(shiny.semantic)

  ui <- shinyUI(
    semanticPage(
      rating_input("rate", "How do you like it?", max = 5,
                   icon = "heart", color = "yellow"),
    )
  )
  server <- function(input, output) {
    observeEvent(input$rate,{print(input$rate)})
  }
  shinyApp(ui = ui, server = server)
}

Register search api url

Description

Calls Shiny session's registerDataObj to create REST API. Publishes any R object as a URL endpoint that is unique to Shiny session. search_query must be a function that takes two arguments: data (the value that was passed into registerDataObj) and req (an environment that implements the Rook specification for HTTP requests). search_query will be called with these values whenever an HTTP request is made to the URL endpoint. The return value of search_query should be a list of list or a dataframe. Note that different semantic components expect specific JSON fields to be present in order to work correctly. Check components documentation for details.

Usage

register_search(session, data, search_query)

Arguments

Examples

if (interactive()) {
  library(shiny)
  library(tibble)
  library(shiny.semantic)
  shinyApp(
    ui = semanticPage(
      textInput("txt", "Enter the car name (or subset of name)"),
      textOutput("api_url"),
      uiOutput("open_url")
    ),
    server = function(input, output, session) {
      api_response <- function(data, q) {
        has_matching <- function(field) {
          grepl(toupper(q), toupper(field), fixed = TRUE)
        }
        dplyr::filter(data, has_matching(car))
      }

      search_api_url <- register_search(session,
                           tibble::rownames_to_column(mtcars, "car"), api_response)

      output$api_url <- renderText({
       glue::glue(
        "Registered API url: ",
        "{session$clientData$url_protocol}//{session$clientData$url_hostname}",
        ":{session$clientData$url_port}/",
        "{search_api_url}&q={input$txt}"
        )
      })

      output$open_url <- renderUI({
        tags$a(
          "Open", class = "ui button",
          href = glue::glue("./{search_api_url}&q={input$txt}"), target = "_blank"
        )
      })
    }
  )
}

Render menu link

Description

This function renders horizontal menu item.

Usage

render_menu_link(location, title, active_location = "", icon = NULL)

Arguments

Value

shiny tag link

See Also

horizontal_menu

Examples

render_menu_link("#subpage1", "SUBPAGE")

Create search field Semantic UI component

Description

This creates a default search field using Semantic UI styles with Shiny input. Search field is already initialized and available under input[[input_id]]. Search will automatically route to the named API endpoint provided as parameter. API response is expected to be a JSON with property fields 'title' and 'description'. See https://semantic-ui.com/modules/search.html#behaviors for more details.

Usage

search_field(input_id, search_api_url, default_text = "Search", value = "")

Arguments

Examples

## Only run examples in interactive R sessions
## Not run: 
if (interactive()) {
library(shiny)
library(shiny.semantic)
library(gapminder)
library(dplyr)

ui <- function() {
  shinyUI(
    semanticPage(
      title = "Dropdown example",
      p("Search country:"),
      uiOutput("search_country"),
      p("Selected country:"),
      textOutput("selected_country")
   )
  )
}

server <- shinyServer(function(input, output, session) {

 search_api <- function(gapminder, q) {
   has_matching <- function(field) {
     startsWith(field, q)
   }
   gapminder %>%
     mutate(country = as.character(country)) %>%
     select(country) %>%
     unique %>%
     filter(has_matching(country)) %>%
     head(5) %>%
     transmute(title = country,
               description = country)
 }

 search_api_url <- register_search(session, gapminder, search_api)
 output$search_letters <- shiny::renderUI(
   search_field("search_result", search_api_url)
 )
 output$selected_country <- renderText(input[["search_result"]])
})
}

shinyApp(ui = ui(), server = server)

## End(Not run)

Add Semantic UI search selection dropdown based on REST API

Description

Define the (multiple) search selection dropdown input for retrieving remote selection menu content from an API endpoint. API response is expected to be a JSON with property fields 'name' and 'value'. Using a search selection dropdown allows to search more easily through large lists.

Usage

search_selection_api(
  input_id,
  search_api_url,
  multiple = FALSE,
  default_text = "Select"
)

Arguments

Examples

## Only run examples in interactive R sessions
if (interactive()) {
   library(shiny)
   library(shiny.semantic)
   library(gapminder)
   library(dplyr)

   ui <- function() {
    shinyUI(
      semanticPage(
        title = "Dropdown example",
        uiOutput("search_letters"),
        p("Selected letter:"),
        textOutput("selected_letters")
      )
    )
  }

  server <- shinyServer(function(input, output, session) {

   search_api <- function(gapminder, q) {
     has_matching <- function(field) {
        startsWith(field, q)
      }
      gapminder %>%
        mutate(country = as.character(country)) %>%
        select(country) %>%
        unique %>%
        filter(has_matching(country)) %>%
        head(5) %>%
          transmute(name = country,
                  value = country)
    }

    search_api_url <- shiny.semantic::register_search(session,
                                                      gapminder,
                                                      search_api)
    output$search_letters <- shiny::renderUI(
      search_selection_api("search_result", search_api_url, multiple = TRUE)
    )
    output$selected_letters <- renderText(input[["search_result"]])
  })

  shinyApp(ui = ui(), server = server)
}

Add Semantic UI search selection dropdown based on provided choices

Description

Define the (multiple) search selection dropdown input component serving search options using provided choices.

Usage

search_selection_choices(
  input_id,
  choices,
  value = NULL,
  multiple = FALSE,
  default_text = "Select",
  groups = NULL,
  dropdown_settings = list(forceSelection = FALSE)
)

Arguments

Examples

## Only run examples in interactive R sessions
if (interactive()) {
  library(shiny)
  library(shiny.semantic)

  ui <- function() {
    shinyUI(
      semanticPage(
        title = "Dropdown example",
        uiOutput("search_letters"),
        p("Selected letter:"),
        textOutput("selected_letters")
      )
    )
  }

  server <- shinyServer(function(input, output, session) {
    choices <- LETTERS
    output$search_letters <- shiny::renderUI(
      search_selection_choices("search_result", choices, multiple = TRUE)
    )
    output$selected_letters <- renderText(input[["search_result"]])
  })

  shinyApp(ui = ui(), server = server)
}

Create Semantic UI segment

Description

This creates a segment using Semantic UI styles.

Usage

segment(..., class = "")

Arguments

Examples

## Only run examples in interactive R sessions
if (interactive()){
  library(shiny)
  library(shiny.semantic)

  ui <- shinyUI(semanticPage(
    segment(),
    # placeholder
    segment(class = "placeholder segment"),
    # raised
    segment(class = "raised segment"),
    # stacked
    segment(class = "stacked segment"),
    #  piled
    segment(class = "piled segment")
  ))
  server <- shinyServer(function(input, output) {
  })

  shinyApp(ui, server)
}

Create a select list input control

Description

Create a select list that can be used to choose a single or multiple items from a list of values.

Usage

selectInput(
  inputId,
  label,
  choices,
  selected = NULL,
  multiple = FALSE,
  width = NULL,
  ...
)

Arguments

Examples

## Only run examples in interactive R sessions
if (interactive()) {

  library(shiny.semantic)

  # basic example
  shinyApp(
    ui = semanticPage(
      selectInput("variable", "Variable:",
                  c("Cylinders" = "cyl",
                    "Transmission" = "am",
                    "Gears" = "gear")),
      tableOutput("data")
    ),
    server = function(input, output) {
      output$data <- renderTable({
        mtcars[, c("mpg", input$variable), drop = FALSE]
      }, rownames = TRUE)
    }
  )
}

Semantic UI page

Description

This creates a Semantic page for use in a Shiny app.

Usage

semanticPage(
  ...,
  title = "",
  theme = NULL,
  suppress_bootstrap = TRUE,
  margin = "10px"
)

Arguments

Details

Inside, it uses two crucial options:

(1) shiny.minified with a logical value, tells whether it should attach min or full semnatic css or js (TRUE by default). (2) shiny.custom.semantic if this option has not NULL character semanticPage takes dependencies from custom css and js files specified in this path (NULL by default). Depending on shiny.minified value the folder should contain either "min" or standard version. The folder should contain: semantic.css and semantic.js files, or semantic.min.css and semantic.min.js in shiny.minified = TRUE mode.

Examples

## Only run examples in interactive R sessions
if (interactive()) {
library(shiny)
library(shiny.semantic)

ui <- semanticPage(
  title = "Hello Shiny Semantic!",
  tags$label("Number of observations:"),
  slider_input("obs", value = 500, min = 0, max = 1000),
  segment(
    plotOutput("dist_plot")
  )
)

server <- function(input, output) {
  output$dist_plot <- renderPlot({
    hist(rnorm(input$obs))
  })
}

shinyApp(ui, server)
}

Create Semantic DT Table

Description

This creates DT table styled with Semantic UI.

Usage

semantic_DT(
  ...,
  options = list(),
  style = "semanticui",
  class = "ui small compact table"
)

Arguments

Examples

if (interactive()){
 library(shiny)
 library(shiny.semantic)

 ui <- semanticPage(
   semantic_DTOutput("table")
 )
 server <- function(input, output, session) {
   output$table <- DT::renderDataTable(
     semantic_DT(iris)
   )
 }
 shinyApp(ui, server)
}

Semantic DT Output

Description

Semantic DT Output

Usage

semantic_DTOutput(...)

Arguments

Value

DT Output with semanitc style

Sets tab id if not provided

Description

Sets tab id if it wasn't provided

Usage

set_tab_id(tab)

Arguments

Create universal Shiny input binding

Description

Universal binding for Shiny input on custom user interface. Using this function one can create various inputs ranging from text, numerical, date, dropdowns, etc. Value of this input is extracted via jQuery using $().val() function and default exposed as serialized JSON to the Shiny server. If you want to change type of exposed input value specify it via type param. Currently list of supported types is "JSON" (default) and "text".

Usage

shiny_input(input_id, shiny_ui, value = NULL, type = "JSON")

Arguments

Examples

library(shiny)
library(shiny.semantic)
# Create a week field
uirender(
  tagList(
    div(class = "ui icon input",
        style = NULL,
        "",
        shiny_input(
          "my_id",
          tags$input(type = "week", name = "my_id", min = NULL, max = NULL),
          value = NULL,
          type = "text"),
        icon("calendar"))
  )
)

Create universal Shiny text input binding

Description

Universal binding for Shiny text input on custom user interface. Value of this input is extracted via jQuery using $().val() function. This function is just a simple binding over shiny_input. Please take a look at shiny_input documentation for more information.

Usage

shiny_text_input(...)

Arguments

Examples

library(shiny)
library(shiny.semantic)
# Create a color picker
uirender(
  tagList(
    div(class = "ui input",
        style = NULL,
        "Color picker",
        shiny_text_input(
          "my_id",
          tags$input(type = "color", name = "my_id", value = "#ff0000"))
    )
  ))

Show, Hide or Remove Semantic UI modal

Description

This displays a hidden Semantic UI modal.

Usage

show_modal(id, session = shiny::getDefaultReactiveDomain(), asis = TRUE)

remove_modal(id, session = shiny::getDefaultReactiveDomain(), asis = TRUE)

remove_all_modals(session = shiny::getDefaultReactiveDomain())

removeModal(session = shiny::getDefaultReactiveDomain())

hide_modal(id, session = shiny::getDefaultReactiveDomain(), asis = TRUE)

Arguments

See Also

modal

Creates div containing children elements of sidebar panel

Description

Creates div containing children elements of sidebar panel

Creates div containing children elements of main panel

Creates grid layout composed of sidebar and main panels

Usage

sidebar_panel(..., width = 1)

main_panel(..., width = 3)

sidebar_layout(
  sidebar_panel,
  main_panel,
  mirrored = FALSE,
  min_height = "auto",
  container_style = "",
  area_styles = list(sidebar_panel = "", main_panel = "")
)

sidebarPanel(..., width = 6)

mainPanel(..., width = 10)

sidebarLayout(
  sidebarPanel,
  mainPanel,
  position = c("left", "right"),
  fluid = TRUE
)

Arguments

Value

Container with sidebar and main panels

Examples

if (interactive()){
  library(shiny)
  library(shiny.semantic)
  ui <- semanticPage(
    titlePanel("Hello Shiny!"),
    sidebar_layout(
      sidebar_panel(
        shiny.semantic::sliderInput("obs",
                                    "Number of observations:",
                                    min = 0,
                                    max = 1000,
                                    value = 500),
                                    width = 3
      ),
      main_panel(
        plotOutput("distPlot"),
        width = 4
      ),
      mirrored = TRUE
    )
  )
  server <- function(input, output) {
    output$distPlot <- renderPlot({
      hist(rnorm(input$obs))
    })
  }
  shinyApp(ui, server)
}

Creates a single step to be used inside of a list of steps by the steps function

Description

Creates a single step to be used inside of a list of steps by the steps function

Usage

single_step(
  id,
  title,
  description = NULL,
  icon_class = NULL,
  step_class = NULL
)

Arguments

See Also

steps

Create Semantic UI Slider / Range

Description

This creates a slider input using Semantic UI. Slider is already initialized and available under input[[input_id]]. Use Range for range of values.

Usage

slider_input(
  input_id,
  value,
  min,
  max,
  step = 1,
  class = "labeled",
  custom_ticks = NULL
)

sliderInput(
  inputId,
  label,
  min,
  max,
  value,
  step = 1,
  width = NULL,
  ticks = TRUE,
  ...
)

range_input(input_id, value, value2, min, max, step = 1, class = NULL)

Arguments

Details

Use update_slider to update the slider/range within the shiny session.

See Also

update_slider for input updates, https://fomantic-ui.com/modules/slider.html for preset classes.

Examples

if (interactive()) {
  # Slider example
  library(shiny)
  library(shiny.semantic)

  ui <- shinyUI(
    semanticPage(
      title = "Slider example",
      tags$br(),
      slider_input("slider", 10, 0, 20, class = "labeled ticked"),
      p("Selected value:"),
      textOutput("slider")
    )
  )
  server <- shinyServer(function(input, output, session) {
    output$slider <- renderText(input$slider)
  })
  shinyApp(ui = ui, server = server)

  # Custom ticks slider
  ui <- shinyUI(
    semanticPage(
      title = "Slider example",
      tags$br(),
      slider_input("slider_ticks", "F", custom_ticks = LETTERS, class = "labeled ticked"),
      p("Selected value:"),
      textOutput("slider_ticks")
    )
  )
  server <- shinyServer(function(input, output, session) {
    output$slider_ticks <- renderText(input$slider_ticks)
  })
  shinyApp(ui = ui, server = server)

  # Range example
  ui <- shinyUI(
    semanticPage(
      title = "Range example",
      tags$br(),
      range_input("range", 10, 15, 0, 20),
      p("Selected values:"),
      textOutput("range")
    )
  )
  server <- shinyServer(function(input, output, session) {
    output$range <- renderText(paste(input$range, collapse = " - "))
  })
  shinyApp(ui = ui, server = server)
}

Split arguments to positional and named

Description

Split arguments to positional and named

Usage

split_args(...)

Arguments

Value

A list with two named elements:

• positional, a list of the positional arguments,

• named, a list of the named arguments.

Split layout

Description

Lays out elements horizontally, dividing the available horizontal space into equal parts (by default) or specified by parameters.

Usage

split_layout(..., cell_widths = NULL, cell_args = "", style = NULL)

splitLayout(..., cellWidths = NULL, cellArgs = "", style = NULL)

Arguments

Value

split layout grid object

Examples

if (interactive()) {
  #' Server code used for all examples
  server <- function(input, output) {
    output$plot1 <- renderPlot(plot(cars))
    output$plot2 <- renderPlot(plot(pressure))
    output$plot3 <- renderPlot(plot(AirPassengers))
  }
  #' Equal sizing
  ui <- semanticPage(
    split_layout(
      plotOutput("plot1"),
      plotOutput("plot2")
    )
  )
  shinyApp(ui, server)
  #' Custom widths
  ui <- semanticPage(
    split_layout(cell_widths = c("25%", "75%"),
                plotOutput("plot1"),
                plotOutput("plot2")
    )
  )
  shinyApp(ui, server)
  #' All cells at 300 pixels wide, with cell padding
  #' and a border around everything
  ui <- semanticPage(
    split_layout(
    cell_widths = 300,
    cell_args = "padding: 6px;",
    style = "border: 1px solid silver;",
    plotOutput("plot1"),
    plotOutput("plot2"),
    plotOutput("plot3")
  )
  )
  shinyApp(ui, server)
}

Show steps

Description

Show steps

Usage

steps(id, steps_list, class = NULL)

Arguments

See Also

single_steps

Examples

if (interactive()) {
 library(shiny)
 library(shiny.semantic)
 ui <- semanticPage(
 title = "Steps Example",
 shiny::tagList(
   h2("Steps example"),
   shiny.semantic::steps(
     id = "steps",
     steps_list = list(
         single_step(
           id = "step_1",
           title = "Step 1",
           description = "It's night?",
           icon_class = "moon"
         ),
         single_step(
           id = "step_2",
           title = "Step 2",
           description = "Order some food",
           icon_class = "bug"
         ),
         single_step(id = "step_3",
                     title = "Step 3",
                     description = "Feed the Kiwi",
                     icon_class = "kiwi bird"
                   )
     )
   ),
   h3("Actions"),
   shiny.semantic::action_button("step_1_complete", "Make it night"),
   shiny.semantic::action_button("step_2_complete", "Call the insects"),
   shiny.semantic::action_button("step_3_complete", "Feed the Kiwi"),
   shiny.semantic::action_button("hungry_kiwi", "Kiwi is hungry again"),
 )
)

 server <- function(input, output, session) {
   observeEvent(input$step_1_complete, {
     toggle_step_state("step_1")
   })

   observeEvent(input$step_2_complete, {
     toggle_step_state("step_2")
   })

   observeEvent(input$step_3_complete, {
     toggle_step_state("step_3")
   })

   observeEvent(input$hungry_kiwi, {
     toggle_step_state("step_1", FALSE)
     toggle_step_state("step_2", FALSE)
     toggle_step_state("step_3", FALSE)
   })

 }

 shiny::shinyApp(ui, server)
}

Create Semantic UI tabs

Description

This creates tabs with content using Semantic UI styles.

Usage

tabset(
  tabs,
  active = NULL,
  id = generate_random_id("menu"),
  menu_class = "top attached tabular",
  tab_content_class = "bottom attached grid segment"
)

Arguments

Details

You may access active tab id with input$<id>.

See Also

update_tabset

Examples

## Only run examples in interactive R sessions
if (interactive()){
  library(shiny)
  library(shiny.semantic)

  ui <- semanticPage(
    tabset(tabs =
             list(
               list(menu = "First Tab", content = "Tab 1"),
               list(menu = "Second Tab", content = "Tab 2", id = "second_tab")
             ),
           active = "second_tab",
           id = "exampletabset"
    ),
    h2("Active Tab:"),
    textOutput("activetab")
  )
  server <- function(input, output) {
      output$activetab <- renderText(input$exampletabset)
  }
  shinyApp(ui, server)
}

Create a semantic Text Area input

Description

Create a text area input control for entry of unstructured text values.

Usage

textAreaInput(inputId, label, value = "", width = NULL, placeholder = NULL)

Arguments

Examples

## Only run examples in interactive R sessions
if (interactive()) {
ui <- semanticPage(
  textAreaInput("a", "Area:", value = "200", width = "200px"),
  verbatimTextOutput("value")
)
server <- function(input, output, session) {
  output$value <- renderText({ input$a })
}
shinyApp(ui, server)
}

Create Semantic UI Text Input

Description

This creates a default text input using Semantic UI. The input is available under input[[input_id]].

Usage

text_input(
  input_id,
  label = NULL,
  value = "",
  type = "text",
  placeholder = NULL,
  attribs = list()
)

textInput(
  inputId,
  label,
  value = "",
  width = NULL,
  placeholder = NULL,
  type = "text"
)

Arguments

Details

The following type s are allowed:

• text The standard input

• textarea An extended space for text

• password A censored version of the text input

• email A special version of the text input specific for email addresses

• url A special version of the text input specific for URLs

• tel A special version of the text input specific for telephone numbers

The inputs are updateable by using updateTextInput or updateTextAreaInput if type = "textarea".

Examples

## Only run examples in interactive R sessions
if (interactive()) {
  library(shiny)
  library(shiny.semantic)
  ui <- semanticPage(
    uiinput(
      text_input("ex", label = "Your text", type = "text", placeholder = "Enter Text")
    )
  )
  server <- function(input, output, session) {
 }
 shinyApp(ui, server)
 }

Themes changer dropdown

Description

Themes changer dropdown

Usage

theme_selector(input_id = "theme", label = "Choose theme")

Arguments

Examples

if (interactive()) {
library(shiny)
 library(shiny.semantic)
  ui <- semanticPage(
    theme = "superhero",
    actionButton("action_button", "Press Me!"),
    textOutput("button_output"),
    theme_selector(),
    textOutput("theme")
  )
  server <- function(input, output, session) {
    output$button_output <- renderText(as.character(input$action_button))
    output$theme <- renderText(as.character(input$theme))
  }
  shinyApp(ui, server)
}

Show and remove Semantic UI toast

Description

These functions either create or remove a toast notifications with Semantic UI styling.

Usage

toast(
  message,
  title = NULL,
  action = NULL,
  duration = 3,
  id = NULL,
  class = "",
  toast_tags = NULL,
  session = shiny::getDefaultReactiveDomain()
)

close_toast(id, session = shiny::getDefaultReactiveDomain())

showNotification(
  ui,
  action = NULL,
  duration = 5,
  closeButton = TRUE,
  id = NULL,
  type = c("default", "message", "warning", "error"),
  session = getDefaultReactiveDomain(),
  ...
)

removeNotification(id, session = shiny::getDefaultReactiveDomain())

Arguments

See Also

https://fomantic-ui.com/modules/toast

Examples

## Create a simple server toast
library(shiny)
library(shiny.semantic)

ui <- function() {
  shinyUI(
    semanticPage(
      actionButton("show", "Show toast")
    )
  )
}

server = function(input, output) {
  observeEvent(input$show, {
    toast(
      "This is an important message!"
    )
  })
}
if (interactive()) shinyApp(ui, server)

## Create a toast with options
ui <- semanticPage(
  actionButton("show", "Show"),
)
server <- function(input, output) {
  observeEvent(input$show, {
    toast(
      title  = "Question",
      "Do you want to see more?",
      duration = 0,
      action = list(
        list(
          text = "OK", class = "green", icon = "check",
          click = ("(function() { $('body').toast({message:'Yes clicked'}); })")
        ),
        list(
          text = "No", class = "red", icon = "times",
          click = ("(function() { $('body').toast({message:'No ticked'}); })")
        )
      )
    )
  })
}

if (interactive()) shinyApp(ui, server)

## Closing a toast
ui <- semanticPage(
  action_button("show", "Show"),
  action_button("remove", "Remove")
)
server <- function(input, output) {
  # A queue of notification IDs
  ids <- character(0)
  # A counter
  n <- 0

  observeEvent(input$show, {
    # Save the ID for removal later
    id <- toast(paste("Message", n), duration = NULL)
    ids <<- c(ids, id)
    n <<- n + 1
  })

  observeEvent(input$remove, {
    if (length(ids) > 0)
      close_toast(ids[1])
    ids <<- ids[-1]
  })
}

if (interactive()) shinyApp(ui, server)

Toggle step state

Description

Toggle step state

Usage

toggle_step_state(id, state = TRUE, automatic_steps = TRUE, asis = TRUE)

Arguments

See Also

steps

Create Semantic UI Input

Description

This creates an input shell for the actual input

Usage

uiinput(..., class = "")

Arguments

See Also

text_input

Examples

#' ## Only run examples in interactive R sessions
if (interactive()) {
library(shiny)
library(shiny.semantic)

ui <- semanticPage(
  uiinput(icon("dog"),
          numeric_input("input", value = 0, label = "")
  )
)

server <- function(input, output, session) {
}

shinyApp(ui, server)
}

Render semanticui htmlwidget

Description

htmlwidget that adds semanticui dependencies and renders in viewer or rmarkdown.

Usage

uirender(ui, width = NULL, height = NULL, element_id = NULL)

Arguments

Examples

library(shiny)
library(shiny.semantic)
uirender(
  card(
    div(
      class="content",
      div(class="header", "Elliot Fu"),
      div(class="meta", "Friend"),
      div(class="description", "Elliot Fu is a film-maker from New York.")
    )
  )
)

Change the value of a select input on the client

Description

Update selecInput widget

Usage

updateSelectInput(
  session,
  inputId,
  label = NULL,
  choices = NULL,
  selected = NULL
)

Arguments

Examples

## Only run examples in interactive R sessions
if (interactive()) {

  ui <- semanticPage(
    p("The checkbox group controls the select input"),
    multiple_checkbox("checkboxes", "Input checkbox",
                      c("Item A", "Item B", "Item C")),
    selectInput("inSelect", "Select input",
                c("Item A", "Item B"))
  )

  server <- function(input, output, session) {
    observe({
      x <- input$checkboxes

      # Can use character(0) to remove all choices
      if (is.null(x))
        x <- character(0)

      # Can also set the label and select items
      updateSelectInput(session, "inSelect",
                        label = paste(input$checkboxes, collapse = ", "),
                        choices = x,
                        selected = tail(x, 1)
      )
    })
  }

  shinyApp(ui, server)
}

Change the label or icon of an action button on the client

Description

Change the label or icon of an action button on the client

Usage

update_action_button(session, input_id, label = NULL, icon = NULL)

updateActionButton(session, inputId, label = NULL, icon = NULL)

Arguments

Examples

if (interactive()){
library(shiny)
library(shiny.semantic)

ui <- semanticPage(
  actionButton("update", "Update button"),
  br(),
  actionButton("go_button", "Go")
)

server <- function(input, output, session) {
  observe({
    req(input$update)

    # Updates go_button's label and icon
    updateActionButton(session, "go_button",
                       label = "New label",
                       icon = icon("calendar"))

  })
}
shinyApp(ui, server)
}

Update dropdown Semantic UI component

Description

Change the value of a dropdown_input input on the client.

Usage

update_dropdown_input(
  session,
  input_id,
  choices = NULL,
  choices_value = choices,
  value = NULL
)

Arguments

Examples

if (interactive()) {
  library(shiny)
  library(shiny.semantic)

  ui <- semanticPage(
    title = "Dropdown example",
    dropdown_input("simple_dropdown", LETTERS[1:5], value = "A", type = "selection multiple"),
    p("Selected letter:"),
    textOutput("selected_letter"),
    shiny.semantic::actionButton("simple_button", "Update input to D")
  )

  server <- function(input, output, session) {
    output$selected_letter <- renderText(paste(input[["simple_dropdown"]], collapse = ", "))

    observeEvent(input$simple_button, {
      update_dropdown_input(session, "simple_dropdown", value = "D")
    })
  }

  shinyApp(ui, server)
}

Update checkbox Semantic UI component

Description

Change the value of a multiple_checkbox input on the client.

Usage

update_multiple_checkbox(
  session = getDefaultReactiveDomain(),
  input_id,
  choices = NULL,
  choices_value = choices,
  selected = NULL,
  label = NULL
)

update_multiple_radio(
  session = getDefaultReactiveDomain(),
  input_id,
  choices = NULL,
  choices_value = choices,
  selected = NULL,
  label = NULL
)

Arguments

Examples

if (interactive()) {

library(shiny)
library(shiny.semantic)

ui <- function() {
  shinyUI(
    semanticPage(
      title = "Checkbox example",
      form(
        multiple_checkbox(
          "simple_checkbox", "Letters:", LETTERS[1:5], selected = c("A", "C"), type = "slider"
        )
      ),
      p("Selected letter:"),
      textOutput("selected_letter"),
      shiny.semantic::actionButton("simple_button", "Update input to D")
    )
  )
}

server <- shinyServer(function(input, output, session) {
  output$selected_letter <- renderText(paste(input[["simple_checkbox"]], collapse = ", "))

  observeEvent(input$simple_button, {
    update_multiple_checkbox(session, "simple_checkbox", selected = "D")
  })
})

shinyApp(ui = ui(), server = server)

}

Change numeric input value and settings

Description

Change numeric input value and settings

Usage

update_numeric_input(
  session,
  input_id,
  label = NULL,
  value = NULL,
  min = NULL,
  max = NULL,
  step = NULL
)

updateNumericInput(
  session = getDefaultReactiveDomain(),
  inputId,
  label = NULL,
  value = NULL,
  min = NULL,
  max = NULL,
  step = NULL
)

Arguments

Examples

## Only run examples in interactive R sessions
if (interactive()) {
library(shiny)
library(shiny.semantic)

ui <- semanticPage(
  slider_input("slider_in", 5, 0, 10),
  numeric_input("input", "Numeric input:", 0)
)

server <- function(input, output, session) {

  observeEvent(input$slider_in, {
    x <- input$slider_in

    update_numeric_input(session, "input", value = x)
  })
}

shinyApp(ui, server)
}

Update progress Semantic UI component

Description

Change the value of a progress input on the client.

Usage

update_progress(
  session,
  input_id,
  type = c("increment", "decrement", "label", "value"),
  value = 1
)

Arguments

Update rating

Description

Change the value of a rating input on the client. Check rating_input to learn more.

Usage

update_rating_input(session, input_id, label = NULL, value = NULL)

Arguments

Examples

## Only run examples in interactive R sessions
if (interactive()) {
library(shiny)
library(shiny.semantic)

ui <- shinyUI(
  semanticPage(
    rating_input("rate", "How do you like it?", max = 5,
                 icon = "heart", color = "yellow"),
    numeric_input("numeric_in", "", 0, min = 0, max = 5)
  )
)
server <- function(session, input, output) {
  observeEvent(input$numeric_in, {
    x <- input$numeric_in
    update_rating_input(session, "rate", value = x)
  }
  )
}
shinyApp(ui = ui, server = server)
}

Update slider Semantic UI component

Description

Change the value of a slider_input input on the client.

Usage

update_slider(session, input_id, value)

update_range_input(session, input_id, value, value2)

updateSliderInput(session, inputId, value, ...)

Arguments

See Also

slider_input

Examples

## Only run this example in interactive R sessions
if (interactive()) {
  shinyApp(
    ui = semanticPage(
      p("The first slider controls the second"),
      slider_input("control", "Controller:", min = 0, max = 20, value = 10,
                   step = 1),
      slider_input("receive", "Receiver:", min = 0, max = 20, value = 10,
                   step = 1)
    ),
    server = function(input, output, session) {
      observe({
        update_slider(session, "receive", value = input$control)
      })
    }
  )
}

Change the selected tab of a tabset on the client

Description

Change the selected tab of a tabset on the client

Usage

update_tabset(session, input_id, selected = NULL)

Arguments

Examples

if (interactive()){
 library(shiny)
 library(shiny.semantic)

 ui <- semanticPage(
   actionButton("changetab", "Select Second Tab"),
   tabset(
      tabs = list(
          list(menu = "First Tab", content = "First Tab", id= "first_tab"),
          list(menu = "Second Tab", content = "Second Tab", id = "second_tab")
      ),
      active = "first_tab",
      id = "exampletabset"
   )
 )

 server <- function(input, output, session) {
     observeEvent(input$changetab,{
         update_tabset(session, "exampletabset", "second_tab")
     })
 }

 shinyApp(ui, server)
}

Vertical layout

Description

Lays out elements vertically, one by one below one another.

Usage

vertical_layout(
  ...,
  rows_heights = NULL,
  cell_args = "",
  adjusted_to_page = TRUE
)

verticalLayout(..., fluid = NULL)

Arguments

Value

vertical layout grid object

Examples

if (interactive()) {
  ui <- semanticPage(
    verticalLayout(
      a(href="http://example.com/link1", "Link One"),
      a(href="http://example.com/link2", "Link Two"),
      a(href="http://example.com/link3", "Link Three")
    )
  )
  shinyApp(ui, server = function(input, output) { })
}
if (interactive()) {
  ui <- semanticPage(
    vertical_layout(h1("Title"), h4("Subtitle"), p("paragraph"), h3("footer"))
  )
  shinyApp(ui, server = function(input, output) { })
}

Warn that there are not supported arguments

Description

This throws warning if there are parameters not supported by semantic.

Usage

warn_unsupported_args(args)

Arguments

Reporting progress (functional API)

Description

Reports progress to the user during long-running operations.

Usage

with_progress(
  expr,
  min = 0,
  max = 1,
  value = min + (max - min) * 0.1,
  message = NULL,
  session = getDefaultReactiveDomain(),
  env = parent.frame(),
  quoted = FALSE
)

withProgress(
  expr,
  min = 0,
  max = 1,
  value = min + (max - min) * 0.1,
  message = NULL,
  session = getDefaultReactiveDomain(),
  env = parent.frame(),
  quoted = FALSE,
  ...
)

setProgress(
  value = NULL,
  message = NULL,
  session = getDefaultReactiveDomain(),
  ...
)

set_progress(
  value = NULL,
  message = NULL,
  session = getDefaultReactiveDomain()
)

incProgress(
  amount = 0.1,
  message = NULL,
  session = getDefaultReactiveDomain(),
  ...
)

inc_progress(
  amount = 0.1,
  message = NULL,
  session = getDefaultReactiveDomain(),
  ...
)

Arguments

Details

This package exposes two distinct programming APIs for working with progress. Using 'with_progress' with 'inc_progress' or 'set_progress' provide a simple function-based interface, while the [Progress()] reference class provides an object-oriented API.

Use 'with_progress' to wrap the scope of your work; doing so will cause a new progress panel to be created, and it will be displayed the first time 'inc_progress' or 'set_progress' are called. When 'with_progress' exits, the corresponding progress panel will be removed.

The 'inc_progress' function increments the status bar by a specified amount, whereas the 'set_progress' function sets it to a specific value, and can also set the text displayed.

Generally, 'with_progress'/'inc_progress'/'set_progress' should be sufficient; the exception is if the work to be done is asynchronous (this is not common) or otherwise cannot be encapsulated by a single scope. In that case, you can use the 'Progress' reference class.

When migrating from shiny applications, the functions 'withProgress', 'incProgress' and 'setProgress' are aliases for 'with_progress', 'inc_progress' and 'set_progress'.

See Also

[Progress()]

Examples

## Only run examples in interactive R sessions
if (interactive()) {

ui <- semanticPage(
  plotOutput("plot")
)

server <- function(input, output) {
  output$plot <- renderPlot({
    with_progress(message = 'Calculation in progress',
                 detail = 'This may take a while...', value = 0, {
      for (i in 1:15) {
        inc_progress(1/15)
        Sys.sleep(0.25)
      }
    })
    plot(cars)
  })
}

shinyApp(ui, server)
}