如何在Shiny的tabsetPanel标题行添加右对齐的输入控件？

方案一：与tabsetPanel标题行同一行并右对齐 #

通过Bootstrap栅格系统（fluidRow+column）布局，将toggle开关与tabs放在同一行并靠右对齐，确保视觉上与tabs标题行高度匹配：

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  titlePanel("Data Availability Browser"),
  htmlOutput("intro"),
  
  # 用fluidRow和column实现toggle与tabs同行布局
  fluidRow(
    # 左侧9列放tabs
    column(9, 
           tabsetPanel(
             id = "mainTabs",
             tabPanel(
               title = "Tab 1: Plot",
               panel(
                 heading = "my header",
                 h4("Interactive Plot"),
                 plotOutput("myPlot")
               )
             ),
             tabPanel(
               title = "Tab 2: Summary",
               h4("Data Summary"),
               verbatimTextOutput("mySummary")
             ),
             tabPanel(
               title = "Tab 3: Table",
               h4("Data Table"),
               tableOutput("myTable")
             )
           )
    ),
    # 右侧3列放toggle，调整顶部间距并右对齐
    column(3, 
           style = "margin-top: 10px; text-align: right;",
           shinyWidgets::materialSwitch("toggle", 
                                       label = "Toggle label", 
                                       value = TRUE)
    )
  )
)

server <- function(input, output) {
  output$intro <- renderUI({
    tags$p("Some introductory text and links to resources.",
           "The tabs will be below this content.",
           "Ideally, the toggle switch will be in line with the tabs OR in the panel header",
           tags$b("Current value of toggle is", input$toggle))  
  })
  
  output$myPlot <- renderPlot({
    hist(rnorm(100), main = "Histogram of Random Data")
  })
  
  output$mySummary <- renderPrint({
    summary(mtcars)
  })
  
  output$myTable <- renderTable({
    head(iris)
  })
}

shinyApp(ui = ui, server = server)

方案二：放置在tabPanel的面板标题中并右对齐 #

将toggle嵌入目标tab的标题容器内，通过CSS浮动属性实现右对齐，避免与标题文本重叠：

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  titlePanel("Data Availability Browser"),
  htmlOutput("intro"),
  
  tabsetPanel(
    id = "mainTabs",
    tabPanel(
      # 自定义tab标题容器，包含文本和toggle
      title = tags$div(
        "Tab 1: Plot",
        style = "display: inline-block; width: 100%;",
        tags$div(
          style = "float: right; margin-left: 20px;", # 右浮动并添加左侧间距
          shinyWidgets::materialSwitch("toggle", 
                                      label = "Toggle label", 
                                      value = TRUE)
        )
      ),
      panel(
        heading = "my header",
        h4("Interactive Plot"),
        plotOutput("myPlot")
      )
    ),
    tabPanel(
      title = "Tab 2: Summary",
      h4("Data Summary"),
      verbatimTextOutput("mySummary")
    ),
    tabPanel(
      title = "Tab 3: Table",
      h4("Data Table"),
      tableOutput("myTable")
    )
  )
)

server <- function(input, output) {
  output$intro <- renderUI({
    tags$p("Some introductory text and links to resources.",
           "The tabs will be below this content.",
           "Ideally, the toggle switch will be in line with the tabs OR in the panel header",
           tags$b("Current value of toggle is", input$toggle))  
  })
  
  output$myPlot <- renderPlot({
    hist(rnorm(100), main = "Histogram of Random Data")
  })
  
  output$mySummary <- renderPrint({
    summary(mtcars)
  })
  
  output$myTable <- renderTable({
    head(iris)
  })
}

shinyApp(ui = ui, server = server)

内容的提问来源于stack exchange，提问作者Judy