如何將 ConditionalPanel 中的 actionButton 右對齊？

Question

我正在創建一個 shiny 應用程序，根據您的selectInput ，您是否會看到額外的actionButton 。 為了做到這一點，這個額外的按鈕必須在conditionalPanel內。

我想讓兩個actionButton對齊，左邊是常規的，右邊是額外的。 多虧了這篇文章，我設法將它移到了右側，但它們沒有對齊，正如您在附圖中看到的那樣。

代碼：

library(shiny)
library(shinyWidgets)
library(shinyFeedback)
library(DT)

ui <- fluidPage(
  sidebarPanel(
    useShinyFeedback(),
    selectInput(inputId = "type", label = "Select your data", 
                choices =  c("Data 1" = "data1",
                             "Data 2" = "data2")),
    
    actionButton(
      inputId = "button",
      label = "Submit type of data",
      icon = icon("check")
    ),
    
    conditionalPanel(
      condition = "input.type == 'data2'",
      div(style = "position:absolute;right:1em;",
        actionButton(
          inputId = "button_more_info_data2",
          label = "More info",
          icon = icon("info-circle"))
      )
    )
    
  ),
  mainPanel(
    dataTableOutput("table")
  )
)

server <- function(input, output, session) {
  
  observeEvent(input$button, {
    if(input$type == "data2"){
      show_alert(
        title = "Are you sure?",
        text = HTML("This data is....<br>Please, be careful with..."),
        type = "warning",
        html = TRUE
      )
      
    }else{
      show_alert(
        title = "OK",
        text = "You don't have to do anything",
        type = "success"
      )
    }
  })
  
  observeEvent(input$type,{
    feedbackWarning(inputId = "type",
                    show = ("data2" %in% input$type),
                    text ="This data is... Please, be careful..."
    )
  })
  
  mydata <- reactive({
    if(input$type == "data1"){
      mtcars
    }else{
      iris
    }
      
    }) %>% bindEvent(input$button)
  
  output$table <- renderDataTable(mydata())
}

if (interactive())
  shinyApp(ui, server)

我還嘗試了他們的回答：

1-這篇文章，但它對我不起作用，因為我不使用列。

conditionalPanel(
   condition = "input.type == 'data2'",
     actionButton(
                  inputId = "button_more_info_data2",
                  label = "More info",
                  icon = icon("info-circle"),
                  style = 'margin-top:25px'
        )
    )

2-這兩個來自這篇文章：

conditionalPanel(
      condition = "input.type == 'data2'",
      div(style="display:inline-block",
        actionButton(
          inputId = "button_more_info_data2",
          label = "More info",
          icon = icon("info-circle"),
          style="float:right")
      )
    )

 conditionalPanel(
      condition = "input.type == 'data2'",
      div(style = "display:inline-block; float:right",
        actionButton(
          inputId = "button_more_info_data2",
          label = "More info",
          icon = icon("info-circle"))
      )
    )

3-這個選項（但我認為它取決於另一個actionButton ，它對我不起作用）。

conditionalPanel(
          condition = "input.type == 'data2'",
          div(style = "display:inline-block",
            actionButton(
              inputId = "button_more_info_data2",
              label = "More info",
              icon = icon("info-circle"))
          )
        )

有誰知道如何讓兩個actionButton對齊？

提前致謝

Answer 1

我偶然找到了解決方案。

conditionalPanel的順序必須在常規actionButton之前移動，而不是寫 1em，而是 2.5em 使按鈕和selectInput對齊。

library(shiny)
library(shinyWidgets)
library(shinyFeedback)
library(DT)

ui <- fluidPage(
  sidebarPanel(
    useShinyFeedback(),
    selectInput(inputId = "type", label = "Select your data", 
                choices =  c("Data 1" = "data1",
                             "Data 2" = "data2")),
    conditionalPanel(
      condition = "input.type == 'data2'",
      div(style = "position:absolute;right:2.5em;",
          actionButton(
            inputId = "button_more_info_data2",
            label = "More info",
            icon = icon("info-circle"))
      )
    ),
    
    actionButton(
      inputId = "button",
      label = "Submit type of data",
      icon = icon("check")
    ),
    
   
    
  ),
  mainPanel(
    dataTableOutput("table")
  )
)

server <- function(input, output, session) {
  
  observeEvent(input$button, {
    if(input$type == "data2"){
      show_alert(
        title = "Are you sure?",
        text = HTML("This data is....<br>Please, be careful with..."),
        type = "warning",
        html = TRUE
      )
      
    }else{
      show_alert(
        title = "OK",
        text = "You don't have to do anything",
        type = "success"
      )
    }
  })
  
  observeEvent(input$type,{
    feedbackWarning(inputId = "type",
                    show = ("data2" %in% input$type),
                    text ="This data is... Please, be careful..."
    )
  })
  
  mydata <- reactive({
    if(input$type == "data1"){
      mtcars
    }else{
      iris
    }
    
  }) %>% bindEvent(input$button)
  
  output$table <- renderDataTable(mydata())
}

if (interactive())
  shinyApp(ui, server)

shinyApp(ui, server)

Answer 2

