es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Alineando todos los elementos del submenú en dropMenu hacia la derecha y ocultando la flecha de despliegue.

Alineando todos los elementos del submenú en dropMenu hacia la derecha y ocultando la flecha de despliegue.

27 Jul, 2023 Programación

Tengo una aplicación que utiliza box::dropdownMenu para renderizar un menú desplegable que el usuario utilizará para establecer las opciones del gráfico. Puedo implementar esta funcionalidad sin ningún problema, pero me gustaría hacer dos cosas adicionales.

¿Es posible:
(1) Ocultar la flecha a la derecha del icono de la cabeza de engranaje?
(2) En el menú desplegable, ¿es posible mantener el texto alineado a la izquierda pero alinear a la derecha los botones de radio?

Estado actual:

Descripción de la imagen

Resultado final deseado:

Descripción de la imagen

Código:

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

ui <- fluidPage(
  box(
    title = "Título del cuadro",
    dropdownMenu = dropdown(
      width = "200px",
      icon = icon("gear"),
      materialSwitch(inputId = "Id079", label = "Color:"),
      materialSwitch(inputId = "Id079", label = "Mostrar objetivo:"),
    ),
    textOutput("texto")
  )
)

server <- function(input, output, session) {
  output$text <- renderText("¡Hola mundo!")
}

shinyApp(ui, server)
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para ocultar la flecha y alinear a la derecha los botones de radio en un box::dropdownMenu en Shiny, puedes utilizar algunos estilos CSS personalizados. Aquí tienes una versión actualizada del código que logra esto:

    “`{r, echo=FALSE}
    library(shiny)
    library(shinyWidgets)
    library(shinydashboardPlus)

    ui <- fluidPage(
    tags$head(
    tags$style(HTML(‘
    /* Ocultar flecha en el icono de engranaje */
    .dropdown-toggle::after {
    display: none !important;
    }

      /* Alinear a la derecha los botones de radio */
  .dropdown-item input[type="radio"] {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
'))

    ),
    box(
    title = “Título del Box”,
    dropdownMenu = dropdown(
    width = “200px”,
    icon = icon(“gear”),
    materialSwitch(inputId = “Id079”, label = “Color:”),
    materialSwitch(inputId = “Id080”, label = “Mostrar objetivo:”),
    ),
    textOutput(“text”)
    )
    )

    server <- function(input, output, session) {
    output$text <- renderText(“¡Hola Mundo!”)
    }

    shinyApp(ui, server)
    “`

    El estilo CSS personalizado se agrega al elemento tags$head en la sección UI. La primera regla CSS oculta la flecha junto al icono de engranaje estableciendo su propiedad display en none. La segunda regla CSS alinea a la derecha los botones de radio estableciendo la propiedad margin-left en auto y la propiedad margin-right en 0. Ten en cuenta que utilizamos la palabra clave !important para anular cualquier regla CSS existente.

    Con estas reglas CSS en su lugar, el box::dropdownMenu debería verse como la imagen del Resultado Final Deseado que proporcionaste.

Comments are closed.