将图像和文本作为标题放置在shinydashboard中
我有下面的shinydashboard,我在其中隐藏了标题,以便放置图像和图像文本作为标题。但图像并没有向左移动,以便其左侧没有空白,文本似乎被隐藏将图像和文本作为标题放置在shinydashboard中,r,shiny,shinydashboard,R,Shiny,Shinydashboard,我有下面的shinydashboard,我在其中隐藏了标题,以便放置图像和图像文本作为标题。但图像并没有向左移动,以便其左侧没有空白,文本似乎被隐藏 library(shiny) library(shinydashboard) library(shinydashboardPlus) mytitle <- paste0("Global Analytics COE: Resource Allocation and Revenue Risk") shinyApp( ui
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
mytitle <- paste0("Global Analytics COE: Resource Allocation and Revenue Risk")
shinyApp(
ui = dashboardPage(
header = dashboardHeader(
titleWidth = "0px",
tags$li(a(
div(style = "margin-left:-15px;margin-bottom:-78px;margin-top:-15px;padding: 0px 1810px 0px 0px ; width: 290px;",
img(src='logoSanofi.jpg',height = "50px",width="230px")),
div(style="display: inline;margin-top:-35px; padding: 0px 50px 0px 70px ;font-size: 14px ;color:#001641;font-family:Chronicle Display Light; width: 50px;",HTML(mytitle))
),
class = "dropdown")
),
sidebar = dashboardSidebar(minified = TRUE, collapsed = F),
body = dashboardBody(
useShinyjs(),#tags$head(tags$script(src="format_number.js")),
tags$head(tags$style(".skin-blue .main-header .logo { padding: 0px;}")),
# Note: 'sidebar-toggle' is a class name (i.e. HTML class attribute) of Shiny icon
tags$script("document.getElementsByClassName('sidebar-toggle')[0].style.visibility = 'hidden';"),
#includeCSS("www/style.css")
)
),
server = function(input, output) { }
)
库(闪亮)
图书馆(shinydashboard)
图书馆(shinydashboardPlus)
mytitle我能够解决这个问题,方法是在图像中添加一个类标记,并在标记头样式中向类添加marginleft属性。下面是更新的代码
library(shiny)
library(shinyjs)
library(shinydashboard)
library(shinydashboardPlus)
mytitle <- paste0("Global Analytics COE: Resource Allocation and Revenue Risk")
shinyApp(
ui = dashboardPage(
header = dashboardHeader(
titleWidth = "0px",
tags$li(a(
div(style = "margin-left:-15px;margin-bottom:-78px;margin-top:-15px;padding: 0px 1810px 0px 0px ; width: 290px;",
img(src='logoSanofi.jpg',height = "50px",width="230px",class = 'header_img')),
div(style="display: inline;margin-top:-35px; padding: 0px 50px 0px 70px ;font-size: 14px ;color:#001641;font-family:Chronicle Display Light; width: 50px;",HTML(mytitle))
),
class = "dropdown")
),
sidebar = dashboardSidebar(minified = TRUE, collapsed = F),
body = dashboardBody(
useShinyjs(),#tags$head(tags$script(src="format_number.js")),
tags$head(tags$style(".skin-blue .main-header .logo { padding: 0px;} .header_img {margin-left: -90px;}")),
# Note: 'sidebar-toggle' is a class name (i.e. HTML class attribute) of Shiny icon
tags$script("document.getElementsByClassName('sidebar-toggle')[0].style.visibility = 'hidden';"),
#includeCSS("www/style.css")
)
),
server = function(input, output) { }
)
库(闪亮)
图书馆(shinyjs)
图书馆(shinydashboard)
图书馆(shinydashboardPlus)
mytitle我已经编写了自定义闪亮脚本,它将解决您的两个问题:
服务器.R
library(shiny)
## build server.R
server <-
function(input, output, session) {}
此代码不可复制,它给出了以下错误:仪表板页面中的错误(选项=列表(sidebarExpandOnHover=TRUE),标题=仪表板标题(titleWidth=“0px”,:未使用的参数(选项=列表(sidebarExpandOnHover=TRUE),控制栏=仪表板控制栏()Stackoverflow-现在重试我编辑我看不到您提到的问题中的文本“我已隐藏标题以放置图像”,是否希望文本显示在右侧图像的后面?在图像的右侧。是的,我已隐藏标题宽度为0的标题,以便您可以将HTML(标题)移动到header=仪表板标题(title=mytitle,然后在标签行中更新标签$head(标签$style(“.skin blue.main header.logo{display:inline;z-index:-1}.header_img{margin left:90px;}.logo{display:inline;width:600px;height:90px;z-index:100;padding left:200px;padding top:50px;}如果答案简单,请根据答案调整。)
####
library(shinydashboard)
library(shiny)
library(shinyBS)
library(shinyjs)
## load functions
source('helper_functions.R')
## build ui.R -----------------------------------
## 1. header -------------------------------
header <-
dashboardHeader(
title = HTML("Intelligence Dashboard"),
disable = FALSE,
titleWidth = 550
)
header$children[[2]]$children[[2]] <-
header$children[[2]]$children[[1]]
header$children[[2]]$children[[1]] <-
tags$a(
href = 'http://https://github.com/PawanRamaMali',
tags$img(
src = 'www/artificial-intelligence-logo.png',
height = '67',
width = '228.6',
align = 'left'
),
target = '_blank'
)
## 2. siderbar ------------------------------
siderbar <-
dashboardSidebar(
width = 200,
sidebarMenu(
id = 'sidebar',
style = "position: relative; overflow: visible;",
## 1st tab show the Main dashboard -----------
menuItem(
"Main Dashboard",
tabName = 'dashboard',
icon = icon('dashboard')
)
)
)
## 3. body --------------------------------
body <- dashboardBody(
## 3.0. CSS styles in header ----------------------------
tags$head(
## modify the dashboard's skin color
tags$style(
HTML(
'
/* logo */
.skin-blue .main-header .logo {
background-color: #00b2e3;
}
/* logo when hovered */
.skin-blue .main-header .logo:hover {
background-color: #00b2e3;
}
/* navbar (rest of the header) */
.skin-blue .main-header .navbar {
background-color: #00b2e3;
}
/* active selected tab in the sidebarmenu */
.skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
background-color: #00b2e3;
}
'
)
),
## modify icon size in the sub side bar menu
tags$style(
HTML(
'
/* change size of icons in sub-menu items */
.sidebar .sidebar-menu .treeview-menu>li>a>.fa {
font-size: 15px;
}
.sidebar .sidebar-menu .treeview-menu>li>a>.glyphicon {
font-size: 13px;
}
/* Hide icons in sub-menu items */
.sidebar .sidebar-menu .treeview>a>.fa-angle-left {
display: none;
}
'
)
) ,
tags$style(HTML("hr {border-top: 1px solid #000000;}")),
## to not show error message in shiny
tags$style(HTML(
".shiny-output-error { visibility: hidden; }"
)),
tags$style(HTML(
".shiny-output-error:before { visibility: hidden; }"
)),
## head dropdown menu size
tags$style(
HTML(
'.navbar-custom-menu>.navbar-nav>li:last-child>.dropdown-menu { width:10px; font-size:10px; padding:1px; margin:1px;}'
)
),
tags$style(
HTML(
'.navbar-custom-menu> .navbar-nav> li:last-child > .dropdown-menu > h4 {width:0px; font-size:0px; padding:0px; margin:0px;}'
)
),
tags$style(
HTML(
'.navbar-custom-menu> .navbar-nav> li:last-child > .dropdown-menu > p {width:0px; font-size:0px; padding:0px; margin:0px;}'
)
)
),
## 3.1 Dashboard body --------
tabItems(## 3.1 Main dashboard --------------
tabItem(
tabName = 'dashboard',
## contents for the dashboard tab
div(id = 'main_wait_message',
h1() ,
tags$hr()),
fluidRow(),
h2(paste0("Dashboard Content")),
fluidRow(),
))
)
## put UI together ----------
ui <-
dashboardPage(header, siderbar, body)
#### vb style -----------------
VB_style <- function(msg = 'Hello', style = "font-size: 100%;") {
tags$p(msg , style = style)
}
## rgb to hex function---------------
GetColorHexAndDecimal <- function(color)
{
c <- col2rgb(color)
sprintf("#%02X%02X%02X %3d %3d %3d", c[1], c[2], c[3], c[1], c[2], c[3])
}
# Function to call in place of dropdownMenu --------------
customSentence <- function(numItems, type) {
paste("Feedback & suggestions")
}
customSentence_share <- function(numItems, type) {
paste("Love it? Share it!")
}
##
dropdownMenuCustom <-
function (...,
type = c("messages", "notifications", "tasks"),
badgeStatus = "primary",
icon = NULL,
.list = NULL,
customSentence = customSentence)
{
type <- match.arg(type)
if (!is.null(badgeStatus))
shinydashboard:::validateStatus(badgeStatus)
items <- c(list(...), .list)
lapply(items, shinydashboard:::tagAssert, type = "li")
dropdownClass <- paste0("dropdown ", type, "-menu")
if (is.null(icon)) {
icon <- switch(
type,
messages = shiny::icon("envelope"),
notifications = shiny::icon("warning"),
tasks = shiny::icon("tasks")
)
}
numItems <- length(items)
if (is.null(badgeStatus)) {
badge <- NULL
}
else {
badge <- tags$span(class = paste0("label label-", badgeStatus),
numItems)
}
tags$li(
class = dropdownClass,
a(
href = "#",
class = "dropdown-toggle",
`data-toggle` = "dropdown",
icon,
badge
),
tags$ul(
class = "dropdown-menu",
tags$li(class = "header",
customSentence(numItems, type)),
tags$li(tags$ul(class = "menu", items))
)
)
}
|
+-- ui.R
+-- server.R
+-- helper_functions.R
+-- www/logo.png