這是一種使用column()構造的方法：

library(shiny)
library(shinyWidgets)
library(shinyFeedback)
library(DT)

ui <- fluidPage(
  useShinyFeedback(),
  sidebarPanel(
    selectInput(
      inputId = "type",
      label = "Select your data",
      choices =  c("Data 1" = "data1",
                   "Data 2" = "data2")
    ),
    fluidRow(
      column(4,
        actionButton(
          inputId = "button",
          label = "Submit type of data",
          icon = icon("check"),
          width = "100%"
        )
      ),
      column(4,
        conditionalPanel(
          condition = "input.type == 'data2'",
          actionButton(
            inputId = "button_more_info_data2",
            label = "More info",
            icon = icon("info-circle"),
            width = "100%"
          )
        ),
        offset = 4
      )
    )
  ),
  mainPanel(dataTableOutput("table"))
)

server <- function(input, output, session) {
  observeEvent(input$button, {
    if (input$type == "data2") {
      show_alert(
        title = "Are you sure?",
        text = HTML("This data is....<br>Please, be careful with..."),
        type = "warning",
        html = TRUE
      )
    } else{
      show_alert(title = "OK",
                 text = "You don't have to do anything",
                 type = "success")
    }
  })
  
  observeEvent(input$type, {
    feedbackWarning(
      inputId = "type",
      show = ("data2" %in% input$type),
      text = "This data is... Please, be careful..."
    )
  })
  mydata <- reactive({
    if (input$type == "data1") {
      mtcars
    } else{
      iris
    }
    
  }) %>% bindEvent(input$button)
  output$table <- renderDataTable(mydata())
}

if (interactive())
  shinyApp(ui, server)

---

另一個使用splitLayout ：

library(shiny)
library(shinyWidgets)
library(shinyFeedback)
library(DT)

ui <- fluidPage(
  useShinyFeedback(),
  sidebarPanel(
    selectInput(
      inputId = "type",
      label = "Select your data",
      choices =  c("Data 1" = "data1",
                   "Data 2" = "data2")
    ),
    splitLayout(cellWidths = c("45%", "10%", "calc(45% - 8px)"), actionButton(
      inputId = "button",
      label = "Submit type of data",
      icon = icon("check"),
      width = "100%"
    ),
    div(),
    conditionalPanel(
      condition = "input.type == 'data2'",
      actionButton(
        inputId = "button_more_info_data2",
        label = "More info",
        icon = icon("info-circle"),
        width = "100%"
      )
    ))
  ),
  mainPanel(dataTableOutput("table"))
)

server <- function(input, output, session) {
  observeEvent(input$button, {
    if (input$type == "data2") {
      show_alert(
        title = "Are you sure?",
        text = HTML("This data is....<br>Please, be careful with..."),
        type = "warning",
        html = TRUE
      )
    } else{
      show_alert(title = "OK",
                 text = "You don't have to do anything",
                 type = "success")
    }
  })
  
  observeEvent(input$type, {
    feedbackWarning(
      inputId = "type",
      show = ("data2" %in% input$type),
      text = "This data is... Please, be careful..."
    )
  })
  mydata <- reactive({
    if (input$type == "data1") {
      mtcars
    } else{
      iris
    }
    
  }) %>% bindEvent(input$button)
  output$table <- renderDataTable(mydata())
}

if (interactive())
  shinyApp(ui, server)

Answer 3

您可以根據需要將column()中的屬性align設置為左或右：

library(shiny)
library(shinyWidgets)
library(shinyFeedback)
library(DT)

ui <- fluidPage(
  useShinyFeedback(),
  sidebarPanel(
    selectInput(
      inputId = "type",
      label = "Select your data",
      choices =  c("Data 1" = "data1",
                   "Data 2" = "data2")
    ),
    fluidRow(
      column(
        width = 6,
        align = "left", 
        
        actionButton(
          inputId = "button",
          label = "Submit type of data",
          icon = icon("check"),
          width = "100%"
        )
      ),
      column(
        width = 6, 
        align = "right", 
        
        conditionalPanel(
          condition = "input.type == 'data2'",
          actionButton(
            inputId = "button_more_info_data2",
            label = "More info",
            icon = icon("info-circle"),
            width = "100%"
          )
        )
      )
    )
  ),
  mainPanel(dataTableOutput("table"))
)

server <- function(input, output, session) {
  observeEvent(input$button, {
    if (input$type == "data2") {
      show_alert(
        title = "Are you sure?",
        text = HTML("This data is....<br>Please, be careful with..."),
        type = "warning",
        html = TRUE
      )
    } else{
      show_alert(title = "OK",
                 text = "You don't have to do anything",
                 type = "success")
    }
  })
  
  observeEvent(input$type, {
    feedbackWarning(
      inputId = "type",
      show = ("data2" %in% input$type),
      text = "This data is... Please, be careful..."
    )
  })
  mydata <- reactive({
    if (input$type == "data1") {
      mtcars
    } else{
      iris
    }
    
  }) %>% bindEvent(input$button)
  output$table <- renderDataTable(mydata())
}

if (interactive())
  shinyApp(ui, server)