You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在R语言Shiny应用的文本旁插入横幅?

你需要的文本旁蓝色横幅效果可通过为文本容器添加左侧边框、内边距和浅背景实现,修改后的完整可运行代码如下:

library(shiny)

ui <- shiny::navbarPage(
  title="Test", collapsible = TRUE,
  
  tabPanel("",
           
           br(),
           hr(),
           
           h2(HTML("Project <b>Description</b>"), 
              style="text-align:center; color: blue;"),
           hr(),
           div(
             # 新增左侧蓝色边框、内边距和浅背景实现横幅效果
             style = "width: 75%; margin: auto; border-left: 12px solid #2c7fb8; padding: 15px 20px; background-color: #f7fbff;",
             h2(HTML("Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                                      when an unknown printer took a galley of type and scrambled it to make a type 
                                      specimen book. It has survived not only five centuries, but also the leap into electronic 
                                      typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of 
                                      Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software 
                                      like Aldus PageMaker including versions of Lorem Ipsum"),
                style="text-align:center"),
             h2(HTML("Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                                      when an unknown printer took a galley of type and scrambled it to make a type 
                                      specimen book. It has survived not only five centuries, but also the leap into electronic 
                                      typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of 
                                      Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software 
                                      like Aldus PageMaker including versions of Lorem Ipsum"),
                style="text-align:center"))
  )
)

server <- function(input, output,session) {
  
}

shinyApp(ui = ui, server = server)

如果需要调整样式,直接修改对应CSS参数即可:修改border-left的数值可以调整横幅宽度、修改颜色值可以更换横幅颜色,调整padding参数可以修改文本和横幅的间距。

内容的提问来源于stack exchange,提问作者Antonio

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.06 00:54:03