logo标签列表

如何在shiny中编写侧边栏折叠以仅显示图标

htmlcssrshinyshinydashboard
7
如果您熟悉Shiny网站，您会注意到当您按下折叠侧边栏的按钮时，它会显示更大的图标（但不完全隐藏侧边栏）。
您知道如何编写这个功能吗？
我听说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">

enter image description here

3个回答
9
你可以借助两个非常好的库实现这一点：shinydashboard（获取基于AdminLTE bootstrap主题的导航栏）和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";
        }
  '}))
1
我通过切换标题的可见性来解决了这个问题（单击侧边栏折叠使其不可见 - style.visibility =“hidden” - 再次单击使其可见）。这可能不是最优解，但至少它能够工作:D - jniedzwiecki
我不想隐藏标题。我不希望它折叠。这可行吗？你如何获取关于.sidebar-toggle的信息？ - M. Beausoleil
.sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini { display: block; margin-left: -15px; margin-right: -15px; font-size: 18px } 或者 .main-header .logo .logo-mini {display: none}？ - M. Beausoleil
这是一个非常好的答案，对我帮助很大！谢谢！ - Andrew
1
我曾经苦恼于理解.skin-blue的来源。显然，当使用不同的主题（在我的情况下是黑色）时，这会发生变化，所以我必须进行更改。但除此之外，一切都很好，谢谢！ - Adrian
显示剩余5条评论
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

0
我使用纯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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接