樣式 R 閃亮的 titlePanel 標簽$a 文本

Question

我試圖在我的R Shiny titlePanel包含一個額外的標題行，它是一個超鏈接，因此我使用了tags$a函數，並希望它的字體大小比第一個標題行小。

這是代碼：

library(shiny)

server <- function(input, output) {
  output$distPlot <- renderPlot({
    x    <- faithful$waiting
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    hist(x, breaks = bins, col = "#75AADB", border = "white",
         xlab = "Waiting time to next eruption (in mins)",
         main = "Histogram of waiting times")
  })
}

ui <- fluidPage(
  titlePanel("Hello Shiny!"),
  titlePanel(tags$a("Shiny Tutorial",href="https://shiny.rstudio.com/articles/basics.html")),
  
  sidebarLayout(
    sidebarPanel(
      sliderInput(inputId = "bins",
                  label = "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30)
    ),
    
    mainPanel(
      plotOutput(outputId = "distPlot")
    )
  )
)

shinyApp(ui, server)

如你看到的：

第一個標題行： "Hello Shiny!" 第二個： "Shiny Tutorial"具有相同的字體大小，但我希望第二個標題的字體大小更小。

此外，知道如何將這兩個標題放在同一行中嗎？

Answer 1

我認為您不小心創建了重復的 titlePanel，我不喜歡。

但是，繼續下去，這對我有用，您可以根據典型的 HTML 調整大小，其中h1最大， h6最小。

如果你嘗試過類似的東西怎么辦...

  titlePanel("Hello Shiny!", windowTitle = "Hello Shiny!"),
  titlePanel(tags$h4(
    tags$a("Shiny Tutorial",href="https://shiny.rstudio.com/articles/basics.html")
    )
    ),
  

請注意，如果沒有參數windowTitle = ...您在瀏覽器中的窗口標題將成為tags$a(...)函數中的 HTML 文本。

Answer 2

titlePanel函數生成一個第二個標題元素 ( <h2> )，這有點誤導，因為它似乎會生成一個標題容器。 標題級別（ h1 、 h2 、 h3 、 h4 、 h5和h6 ）的預期用途是用於文檔結構和層次結構，而不是字體大小。 所有網頁都應該有一個h1元素來描述整個頁面。

要遵循良好的語義 HTML 實踐，請使用適當的標題元素（ h1 ；或其他標題，具體取決於您的文檔結構）和使用 CSS 的樣式。 理想情況下，頁面標題應該包含在<header>元素中。 我添加到您的示例中並應用 CSS 樣式來呈現標題和內聯鏈接（通過 flex）。 我還添加了 CSS 類col-sm-12以“掛鈎”到引導程序中。

library(shiny)

server <- function(input, output) {
    output$distPlot <- renderPlot({
        x <- faithful$waiting
        bins <- seq(min(x), max(x), length.out = input$bins + 1)
        hist(x,
            breaks = bins, col = "#75AADB", border = "white",
            xlab = "Waiting time to next eruption (in mins)",
            main = "Histogram of waiting times"
        )
    })
}

ui <- fluidPage(
    tags$head(
        tags$style(
            HTML(
                ".title-panel {
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-end;
                    padding: 16px;
                }",
                ".title-panel h1 {
                    font-size: 24pt;
                    margin: 0;
                    margin-right: 12px;
                    line-height: 1.2;
                }",
                ".title-panel a {
                    font-size: 16pt;
                    margin: 0;
                }"
            )
        )
    ),
    title = "Hello Shiny",
    tags$header(
        class = "col-sm-12 title-panel",
        tags$h1("Hello Shiny"),
        tags$a(
            href = "https://shiny.rstudio.com/articles/basics.html",
            "Shiny Tutorial"
        )
    ),

    sidebarLayout(
        sidebarPanel(
            sliderInput(
                inputId = "bins",
                label = "Number of bins:",
                min = 1,
                max = 50,
                value = 30
            )
        ),

        mainPanel(
            plotOutput(outputId = "distPlot")
        )
    )
)

shinyApp(ui, server)