在导航栏页面右侧添加操作按钮答案

【问题标题】：Add action button on the right side of navbar page在导航栏页面右侧添加操作按钮
【发布时间】：2023-03-04 02:43:01
【问题描述】：

我正在使用 auth0 包进行闪亮的身份验证。包中包含auth0::logoutButton()。我想将这些按钮放在 Shiny 应用程序中 NavbarPage 的右侧。这是一个简单的应用程序：

library(shiny)
library(markdown)

ui <- navbarPage("Navbar!",
                 tabPanel("Plot",
                          sidebarLayout(
                            sidebarPanel(
                              radioButtons("plotType", "Plot type",
                                           c("Scatter"="p", "Line"="l")
                              )
                            ),
                            mainPanel(
                              plotOutput("plot")
                            )
                          )
                 ),
                 tabPanel("Summary",
                          verbatimTextOutput("summary")
                 )
                 ###

                 # HERE ADD loginButton() in new panel that will be on the right side for test any actionbutton

                 ###
)



server <- function(input, output, session) {
  output$plot <- renderPlot({
    plot(cars, type=input$plotType)
  })

  output$summary <- renderPrint({
    summary(cars)
  })

  output$table <- DT::renderDataTable({
    DT::datatable(cars)
  })
}

shinyApp(ui = ui, server = server)

您可以尝试使用actionbutton 而不是loginButton。解决方法是一样的。

【问题讨论】：

标签： r shiny

【解决方案1】：

我不确定 auth0:logoutButton() 的 HTML 究竟是什么，但您可以在 navbarPage 的右上角添加一个操作按钮，方法是在最后一个 tabPanel 之后添加一个 HTML 脚本，如下所示：

library(shiny)
library(markdown)

ui <- navbarPage("Navbar!",
                 tabPanel("Plot",
                          sidebarLayout(
                            sidebarPanel(
                              radioButtons("plotType", "Plot type",
                                           c("Scatter"="p", "Line"="l")
                              )
                            ),
                            mainPanel(
                              plotOutput("plot")
                            )
                          )
                 ),
                 tabPanel("Summary",
                          verbatimTextOutput("summary")
                 ),
                 tags$script(
                   HTML("var header = $('.navbar > .container-fluid');
                              header.append('<div style=\"float:right; padding-top: 8px\"><button id=\"signin\" type=\"button\" class=\"btn btn-primary action-button\" onclick=\"signIn()\">Sign In</button></div>')")
                 )
)



server <- function(input, output, session) {
  output$plot <- renderPlot({
    plot(cars, type=input$plotType)
  })

  output$summary <- renderPrint({
    summary(cars)
  })

  output$table <- DT::renderDataTable({
    DT::datatable(cars)
  })
}

注意：此代码调用未定义的 signIn() 函数，因此您需要更改 onclick 行为以匹配您正在尝试执行的操作。

【讨论】：

感谢您的宝贵建议！它对我有帮助，真的。

【解决方案2】：

如果您更喜欢使用闪亮的函数 actionButton 或 actionLink，您可能会发现这很有帮助：


ui <- navbarPage("Navbar!",
                 tabPanel("Plot",
                          sidebarLayout(
                            sidebarPanel(
                              radioButtons("plotType", "Plot type",
                                           c("Scatter"="p", "Line"="l")
                              )
                            ),
                            mainPanel(
                              plotOutput("plot")
                            )
                          )
                 ),
                 tabPanel("Summary",
                          verbatimTextOutput("summary")
                 ),
                 actionLink("signing", "", icon = icon("sign-in-alt"),
                            style = "position: absolute; right: 20px; top: -3px")
)

【讨论】：