将 dropMenu 中的所有子菜单项向右对齐并隐藏下拉箭头

Posted 2023-03-24

【中文标题】将 dropMenu 中的所有子菜单项向右对齐并隐藏下拉箭头

【英文标题】：Aligning all sub-menu items in dropMenu to the right and hiding drop arrow

【发布时间】：2022-01-23 22:59:33

【问题描述】：

我有一个应用程序，它使用box::dropdownMenu 呈现一个下拉菜单，用户将使用它来设置绘图选项。我能够毫无问题地实现此功能，但我想做另外两件事。

是否可以： (1) 隐藏齿轮图标右侧的箭头？ (2) 在下拉菜单中，是否可以保持文本左对齐，但单选按钮右对齐？

当前状态：

期望的最终结果：

代码：

library(shiny)
library(shinyWidgets)
library(shinydashboardPlus)

ui <- fluidPage(
  box(
    title = "Box Title",
    dropdownMenu = dropdown(
      width = "200px",
      icon = icon("gear"),
      materialSwitch(inputId = "Id079", label = "Color:"),
      materialSwitch(inputId = "Id079", label = "Display Goal:"),
    ),
    textOutput("text")
  )
)

server <- function(input, output, session) 
  output$text <- renderText("Hello World!")


shinyApp(ui, server)

【问题讨论】：

这个box函数来自哪里？这个box 不是你的意思，shinydashboard 中的box 也不是。那么这是哪个盒子呢？

对不起！来自shinydashboardPlus。

【参考方案1】：

要删除箭头，应将style 更改为默认值以外的其他值。例如，您可以使用fill 或bordered。

shinyWidgets::dropdown(
      width = "200px",
      style = "fill",
      icon = icon("cog"),
      materialSwitch(inputId = "Id079", label = "Color:"),
      # Change IDs to unique IDs otherwise it won't work
      materialSwitch(inputId = "Id080", label = "Display Goal:"),
    )

对于对齐，您可以使用.label-default 元素（属性？）

ui <- fluidPage(
  # Need to play with the margin-left part
  tags$head(tags$style(html(".label-default 
                            margin-left: 50px;
              "))), 

    shinyWidgets::dropdown(
      width = "300px",
      style = "fill",
      icon = icon("cog"),
      materialSwitch(inputId = "Id079", label = "Color:"),
      materialSwitch(inputId = "Id080", label = "Display Goal:"),
    ),
    textOutput("text")
  )

这样做的问题是，要统一更改不等标签的边距并不容易。