无shinyDashboard的Shiny应用中实现类似bs4UserCard的个人信息卡片

你不需要额外引入shinyDashboard相关包，只用原生Shiny的标签搭配自定义CSS即可实现同款用户卡片效果，以下是修改后的完整可运行代码，你可以自行替换头像路径、姓名、联系方式等内容：

library(shiny)
library(shinythemes)

ui <- shiny::navbarPage(theme = shinytheme("flatly"),
                        title="Test", collapsible = TRUE,
                        
                        tabPanel("",
                                 # 自定义用户卡片样式
                                 tags$style(HTML("
                                 /* 用户卡片通用样式 */
                                 .user-card {
                                     width: 280px;
                                     background: white;
                                     border-radius: 12px;
                                     box-shadow: 0 2px 12px rgba(0,0,0,0.1);
                                     padding: 20px;
                                     text-align: center;
                                     position: absolute;
                                     right: 5%;
                                     top: 100px;
                                     z-index: 100;
                                 }
                                 /* 头像样式 */
                                 .user-avatar {
                                     width: 100px;
                                     height: 100px;
                                     border-radius: 50%;
                                     object-fit: cover;
                                     border: 3px solid #02BE7F;
                                     margin-bottom: 15px;
                                 }
                                 /* 用户名样式 */
                                 .user-name {
                                     font-size: 20px;
                                     font-weight: bold;
                                     margin-bottom: 10px;
                                 }
                                 /* 联系方式样式 */
                                 .user-contact {
                                     text-align: left;
                                     font-size: 14px;
                                     color: #666;
                                     line-height: 2;
                                     margin-top: 15px;
                                     border-top: 1px solid #eee;
                                     padding-top: 15px;
                                 }
                                 /* 调整原有内容位置，避免被卡片遮挡 */
                                 .content-area {
                                     padding-top: 120px;
                                     width: 60%;
                                     margin: 0 5% auto auto;
                                 }
                                 .navbar {margin-bottom: 0;}
                                 ")),
                                 
                                 div(
                                     style = "height: 80px; background-color: #02BE7F; width: 100%; position: absolute; right:0;",
                                     h2(HTML("Project <b>Description</b>"), 
                                        style="text-align:center;color: white;margin-top:20px;")
                                 ),
                                 
                                 # 用户卡片区域
                                 div(class = "user-card",
                                     # 此处src替换为你自己的头像路径，本地头像需要放在应用的www文件夹下
                                     img(src = "头像路径", class = "user-avatar", alt = "个人头像"),
                                     div(class = "user-name", "你的姓名"),
                                     div(class = "user-title", "职位/简介"),
                                     div(class = "user-contact",
                                         div("📧 邮箱：xxx@xxx.com"),
                                         div("📱 微信：xxxxxx"),
                                         div("💼 主页：xxx")
                                     )
                                 ),
                                 
                                 # 原有内容区域
                                 div(class = "content-area",
                                     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"), 
                                      style="text-align:justify"))
                                 
                        ))

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

shinyApp(ui = ui, server = server)

样式调整说明 #

• 如果你要实现Option1的侧边栏式卡片效果，只需要修改.user-card的position属性为fixed，left设为2%，top设为100px，同步调整.content-area的左边距即可
• 卡片尺寸、配色、联系方式项都可以自行修改CSS对应属性调整

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