Как отображать фиксированное изображение на / с / после фиксированного заголовка на R Shiny Dashboard

Я использую пакет R Shiny Dashboard для создания информационной панели. На самом деле мне нужен фиксированный заголовок, который не будет двигаться при прокрутке вниз. В верхней правой части этого заголовка я хотел бы разместить изображение. Мой файл css называется "remaniement" и находится в папке \ www.

  1. Первая идея: я попытался параметризовать ширину каждого элемента, например, установил ширину .skin-blue .main-header .navbar на 80% и ширину моего изображения на 20%, но проблемы возникают при изменении размера окна браузера.

  2. Я попытался установить ширину заголовка на 100% и поместить свое изображение над заголовком. Я не знаю почему, изображение всегда находится под заголовком, даже когда я помещаю z-index: 9999999; в свой файл css.

  3. Для обеих идей, приведенных выше, я безуспешно пытался использовать изображение, закодированное на функциях dashboardBody () или dashboardHeader ().

Вот мой код ui.R:

library(shiny)
library(shinydashboard)

header<-dashboardHeader(title = "Titre",disable = FALSE)
sidebar<-dashboardSidebar(sidebarMenu(menuItem("Home", tabName = "home", icon = icon("home"))))
body<-dashboardBody(
tags$link(rel = "stylesheet", href = "remaniement.css"),
tags$div(class="windows",tags$a(href='https://www.microsoft.com/en-gb/windows',target="_blank",tags$img(src='windows.png',width = 80))))

ui<-dashboardPage(skin = "blue",header,sidebar,body)

мой код server.R:

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

и мой код css:

/*image that a want to put in the header*/
.windows{
position: fixed;
right: 0;
top: 0;
white-space: nowrap;
overflow: visible;
background-color: #FFFFFF;
z-index:9999999;}

/* logo */
.skin-blue .main-header .logo {
background-color: #3c8dbc;
color: #FFF;
position: fixed;
width: 230px;
white-space: nowrap;
overflow: visible;}

/* navbar (rest of the header) */
.skin-blue .main-header .navbar {
width:80%;
position: fixed;
white-space: nowrap;
overflow: visible;
background: linear-gradient(90deg, #3c8dbc, #ffffff);
z-index:850;}

.skin-blue .main-header .navbar .sidebar-toggle {
position: fixed;
white-space: nowrap;
overflow: visible;}

.sidebar {
color: #FFF;
position: fixed;
width: 220px;
white-space: nowrap;
overflow: visible;}

.content-wrapper,
.right-side,
.main-footer{
-webkit-transition: -webkit-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
margin-left: 230px;
z-index: 820;
top:50px;
position: relative;
white-space: nowrap;
overflow: visible;
background-color: #ffffff;}

.main-sidebar,
.left-side {
position: absolute;
top: 0;
left: 0;
padding-top: 50px;
min-height: 100%;
width: 230px;
z-index: 810;
-webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;}

Я действительно заблудился, прошло больше 3 дней, я застрял в этом ...

Заранее спасибо !


person OF3390    schedule 22.04.2016    source источник


Ответы (1)


(отредактировано)

Вещи «довольно простые» (но найти это несколько сурово).

Во-первых, мне нужно было установить каталог изображений как «путь к ресурсам» следующим образом:

addResourcePath("<name for my resource path>", "<actual path>"

По возможности предпочитайте использовать system.file() для определения фактического пути, это чистый способ. Вы также можете проверить текущие пути к ресурсам (блестящие значения по умолчанию + ваши) с помощью resourcePath()

Затем вы можете вызвать свою недавно зарегистрированную папку с помощью tags$img() в пользовательском интерфейсе:

tags$img("<actual path>/local-path-to-your-image", ...) # ... can contain HTML parameter such as width and height

И готово!

person Elie Ker Arno    schedule 02.06.2020