Полусвернутая боковая панель переработана - R блестящая приборная панельplus - PullRequest
Новая
       7

Полусвернутая боковая панель переработана - R блестящая приборная панельplus

0 голосов
/ 30 октября 2019

Попытка использовать боковую панель с полусвертыванием Shiny dashboardplus, но столкнусь с некоторыми проблемами и будет признательна за ваш совет.

Воспроизводимый скрипт: 

library("shiny")
library("htmltools")
library("shinydashboard")
library("shinydashboardPlus")
library("bootstrap")
library("shinyjs")


# UI Page Starts
ui = dashboardPagePlus(

  title = "Shiny App",

  dashboardHeader(
    title = "Title with A Few Other Things",
    titleWidth = 530
  ),

  dashboardSidebar(
    fluidRow(
      useShinyjs(),
      column(8, align = "left", offset = 0, 
             style='padding-left: 28px;  padding-top: 10px', 
             h4(HTML(paste0("Project Lists")))),
      column(2, align = "left", offset = 0, 
             style='padding-top: 5px',
             actionButton("toggleSidebar", icon("th"), style = "padding-top: 12px;")
      )
    ),

    # Remove the sidebar toggle element
    tags$script(JS("document.getElementsByClassName('sidebar-toggle')[0].style.visibility = 'hidden';")),

    fluidRow(
      h4(HTML(paste0("Contents that are not supposed to show when collapsed.")))
    )
  ),

  dashboardBody()
)



#Server
server = function(input, output, session) {
  #side bar  
  observeEvent(input$toggleSidebar, {
    shinyjs::toggleClass(selector = "body", class = "sidebar-collapse")
  })
}

#
shinyApp(ui = ui, server = server)

В этом примереЯ удалил стандартную кнопку переключателя боковой панели dashboardplus и добавил новую в правую боковую панель. (Следует отметить, что даже если я использую стандартную версию, это в конечном итоге будет той же самой проблемой). Если щелкнуть, чтобы свернуть боковую панель, сама боковая панель выглядит полувернутой, как и ожидалось. Тем не менее, я хотел бы также

  1. избавиться от элементов на боковой панели, когда они полуразрушены.
  2. добавить «список проектов» вертикально к полуразвернутой боковой панели.
  3. оставить заголовок как есть, без свертывания

Ниже я сначала покажу, что это такоепрямо сейчас и то, что я хочу, чтобы это было. Большое спасибо заранее за вашу помощь!

enter image description here

1 Ответ

1 голос
/ 30 октября 2019

Это не полный ответ на все ваши вопросы, но по крайней мере частичный, чтобы решить проблему с логотипом / названием.

Я много копался в CSS этого элемента (мне это тоже понадобилось для моего приложения) и нашел решение в CSS.

230px - это ширина по умолчанию для диапазона логотипа, но ваша кажется более длинной, поэтому вам, возможно, придется изменить все вхождения 230px с шириной диапазона логотипа (вы должны найтиэто с помощью элемента inspect и наведения на него надписи) 

@media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .main-header .logo {
    width: 230px;
  }
}
@media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .main-header .navbar {
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .main-header .navbar {
    margin-left: 230px !important;
  }
}

@media (max-width: 767px) {
  .main-header .logo, .main-header .navbar {
    width: 100% !important;
    float: none;
  }
}

.main-header .logo {
  width: 230px;
}

Если вы не знаете, как получить CSS-файл в своем блестящем приложении, вы можете добавить 

tags$head(
  includeCSS("styles.css")
)

(гдеstyles.css - это ваш CSS-файл, включающий этот код) в верхней части начальной вкладки fluidPage() (или что бы то ни было, вы отображаете страницу)

...