如何将 R Shiny 侧边栏菜单上的默认 "angle-left icon" 更改为 "angle-right icon"？

Question

我想更改默认箭头方向（如附图所示），使其指向右侧。

这是当前代码：

      sidebarMenu(
        menuItem("Market data", tabName = "market data", icon = icon("users"), startExpanded = TRUE,
                 menuSubItem("Performance", tabName = "history", icon = icon("calendar-day")),
                 menuSubItem("SMP", tabName = "SMP", icon = icon("dollar-sign"))
        ),
        
        menuItem("Consumer 1", tabName = "consumer1", icon = icon("user"), startExpanded = FALSE,
                 menuSubItem("Consumption", tabName = "consumption", icon = icon("history")),
                 menuSubItem("Profile", tabName = "profile", icon = icon("poll-h")),
                 menuSubItem("Forecast engine", tabName = "forecast", icon = icon("brain"))
        )

提前致谢

Answer 1

一般

一般来说，要更改 shinydashboard 中的默认值，您需要为这些元素找到正确的 CSS 标签，然后添加您自己的自定义 CSS 文件以覆盖默认值。

如果您计划进行大量此类更改，shinydashboard 框架可能不适合您。

具体解决你的问题

在浏览器中浏览一下，您会发现这些箭头的标签是 .fa-angle-left:before。显示的符号定义如下 CSS:

.fa-angle-left:before{content:"\f104"}

要将其更改为右箭头，我们需要将 \f104 更改为 \f105:

如前所述 in the documentation，您可以添加自己的 CSS-file：

将文件 www/custom.css 添加到 Shiny 仪表板所在的同一文件夹中。
向其中添加以下代码：

.fa-angle-left:before{content:"\f105"}

如果你希望点击后箭头仍然指向下方还需要添加

.sidebar-menu li.active>a>.fa-angle-left, .sidebar-menu li.active>a>.pull-right-container>.fa-angle-left {
    transform: rotate(90deg);
}

完成后，您需要将以下代码添加到您的 sidebarMenu:

tags$head(
          tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
        )

工作示例

app.R

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    dashboardSidebar(
      sidebarMenu(
        tags$head(
          tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
        ),
        menuItem(
          "Market data",
          tabName = "market data",
          icon = icon("users"),
          menuSubItem("SMP", tabName = "SMP", icon = icon("dollar-sign"))
        )
      )
    )
  ),
  dashboardBody()
)

server <- function(input, output) {}

shinyApp(ui, server)

www/custom.css


.fa-angle-left:before{content:"\f105"}

.sidebar-menu li.active>a>.fa-angle-left, .sidebar-menu li.active>a>.pull-right-container>.fa-angle-left {
    transform: rotate(90deg);
}

如何将 R Shiny 侧边栏菜单上的默认 "angle-left icon" 更改为 "angle-right icon"？

How to change the default "angle-left icon" on the sidebar menu in R Shiny to an "angle-right icon"?

html

css

r

shiny

shinydashboard

一般

具体解决你的问题

工作示例