Shiny R中将超链接自定义为按钮的CSS放置位置咨询

实现方法 #

你只需要把自定义CSS通过Shiny内置的tags$style()函数内嵌到UI头部即可生效，我同时修正了你示例代码中sidebarLayout缺少sidebarPanel的语法问题，完整可运行代码如下：

library(shiny)

ui <- fluidPage(
  # 插入自定义CSS
  tags$head(
    tags$style(HTML("
      .button {
        font: bold 11px Arial;
        text-decoration: none;
        background-color: #EEEEEE;
        color: #333333;
        padding: 2px 6px 2px 6px;
        border-top: 1px solid #CCCCCC;
        border-right: 1px solid #333333;
        border-bottom: 1px solid #333333;
        border-left: 1px solid #CCCCCC;
      }
    "))
  ),
  titlePanel("Hello Shiny!"),
  sidebarLayout(
    # 补全缺失的sidebarPanel组件
    sidebarPanel(
      textOutput('test')
    ),
    mainPanel(
      a("Click Here To Learn More", href="https://google.com", class = "button")
    )
  )
)

server <- function(input, output) {
  # 示例输出，可按需修改
  output$test <- renderText("测试文本")
}

shinyApp(ui = ui, server = server)

如果你的项目样式代码较多，也可以选择独立CSS文件的方式：

• 在Shiny项目根目录新建www文件夹，将你的CSS代码保存为www/style.css
• 在UI的fluidPage内添加tags$link(rel = "stylesheet", type = "text/css", href = "style.css")即可引用

运行修改后的代码后，所有添加了class = "button"属性的超链接都会自动应用你定义的按钮样式。

内容的提问来源于stack exchange，提问作者Jordan Wrong