如何修改shiny dashboard 各版块的颜色

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

下列代码是一个如何修改shiny dashboard中各个板块颜色完整的列子：
效果图：



library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(
    title = "Example of a long title that needs more space",
    titleWidth = 450
  ),
  dashboardSidebar( sidebarMenu(
    menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
    menuItem("Widgets", icon = icon("th"), tabName = "widgets",
             badgeLabel = "new", badgeColor = "green")
  )),
  dashboardBody(
    # Also add some custom CSS to make the title background area the same
    # color as the rest of the header.
    tags$head(tags$style(HTML('
                              /* logo 颜色 */
                              .skin-blue .main-header .logo {
                              background-color: green;
                              }

                              /* 鼠标点击logo时呈现的颜色  */
                              .skin-blue .main-header .logo:hover {
                              background-color: red;
                              }

                              /* logo同一行剩下的颜色 */
                              .skin-blue .main-header .navbar {
                              background-color: blue;
                              }        

                              /* 左边列表主要颜色 */
                              .skin-blue .main-sidebar {
                              background-color: orange;
                              }

                              /* 左边列第一个按钮颜色 */
                              .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
                              background-color: black;
                              }

                              /* 左边列第二个按钮颜色已经上面的字体图标等颜色*/
                              .skin-blue .main-sidebar .sidebar .sidebar-menu a{
                              background-color: red;
                              color: black;
                              }

                              /* other links in the sidebarmenu when hovered */
                              .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
                              background-color: #ff69b4;
                              }
                              /* toggle button when hovered  */                    
                              .skin-blue .main-header .navbar .sidebar-toggle:hover{
                              background-color: #ff69b4;
                              }
                              ')))
                )


)

server <- function(input, output) { }

shinyApp(ui, server)

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏1 回帖

关键词：Dashboard Shiny Board Dash Shin shiny dashboard