'+a(t[n.price],i)+"
"),t[n.title]!==O&&(o+=''+a(t[n.title],i)+"
"),t[n.description]!==O&&(o+=''+a(t[n.description],i)+"
"),o+="
+# shiny.semantic 
-
-
-# shiny.semantic
+> _Fomantic (Semantic) UI wrapper for Shiny._
-
-
+[](https://github.com/Appsilon/shiny.semantic/actions/workflows/main.yml)
[](https://codecov.io/gh/Appsilon/shiny.semantic)
-
[](https://CRAN.R-project.org/package=shiny.semantic)
[](https://CRAN.R-project.org/package=shiny.semantic)
-**Fomantic (Semantic) UI wrapper for Shiny**
-
With this library it is easy to wrap Shiny with **[Fomantic
UI](https://fomantic-ui.com/)** (previously *Semantic*). Add a few
simple lines of code to give your UI a **fresh, modern and highly
@@ -58,7 +52,7 @@ ui <- semanticPage(
### Case studies
-| [:link: Churn analytics](https://demo.appsilon.ai/churn) | [:link: Fraud detection](https://demo.appsilon.ai/frauds) |
+| [:link: Churn analytics](https://demo.appsilon.ai/churn) | [:link: Fraud detection](https://demo.prod.appsilon.ai/flights_fraud_demo/) |
| :------------------------------------------------------: | :-------------------------------------------------------: |
| 
| 
|
@@ -75,7 +69,7 @@ look.
-Appsilon is the **Full Service Certified RStudio Partner**. Learn more
-at [appsilon.com](https://appsilon.com).
+Appsilon is a **Posit (formerly RStudio) Full Service Certified Partner**.
diff --git a/docs/404.html b/docs/404.html
deleted file mode 100644
index d4eb5464..00000000
--- a/docs/404.html
+++ /dev/null
@@ -1,177 +0,0 @@
-
-
-
-
-
-
-
-
-All notable changes to this project will be documented in this file.
- - -progress bar and notification (toasts)
accordion
4 vignettes
to modals: modalDialog, removeModal, remove_all_modals
new STYLEGUIDE introduced
horizontal menu
shiny-like API introduced to actionButton, updateActionButton, selectInput, updateSelectInput, icon, numericInput, updateNumericInput, textAreaInput, textInput, numericInput, checkboxInput
counter_button
almost all functions have working examples now
ui (static) elements are renamed to the name of the object they generate, eg. uiicon -> icon, uibutton -> button, etc.
uimessage is message_box now
uilist is list_container now
dropdown is dropdown_input now
rating changed to rating_input, uislider is now slider_input, same with range
renamed uicalendar to calendar
uidropdown is dropdown_menu now
checkbox_input replaces simple_checkbox
input_id is default handler for input objects now
dateInput exported
supressing bootstrap parametrised in semanticPage
added semantic modal
added calendar
shiny.custom.semantic.cdn options introduced to get dependencies from custom location.
Add multiple selection search dropdown
function uimessages which creates UI Semantics message
Shorter alternative for uimessage
Semantic ui syntactic sugar for: form, fields, field and rexport for HTML label tab. (#43)
New function uimenu which creates a menu using Semantic UI
Dropdown item (uses dropdown from Semantic UI) and right menu. Also changed the style of naming functions to the one which fits the rest of the code. Items now can have a feature like ‘active’, ‘header’, etc.
Created uidropdown function which generates dropdown using Semantic UI. It works both independetly and inside Semantic UI Menu (created with uimenu).
Create list with header description and icons.
Add commonly used parse_value function.
Add semantic slider input component.
Dependencies switched to cdn + theme support added to semantic.
semantic.themes options introduced to get dependencies.
Theming example added.
Adjust countries example.
Updated documentation.
Better styled examples.
Refactor UI menu functions.
Changed the way otems are added to menu. Also dropdown item can be added to the menu using uidropdown. Added function uilabel to create Semantic UI labels. New examples how to use uimenu.
As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
-We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, or religion.
-Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
-Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team.
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
-This Code of Conduct is adapted from the Contributor Covenant, version 1.0.0, available at https://www.contributor-covenant.org/version/1/0/0/code-of-conduct.html
-YEAR: 2016 -COPYRIGHT HOLDER: Appsilon Sp. z o.o. -- -
Copyright © 2016 Appsilon Sp. z o.o.
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-Variables follow snake case naming style (unless they overlap with Shiny syntax). Try to give meaningful and self explanatory names.
-my_variable <- 33 - -function(input, another_argument){}
Constants are defined with capital letter snake case and kept in the constants.R script (unless they’re internal).
COLORS <- c("red", "green", "blue")
Function are called with snake_case.
Functions that define UI should contain name of the element, eg. box, horizontal_menu
Functions that define active elements should contain input in their name, eg. checkbox_input.
When overriding shiny functions we usually follow shiny styling. Usually it requires creating a function with shiny.semantic syntax and then implementing a wrapper that follows shiny syntax.
!! Here argument names can actually follow camelCase syntax.
Example:
-# semantic styling -action_button <- function(input_id, label, icon = NULL, width = NULL, ...) { - ... -} - -# shiny styling -actionButton <- function(inputId, label, icon = NULL, width = NULL, ...) { - ... -}
vignettes/basics.Rmd
- basics.RmdIn this tutorial we will walk you through the basics of shiny.semantic.
First of all, let’s answer a few questions:
-shiny.semantic?You can build your Shiny apps with standard shiny UI that relies on Bootstrap. This means that Shiny attaches CSS and JS code that is responsible for its neat look. However, after a while you might notice that all apps made this way tend to look quite similar. shiny.semantic helps you to add a fresh look to your web application by providing an alternative UI framework that works under the hood.
shiny.semantic has to do with Fomantic UI?Similarly to Shiny attaching Bootstrap CSS and JS libraries, shiny.semantic relies on Fomantic UI. Historically, we built this package around Semantic UI library, but it got deprecated and now (since December 2019) we rely on the well-supported and maintained community fork called Fomantic UI.
Not at all! For your convenience, we created wrappers of the most popular functions that you know from Shiny. For example, you can create an action button using a snake case (which is a shiny.semantic standard): action_button, or you can use, more familiar from Shiny, camel case with consistent parameters: actionButton.
Note, however, that the philosophy behind the Bootstrap and Fomantic is quite different, so some behaviour might also differ. Usually shiny.semantic warns you or you can learn more about it from documentation of a specific function.
shiny.semantic?It depends. In general, to be able to render shiny.semantic components correctly, your app UI code must be surrounded by semanticPage (equivalent of fluidPage) function that switches off standard Bootstrap dependencies. Thus some components from Shiny might look just bad, but don’t worry - most of them have shiny.semantic alternatives. Having said that, all of standard HTML elements from Shiny should work just fine (like shiny::div or shiny::h2).
shiny.semantic?You can use shiny.semantic in two ways:
If you know this and that about web development, you can create a number of components by extending standard Shiny objects with class definitions from Fomantic UI documentation. For example:
div(class = "ui raised segment", - div( - a(class="ui green ribbon label", "Link"), - p("Lorem ipsum, lorem ipsum, lorem ipsum"), - actionButton("button", "Click") - ) -)
If you are not that comfortable with web development, you can take advantage of the number of elements that we implemented for you. See some examples below:
-range_input("range", 10, 15, 0, 20) -text_input("txt", type = "text", placeholder = "Enter Text") -date_input("date")
For more components visit our Components live demo website or the examples/ folder on our repository.
Little sneak-peak of what you can get is listed on the graphics below. Most of the components you may insert with just single line of code!
-
If you want to learn how to use a particular UI component, check its documentation. For example, you can call in RStudio (to see the docs for a counter button):
-?counter_buttonor use our documentation website.
-All examples come with easy to use code snippets that will help you get started. We hope that this short overview was useful. Good luck with building your first amazing app with shiny.semantic :)
vignettes/fomantic_js.Rmd
- fomantic_js.RmdSome Fomantic UI elements require to run a specific JS code when DOM document is ready. There are at least 2 options to do this:
-shinyjs
-library(shinyjs) -... -jsCode <- " # Fomantic UI componts JS " -... -ui <- function() { - shinyUI( - semanticPage( - title = "Your page title", - shinyjs::useShinyjs(), - # Your UI code - ) - ) -} -server <- shinyServer(function(input, output) { - runjs(jsCode) - # Your Shiny logic -}) -shinyApp(ui = ui(), server = server)
shiny::tags$script()
-... -jsCode <- " -$(document).ready(function() { - # Semantic UI components JS code, like: - #$('.rating').rating('setting', 'clearable', true); - #$('.disabled .rating').rating('disable'); -}) -... -" - -ui <- function() { - shinyUI( - semanticPage( - title = "My page", - tags$script(jsCode), - # Your UI code - ) - ) -} -... -server <- shinyServer(function(input, output) { - # Your Shiny logic -}) - -shinyApp(ui = ui(), server = server)
vignettes/intro.Rmd
- intro.RmdThis is how you generate your first UI with shiny.semantic:
uirender( - shiny::tagList( - h4("Numeric input", icon("world")), - shiny.semantic::numeric_input("input", value = 0, label = ""), - shiny.semantic::list_container(list( - list(header = "Item 1", description = "My text for item 1", icon = "cat"), - list(header = "Item 2", description = "My text for item 2", icon = "tree"), - list(header = "Item 3", description = "My text for item 3", icon = "dog") - ), is_divided = TRUE - ) - ), -width = "200px", height = "280px")
Let’s create a Shiny app with semanticPage() and just an h1 title.
ui <- semanticPage( - title = "My first page", - h1("My page") -) - -server <- function(input, output, session) {} - -shinyApp(ui, server)
Now let’s add sidebar layout sidebar_layout() with a sidebar panel sidebar_panel() and main panel main_panel(). The sidebar is displayed with a distinct background color and typically contains input controls. The main area occupies 2/3 of the horizontal width and typically contains outputs.
ui <- semanticPage( - title = "My first page", - h1("My page"), - sidebar_layout( - sidebar_panel(), - main_panel() - ) -) - -server <- function(input, output, session) {} - -shinyApp(ui, server)
Next let’s fill in the main panel main_panel() with a Fomantic (Semantic previously) UI segment containing 2 cards.
ui <- semanticPage( - title = "My first page", - h1("My page"), - sidebar_layout( - sidebar_panel(), - main_panel( - segment( - cards( - class = "two", - card(class = "red", - div(class = "content", - div(class = "header", "Main title card 1"), - div(class = "meta", "Sub title card 1"), - div(class = "description", "More detail description card 1") - ) - ), - card(class = "blue", - div(class = "content", - div(class = "header", "Main title card 2"), - div(class = "meta", "Sub title card 2"), - div(class = "description", "More detail description card 2") - ) - ) - ) - ) - ) - ) - ) - -server <- function(input, output, session) {} - -shinyApp(ui, server)
Time to fill in sidebar sidebar_panel(), so let’s add a dropdown. We create it input using dropdown_input().
ui <- semanticPage( - title = "My first page", - h1("My page"), - sidebar_layout( - sidebar_panel( - dropdown_input("mtcars_dropdown", c("mpg", "cyl", "disp", "hp"), value = "mpg"), - textOutput("dropdown") - ), - main_panel( - segment( - cards( - class = "two", - card(class = "red", - div(class = "content", - div(class = "header", "Main title card 1"), - div(class = "meta", "Sub title card 1"), - div(class = "description", "More detail description card 1") - ) - ), - card(class = "blue", - div(class = "content", - div(class = "header", "Main title card 2"), - div(class = "meta", "Sub title card 2"), - div(class = "description", "More detail description card 2") - ) - ) - ) - ) - ) - ) -) - -server <- function(input, output, session) { - output$dropdown <- renderText(input$mtcars_dropdown) -} - -shinyApp(ui, server)
Let’s make dropdown do something and generate a histogram and a simple plot from a selected mtcars column using dropdown.
ui <- semanticPage( - title = "My first page", - h1("My page"), - sidebar_layout( - sidebar_panel( - p("Select variable for plots:"), - dropdown_input("mtcars_dropdown", c("mpg", "cyl", "disp", "hp"), value = "mpg") - ), - main_panel( - segment( - cards( - class = "two", - card(class = "red", - div(class = "content", - div(class = "header", "Main title card 1"), - div(class = "meta", "Sub title card 1"), - div(class = "description", "More detail description card 1") - ) - ), - card(class = "blue", - div(class = "content", - div(class = "header", "Main title card 2"), - div(class = "meta", "Sub title card 2"), - div(class = "description", "More detail description card 2") - ) - ) - ) - ), - plotOutput("histogram"), - plotOutput("plot") - ) - ) -) - -server <- function(input, output, session) { - output$dropdown <- renderText(input$mtcars_dropdown) - output$histogram <- renderPlot(hist(mtcars[[input$mtcars_dropdown]])) - output$plot <- renderPlot(plot(mtcars[[input$mtcars_dropdown]])) -} - -shinyApp(ui, server)
There is more layouts that you can use. Just check the documentation of: splitLayout, flow_layout, vertical_layout and some more!
Finally let’s change the layout of the plots on the page and make them appear next to each other. We will use grid() for it and define a grid template using grid_template() with 1 row and 2 columns of the same size. Our grid template will contain 2 areas chart1 and chart2
grid_charts <- grid_template( - default = list(areas = rbind(c("chart1", "chart2")), - rows_height = c("100%"), - cols_width = c("50%", "50%")) -)
We assign plots’ outputs plotOutput() to both areas inside the grid function.
This is the final effect of our work:
-
ui <- semanticPage( - title = "My first page", - h1("My page"), - sidebar_layout( - sidebar_panel( - p("Select variable for plots:"), - dropdown_input("mtcars_dropdown", c("mpg", "cyl", "disp", "hp"), value = "mpg") - ), - main_panel( - segment( - cards( - class = "two", - card(class = "red", - div(class = "content", - div(class = "header", "Main title card 1"), - div(class = "meta", "Sub title card 1"), - div(class = "description", "More detail description card 1") - ) - ), - card(class = "blue", - div(class = "content", - div(class = "header", "Main title card 2"), - div(class = "meta", "Sub title card 2"), - div(class = "description", "More detail description card 2") - ) - ) - ) - ), - grid(grid_charts, - chart1 = plotOutput("histogram"), - chart2 = plotOutput("plot") - ) - ) - ) -) - -server <- function(input, output, session) { - output$dropdown <- renderText(input$mtcars_dropdown) - output$histogram <- renderPlot(hist(mtcars[[input$mtcars_dropdown]])) - output$plot <- renderPlot(plot(mtcars[[input$mtcars_dropdown]])) -} - -shinyApp(ui, server)
You can define grids for different screen sizes. Here is an example on how to define it for mobile.
-vignettes/semantic_integration.Rmd
- semantic_integration.RmdSimilarly to shiny, shiny.semantic works well with other popular R packages. Let’s see how to create a simple application with plotly.
library(shiny) -library(shiny.semantic) -library(plotly) - -ui <- semanticPage( - segment( - class = "basic", - a(class="ui green ribbon label", "Plotly demo"), - plotlyOutput("plot") - - ) -) - -server <- function(input, output, session) { - output$plot <- renderPlotly({ - plot_ly(economics, x = ~date, color = I("black")) %>% - add_lines(y = ~uempmed) %>% - add_lines(y = ~psavert, color = I("red")) - }) -} - -shinyApp(ui = ui, server = server)
And now let’s have a look at similar example, but with leaflet.
library(shiny) -library(shiny.semantic) -library(leaflet) - -ui <- semanticPage( - segment( - class = "basic", - a(class="ui blue ribbon label", "Leaflet demo"), - leafletOutput("map") - - ) -) - -server <- function(input, output, session) { - output$map <- renderLeaflet({ - m <- leaflet() %>% addTiles() - m <- m %>% setView(21.00, 52.21, zoom = 12) - m - }) -} - -shinyApp(ui = ui, server = server)
To add some neat Fomantic styling to your DT table you need to use semantic_DT wrapper.
library(shiny) - library(shiny.semantic) - - ui <- semanticPage( - h2("Pretty tables in Shiny Semantic"), - semantic_DTOutput("table") - ) - server <- function(input, output, session) { - output$table <- DT::renderDataTable( - semantic_DT(mtcars) - ) - } - shinyApp(ui, server)
Fomantic (Semantic) UI wrapper for Shiny
-With this library it is easy to wrap Shiny with Fomantic UI (previously Semantic). Add a few simple lines of code to give your UI a fresh, modern and highly interactive look.
-
library(shiny) -ui <- fluidPage( - div( - div( - a("Link"), - p("Lorem ipsum, lorem ipsum, lorem ipsum"), - actionButton("button", "Click") - ) - ) -)
library(shiny.semantic) -ui <- semanticPage( - div(class = "ui raised segment", - div( - a(class="ui green ribbon label", "Link"), - p("Lorem ipsum, lorem ipsum, lorem ipsum"), - actionButton("button", "Click") - ) - ) -)
| 🔗 Churn analytics | -🔗 Fraud detection | -
|---|---|
 |
- |
-
We show how shiny.semantic can be used to style an app and change it’s look.
| 🔗 BEFORE Utah Division of Water Quality (DWQ) | -🔗 AFTER Utah Division of Water Quality (DWQ) | -
|---|---|
 |
- |
-
See more examples with code in the examples folder:
You can install a stable shiny.semantic release from CRAN repository:
install.packages("shiny.semantic")
and the latest version with remotes:
remotes::install_github("Appsilon/shiny.semantic@develop")
(master branch contains the stable version. Use develop branch for latest features)
To install previous versions you can run:
-remotes::install_github("Appsilon/shiny.semantic", ref = "0.1.0")
Firstly, you will have to invoke shinyUI() with semanticPage() instead of standard Shiny UI definitions like e.g. bootstrapPage(). From now on, all components can be annotated with Fomantic UI specific CSS classes and also you will be able to use shiny.semantic components.
Basic example for rendering a simple button. will look like this:
-library(shiny) -library(shiny.semantic) -ui <- semanticPage( - title = "My page", - div(class = "ui button", icon("user"), "Icon button") - ) -server <- function(input, output) {} -shinyApp(ui, server)
For better understanding it’s good to check Fomantic UI documentation.
-Note #1
-At the moment you have to pass page title in semanticPage()
Note #2
-The shiny package works with Bootstrap library under the hood. shiny.semantic uses Fomantic UI. Sometimes using both of these libraries may cause troubles with rendering specific UI elements. That is why by default we turn off Bootstrap dependencies.
However, you can switch off suppressing bootstrap by calling semanticPage(suppress_bootstrap = FALSE, ...)
We welcome contributions of all types!
-We encourage typo corrections, bug reports, bug fixes and feature requests. Feedback on the clarity of the documentation and examples is especially valuable.
-If you want to contribute to this project please submit a regular PR, once you’re done with new feature or bug fix.
Changes in documentation
-Both repository README.md file and an official documentation page are generated with Rmarkdown, so if there is a need to update them, please modify accordingly a README.Rmd file and use “Knit”.
-Documentation is rendered with pkgdown. Just run pkgdown::build_site() after rendering new README.md.
Changes in vignettes
-If you modified or added a new vignette, please rebuild them with devtools::build_vignettes().
Important:
-1) Please follow the code style from out styleguide.
-2) We have a Contributor Code of Conduct. Make sure to check it and to follow it.
-We used the latest versions of dependencies for this library, so please update your R environment before installation.
-However, if you encounter any problems, try the following:
-install.packages("shiny", version='0.14.2.9001')
dsl.R to make using this package smootherAppsilon is the Full Service Certified RStudio Partner. Learn more at appsilon.com.
-Get in touch dev@appsilon.com
-Short description (with a reference to an issue).
-DoD
--Major project work has a corresponding task. If there’s no task for what you are doing, create it. Each task needs to be well defined and described.
-Change has been tested (manually or with automated tests), everything runs correctly and works as expected. No existing functionality is broken.
-No new error or warning messages are introduced.
-All interaction with a semantic functions, examples and docs are written from the perspective of the person using or receiving it. They are understandable and helpful to this person.
-If the change affects code or repo sctructure, README, documentation and code comments should be updated.
-All code has been peer-reviewed before merging into any main branch.
-All changes have been merged into the main branch we use for development (develop).
-Continuous integration checks (linter, unit tests) are configured and passed.
-Unit tests added for all new or changed logic.
-All task requirements satisfied. The reviewer is responsible to verify each aspect of the task.
-Any added or touched code follows our style-guide.
Reporting progress (object-oriented API)
-Reporting progress (object-oriented API)
-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.
-[with_progress()]
new()Creates a new progress panel (but does not display it).
Progress$new(session = getDefaultReactiveDomain(), min = 0, max = 1, ...)
sessionThe Shiny session object, as provided by `shinyServer` to -the server function.
minThe value that represents the starting point of the progress -bar. Must be less than `max`.
maxThe value that represents the end of the progress bar. Must be -greater than `min`.
...Arguments that may have been used for `shiny::Progress`
set()Updates the progress panel. When called the first time, the - progress panel is displayed.
Progress$set(value = NULL, message = NULL, ...)
valueSingle-element numeric vector; the value at which to set the -progress bar, relative to `min` and `max`. `NULL` hides the progress -bar, if it is currently visible.
messageA single-element character vector; the message to be -displayed to the user, or `NULL` to hide the current message (if any).
...Arguments that may have been used for `shiny::Progress`
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.
Progress$inc(amount = 0.1, message = NULL, ...)
amountFor the `inc()` method, a numeric value to increment the -progress bar.
messageA single-element character vector; the message to be -displayed to the user, or `NULL` to hide the current message (if any).
...Arguments that may have been used for `shiny::Progress`
getMin()Returns the minimum value.
Progress$getMin()
getMax()Returns the maximum value.
Progress$getMax()
getValue()Returns the current value.
Progress$getValue()
close()Removes the progress panel. Future calls to `set` and - `close` will be ignored.
Progress$close()
clone()The objects of this class are cloneable with this method.
Progress$clone(deep = FALSE)
deepWhether to make a deep clone.
-## 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) -}
R/constants.R
- SEMANTIC_PALETTE.RdSemantic colors -https://github.com/Semantic-Org/Semantic-UI/blob/master/src/themes/default/globals/site.variables
-SEMANTIC_PALETTE
-
-
- An object of class character of length 13.
In accordion you may display a list of elements that can be hidden or -shown with one click.
-accordion( - accordion_list, - fluid = TRUE, - active_title = "", - styled = TRUE, - custom_style = "" -)- -
| accordion_list | -list with lists with fields: `title` and `content` |
-
|---|---|
| fluid | -if accordion is fluid then it takes width of parent div |
-
| active_title | -if active title matches `title` from |
-
| styled | -if switched of then raw style (no boxes) is used |
-
| custom_style | -character with custom style added to CSS of accordion (advanced use) |
-
shiny tag list with accordion UI
- --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) {} -) -}
Creates an action button whose value is initially zero, and increments by one each time it is pressed.
-action_button(input_id, label, icon = NULL, width = NULL, ...) - -actionButton(inputId, label, icon = NULL, width = NULL, ...)- -
| input_id | -The input slot that will be used to access the value. |
-
|---|---|
| label | -The contents of the button - a text label, but you could also use any other HTML, like an image. |
-
| icon | -An optional icon to appear on the button. |
-
| width | -The width of the input. |
-
| ... | -Named attributes to be applied to the button or remaining parameters passed to button,
-like |
-
| inputId | -the same as |
-
-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) -}
R/grid.R
- apply_custom_styles_to_html_template.RdFormat string template (that represents HTML template) with custom CSS styles.
-apply_custom_styles_to_html_template( - html_template = "", - area_names = c(), - container_style = "", - area_styles = list() -)- -
| html_template | -character |
-
|---|---|
| area_names | -vector of character |
-
| container_style | -character |
-
| area_styles | -list of character |
-
character
-This is a helper function used in grid()
- -R/modal.R
- attach_rule.RdInternal function that creates the rule for a specific setting or behavior of the modal.
-attach_rule(id, behavior, target, value)- -
| id | -ID of the target modal. |
-
|---|---|
| behavior | -What behavior is beging set i. e. setting or attach events. |
-
| target | -First argument of the behavior. Usually a target or a setting name. |
-
| value | -Second argument of the behavior. usually an action or a setting value. |
-
Create Semantic UI Button
-button(input_id, label, icon = NULL, class = NULL, ...)- -
| input_id | -The |
-
|---|---|
| label | -The contents of the button or link |
-
| icon | -An optional |
-
| class | -An optional attribute to be added to the button's class. If used
-paramters like |
-
| ... | -Named attributes to be applied to the button |
-
-if (interactive()){ -library(shiny) -library(shiny.semantic) -ui <- semanticPage( - shinyUI( - button("simple_button", "Press Me!") - ) -) -server <- function(input, output, session) { -} -shinyApp(ui, server) -}
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
-calendar( - input_id, - value = NULL, - placeholder = NULL, - type = "date", - min = NA, - max = NA -) - -update_calendar(session, input_id, value = NULL, min = NULL, max = NULL)- -
| input_id | -ID of the calendar that will be updated |
-
|---|---|
| value | -Initial value of the numeric input. |
-
| placeholder | -Text visible in the input when nothing is inputted. |
-
| type | -Select from |
-
| min | -Minimum allowed value. |
-
| max | -Maximum allowed value. |
-
| session | -The |
-
-# 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) - } - -if (FALSE) { -# 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" -) -}
This creates a card tag using Semantic UI styles.
-card(..., class = "")- -
| ... | -Other arguments to be added as attributes of the -tag (e.g. style, class or childrens etc.) |
-
|---|---|
| class | -Additional classes to add to html tag. |
-
-## 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) -}
This creates a cards tag using Semantic UI styles.
-cards(..., class = "")- -
| ... | -Other arguments to be added as attributes of the -tag (e.g. style, class or childrens etc.) |
-
|---|---|
| class | -Additional classes to add to html tag. |
-
-## 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) -}
Semantic theme path validator
-check_semantic_theme(theme_css, full_url = TRUE)- -
| theme_css | -it can be either NULL, character with css path, or theme name |
-
|---|---|
| full_url | -boolean flag that defines what is returned, either filename, or full path. Default TRUE |
-
path to theme or filename
- --check_semantic_theme(NULL)#> [1] "https://d335w9rbwpvuxm.cloudfront.net/2.8.3/semantic.min.css"check_semantic_theme("darkly")#> [1] "https://d335w9rbwpvuxm.cloudfront.net/2.8.3/semantic.darkly.min.css"check_semantic_theme("darkly", full_url = FALSE)#> [1] "semantic.darkly.min.css"
R/utils.R
- check_shiny_param.RdA 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
-check_shiny_param(name, func, ...)- -
| name | -Function argument name |
-
|---|---|
| func | -Name of the function in the |
-
| ... | -Arguments passed to the shiny.semantic version of the shiny function |
-
If the shiny exclusive argument is called in a shiny.semantic, then a message is posted in the UI
- -Create Semantic UI checkbox
-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)- -
| input_id | -Input name. Reactive value is available under input[[name]]. |
-
|---|---|
| label | -Text to be displayed with checkbox. |
-
| type | -Type of checkbox: NULL, 'toggle' |
-
| is_marked | -Defines if checkbox should be marked. Default TRUE. |
-
| style | -Style of the widget. |
-
| inputId | -same as |
-
| value | -same as |
-
| width | -The width of the input (currently not supported, but check |
-
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
-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) -}
Creates a counter button whose value increments by one each time it is pressed.
-counter_button( - input_id, - label = "", - icon = NULL, - value = 0, - color = "", - size = "", - big_mark = " " -)- -
| input_id | -The |
-
|---|---|
| label | -the content of the item to display |
-
| icon | -an optional |
-
| value | -initial rating value (integer) |
-
| color | -character with semantic color |
-
| size | -character with size of the button, eg. "medium", "big" |
-
| big_mark | -big numbers separator |
-
counter button object
- --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) -}
R/modal.R
- create_modal.RdAllows for the creation of modals in the server side without being tied to a specific HTML element.
-create_modal( - ui_modal, - show = TRUE, - session = shiny::getDefaultReactiveDomain() -) - -showModal(ui, session = shiny::getDefaultReactiveDomain())- -
| ui_modal | -HTML containing the modal. |
-
|---|---|
| show | -If the modal should only be created or open when called (open by default). |
-
| session | -Current session. |
-
| ui | -Same as |
-
modal
R/grid.R
- data_frame_to_css_grid_template_areas.RdGenerate CSS string representing grid template areas.
-data_frame_to_css_grid_template_areas(areas_dataframe)- -
| areas_dataframe | -data.frame of character representing grid areas |
-
|---|
character
-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'"- - -
Define simple date input with Semantic UI styling
-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, - ... -)- -
| input_id | -Input id. |
-
|---|---|
| label | -Label to be displayed with date input. |
-
| value | -Default date chosen for input. |
-
| min | -Minimum date that can be selected. |
-
| max | -Maximum date that can be selected. |
-
| style | -Css style for widget. |
-
| icon_name | -Icon that should be displayed on widget. |
-
| inputId | -Input id. |
-
| icon | -Icon that should be displayed on widget. |
-
| width | -character width of the object |
-
| ... | -other arguments |
-
-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) -}
Display grid template in a browser for easy debugging
-display_grid(grid_template)- -
| grid_template | -generated by grid_template() function |
-
|---|
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
- -R/shiny.R
- dot-onLoad.RdInternal function that expose javascript bindings to Shiny app.
-.onLoad(libname, pkgname)- -
| libname | -library name |
-
|---|---|
| pkgname | -package name |
-
This creates a default dropdown using Semantic UI styles with Shiny input. -Dropdown is already initialized and available under input[[input_id]].
-dropdown( - input_id, - choices, - choices_value = choices, - default_text = "Select", - value = NULL, - type = "selection fluid" -)- -
| input_id | -Input name. Reactive value is available under input[[input_id]]. |
-
|---|---|
| choices | -All available options one can select from. |
-
| choices_value | -What reactive value should be used for corresponding -choice. |
-
| default_text | -Text to be visible on dropdown when nothing is selected. |
-
| value | -Pass value if you want to initialize selection for dropdown. |
-
| type | -Change depending what type of dropdown is wanted. |
-
-## Only run examples in interactive R sessions -if (interactive()) { - - library(shiny) - library(shiny.semantic) - ui <- function() { - shinyUI( - semanticPage( - title = "Dropdown example", - uiOutput("dropdown"), - p("Selected letter:"), - textOutput("selected_letter") - ) - ) - } - server <- shinyServer(function(input, output) { - output$dropdown <- renderUI({ - dropdown("simple_dropdown", LETTERS, value = "A") - }) - output$selected_letter <- renderText(input[["simple_dropdown"]]) - }) - - shinyApp(ui = ui(), server = server) -}
This creates a default *dropdown_input* using Semantic UI styles with Shiny input. -Dropdown is already initialized and available under input[[input_id]].
-dropdown_input( - input_id, - choices, - choices_value = choices, - default_text = "Select", - value = NULL, - type = "selection fluid" -)- -
| input_id | -Input name. Reactive value is available under input[[input_id]]. |
-
|---|---|
| choices | -All available options one can select from. |
-
| choices_value | -What reactive value should be used for corresponding -choice. |
-
| default_text | -Text to be visible on dropdown when nothing is selected. |
-
| value | -Pass value if you want to initialize selection for dropdown. |
-
| type | -Change depending what type of dropdown is wanted. |
-
-## 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) -}
This creates a dropdown using Semantic UI.
-dropdown_menu( - ..., - class = "", - name, - is_menu_item = FALSE, - dropdown_specs = list() -)- -
| ... | -Dropdown content. |
-
|---|---|
| class | -class of the dropdown. Look at https://semantic-ui.com/modules/dropdown.html for all possibilities. |
-
| name | -Unique name of the created dropdown. |
-
| is_menu_item | -TRUE if the dropdown is a menu item. Default is FALSE. |
-
| dropdown_specs | -A list of dropdown functionalities. -Look at https://semantic-ui.com/modules/dropdown.html#/settings for all possibilities. |
-
-## 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) -}
This creates a field tag using Semantic UI styles.
-field(..., class = "")- -
| ... | -Other arguments to be added as attributes of the -tag (e.g. style, class or childrens etc.) |
-
|---|---|
| class | -Additional classes to add to html tag. |
-
-## 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) -}
This creates a fields tag using Semantic UI styles.
-fields(..., class = "")- -
| ... | -Other arguments to be added as attributes of the -tag (e.g. style, class or childrens etc.) |
-
|---|---|
| class | -Additional classes to add to html tag. |
-
-## 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) -}
This creates a default file input using Semantic UI. The input is available
-under input[[input_id]].
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", - ... -)- -
| input_id, inputId | -Input name. Reactive value is available under |
-
|---|---|
| label | -Display label for the control, or NULL for no label. |
-
| multiple | -Whether the user should be allowed to select and upload multiple files at once. |
-
| accept | -A character vector of "unique file type specifiers" which gives the browser a hint as to the type -of file the server expects. Many browsers use this prevent the user from selecting an invalid file. |
-
| button_label, buttonLabel | -Display label for the button. |
-
| type | -Input type specifying class attached to input container. -See [Fomantic UI](https://fomantic-ui.com/collections/form.html) for details. |
-
| placeholder | -Inner input label displayed when no file has been uploaded. |
-
| ... | -Other parameters passed from |
-
| width | -The width of the input, e.g. |
-
-## 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) -}
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.
-flow_layout( - ..., - cell_args = list(), - min_cell_width = "208px", - max_cell_width = "1fr", - column_gap = "12px", - row_gap = "0px" -) - -flowLayout(..., cellArgs = list())- -
| ... | -Unnamed arguments will become child elements of the layout. -Named arguments will become HTML attributes on the outermost tag. |
-
|---|---|
| cell_args | -Any additional attributes that should be used for each cell -of the layout. |
-
| min_cell_width | -The minimum width of the cells. |
-
| max_cell_width | -The maximum width of the cells. |
-
| column_gap | -The spacing between columns. |
-
| row_gap | -The spacing between rows. |
-
| cellArgs | -Same as |
-
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.
-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) {}) -}
This creates a form tag using Semantic UI styles.
-form(..., class = "")- -
| ... | -Other arguments to be added as attributes of the -tag (e.g. style, class or childrens etc.) |
-
|---|---|
| class | -Additional classes to add to html tag. |
-
-## 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) -}
R/utils.R
- generate_random_id.RdSome elements require input id, but this does not need to be -specified by the user. Thus we assign random value with prefix where needed.
-generate_random_id(prefix, id_length = 20)- -
| prefix | -character with prefix add to id |
-
|---|---|
| id_length | -numeric with length of id (default 20) |
-
Internal function that returns path string from `shiny.custom.semantic.cdn` options.
-get_cdn_path()
-
-
- CDN path of semantic dependencies
- --## Load shiny.semantic dependencies from local domain. -options("shiny.custom.semantic.cdn" = "shiny.semantic")
Use CSS grid template in Shiny UI
-grid( - grid_template, - id = paste(sample(letters, 5), collapse = ""), - container_style = "", - area_styles = list(), - display_mode = FALSE, - ... -)- -
| grid_template | -grid template created with grid_template() function |
-
|---|---|
| container_style | -character - string of custom CSS for the main grid container |
-
| area_styles | -list of custom CSS styles for provided area names |
-
| display_mode | -replaces areas HTML content with <area name> text. Used by display_grid() function |
-
| ... | -areas HTML content provided by named arguments |
-
Rendered HTML ready to use by Shiny UI. See htmltools::htmlTemplate() for more details.
Grids can be nested.
- --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) {}) -) -}
R/grid.R
- grid_container_css.RdGenerate template string representing CSS styles of grid container div.
-grid_container_css(css_grid_template_areas, rows_height, cols_width)- -
| css_grid_template_areas | -character, CSS value for grid-template-areas |
-
|---|---|
| rows_height | -vector of character |
-
| cols_width | -vector of character |
-
character
-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 }}"
-
-
- Define a template of a CSS grid
-grid_template(default = NULL, mobile = NULL)- -
| default | -(required) -Template for desktop: -list(areas = [data.frame of character], - rows_height = [vector of character], - cols_width = [vector of character]) |
-
|---|---|
| mobile | -(optional) -Template for mobile (screen width below 768px): -list(areas = [data.frame of character], - rows_height = [vector of character], - cols_width = [vector of character]) |
-
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
- --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)
This creates a header with optional icon using Semantic UI styles.
-header(title, description, icon = NULL)- -
| title | -Header title |
-
|---|---|
| description | -Subheader text |
-
| icon | -Optional icon name |
-
-## 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) -}
Renders UI with horizontal menu
-horizontal_menu(menu_items, active_location = "", logo = NULL)- -
| menu_items | -list with list that can have fields: "name" (mandatory), -"link" and "icon" |
-
|---|---|
| active_location | -active location of the menu (should match -one from "link") |
-
| logo | -optional argument that displays logo on the left -of horizontal menu, can be character with image location, or shiny image object |
-
shiny div with horizontal menu
- --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) -}
This creates an icon tag using Semantic UI styles.
-icon(class = "", ...)- -
| class | -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.) |
-
--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) -}
- Fomantic (semantic) page- - |
- |
|---|---|
| - - | -Semantic UI page |
-
- UI elements-All functions that generate static UI elements. - |
- |
| - - | -Create Semantic UI Button |
-
| - - | -Create Semantic UI card tag |
-
| - - | -Create Semantic UI cards tag |
-
| - - | -Create Semantic UI Dropdown |
-
| - - | -Create Semantic UI fields tag |
-
| - - | -Create Semantic UI field tag |
-
| - - | -Create Semantic UI form tag |
-
| - - | -Create Semantic UI header |
-
| - - | -Horizontal menu |
-
| - - | -Create Semantic UI icon tag |
-
| - - | -Create Semantic UI label tag |
-
| - - | -Create Semantic UI list with header, description and icons |
-
| - - | -Create Semantic UI Menu |
-
| - - | -Create Semantic UI Divider Item |
-
| - - | -Create Semantic UI Header Item |
-
| - - | -Create Semantic UI Menu Item |
-
| - - | -Create Semantic UI Message box |
-
| - - | -Create Semantic UI segment |
-
| - - | -Create Semantic UI tabs |
-
| - - | -Change the select tab of a tabset on the client |
-
| - - | -Accordion UI |
-
- Action elements-All functions that generate or update active |
- |
| - - | -Action button |
-
| - - | -Create Semantic UI Calendar |
-
| - - | -Create Semantic UI checkbox |
-
| - - | -Counter Button |
-
| - - | -Define simple date input with Semantic UI styling |
-
| - - | -Create dropdown Semantic UI component |
-
| - - | -Create Semantic UI multiple checkbox |
-
| - - | -Create Semantic UI Numeric Input |
-
| - - | -Create Semantic UI Slider / Range |
-
| - - | -Rating Input. |
-
| - - | -Render menu link |
-
| - - | -Create a select list input control |
-
| - - | -Create a semantic Text Area input |
-
| - - | -Create Semantic UI Text Input |
-
| - - | -Create Semantic UI File Input |
-
| - - | -Create progress Semantic UI component |
-
|
-
|
- Show and remove Semantic UI toast |
-
| - - | -Change the label or icon of an action button on the client |
-
| - - | -Change numeric input value and settings |
-
| - - | -Change the value of a select input on the client |
-
| - - | -Update dropdown Semantic UI component |
-
| - - | -Update slider Semantic UI component |
-
| - - | -Update rating |
-
- Modal functions-Functions for modals generation. - |
- |
| - - | -Create Semantic UI modal |
-
| - - | -Allows for the creation of modals in the server side without being tied to a specific HTML element. |
-
|
-
|
- Show, Hide or Remove Semantic UI modal |
-
- Search functions-Functions for search API. - |
- |
| - - | -Register search api url |
-
| - - | -Create search field Semantic UI component |
-
| - - | -Add Semantic UI search selection dropdown based on REST API |
-
| - - | -Add Semantic UI search selection dropdown based on provided choices |
-
- Layouts and grid-Function for layouts and grid. - |
- |
| - - | -Use CSS grid template in Shiny UI |
-
| - - | -Define a template of a CSS grid |
-
|
-
|
- Creates div containing children elements of sidebar panel |
-
| - - | -Flow layout |
-
| - - | -Vertical layout |
-
| - - | -Split layout |
-
- Constants-These constants contain important |
- |
| - - | -Semantic colors |
-
| - - | -Allowed sizes |
-
| - - | -Supported semantic themes |
-
- Other-Other useful functions or objects. - |
- |
| - - | -Create Semantic DT Table |
-
| - - | -Create universal Shiny input binding |
-
| - - | -Create universal Shiny text input binding |
-
| - - | -Create Semantic UI Input |
-
| - - | -Render semanticui htmlwidget |
-
This creates a div or a tag with with class ui label using Semantic UI.
label(..., class = "", is_link = TRUE)- -
| ... | -Other arguments to be added such as content of the tag (text, icons) and/or attributes (style) |
-
|---|---|
| class | -class of the label. Look at https://semantic-ui.com/elements/label.html for all possibilities. |
-
| is_link | -If TRUE creates label with 'a' tag, otherwise with 'div' tag. -#' |
-
-## 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) -}
This creates a label tag using Semantic UI.
-label_tag(..., class = "", is_link = TRUE)- -
| ... | -Other arguments to be added such as content of the tag (text, icons) and/or attributes (style) |
-
|---|---|
| class | -class of the label. Look at https://semantic-ui.com/elements/label.html for all possibilities. |
-
| is_link | -If TRUE creates label with 'a' tag, otherwise with 'div' tag. -#' |
-
-## Only run examples in interactive R sessions -if (interactive()){ - library(shiny) - library(shiny.semantic) - - ui <- shinyUI( - semanticPage( - ## label - label_tag(class = "ui label", - icon = icon("mail icon"), 23), - p(), - ## pointing label - field( - text_input("ex", label = "", type = "text", placeholder = "Your name")), - label_tag("Please enter a valid name", class = "ui pointing red basic label"), - p(), - ## tag - label_tag(class = "ui tag label", "New"), - label_tag(class = "ui red tag label", "Upcoming"), - label_tag(class =" ui teal tag label","Featured"), - ## ribbon - segment(class = "ui raised segment", - label_tag(class = "ui red ribbon label", "Overview"), - "Text"), - ## attached - segment(class = "ui raised segment", - label_tag(class = "ui top attached label", "HTML"), - p("Text")) - )) - server <- function(input, output, session) { - } - shinyApp(ui, server) -}
R/dsl.R
- list_container.RdThis creates a list with icons using Semantic UI
-list_container(content_list, is_divided = FALSE)- -
| content_list | -list of lists with fields: `header` and/or `description`, -`icon` containing the list items headers, descriptions (one of these is mandatory) -and icons. Icon column should contain strings with icon names available -here: https://fomantic-ui.com/elements/icon.html |
-
|---|---|
| is_divided | -If TRUE created list elements are divided |
-
-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) -}
R/grid.R
- list_of_area_tags.RdGenerate list of HTML div elements representing grid areas.
-list_of_area_tags(area_names)- -
| area_names | -vector with area names |
-
|---|
list of shiny::tags$div
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>
-
-
-
- This creates a menu using Semantic UI.
-menu(..., class = "")- -
| ... | -Menu items to be created. Use menu_item function to create new menu item. -Use dropdown_menu(is_menu_item = TRUE, ...) function to create new dropdown menu item. -Use menu_header and menu_divider functions to customize menu format. |
-
|---|---|
| class | -Class extension.Look at https://semantic-ui.com/collections/menu.html -for all possibilities. |
-
-## 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) -}
This creates a menu item using Semantic UI
-menu_item(..., item_feature = "", style = NULL, href = NULL)- -
| ... | -Content of the menu item: text, icons or labels to be displayed. |
-
|---|---|
| item_feature | -If required, add additional item feature like 'active', 'header', etc. |
-
| style | -Style of the item, e.g. "text-align: center". |
-
| href | -If NULL (default) menu_item is created with 'div' tag. Otherwise it is created with 'a' tag, and -parameeter defines its href attribute. |
-
menu
Create Semantic UI Message
-message(header, content, class = "", icon_name, closable = FALSE)- -
| header | -Header of the message |
-
|---|---|
| content | -Content of the message. If it is a vector, creates a list of -vector's elements |
-
| class | -class of the message. Look at -https://semantic-ui.com/collections/message.html for all possibilities. |
-
| icon_name | -If the message is of the type 'icon', specify the icon. -Look at http://semantic-ui.com/elements/icon.html for all possibilities. |
-
| closable | -Determines whether the message should be closable. -Default is FALSE - not closable |
-
Create Semantic UI Message box
-message_box(header, content, class = "", icon_name, closable = FALSE)- -
| header | -Header of the message box |
-
|---|---|
| content | -Content of the message box . If it is a vector, creates a list -of vector's elements |
-
| class | -class of the message. Look at -https://semantic-ui.com/collections/message.html for all possibilities. |
-
| icon_name | -If the message is of the type 'icon', specify the icon. -Look at http://semantic-ui.com/elements/icon.html for all possibilities. |
-
| closable | -Determines whether the message should be closable. -Default is FALSE - not closable |
-
-## 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 Message box
-messagebox(header, content, class = "", icon_name, closable = FALSE)- -
| header | -Header of the message box |
-
|---|---|
| content | -Content of the message box . If it is a vector, creates a list -of vector's elements |
-
| class | -class of the message. Look at -https://semantic-ui.com/collections/message.html for all possibilities. |
-
| icon_name | -If the message is of the type 'icon', specify the icon. -Look at http://semantic-ui.com/elements/icon.html for all possibilities. |
-
| closable | -Determines whether the message should be closable. -Default is FALSE - not closable |
-
-## Only run examples in interactive R sessions -if (interactive()){ - library(shiny) - library(shiny.semantic) - - ui <- shinyUI(semanticPage( - messagebox(header = "Main header", content = "text"), - # message with icon - messagebox(class = "icon", header = "Main header", content = "text", icon_name = "dog"), - # closable message - messagebox(header = "Main header", content = "text", closable = TRUE), - # floating - messagebox(class = "floating", header = "Main header", content = "text"), - # compact - messagebox(class = "compact", header = "Main header", content = "text"), - # warning - messagebox(class = "warning", header = "Warning", content = "text"), - # info - messagebox(class = "info", header = "Info", content = "text") - )) - server <- shinyServer(function(input, output) { - }) - - shinyApp(ui, server) -}
This creates a modal using Semantic UI styles.
-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)- -
| ... | -Content elements to be added to the modal body. -To change attributes of the container please check the `content` argument. |
-
|---|---|
| id | -ID to be added to the modal div. Default "". |
-
| class | -Classes except "ui modal" to be added to the modal. Semantic UI classes can be used. Default "". |
-
| header | -Content to be displayed in the modal header. -If given in form of a list, HTML attributes for the container can also be changed. Default "". |
-
| content | -Content to be displayed in the modal body. -If given in form of a list, HTML attributes for the container can also be changed. Default NULL. |
-
| footer | -Content to be displayed in the modal footer. Usually for buttons. -If given in form of a list, HTML attributes for the container can also be changed. -Set NULL, to make empty. |
-
| target | -Javascript selector for the element that will open the modal. Default NULL. |
-
| settings | -list of vectors of Semantic UI settings to be added to the modal. Default NULL. |
-
| modal_tags | -character with title for |
-
| title | -title displayed in header in |
-
-## 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) -} -if (interactive()) { -library(shiny) -library(shiny.semantic) -shinyApp( - ui = semanticPage( - actionButton("show", "Show modal dialog") - ), - server = function(input, output) { - observeEvent(input$show, { - showModal(modalDialog( - title = "Important message", - "This modal will close after 3 sec.", easyClose = FALSE - )) - Sys.sleep(3) - removeModal() - }) - } -) -}
This creates a multiple checkbox using Semantic UI styles.
-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", - ... -)- -
| input_id | -Input name. Reactive value is available under |
-
|---|---|
| label | -Text to be displayed with checkbox. |
-
| choices | -Vector of labels to show checkboxes for. |
-
| choices_value | -Vector of values that should be used for corresponding choice.
-If not specified, |
-
| selected | -The value(s) that should be chosen initially.
-If |
-
| position | -Specified checkmarks setup. Can be |
-
| type | -Type of checkbox or radio. |
-
| ... | -Other arguments to be added as attributes of the -tag (e.g. style, childrens etc.) |
-
The following types are allowed:
NULLThe standard checkbox (default)
toggleEach checkbox has a toggle form
sliderEach checkbox has a simple slider form
-## 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], value = "A"), - p("Selected letters:"), - textOutput("selected_letters"), - tags$br(), - h1("Radioboxes"), - multiple_radio("radioboxes", "Select Letter", LETTERS[1:6], value = "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 a numeric input control
-numericInput( - inputId, - label, - value, - min = NA, - max = NA, - step = NA, - width = NULL, - ... -)- -
| inputId | -The input slot that will be used to access the value. |
-
|---|---|
| label | -Display label for the control, or NULL for no label. |
-
| value | -Initial value of the numeric input. |
-
| min | -Minimum allowed value. |
-
| max | -Maximum allowed value. |
-
| step | -Interval to use when stepping between min and max. |
-
| width | -The width of the input. |
-
| ... | -Other parameters passed to |
-
This creates a default numeric input using Semantic UI. The input is available
-under input[[input_id]].
numeric_input( - input_id, - label, - value, - min = NA, - max = NA, - step = NA, - type = NULL, - icon = NULL, - placeholder = NULL, - ... -) - -numericInput( - inputId, - label, - value, - min = NA, - max = NA, - step = NA, - width = NULL, - ... -)- -
| input_id | -Input name. Reactive value is available under |
-
|---|---|
| label | -Display label for the control, or NULL for no label. |
-
| value | -Initial value of the numeric input. |
-
| min | -Minimum allowed value. |
-
| max | -Maximum allowed value. |
-
| step | -Interval to use when stepping between min and max. |
-
| type | -Input type specifying class attached to input container. -See [Fomantic UI](https://fomantic-ui.com/collections/form.html) for details. |
-
| icon | -Icon or label attached to numeric input. |
-
| placeholder | -Inner input label displayed when no value is specified. |
-
| ... | -Other parameters passed to |
-
| inputId | -The input slot that will be used to access the value. |
-
| width | -The width of the input. |
-
The inputs are updateable by using updateNumericInput.
-## 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) -}
R/grid.R
- prepare_mustache_for_html_template.RdAfter applying custom CSS, prepares glue() template to be ready to use with htmltools::htmlTemplate()
-prepare_mustache_for_html_template( - styled_html_template = "", - area_names = c(), - display_mode = FALSE -)- -
| styled_html_template | -character |
-
|---|---|
| area_names | -vector of character |
-
| display_mode | -boolean - if TRUE it replaces {{}} mustache with <> so they can be displayed in the debug mode |
-
character
-This is a helper function used in grid()
- -This creates a default progress using Semantic UI styles with Shiny input. -Progress is already initialized and available under input[[input_id]].
-progress( - input_id, - value = NULL, - total = NULL, - percent = NULL, - progress_lab = FALSE, - label = NULL, - label_complete = NULL, - size = "", - class = NULL -)- -
| input_id | -Input name. Reactive value is available under input[[input_id]]. |
-
|---|---|
| value | -The initial value to be selected for the progress bar. |
-
| total | -The maximum value that will be applied to the progress bar. |
-
| percent | -The initial percentage to be selected for the progress bar. |
-
| progress_lab | -Logical, would you like the percentage visible in the progress bar? |
-
| label | -The label to be visible underneath the progress bar. |
-
| label_complete | -The label to be visible underneath the progress bar when the bar is at 100%. |
-
| size | -character with legal semantic size, eg. "medium", "huge", "tiny" |
-
| class | -UI class of the progress bar. |
-
To initialize the progress bar, you can either choose value and total, or percent.
-## 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) -}
Crates rating component
-rating_input( - input_id, - label = "", - value = 0, - max = 3, - icon = "star", - color = "yellow", - size = "" -)- -
| input_id | -The |
-
|---|---|
| label | -the contents of the item to display |
-
| value | -initial rating value |
-
| max | -maximum value |
-
| icon | -character with name of the icon or |
-
| color | -character with colour name |
-
| size | -character with legal semantic size, eg. "medium", "huge", "tiny" |
-
rating object
- --## 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) -}
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.
-register_search(session, data, search_query)- -
| session | -Shiny server session |
-
|---|---|
| data | -Data (the value that is passed into registerDataObj) |
-
| search_query | -Function providing a response as a list of -lists or dataframe of search results. |
-
-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" - ) - }) - } - ) -}
This function renders horizontal menu item.
-render_menu_link(location, title, active_location = "", icon = NULL)- -
| location | -character url with location |
-
|---|---|
| title | -name of the page |
-
| active_location | -name of the active subpage (if matches location then
-it gets highlighted), default empty ( |
-
| icon | -non-mandatory parameter with icon name |
-
shiny tag link
-horizontal_menu
-render_menu_link("#subpage1", "SUBPAGE")#> <a class="item" href="#subpage1"> -#> -#> SUBPAGE -#> </a>
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.
-search_field(input_id, search_api_url, default_text = "Search", value = "")- -
| input_id | -Input name. Reactive value is available under input[[input_id]]. |
-
|---|---|
| search_api_url | -Register custom API url with server JSON Response -containing fields `title` and `description`. |
-
| default_text | -Text to be visible on serach field when nothing -is selected. |
-
| value | -Pass value if you want to initialize selection for search field. |
-
-## Only run examples in interactive R sessions -if (FALSE) { -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) -}
R/semantic_search.R
- search_selection_api.RdDefine 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.
-search_selection_api( - input_id, - search_api_url, - multiple = FALSE, - default_text = "Select" -)- -
| input_id | -Input name. Reactive value is available under input[[input_id]]. |
-
|---|---|
| search_api_url | -Register API url with server JSON Response containing -fields `name` and `value`. |
-
| multiple | -TRUE if the dropdown should allow multiple selections, -FALSE otherwise (default FALSE). |
-
| default_text | -Text to be visible on dropdown when nothing is selected. -#'@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) |
-
R/semantic_search.R
- search_selection_choices.RdDefine the (multiple) search selection dropdown input component serving -search options using provided choices.
-search_selection_choices( - input_id, - choices, - value = NULL, - multiple = FALSE, - default_text = "Select", - groups = NULL, - dropdown_settings = list(forceSelection = FALSE) -)- -
| input_id | -Input name. Reactive value is available under input[[input_id]]. |
-
|---|---|
| choices | -Vector or a list of choices to search through. |
-
| value | -String with default values to set when initialize the component. -Values should be delimited with a comma when multiple to set. Default NULL. |
-
| multiple | -TRUE if the dropdown should allow multiple selections, -FALSE otherwise (default FALSE). |
-
| default_text | -Text to be visible on dropdown when nothing is selected. |
-
| groups | -Vector of length equal to choices, specifying to which group the choice belongs. -Specifying the parameter enables group dropdown search implementation. |
-
| dropdown_settings | -Settings passed to dropdown() semantic-ui method. -See https://semantic-ui.com/modules/dropdown.html#/settings |
-
-## 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) -}
This creates a segment using Semantic UI styles.
-segment(..., class = "")- -
| ... | -Other arguments to be added as attributes of the -tag (e.g. style, class or childrens etc.) |
-
|---|---|
| class | -Additional classes to add to html tag. |
-
-## 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 that can be used to choose a single or multiple items from a list of values.
-selectInput( - inputId, - label, - choices, - selected = NULL, - multiple = FALSE, - width = NULL, - ... -)- -
| inputId | -The input slot that will be used to access the value. |
-
|---|---|
| label | -Display label for the control, or NULL for no label. |
-
| choices | -List of values to select from. If elements of the list are named, -then that name — rather than the value — is displayed to the user. |
-
| selected | -The initially selected value (or multiple values if multiple = TRUE). -If not specified then defaults to the first value for single-select lists and no -values for multiple select lists. |
-
| multiple | -Is selection of multiple items allowed? |
-
| width | -The width of the input. |
-
| ... | -Arguments passed to dropdown_input. |
-
-## 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) - } - ) -}
This creates a Semantic page for use in a Shiny app.
-semanticPage( - ..., - title = "", - theme = NULL, - suppress_bootstrap = TRUE, - margin = "10px" -)- -
| ... | -Other arguments to be added as attributes of the main div tag -wrapper (e.g. style, class etc.) |
-
|---|---|
| title | -A title to display in the browser's title bar. |
-
| theme | -Theme name or path. Full list of supported themes you will find in
- |
-
| suppress_bootstrap | -boolean flag that supresses bootstrap when turned on |
-
| margin | -character with body margin size |
-
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.
-## 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) -}
This creates DT table styled with Semantic UI.
-semantic_DT(..., options = list())- -
| ... | -datatable parameters, check |
-
|---|---|
| options | -datatable options, check |
-
-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
-semantic_DTOutput(...)- -
| ... | -datatable parameters, check |
-
|---|
DT Output with semanitc style
- -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.
-There are a number of global options that affect shiny.semantic as well as -Shiny behavior.The options can be set globally with `options()`
This controls from where the css -and javascripts will be downloaded.
This allows to use only local dependency.
This allows to set custom local path -to semantic dependencies.
Defines including JavaScript as a minified or -un-minified file.
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".
-shiny_input(input_id, shiny_ui, value = NULL, type = "JSON")- -
| input_id | -String with name of this input. Access to this input within server code is normal with -input[[input_id]]. |
-
|---|---|
| shiny_ui | -UI of HTML component presenting this input to the users. This UI should allow to extract its value -with jQuery $().val() function. |
-
| value | -An optional argument with value that should be set for this input. Can be used to store persisten input -valus in dynamic UIs. |
-
| type | -Type of input value (could be "JSON" or "text"). |
-
-
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.
-shiny_text_input(...)- -
| ... | -Possible arguments are the same as in shiny_input() method: -input_id, shiny_ui, value. Type is already predefined as "text" |
-
|---|
-
This displays a hidden Semantic UI modal.
-show_modal(id, session = shiny::getDefaultReactiveDomain()) - -remove_modal(id, session = shiny::getDefaultReactiveDomain()) - -remove_all_modals(session = shiny::getDefaultReactiveDomain()) - -removeModal(session = shiny::getDefaultReactiveDomain()) - -hide_modal(id, session = shiny::getDefaultReactiveDomain())- -
| id | -ID of the modal that will be displayed. |
-
|---|---|
| session | -The |
-
modal
R/layouts.R
- sidebar_layout.RdCreates div containing children elements of sidebar panel
-Creates div containing children elements of main panel
-Creates grid layout composed of sidebar and main panels
-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 -)- -
| ... | -Container's children elements |
-
|---|---|
| width | -Width of main panel container as relative value |
-
| sidebar_panel | -Sidebar panel component |
-
| main_panel | -Main panel component |
-
| mirrored | -If TRUE sidebar is located on the right side, -if FALSE - on the left side (default) |
-
| min_height | -Sidebar layout container keeps the minimum height, if -specified. It should be formatted as a string with css units |
-
| container_style | -CSS declarations for grid container |
-
| area_styles | -List of CSS declarations for each grid area inside |
-
| sidebarPanel | -same as |
-
| mainPanel | -same as |
-
| position | -vector with position of sidebar elements in order sidebar, main |
-
| fluid | -TRUE to use fluid layout; FALSE to use fixed layout. |
-
Container with sidebar and main panels
- --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) -}
Create Semantic UI checkbox
-simple_checkbox( - input_id, - label = "", - type = NULL, - is_marked = TRUE, - style = NULL -) - -toggle(input_id, label = "", is_marked = TRUE, style = NULL)- -
| input_id | -Input name. Reactive value is available under input[[name]]. |
-
|---|---|
| label | -Text to be displayed with checkbox. |
-
| type | -Type of checkbox: NULL, 'toggle' |
-
| is_marked | -Defines if checkbox should be marked. Default TRUE. |
-
| style | -Style of the widget. |
-
The inputs are updateable by using updateCheckboxInput.
The following types are allowed:
NULLThe standard checkbox (default)
toggleEach checkbox has a toggle form
sliderEach checkbox has a simple slider form
-simple_checkbox("example", "Check me", is_marked = FALSE)#> <div class="ui checkbox"> -#> <input id="example" type="checkbox"/> -#> <label>Check me</label> -#> </div>-if (interactive()){ -ui <- semanticPage( - shinyUI( - toggle("tog1", "My Label", TRUE) - ) -) -server <- function(input, output, session) { - observeEvent(input$tog1, { - print(input$tog1) - }) -} -shinyApp(ui, server) -}
This creates a slider input using Semantic UI. Slider is already initialized and
-available under input[[input_id]]. Use Range for range of values.
slider_input(input_id, value, min, max, step = 1, class = "labeled") - -sliderInput(inputId, label, min, max, value, step = 1, width = NULL, ...) - -range_input(input_id, value, value2, min, max, step = 1, class = NULL)- -
| input_id | -Input name. Reactive value is available under |
-
|---|---|
| value | -The initial value to be selected for the sldier (lower value if using range). |
-
| min | -The minimum value allowed to be selected for the slider. |
-
| max | -The maximum value allowed to be selected for the slider. |
-
| step | -The interval between each selectable value of the slider. |
-
| class | -UI class of the slider. Can include |
-
| inputId | -Input name. |
-
| label | -Display label for the control, or NULL for no label. |
-
| width | -character with width of slider. |
-
| ... | -additional arguments |
-
| value2 | -The initial upper value of the slider. |
-
Use update_slider to update the slider/range within the shiny session.
update_slider for input updates, -https://fomantic-ui.com/modules/slider.html for preset classes.
-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) - } - if (interactive()) { # 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) - }
Lays out elements horizontally, dividing the available horizontal space into -equal parts (by default) or specified by parameters.
-split_layout(..., cell_widths = NULL, cell_args = "", style = NULL) - -splitLayout(..., cellWidths = NULL, cellArgs = "", style = NULL)- -
| ... | -Unnamed arguments will become child elements of the layout. |
-
|---|---|
| cell_widths | -Character or numeric vector indicating the widths of the -individual cells. Recycling will be used if needed. |
-
| cell_args | -character with additional attributes that should be used for -each cell of the layout. |
-
| style | -character with style of outer box surrounding all elements |
-
| cellWidths | -same as |
-
| cellArgs | -same as |
-
split layout grid object
- --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) -}
This creates tabs with content using Semantic UI styles.
-tabset( - tabs, - active = NULL, - id = generate_random_id("menu"), - menu_class = "top attached tabular", - tab_content_class = "bottom attached grid segment" -)- -
| tabs | -A list of tabs. Each tab is a list of three elements - first -element defines menu item, second element defines tab content, third optional element defines tab id. |
-
|---|---|
| active | -Id of the active tab. If NULL first tab will be active. |
-
| id | -Id of the menu element (default: randomly generated id) |
-
| menu_class | -Class for the menu element (default: "top attached -tabular") |
-
| tab_content_class | -Class for the tab content (default: "bottom attached -segment") |
-
You may access active tab id with input$<id>.
update_tabset
-## 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 text area input control for entry of unstructured text values.
-textAreaInput(inputId, label, value = "", width = NULL, placeholder = NULL)- -
| inputId | -Input name. Reactive value is available under |
-
|---|---|
| label | -character with label put above the input |
-
| value | -Pass value if you want to have default text. |
-
| width | -The width of the input, eg. "40px" |
-
| placeholder | -Text visible in the input when nothing is inputted. |
-
-## Only run examples in interactive R sessions -if (interactive()) { -ui <- semanticPage( - textAreaInput("a", "Area:", width = "200px"), - verbatimTextOutput("value") -) -server <- function(input, output, session) { - output$value <- renderText({ input$a }) -} -shinyApp(ui, server) -}
This creates a default text input using Semantic UI. The input is available
-under input[[input_id]].
text_input( - input_id, - label = NULL, - value = "", - type = "text", - placeholder = NULL, - attribs = list() -) - -textInput( - inputId, - label, - value = "", - width = NULL, - placeholder = NULL, - type = "text" -)- -
| input_id | -Input name. Reactive value is available under |
-
|---|---|
| label | -character with label put on the left from the input |
-
| value | -Pass value if you want to have default text. |
-
| type | -Change depending what type of input is wanted. See details for options. |
-
| placeholder | -Text visible in the input when nothing is inputted. |
-
| attribs | -A named list of attributes to assign to the input. |
-
| inputId | -Input name. The same as |
-
| width | -The width of the input, eg. "40px" |
-
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".
-## 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
-theme_selector(input_id = "theme", label = "Choose theme")- -
| input_id | -Id of dropdown. |
-
|---|---|
| label | -Dropdown label. |
-
--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) -}
These functions either create or remove a toast notifications with Semantic UI styling.
-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())- -
| message | -Content of the message. |
-
|---|---|
| title | -A title given to the toast. Defauly is empty ( |
-
| action | -A list of lists containing settings for buttons/options to select within the |
-
| duration | -Length in seconds for the toast to appear, default is 3 seconds. To make it not automatically close, -set to 0. |
-
| id | -A unique identifier for the notification. It is optional for |
-
| class | -Classes except "ui toast" to be added to the toast. Semantic UI classes can be used. Default "". |
-
| toast_tags | -Other toast elements. Default NULL. |
-
| session | -Session object to send notification to. |
-
| ui | -Content of the toast. |
-
| closeButton | -Logical, should a close icon appear on the toast? |
-
| type | -Type of toast |
-
| ... | -Arguments that can be passed to |
-
-## 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)
This creates an input shell for the actual input
-uiinput(..., class = "")- -
| ... | -Other arguments to be added as attributes of the tag (e.g. style, class or childrens etc.) |
-
|---|---|
| class | -Additional classes to add to html tag. |
-
text_input
-#' ## 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) -}
htmlwidget that adds semanticui dependencies and -renders in viewer or rmarkdown.
-uirender(ui, width = NULL, height = NULL, element_id = NULL)- -
| ui | -UI, which will be wraped in an htmlwidget. |
-
|---|---|
| width | -Fixed width for widget (in css units). The default is NULL, -which results in intelligent automatic sizing. |
-
| height | -Fixed height for widget (in css units). The default is NULL, -which results in intelligent automatic sizing. |
-
| element_id | -Use an explicit element ID for the widget -(rather than an automatically generated one). |
-
-
R/button.R
- updateActionButton.RdChange the label or icon of an action button on the client
-updateActionButton(session, inputId, label = NULL, icon = NULL)- -
| session | -The session object passed to function given to shinyServer. |
-
|---|---|
| inputId | -The id of the input object. |
-
| label | -The label to set for the input object. |
-
| icon | -The icon to set for the input object. To remove the current icon, use icon=character(0) |
-
--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) -}
Change numeric input value and settings
-updateNumericInput( - session, - inputId, - label = NULL, - value = NULL, - min = NULL, - max = NULL, - step = NULL -)- -
| session | -The session object passed to function given to shinyServer. |
-
|---|---|
| inputId | -The id of the input object. |
-
| label | -The label to set for the input object. |
-
| value | -The value to set for the input object. |
-
| min | -Minimum value. |
-
| max | -Maximum value. |
-
| step | -Step size. |
-
Update selecInput widget
-updateSelectInput(session, inputId, label, choices = NULL, selected = NULL)- -
| session | -The session object passed to function given to shinyServer. |
-
|---|---|
| inputId | -The id of the input object. |
-
| label | -The label to set for the input object. |
-
| choices | -List of values to select from. If elements of the list are named, -then that name — rather than the value — is displayed to the user. |
-
| selected | -The initially selected value (or multiple values if multiple = TRUE). -If not specified then defaults to the first value for single-select lists and no -values for multiple select lists. |
-
-## 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) -}
R/button.R
- update_action_button.RdChange the label or icon of an action button on the client
-update_action_button(session, input_id, label = NULL, icon = NULL) - -updateActionButton(session, inputId, label = NULL, icon = NULL)- -
| session | -The session object passed to function given to shinyServer. |
-
|---|---|
| input_id | -The id of the input object. |
-
| label | -The label to set for the input object. |
-
| icon | -The icon to set for the input object. To remove the current icon, use icon=character(0) |
-
| inputId | -the same as |
-
--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) -}
Change the value of a dropdown_input input on the client.
Change the value of a dropdown_input input on the client.
update_dropdown( - session, - input_id, - choices = NULL, - choices_value = choices, - value = NULL -)- -
| session | -The |
-
|---|---|
| input_id | -The id of the input object |
-
| choices | -All available options one can select from. If no need to update then leave as |
-
| choices_value | -What reactive value should be used for corresponding choice. |
-
| value | -The initially selected value. |
-
-if (interactive()) { - -library(shiny) -library(shiny.semantic) - -ui <- function() { - shinyUI( - 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 <- shinyServer(function(input, output, session) { - output$selected_letter <- renderText(paste(input[["simple_dropdown"]], collapse = ", ")) - - observeEvent(input$simple_button, { - update_dropdown(session, "simple_dropdown", value = "D") - }) -}) - -shinyApp(ui = ui(), server = server) - -}
Change the value of a dropdown_input input on the client.
update_dropdown_input( - session, - input_id, - choices = NULL, - choices_value = choices, - value = NULL -)- -
| session | -The |
-
|---|---|
| input_id | -The id of the input object |
-
| choices | -All available options one can select from. If no need to update then leave as |
-
| choices_value | -What reactive value should be used for corresponding choice. |
-
| value | -The initially selected value. |
-
-if (interactive()) { - -library(shiny) -library(shiny.semantic) - -ui <- function() { - shinyUI( - 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 <- shinyServer(function(input, output, session) { - output$selected_letter <- renderText(paste(input[["simple_dropdown"]], collapse = ", ")) - - observeEvent(input$simple_button, { - update_dropdown(session, "simple_dropdown", value = "D") - }) -}) - -shinyApp(ui = ui(), server = server) - -}
Change numeric input value and settings
-update_numeric_input( - session, - input_id, - label = NULL, - value = NULL, - min = NULL, - max = NULL, - step = NULL -) - -updateNumericInput( - session, - inputId, - label = NULL, - value = NULL, - min = NULL, - max = NULL, - step = NULL -)- -
| session | -The session object passed to function given to shinyServer. |
-
|---|---|
| input_id | -The id of the input object. |
-
| label | -The label to set for the input object. |
-
| value | -The value to set for the input object. |
-
| min | -Minimum value. |
-
| max | -Maximum value. |
-
| step | -Step size. |
-
| inputId | -the same as |
-
-## 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) -}
Change the value of a progress input on the client.
update_progress( - session, - input_id, - type = c("increment", "decrement", "label", "value"), - value = 1 -)- -
| session | -The |
-
|---|---|
| input_id | -The id of the input object |
-
| type | -Whether you want to increase the progress bar ( |
-
| value | -The value to increase/decrease by, or the value to be set to |
-
Change the value of a rating input on the client. Check
-rating_input to learn more.
update_rating_input(session, input_id, label = NULL, value = NULL)- -
| session | -shiny object with session info |
-
|---|---|
| input_id | -rating input name |
-
| label | -character with updated label |
-
| value | -new rating value |
-
-## 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) -}
R/rating.R
- update_rating_input.RdR/dsl.R
- label_tag.RdR/rating.R
- update_rating_input.RdChange the value of a rating input on the client. Check
-rating_input to learn more.
update_rating_input(session, name, label = NULL, value = NULL)-======= -
label_tag(..., class = "", is_link = TRUE)->>>>>>> develop:docs/reference/label_tag.html -======= -
update_rating_input(session, name, label = NULL, value = NULL)->>>>>>> develop - -
| session | -shiny object with session info |
- ||||
|---|---|---|---|---|---|
| name | -rating input name |
-=======
- class | -class of the label. Look at https://semantic-ui.com/elements/label.html for all possibilities. |
->>>>>>> develop:docs/reference/label_tag.html
-=======
- name | -rating input name |
->>>>>>> develop
-
| label | -character with updated label |
- ||||
| value | -new rating value |
-
Change the value of a slider_input input on the client.
update_slider(session, input_id, value) - -update_range_input(session, input_id, value, value2) - -updateSliderInput(session, inputId, value, ...)- -
| session | -The |
-
|---|---|
| input_id | -The id of the input object |
-
| value | -The value to be selected for the sldier (lower value if using range). |
-
| value2 | -The upper value of the range. |
-
| inputId | -Input name. |
-
| ... | -additional arguments |
-
slider_input
-## 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 select tab of a tabset on the client
-update_tabset(session, input_id, selected = NULL)- -
| session | -The session object passed to function given to shinyServer. |
-
|---|---|
| input_id | -The id of the tabset object. |
-
| selected | -The id of the tab to be selected. |
-
-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) -}
Lays out elements vertically, one by one below one another.
-vertical_layout( - ..., - rows_heights = NULL, - cell_args = "", - adjusted_to_page = TRUE -) - -verticalLayout(..., fluid = NULL)- -
| ... | -Unnamed arguments will become child elements of the layout. |
-
|---|---|
| rows_heights | -Character or numeric vector indicating the widths of the -individual cells. Recycling will be used if needed. |
-
| cell_args | -character with additional attributes that should be used for -each cell of the layout. |
-
| adjusted_to_page | -if TRUE it adjust elements position in equal spaces to -the size of the page |
-
| fluid | -not supported yet (here for consistency with |
-
vertical layout grid object
- --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) { }) -}
Reports progress to the user during long-running operations.
-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(), - ... -)- -
| expr | -The work to be done. This expression should contain calls to -`set_progress`. |
-
|---|---|
| min | -The value that represents the starting point of the progress bar. -Must be less tham `max`. Default is 0. |
-
| max | -The value that represents the end of the progress bar. Must be -greater than `min`. Default is 1. |
-
| value | -Single-element numeric vector; the value at which to set the -progress bar, relative to `min` and `max`. |
-
| message | -A single-element character vector; the message to be displayed -to the user, or `NULL` to hide the current message (if any). |
-
| session | -The Shiny session object, as provided by `shinyServer` to -the server function. The default is to automatically find the session by -using the current reactive domain. |
-
| env | -The environment in which `expr` should be evaluated. |
-
| quoted | -Whether `expr` is a quoted expression (this is not -common). |
-
| ... | -Arguments that may have been used in `shiny::withProgress` |
-
| amount | -For `inc_progress`, the amount to increment the status bar. -Default is 0.1. |
-
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`.
-[Progress()]
-## 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) -}