首页 > 解决方案 > 在闪亮的应用程序中自定义导航栏

问题描述

我正在尝试navbarPage在闪亮的应用程序中自定义 a 以包含两个徽标和一些自定义文本。虽然我能够将徽标放在所需的位置,但不幸的是,我想要的文字没有出现。选项卡面板似乎也是顶部对齐的。如何让我的自定义文本出现以及底部对齐选项卡面板?这是我的代码navbarPage

navbarPage(
    title = div(
      tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><img src=\"images/ntcc_latest.png\" alt=\"alt\" style=\"float:right;width:110px;height:100px;padding-top:1px;\"></div>');
    console.log(header)")),
      tags$script(HTML(
        "
        var header = $('.navbar > .container-fluid');
        header.append(
        '<div>
          <p>\"Training Management System\"</p>
          <h4>\"Connecting management, trainers and trainees on the same platform\"</h4>
        </div>');
        console.log(header)
        "
      )),
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:left\"><img src=\"images/dahra_latest.png\" alt=\"alt\" style=\"float:left;width:90px;height:100px;padding-top:1px;\"></div>');
    console.log(header)"))
    ),
    id = 'all',
    windowTitle = 'TMS',
    theme = "style/style.css",
    fluid = TRUE,
    collapsible = TRUE,
    source('ui/ui_home.R', local = TRUE)$value,
    source('ui/ui_dashboard.R', local = TRUE)$value,
    source('ui/ui_onboarding.R', local = TRUE)$value,
    source('ui/ui_editdb.R', local = TRUE)$value,
    source('ui/ui_btp.R', local = TRUE)$value,
    source('ui/ui_qp.R', local = TRUE)$value
  )

这是它的外观: 在此处输入图像描述

这就是我们想要的: 在此处输入图像描述

标签: htmlcssrshinynavbar

解决方案


推荐阅读