Question

如果您熟悉the shiny website，您会注意到当您按下按钮折叠侧边栏时，它会显示更大的图标（但不会完全隐藏侧边栏。

你知道如何编写代码吗？

我听说包shinyBS可能是有用的或引导的东西，但我不明白它是什么。

崩溃之前：

<body id="app" class="app ng-scope buffer-pinterest" data-custom-page="" data-off-canvas-nav="" data-ng-controller="AppCtrl">

这个（见突出显示的文字）：

崩溃后：

<body id="app" class="app ng-scope buffer-pinterest nav-collapsed-min" data-custom-page="" data-off-canvas-nav="" data-ng-controller="AppCtrl">

Answer 1

你可以通过两个很棒的库来帮助你实现这个目标：shinydashboard（获取基于AdminLTE bootstrap主题的navbar）和shinyjs（包括模板的必要类）。下面的工作代码：

## app.R ##
library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(sidebarMenu(menuItem('Test', icon = icon('phone'), tabName = 'sampletabname'))),
  dashboardBody(h3('Test app'),
                useShinyjs())
)

server <- function(input, output) {
  runjs('
        var el2 = document.querySelector(".skin-blue");
        el2.className = "skin-blue sidebar-mini";
        ')
}

shinyApp(ui, server)

编辑：为了解决评论中提到的问题，我使用visibility：hidden css样式。应用程序服务器部分的新内容（其余部分保持不变）：

  runjs({'
        var el2 = document.querySelector(".skin-blue");
        el2.className = "skin-blue sidebar-mini";
        var clicker = document.querySelector(".sidebar-toggle");
        clicker.id = "switchState";
    '})

  onclick('switchState', runjs({'
        var title = document.querySelector(".logo")
        if (title.style.visibility == "hidden") {
          title.style.visibility = "visible";
        } else {
          title.style.visibility = "hidden";
        }
  '}))

Answer 2

或者您可以将该代码插入到javascript文件中，例如sidebar.js文件夹中的www（与server.R和ui.R位于同一级别）

$( document ).ready(function() {
  $(".skin-blue").addClass("sidebar-mini");
  $(".sidebar-toggle").click(function() {
    $(".logo").toggleClass("hidden");
  });
});

然后，您需要将其加载到页面标题中，即dashboardBody的顶部：

dashboardBody(
      tags$head(
        tags$script(src = "sidebar.js")
      ),
...

您根本不在乎shinyjs

Answer 3

我使用纯 CSS 和 Bootstrap 4 创建了折叠边栏。

见下面的工作片段：

您也可以在 codepen 上查看：https://codepen.io/imharshm/pen/ZEePyyR

在 codepen 示例中，我使用了 SCSS。

.sidebar-wrapper {
  background: #fff;
  box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.08);
  width: 60px;
  height: 100vh;
  position: absolute;
  top: 0;
  transition: all 0.35s ease;
  overflow: hidden auto;
  z-index: 9;
}

.sidebar-wrapper:hover,
.sidebar-wrapper.show {
  width: 300px;
}

@media (max-width: 599px) {
  .sidebar-wrapper {
    width: 0;
  }
}

.sidebar-wrapper #sidebar-container {
  width: 300px;
  height: 100%;
  position: absolute;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item {
  border: 0;
  border-left: 5px solid transparent;
  border-radius: 0 !important;
  color: #0c0c0c;
  padding: 0.5rem 0;
  padding-right: 0.5rem;
  min-height: 45px;
  border-top-color: rgba(206, 212, 218, 0.36) !important;
  border-bottom-color: rgba(206, 212, 218, 0.36) !important;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item.selected {
  border-left: 5px solid #196bd6;
  color: #196bd6;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item.brand-name {
  color: #1dc8cd;
  background: #26262d;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item .change-workspace-dropdown button {
  border: 1px solid #ddd d;
  border-radius: 0.5rem;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item .change-workspace-dropdown .dropdown-menu {
  padding: 0;
  width: 200px;
  border-radius: 0.5rem;
  overflow: hidden;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item .change-workspace-dropdown .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item .change-workspace-dropdown .dropdown-menu .dropdown-item .handler-icon {
  font-size: 20px;
  margin-right: 0.5rem;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item .edit-workspace {
  color: #296bd6;
  font-size: 10px;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item .plan-info {
  background: rgba(41, 107, 214, 0.09);
  border-radius: 15px;
  color: #296bd6;
  font-size: 10px;
  padding: 0.125rem 0.5rem;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item .menu-icon {
  font-size: 18px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 45px;
  width: 55px;
  padding-right: 0.5rem;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item .menu-collapsed {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 0.5rem;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item .submenu-icon {
  display: inline-block;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
  content: "\f0d7";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
  content: "\f0d8";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 10px;
}

.sidebar-wrapper #sidebar-container .list-group .sidebar-submenu {
  font-size: 0.9rem;
}

.sidebar-wrapper #sidebar-container .list-group .sidebar-submenu .list-group-item {
  height: 45px;
  padding-left: 30px;
}

.cursor-pointer {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />


<div class="sidebar-wrapper">
  <div id="sidebar-container">
    <div class="h-100 d-flex flex-column">
      <ul class="list-group">
        <a href="#" class="list-group-item list-group-item-action brand-name">
          <div class="d-flex w-100 justify-content-start align-items-center">
            <img class="menu-icon" src="https://imharshm.github.io/logo.png" />
            <div class="menu-collapsed">
              <span>IMHARSHM </span>
            </div>
          </div>
        </a>
        <a href="#" class="list-group-item list-group-item-action">
          <div class="d-flex w-100 justify-content-start align-items-center">
            <span class="menu-icon fa fa-briefcase"></span>
            <div class="menu-collapsed">
              <span>Switch Workspace <span class="edit-workspace ml-2">Edit</span></span>
              <div class="change-workspace-dropdown">
                <button class="dropdown-toggle" data-toggle="dropdown">
                  Change workspace
                </button>
                <ul class="dropdown-menu" id="linked-handles">
                  <li class="dropdown-item" href="#"> <span class="handler-icon fa fa-facebook-square"></span>
                    <span>Handler 1</span></li>

                  <li class="dropdown-item" href="#"><span class="handler-icon fa fa-instagram"></span><span>Handler 1</span></li>
                </ul>
              </div>
            </div>
          </div>
        </a>

        <a href="#" class="list-group-item list-group-item-action analysis-list-item border-top">
          <div class="d-flex w-100 justify-content-start align-items-center">
            <span class="menu-icon fa fa-pencil"></span>
            <div class="menu-collapsed"><span>Improve Post</span> <span class="small">Optimise your
                Instagram Posts</span></div>
          </div>
        </a>

        <a href="#" class="list-group-item list-group-item-action competitor-list-item">
          <div class="d-flex w-100 justify-content-start align-items-center">
            <span class="menu-icon fa fa-line-chart"></span>
            <div class="menu-collapsed"><span>Content Analysis</span> <span class="small">Analyse your
                competitor's strategy</span></div>
          </div>
        </a>
      </ul>

      <ul class="list-group mt-auto">
        <a href="#" class="list-group-item list-group-item-action border-top" data-backdrop="static" data-toggle="modal" data-target="#newWorkspaceModal">
          <div class="d-flex w-100 justify-content-start align-items-center">
            <span class="menu-icon fa fa-plus-square"></span>
            <div class="menu-collapsed"><span>New Workspace</span> <span class="small">Use a new Instagram
                Account</span></div>
          </div>
        </a>

        <a href="#" class="list-group-item list-group-item-action pricing-list-item border-top">
          <div class="d-flex w-100 justify-content-start align-items-center">
            <span class="menu-icon fa fa-usd"></span>
            <div class="menu-collapsed">
              <span>Plan Details <span class="plan-info">Trial plan: 7 days left</span></span> <span class="small">Manage your subscriptions</span>
            </div>
          </div>
        </a>

        <a href="#" class="list-group-item list-group-item-action">
          <div class="d-flex w-100 justify-content-start align-items-center">
            <span class="menu-icon fa fa-smile-o"></span>
            <div class="menu-collapsed"><span>Apply Offer Code</span> <span class="small">Redeem your
                discount codes</span></div>
          </div>
        </a>

        <a href="#" class="list-group-item list-group-item-action border-top">
          <div class="d-flex w-100 justify-content-start align-items-center">
            <span class="menu-icon fa fa-question"></span>
            <div class="menu-collapsed"><span>Help</span> <span class="small">Let us help you use for better</span></div>
          </div>
        </a>

        <a class="list-group-item list-group-item-action">
          <div class="d-flex w-100 justify-content-start align-items-center">
            <span class="menu-icon fa fa-user"></span>
            <div class="menu-collapsed"><span class="topbar-username">Profile</span> <span class="g-signout cursor-pointer small">Logout</span></div>
            <span class="submenu-icon ml-auto"></span>
          </div>
        </a>
      </ul>
    </div>
  </div>
</div>

如何编码侧边栏折叠闪亮只显示图标

3 个答案: