Question

在此示例中，我想将verbatimTextOutput（文本输出1号）的高度宽度与textInput（< strong> 1号文字输入）。我的最终目标是使textInput和verbatimTextOutput的外观完全相同。为了实现这一点，我问了几个问题，例如如何更改转角（Why shinydashboard changes the corner of a numericInput from round to 90 degree?）和如何更改verbatimTextOutput（How to change the font family of verbatimTextOutput to be the same as the input in Shiny and Shinydashboard?）的字体系列。改变宽度和高度是难题的最后一步。

我还展示了一种变通方法，即文本输出编号。 2 ，它是textInput，但在只读模式下（如答案所示（https://stackoverflow.com/a/58585251/7669809）。但是，我认为这种策略太复杂了。如果我可以直接修改verbatimTextOutput的宽度和高度，那就太好了。

代码

# Load the packages
library(shiny)
library(shinydashboard)

# User Interface
ui <- dashboardPage(
  header = dashboardHeader(title = ""),
  sidebar = dashboardSidebar(
    sidebarMenu(
      menuItem(
        text = "Example",
        tabName = "tab1"
      )
    )
  ),
  body = dashboardBody(
    tabItems(
      tabItem(
        tabName = "tab1",

        tags$head(
          tags$style(
            HTML(
                "
                .form-control {
                    border-radius: 4px 4px 4px 4px;
                }

                #txt1_out {
                font-family:  'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
                font-size: 14px;
                }

                "
            )
          ),
          tags$script("
            Shiny.addCustomMessageHandler('selectText', function(message) {
              $('#txt2_out').prop('readonly', true);
            });
            ")
        ),
        column(
          width = 4,
          textInput(inputId = "txt1", label = "Text input no.1", value = "abcde12345"),
          strong("Text output no.1"),
          verbatimTextOutput(outputId = "txt1_out", placeholder = TRUE),
          textInput(inputId = "txt2", label = "Text input no.2", value = "abcde12345"),
          textInput(inputId = "txt2_out", label = "Text output no.2")
        )
      )
    )
  )
)

server <- function(input, output, session){
  output$txt1_out <- renderText({
    input$txt1
  })
  observeEvent(input$txt2, {
    updateTextInput(session, inputId = "txt2_out", value = input$txt2)
    session$sendCustomMessage("selectText", "select")
  })
}

# Run the app
shinyApp(ui, server)

Answer 1

如果检查textInput的样式，则会发现width，max-width和padding的详细信息。
我没有完全关注您的问题，但是如果您要换行，则可以使用white-space: pre-wrap;

因此，将所有这些都放到HTML中，您的tags$style将类似于：

tags$head(
  tags$style(
    HTML(
      "
        .form-control {
            border-radius: 4px 4px 4px 4px;
        }

        #txt1_out {
        font-family:  'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
        font-size: 14px;
        width: 300px; 
        max-width: 100%;
        padding: 6px 12px; 
        white-space: pre-wrap;
        }

        "
    )
  )
)

如何在Shiny和Shinydashboard

1 个答案: