如何在Shiny应用页面左上角添加三角形返回按钮？

当然可以实现这个需求，以下是修改后的完整代码，包含三角形返回按钮的样式和页面跳转逻辑：

完整代码 #

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      body {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        height: 100vh;
        margin: 5px 0;
        background-color: navy; 
        position: relative; 
      }
      /* 三角形返回按钮样式 */
      .back-button {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-right: 30px solid white;
        cursor: pointer;
        transition: border-right-color 0.3s;
      }
      .back-button:hover {
        border-right-color: lightgray;
      }
      .input-container {
        width: 100%;
        text-align: center;
        background-color: navy; 
        padding: 20px; 
      }
      .input-container input[type='text'],
      .input-container input[type='number'],
      .input-container .btn {
        width: 100%;
        padding: 15px;
        margin: 5px 0;
        box-sizing: border-box;
        font-size: 18px;
        text-align: center;
        color: navy; 
      }
      .input-container .btn {
        margin-top: 20px;
        color: white;
      }
      .details-text {
        color: white;
        font-size: 24px;
        margin-bottom: 15px;
        text-align: center;
        display: inline-block;
      }
      .logo {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 300px; 
        height: auto; 
        display: none; 
      }
    "))
  ),
  titlePanel(" "),
  # 用于显示返回按钮的容器
  uiOutput("back_button"),
  uiOutput("page")
)

server <- function(input, output, session) {
  # 用reactiveVal跟踪当前页面，更易管理
  current_page <- reactiveVal("page1")
  
  # 渲染返回按钮：仅在第二页及以后显示
  output$back_button <- renderUI({
    if(current_page() %in% c("page2", "page3")){
      tags$div(class = "back-button", id = "backBtn")
    }
  })
  
  # 渲染当前页面内容
  output$page <- renderUI({
    switch(current_page(),
           "page1" = tagList(
             div(class = "input-container",
                 actionButton("startButton", "START", style = "font-size: 50px;")
             ),
             tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px")
           ),
           "page2" = tagList(
             div(class = "input-container",
                 tags$p(class = "details-text", "Your Details:"),
                 textInput("name", label = NULL, placeholder = "Name", style = "background-color: lightblue; color: navy;"),
                 textInput("nationality", label = NULL, placeholder = "Nationality", style = "background-color: lightyellow; color: navy;"),
                 textInput("age", label = NULL, value = "", placeholder = "Age", style = "background-color: lightgreen; color: navy;"),
                 textInput("email", label = NULL, placeholder = "Email", style = "background-color: lightgray; color: navy;"),
                 actionButton("nextButton", "NEXT")
             ),
             tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px")
           ),
           "page3" = tagList(
             div(class = "input-container",
                 tags$p(class = "details-text", "Teaching level:"),
                 actionButton("basicButton", "Basic", style = "background-color: lightblue; color: navy;"),
                 actionButton("intermediateButton", "Intermediate", style = "background-color: lightyellow; color: navy;"),
                 actionButton("intermediatePlusButton", "Intermediate +", style = "background-color: lightgreen; color: navy;"),
                 actionButton("notSureButton", "Not sure", style = "background-color: lightgray; color: navy;"),
                 actionButton("nextButtonPage3", "NEXT")
             ),
             tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px")
           )
    )
  })
  
  # 页面跳转逻辑
  observeEvent(input$startButton, {
    current_page("page2")
  })
  
  observeEvent(input$nextButton, {
    current_page("page3")
  })
  
  # 返回按钮点击事件
  observeEvent(input$backBtn, {
    current_page(switch(current_page(),
                        "page2" = "page1",
                        "page3" = "page2"
    ))
  })
}

shinyApp(ui, server)

关键修改说明 #

• 添加三角形按钮样式：在tags$style中新增.back-button类，利用CSS边框绘制白色三角形，设置绝对定位到左上角，并添加hover效果增强交互感。
• 页面状态管理：用reactiveVal("page1")跟踪当前页面，替代原代码中未正确使用的input$currentPage，让页面切换逻辑更清晰。
• 条件显示返回按钮：通过renderUI判断当前页面，仅在page2和page3时渲染返回按钮。
• 返回按钮交互：添加点击事件，根据当前页面跳转到上一级页面。

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