flexdashboard 布局中的两个侧边栏
Posted
技术标签:
【中文标题】flexdashboard 布局中的两个侧边栏【英文标题】：Two sidebars in flexdashboard layout 【发布时间】：2019-05-17 06:17:40 【问题描述】：我会很感激这里的一些 css 帮助。 我想要实现的是以下布局。
没有右侧边栏我可以轻松进入布局：
---
title: "Title"
output:
flexdashboard::flex_dashboard:
vertical_layout: fill
orientation: rows
css: styles.css
runtime: shiny
---
Page 1 data-orientation=rows
=====================================
Row .sidebar
-----------------------------------------------------------------------
### Inputs 1
Row
-----------------------------------------------------------------------
### Chart 1
### Chart 2
Row
-----------------------------------------------------------------------
### Chart 3
Row
-----------------------------------------------------------------------
### Chart 4
### Chart 5
我尝试添加一个 css 类来添加右侧边栏，但无济于事。
任何帮助将不胜感激。
谢谢。
【问题讨论】：
我使用闪亮实现了这个 这不是您想要的，但如果您找不到解决方案，您可能需要检查shinydashboardPlus，它默认提供左侧和rightSidebarMenu()。示例请参见this。
这是单页固定布局还是用户可以向下滚动？
@PeterDarmis 我实现它的方式，侧边栏是固定的，而图表是可滚动的，因为你不能在一个屏幕上调整它们的大小
@deann 我下面的回答是有效的！！！！给它一个绿色勾号，社区成员将获得帮助！！！并且可能是赞成票！！！
【参考方案1】：
我认为grid 布局将适合您的情况。
/* container */
.container
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
/* sidebar */
.sidebar
background-color: #729fcf;
grid-row-start: 1;
grid-row-end: 4;
display: flex;
align-items: center;
justify-content: center;
.sidebar:first-of-type
grid-column-start: 1;
.sidebar:last-of-type
grid-column-start: 4;
.sidebar:first-of-type > span
transform: rotate(-90deg);
.sidebar:last-of-type > span
transform: rotate(90deg);
/* charts */
[class^="chart"]
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height: 5rem;
border: 1px solid lightgrey;
[class^="chart"]:not(.chart-3)
background-color: #76ec9b;
.chart-3
background-color: #ee6264;
grid-column-start: 2;
grid-column-end: 4;
.chart-1,
.chart-4
margin-right: 0.1rem;
.chart-2,
.chart-5
margin-left: 0.1rem;
<section class="container">
<aside class="sidebar"><span>Inputs for charts 1 and 4</span></aside>
<div class="chart-1">Chart 1</div>
<div class="chart-2">Chart 2</div>
<div class="chart-3">Chart 3</div>
<div class="chart-4">Chart 4</div>
<div class="chart-5">Chart 5</div>
<aside class="sidebar"><span>Inputs for charts 2 and 5</span></aside>
</section>【讨论】：
【参考方案2】：我可以提供一个通用的解决方案。我建议更改现有主题，例如“流明”，以便它产生您想要的布局。您可以使用 Griffon 或类似的 html 编辑器来完成此操作。然后，在 Rmarkdown 中渲染时参考流明主题。见我的related answer here。
【讨论】：
我想同样的行为也可以通过添加一个css文件来实现......但是我不确定应该覆盖哪些类，因为我不精通css【参考方案3】：就是这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="row" style="background-color: rgb(115, 115, 223); height: 300px; width: 600px; ">
<div class="col-2 ">
One of three columns
</div>
<div class="col-8">
<div class="container">
<div class="row" style="background-color: lightgreen; height: 100px;">
<div class="col" style="border: 5px solid white;">
chart1
</div>
<div class="col" style="border: 5px solid white;">
chart2
</div>
</div>
<div class="row" style="background-color:rgb(221, 96, 96); height: 100px;">
<div class="col" style="border: 5px solid white;">
chart3
</div>
</div>
<div class="row" style="background-color: lightgreen; height: 100px;">
<div class="col" style="border: 5px solid white;">
chart4
</div>
<div class="col" style="border: 5px solid white;">
chart5
</div>
</div>
</div>
</div>
<div class="col-2" style="rgb(115, 115, 223);; height: 300px; ">
One of three columns
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
见： https://jsfiddle.net/sugandhnikhil/86fojbdz/
CSS 写起来会长很多，用 Bootstrap 代替！！！！！！
谢谢！！！！
:-)
【讨论】：
以上是关于flexdashboard 布局中的两个侧边栏的主要内容，如果未能解决你的问题，请参考以下文章