如何在漂亮的单选按钮的标签中进行换行?

问题描述 投票:0回答:1

我正在 R Studio 中使用

shiny
构建一个网络平台。我被困在单选按钮选择中设置换行符,因为我需要将长选择名称与方法名称放在一起。这是示例代码。

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  tabItem(tabName = "CF", br(),
          sidebarLayout(
            sidebarPanel(width = 3,
                         uiOutput("example")),
            mainPanel(width = 9,
                      fluidPage(width = NULL,
                                uiOutput("display"))
            )))
)

server <- function(input, output) {
  choice_dic <- c("Option 1 name<br> (option 1 method name)" = "1",
                  "Option 2 name<br> (option 2 method name)" = "2")
  output$example <- renderUI({
    tagList(
      prettyRadioButtons(inputId = "cf_method",
                         label = h4(strong("Method", style = "color:black")),
                         icon = icon("check"), animation = "jelly",
                         choices = choice_dic, selected = "1")
    )
  })

  observe({
    print(input$cf_method)
  })
}

# Run the application
shinyApp(ui = ui, server = server)

sidebarPanel
mainPanel
分别具有固定宽度3和9。首先,我将
br
标签放在选项中,但它不起作用。然后我从here得到了想法,我必须添加一些标签,例如
tags$style
tags$script
,但我不知道,因为我对
CSS
HTML
的背景了解很少。有人可以帮忙吗?

html css r shiny radio-button
1个回答
0
投票

与您链接的示例类似,您可以这样做。

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
    tabItem(tabName = "CF", br(),
            sidebarLayout(
                sidebarPanel(width = 3,
                             uiOutput("example")),
                mainPanel(width = 9,
                          fluidPage(width = NULL,
                                    uiOutput("display"))
                )))
)

server <- function(input, output) {
    choice_dic <- c("Option 1 name<br> (option 1 method name)" = "1",
                    "Option 2 name<br> (option 2 method name)" = "2")
    output$example <- renderUI({
        tagList(
            prettyRadioButtons(inputId = "cf_method",
                               label = h4(strong("Method", style = "color:black")),
                               icon = icon("check"), animation = "jelly",
                               choices = choice_dic, selected = "1"),
            tags$script(
                "
                $('#cf_method .state label span').map(function(choice){
                    this.innerHTML = $(this).text();
                });
                "
            ),
            tags$style(HTML(
                "
                .pretty .state label::after, .pretty .state label::before, .icon {
                    margin-top: 20px;
                }
                
                .pretty .state label {
                    margin-left: 20px;
                }
                "
            )))
    })
    
    observe({
        print(input$cf_method)
    })
}

# Run the application
shinyApp(ui = ui, server = server)
© www.soinside.com 2019 - 2024. All rights reserved.