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.

Cómo agregar tabulación a las opciones ocultas de un ConditionalPanel en Shiny?

20 Jul, 2023 Programación

Estoy creando una aplicación que tiene un checkboxInput que al hacer clic en él, tendrás otras opciones para seleccionar. Estas opciones están ocultas por un conditionalPanel. Solo las verás si haces clic en el checkbox.

Sin embargo, me preguntaba si es posible poner alguna tabulación en estas opciones, porque no quiero que tengan el mismo nivel de organización.
Por ejemplo:

[Imagen 2]

[Imagen 3]

Código:

“`{r}
library(shiny)

ui <- fluidPage(

titlePanel("My app"),

sidebarLayout(
sidebarPanel(
tabsetPanel(

<pre><code> tabPanel("Tab1",
checkboxInput("option1", "Remove…", value = FALSE),

conditionalPanel(
condition = "input.option1 == 1",
radioButtons(inputId = "type_removal", label=NULL,
choices = c("Remove 1" = "remove1",
"Remove 2" = "remove2"))),

textInput(inputId = "data2", "Data1", value = "data")),

tabPanel("Tab2",
textInput(inputId = "data", "Data1", value = "data")
),

)
),

mainPanel(

)
</code></pre>

)
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)
“`

¿Es posible hacerlo en Shiny?

Muchas gracias de antemano

Saludos

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible agregar tabulación a las opciones del panel condicional. Una forma de lograrlo es utilizando etiquetas HTML.

    Puede envolver cada opción en una etiqueta div con una determinada class y estilizarla usando CSS. A continuación, se muestra un fragmento de código de ejemplo que agrega tabulación a las opciones de botón de opción:

    conditionalPanel(
  condition = "input.option1 == 1",
  div(class = "option", "Eliminar 1"),
  div(class = "option", "Eliminar 2")
)

# Agrega este código CSS a tu aplicación para estilizar las opciones
tags$head(
  tags$style(
    HTML("
      .option {
        margin-left: 20px;
      }
    ")
  )
)

    Este código crea dos etiquetas div con la clase option y agrega la propiedad CSS margin-left para indentarlas. Puede ajustar el valor de margin-left para cambiar el nivel de indentación.

    ¡Espero que esto te ayude!

Comments are closed.