Question

我正在使用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。解决方法将相同。

Answer 1

我不确定auth0:logoutButton()的HTML确切是什么，但是您可以通过在最后一个{{之后添加HTML脚本，在navbarPage的右上角添加一个操作按钮。 1}}像这样：

tabPanel

请注意：此代码调用了未定义的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()的行为以匹配您要执行的操作。

Answer 2

您可以将其包装在div中并使用CSS：

library(shiny)
library(markdown)
library(auth0)

ui <- navbarPage("Navbar!",
                 tabPanel("Plot",
                          sidebarLayout(
                            sidebarPanel(
                              radioButtons("plotType", "Plot type",
                                           c("Scatter"="p", "Line"="l")
                              )
                            ),
                            mainPanel(
                              plotOutput("plot")
                            )
                          )
                 ),
                 tabPanel("Summary",
                          verbatimTextOutput("summary")
                 ),
                 tabPanel("Log-out",
                          div(logoutButton(), style="float:right")
                 )

)



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)

Answer 3

如果您更喜欢使用闪亮的函数 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")
)

导航栏页面右侧的添加操作按钮

3 个答案: