如何在左侧页面右上角添加后退按钮？

Question

我正在尝试在左侧页面的顶角添加一个三角形的后退按钮。

这是 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; /* Set background color for the body */
        position: relative; /* Add position relative for the logo */
      }
      .input-container {
        width: 100%;
        text-align: center;
        background-color: navy; /* Set background color for the input container */
        padding: 20px; /* Add padding for better visibility */
      }
      .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; /* Text color navy */
      }
      .input-container .btn {
        margin-top: 20px;
        color: white;
      }
      /* Style for Your Details text */
      .details-container {
        text-align: center;
      }
      .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; /* Adjust the width of the logo */
        height: auto; /* Maintain aspect ratio */
        display: none; /* Initially hide the logo */
      }
    "))
  ),
  titlePanel(" "),
  uiOutput("page")
)

server <- function(input, output, session) {
  output$page <- renderUI({
    if (is.null(input$currentPage)) {
      tagList(
        div(class = "input-container",
            actionButton("startButton", "START", style = "font-size: 50px;") #  style = "font-size: 24px;"
        ),
        tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
      )
    } else if (input$currentPage == "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") #  style = "font-size: 24px;"
        ),
        tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
      )
    } else if (input$currentPage == "page3") {
      tagList(
        div(class = "input-container",
            tags$p(class = "details-text", "Teaching level:"),
            actionButton("basicButton", "Basic"),
            actionButton("intermediateButton", "Intermediate"),
            actionButton("intermediatePlusButton", "Intermediate +"),
            actionButton("notSureButton", "Not sure"),
            actionButton("nextButtonPage3", "NEXT") #  style = "font-size: 24px;"
        ),
        tags$img(src ="www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
      )
    }
  })
  
  observeEvent(input$startButton, {
    output$page <- renderUI({
      tagList(
        div(class = "input-container",
            tags$p(class = "details-text", "Your Details:"),
            textInput("name", label = NULL, placeholder = "Name"),
            textInput("nationality", label = NULL, placeholder = "Nationality"),
            textInput("age", label = NULL, value = "", placeholder = "Age"),
            textInput("email", label = NULL, placeholder = "Email"),
            actionButton("nextButton", "NEXT") #  style = "font-size: 24px;"
        ),
        tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
      )
    })
  })
  
  observeEvent(input$nextButton, {
    name <- input$name
    nationality <- input$nationality
    age <- input$age
    email <- input$email
    
    output$page <- renderUI({
      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") #  style = "font-size: 24px;"
        ),
        tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
      )
    })
  })
}

shinyApp(ui, server)

这是我在每个页面上需要的“后退”按钮的示例，但从第二页开始，一直到其他页面。

有办法得到这个吗？

Answer 1

这是一个位于角落的后退按钮的示例，与屏幕截图中的按钮类似。您当然可以编辑

CSS

以改进示例。

请注意，您的示例中有多次重复，应避免。但是，我没有重构你的代码。

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; /* Set background color for the body */
        position: relative; /* Add position relative for the logo */
      }
      .input-container {
        width: 100%;
        text-align: center;
        background-color: navy; /* Set background color for the input container */
        padding: 20px; /* Add padding for better visibility */
      }
      .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; /* Text color navy */
      }
      .input-container .btn {
        margin-top: 20px;
        color: white;
      }
      /* Style for Your Details text */
      .details-container {
        text-align: center;
      }
      .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; /* Adjust the width of the logo */
        height: auto; /* Maintain aspect ratio */
        display: none; /* Initially hide the logo */
      }
      div#corner-triangle {
        display: block;
        width: 100px;
        height: 100px;
        border-style: solid;
        border-width: 200px 200px 0 0;
        border-color: #ffffff transparent transparent transparent;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        color: white;
        text-shadow: 0 0 25px 9px #fff;
      }
    "))
    ),
    titlePanel(" "),
    uiOutput("page")
)

server <- function(input, output, session) {
    output$page <- renderUI({
        if (is.null(input$currentPage)) {
            tagList(
                div(class = "input-container",
                    actionButton("startButton", "START", style = "font-size: 50px;") #  style = "font-size: 24px;"
                ),
                tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
            )
        } 
        
    })
    
    observeEvent(input$startButton, {
        output$page <- renderUI({
            tagList(
                div(class = "input-container",
                    tags$p(class = "details-text", "Your Details:"),
                    textInput("name", label = NULL, placeholder = "Name"),
                    textInput("nationality", label = NULL, placeholder = "Nationality"),
                    textInput("age", label = NULL, value = "", placeholder = "Age"),
                    textInput("email", label = NULL, placeholder = "Email"),
                    actionButton("nextButton", "NEXT") #  style = "font-size: 24px;"
                ),
                div(id = "corner-triangle",
                    actionButton(label="Back", inputId = "bck1",
                                 style = "top: -150px; 
                                        left: 25px;
                                        font-size: 25px;
                                        position: relative;
                                        transform: rotate(-45deg);
                                        color: navy;
                                        border: none;
                                        background-color: transparent;
                                        font-weight: bold;
                                        padding: 2em;
                                        margin: -2em;
                                        outline: none;")),
                tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
            )
        })
    })
    
    observeEvent(input$nextButton, {
        name <- input$name
        nationality <- input$nationality
        age <- input$age
        email <- input$email
        
        output$page <- renderUI({
            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") #  style = "font-size: 24px;"
                ),
                div(id = "corner-triangle",
                    actionButton(label="Back", inputId = "bck2",
                                 style = "top: -150px; 
                                        left: 25px;
                                        font-size: 25px;
                                        position: relative;
                                        transform: rotate(-45deg);
                                        color: navy;
                                        border: none;
                                        background-color: transparent;
                                        font-weight: bold;
                                        padding: 2em;
                                        margin: -2em;
                                        outline: none;")),
                tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
            )
        })
    })
    
    observeEvent(input$bck1, {
        output$page <- renderUI({
            tagList(
                div(
                    class = "input-container",
                    actionButton("startButton", "START", style = "font-size: 50px;") #  style = "font-size: 24px;"
                ),
                tags$img(
                    src = "www/free_english_logo.png",
                    class = "logo",
                    width = "400px"
                ) # Adjust the width of the logo
            )
        })
    })
    
    observeEvent(input$bck2, {
        output$page <- renderUI({
            tagList(
                div(class = "input-container",
                    tags$p(class = "details-text", "Your Details:"),
                    textInput("name", label = NULL, placeholder = "Name"),
                    textInput("nationality", label = NULL, placeholder = "Nationality"),
                    textInput("age", label = NULL, value = "", placeholder = "Age"),
                    textInput("email", label = NULL, placeholder = "Email"),
                    actionButton("nextButton", "NEXT") #  style = "font-size: 24px;"
                ),
                div(id = "corner-triangle",
                    actionButton(label="Back", inputId = "bck1",
                                 style = "top: -150px; 
                                        left: 25px;
                                        font-size: 25px;
                                        position: relative;
                                        transform: rotate(-45deg);
                                        color: navy;
                                        border: none;
                                        background-color: transparent;
                                        font-weight: bold;
                                        padding: 2em;
                                        margin: -2em;
                                        outline: none;")),
                tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
            )
        })
    })
}

shinyApp(ui, server)