# Example 1
library(shiny)
library(shiny.fluent)
tokens <- list(childrenGap = 20)
ui <- function(id) {
ns <- NS(id)
tags$div(
Stack(
DefaultButton.shinyInput(
ns("button1"),
text = "Default Button",
styles = list("background: green")
),
PrimaryButton.shinyInput(
ns("button2"),
text = "Primary Button"
),
CompoundButton.shinyInput(
ns("button3"),
secondaryText = "Compound Button has additional text",
text = "Compound Button"
),
ActionButton.shinyInput(
ns("button4"),
iconProps = list("iconName" = "AddFriend"),
text = "Action Button"
),
horizontal = TRUE,
tokens = tokens
),
textOutput(ns("text"))
)
}
server <- function(id) {
moduleServer(id, function(input, output, session) {
clicks <- reactiveVal(0)
addClick <- function() { clicks(isolate(clicks() + 1)) }
observeEvent(input$button0, addClick())
observeEvent(input$button1, addClick())
observeEvent(input$button2, addClick())
observeEvent(input$button3, addClick())
observeEvent(input$button4, addClick())
output$text <- renderText({
paste0("Clicks:", clicks())
})
})
}
if (interactive()) {
shinyApp(ui("app"), function(input, output) server("app"))
}
# Example 2
library(shiny)
library(shiny.fluent)
# Split button with menu
menuProps <- list(
items = list(
list(
key = "emailMessage",
text = "Email message",
onClick = JS("() => alert('Email message clicked')"),
iconProps = list(
iconName = "Mail"
)
),
list(
key = "calendarEvent",
text = "Calendar event",
onClick = JS("() => alert('Calendar event clicked')"),
iconProps = list(
iconName = "Calendar"
)
)
)
)
ui <- function(id) {
ns <- NS(id)
fluentPage(
Stack(
horizontal = TRUE,
wrap = TRUE,
tokens = list(
childrenGap = 40
),
DefaultButton.shinyInput(
inputId = ns("button_1"),
text = "Standard",
primary = FALSE,
split = TRUE,
splitButtonAriaLabel = "See 2 options",
`aria-roledescription` = "split button",
menuProps = menuProps,
disabled = FALSE,
checked = FALSE
),
DefaultButton.shinyInput(
inputId = ns("button_2"),
text = "Primary",
primary = TRUE,
split = TRUE,
splitButtonAriaLabel = "See 2 options",
`aria-roledescription` = "split button",
menuProps = menuProps,
disabled = FALSE,
checked = FALSE
),
DefaultButton.shinyInput(
inputId = ns("button_3"),
text = "Main action disabled",
primaryDisabled = NA,
split = TRUE,
splitButtonAriaLabel = "See 2 options",
`aria-roledescription` = "split button",
menuProps = menuProps,
checked = FALSE
),
DefaultButton.shinyInput(
inputId = ns("button_4"),
text = "Disabled",
disabled = TRUE,
split = TRUE,
splitButtonAriaLabel = "See 2 options",
`aria-roledescription` = "split button",
menuProps = menuProps,
checked = FALSE
)
),
uiOutput(ns("text"))
)
}
server <- function(id) {
moduleServer(id, function(input, output, session) {
output$text <- renderUI({
lapply(seq_len(4), function(i) {
paste0("button_", i, ": ", input[[paste0("button_", i)]])
})
})
})
}
if (interactive()) {
shinyApp(ui("app"), function(input, output) server("app"))
}
# Example 3
library(shiny)
library(shiny.fluent)
library(shinyjs)
# This example app shows how to use a Fluent UI Button to trigger a file upload.
# File upload is not natively supported by shiny.fluent so shinyjs is used
# to trigger the file upload input.
ui <- function(id) {
ns <- NS(id)
fluentPage(
useShinyjs(),
Stack(
tokens = list(
childrenGap = 10L
),
horizontal = TRUE,
DefaultButton.shinyInput(
inputId = ns("uploadFileButton"),
text = "Upload File",
iconProps = list(iconName = "Upload")
),
div(
style = "
visibility: hidden;
height: 0;
width: 0;
",
fileInput(
inputId = ns("uploadFile"),
label = NULL
)
)
),
textOutput(ns("file_path"))
)
}
server <- function(id) {
moduleServer(id, function(input, output, session) {
observeEvent(input$uploadFileButton, {
click("uploadFile")
})
output$file_path <- renderText({
input$uploadFile$name
})
})
}
if (interactive()) {
shinyApp(ui("app"), function(input, output) server("app"))
}
# Example 4
library(shiny)
library(shiny.fluent)
library(shinyjs)
# This example app shows how to use a Fluent UI Button to trigger a file download.
# File download is not natively supported by shiny.fluent so shinyjs is used
# to trigger the file download.
ui <- function(id) {
ns <- NS(id)
fluentPage(
useShinyjs(),
DefaultButton.shinyInput(
inputId = ns("downloadButton"),
text = "Download",
iconProps = list(iconName = "Download")
),
div(
style = "visibility: hidden;",
downloadButton(ns("download"), label = "")
)
)
}
server <- function(id) {
moduleServer(id, function(input, output, session) {
observeEvent(input$downloadButton, {
click("download")
})
output$download <- downloadHandler(
filename = function() {
paste("data-", Sys.Date(), ".csv", sep="")
},
content = function(file) {
write.csv(iris, file)
}
)
})
}
if (interactive()) {
shinyApp(ui("app"), function(input, output) server("app"))
}
Run the code above in your browser using DataLab