如何更改bslib侧边栏切换按钮在打开和关闭状态下的文本？

Question

我有以下工作应用程序可以修改默认的侧边栏切换按钮。我希望按钮在侧边栏打开时显示“关闭选项”，在侧边栏关闭时显示“选项”。但我不确定如何进行此更改。您能否指导我可以使用哪些 CSS 属性来进行更改？

library(bslib)
library(shiny)
library(ggplot2)

custom_sidebar <- function(ui_content, ...) {
  div(
    class = "custom-sidebar",
    page_sidebar(
      ...,
      tags$head(tags$style(HTML(
        "
     /* Style the toggle button */
     .custom-sidebar .bslib-sidebar-layout > .collapse-toggle {
       padding: 15px 10px;
       background-color: #007398;
       position: absolute;
       border-radius: 0 5px 5px 0;
       writing-mode: vertical-rl;
       text-orientation: mixed;
       height: auto;
       z-index: 1000;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s;
       top: 100px;  /* Position from top */
       right: -40px;  /* Position on the right of sidebar */
     }
     /* When sidebar is closed */
     .custom-sidebar .bslib-sidebar-layout:not(.sidebar-open) > .collapse-toggle {
       left: 0;
       right: auto;  /* Reset right position when closed */
     }
     /* Style the toggle icon */
     .custom-sidebar .bslib-sidebar-layout > .collapse-toggle > .collapse-icon {
       fill: white !important;
       margin-bottom: 10px;
     }
     /* Add Options text */
     .custom-sidebar .bslib-sidebar-layout > .collapse-toggle::after {
       content: 'Options';
       color: white;
       font-size: 1.1em;
       text-transform: uppercase;
       letter-spacing: 1px;
       margin-top: 10px;
     }
     /* Adjust main content margins */
     .custom-sidebar .bslib-sidebar-layout > .main {
       margin-left: 300px;
       transition: margin-left 0.3s;
       width: calc(100% - 300px);
     }
     .custom-sidebar .bslib-sidebar-layout:not(.sidebar-open) > .main {
       margin-left: 0;
       width: 100%;
     }
     .custom-sidebar .bslib-sidebar-layout>.sidebar {
         margin-left: 20px;
     }
     "
      ))),
      ui_content
    )
  )
}

ui <- custom_sidebar(
  title = "Example dashboard",
  sidebar = sidebar(
    open = FALSE, # Start with sidebar open
    varSelectInput("var", "Select variable", mtcars)
  ),
  card(
    full_screen = TRUE,
    card_header("My plot"),
    plotOutput("p")
  )
)
server <- function(input, output) {
  output$p <- renderPlot({
    ggplot(mtcars) +
      geom_histogram(aes(!!input$var))
  })
}
shinyApp(ui, server)

Answer 1

将

content: 'Options';

中的

.custom-sidebar .bslib-sidebar-layout > .collapse-toggle::after

去掉，区分

aria-expanded

的值：

.custom-sidebar .bslib-sidebar-layout > .collapse-toggle[aria-expanded='true']::after {
  content: 'Close Options';
}
.custom-sidebar .bslib-sidebar-layout > .collapse-toggle[aria-expanded='false']::after {
  content: 'Options';
}

library(bslib)
library(shiny)
library(ggplot2)

custom_sidebar <- function(ui_content, ...) {
  div(
    class = "custom-sidebar",
    page_sidebar(
      ...,
      tags$head(tags$style(HTML(
        "
     /* Style the toggle button */
     .custom-sidebar .bslib-sidebar-layout > .collapse-toggle {
       padding: 15px 10px;
       background-color: #007398;
       position: absolute;
       border-radius: 0 5px 5px 0;
       writing-mode: vertical-rl;
       text-orientation: mixed;
       height: auto;
       z-index: 1000;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s;
       top: 100px;  /* Position from top */
       right: -40px;  /* Position on the right of sidebar */
     }
     /* When sidebar is closed */
     .custom-sidebar .bslib-sidebar-layout:not(.sidebar-open) > .collapse-toggle {
       left: 0;
       right: auto;  /* Reset right position when closed */
     }
     /* Style the toggle icon */
     .custom-sidebar .bslib-sidebar-layout > .collapse-toggle > .collapse-icon {
       fill: white !important;
       margin-bottom: 10px;
     }
     /* Add Options text */
     .custom-sidebar .bslib-sidebar-layout > .collapse-toggle::after {
       color: white;
       font-size: 1.1em;
       text-transform: uppercase;
       letter-spacing: 1px;
       margin-top: 10px;
     }
     .custom-sidebar .bslib-sidebar-layout > .collapse-toggle[aria-expanded='true']::after {
       content: 'Close Options';
     }
     .custom-sidebar .bslib-sidebar-layout > .collapse-toggle[aria-expanded='false']::after {
       content: 'Options';
     }
     /* Adjust main content margins */
     .custom-sidebar .bslib-sidebar-layout > .main {
       margin-left: 300px;
       transition: margin-left 0.3s;
       width: calc(100% - 300px);
     }
     .custom-sidebar .bslib-sidebar-layout:not(.sidebar-open) > .main {
       margin-left: 0;
       width: 100%;
     }
     .custom-sidebar .bslib-sidebar-layout>.sidebar {
         margin-left: 20px;
     }
     "
      ))),
      ui_content
    )
  )
}

ui <- custom_sidebar(
  title = "Example dashboard",
  sidebar = sidebar(
    open = FALSE, # Start with sidebar open
    varSelectInput("var", "Select variable", mtcars)
  ),
  card(
    full_screen = TRUE,
    card_header("My plot"),
    plotOutput("p")
  )
)
server <- function(input, output) {
  output$p <- renderPlot({
    ggplot(mtcars) +
      geom_histogram(aes(!!input$var))
  })
}
shinyApp(ui, server)