如何将 CSS 样式应用于模块化闪亮代码?
How to apply CSS styling to modularized shiny code?
我正在尝试在我正在制作的闪亮应用中对我的 UI 进行风格化。我之前构建了一个相当全面的地图,现在我必须将其模块化以提高可读性。不幸的是,我似乎无法理解如何在使用模块时应用 CSS 样式。
我尝试应用样式的部分在底部的 UI 函数中:
div(class="outer",
tags$head(includeCSS("styles.css")),
baseMapUI("bottommap")
)
我不确定我是否将 CSS 文件保存在错误的位置。我确实在开始时将工作目录设置为我的 /Data
文件夹,所以我也将它保存在那里。由于没有返回错误(即未找到文件),我相信问题出在其他地方。
我的最终结果会有一个程式化的 absolutePanel
,但实际上根本没有应用 CSS 样式。作为参考,这是我的 CSS 文件:
input[type="number"] {
max-width: 80%;
}
div.outer {
position: fixed;
top: 41px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
padding: 0;
}
/* Customize fonts */
body, label, input, button, select {
font-family: 'Helvetica Neue', Helvetica;
font-weight: 200;
}
h1, h2, h3, h4 { font-weight: 400; }
#controls {
/* Appearance */
background-color: white;
padding: 0 20px 20px 20px;
cursor: move;
/* Fade out while not hovering */
opacity: 0.65;
zoom: 0.9;
transition: opacity 500ms 1s;
}
#controls:hover {
/* Fade in while hovering */
opacity: 0.95;
transition-delay: 0;
}
/* Position and style citation */
#cite {
position: absolute;
bottom: 10px;
left: 10px;
font-size: 12px;
}
/* If not using map tiles, show a white background */
.leaflet-container {
background-color: white !important;
}
id = ns("controls")
生成 id bottommap-controls
。所以选择器必须是 #bottommap-controls
而不是 #controls
.
我正在尝试在我正在制作的闪亮应用中对我的 UI 进行风格化。我之前构建了一个相当全面的地图,现在我必须将其模块化以提高可读性。不幸的是,我似乎无法理解如何在使用模块时应用 CSS 样式。
我尝试应用样式的部分在底部的 UI 函数中:
div(class="outer",
tags$head(includeCSS("styles.css")),
baseMapUI("bottommap")
)
我不确定我是否将 CSS 文件保存在错误的位置。我确实在开始时将工作目录设置为我的 /Data
文件夹,所以我也将它保存在那里。由于没有返回错误(即未找到文件),我相信问题出在其他地方。
我的最终结果会有一个程式化的 absolutePanel
,但实际上根本没有应用 CSS 样式。作为参考,这是我的 CSS 文件:
input[type="number"] {
max-width: 80%;
}
div.outer {
position: fixed;
top: 41px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
padding: 0;
}
/* Customize fonts */
body, label, input, button, select {
font-family: 'Helvetica Neue', Helvetica;
font-weight: 200;
}
h1, h2, h3, h4 { font-weight: 400; }
#controls {
/* Appearance */
background-color: white;
padding: 0 20px 20px 20px;
cursor: move;
/* Fade out while not hovering */
opacity: 0.65;
zoom: 0.9;
transition: opacity 500ms 1s;
}
#controls:hover {
/* Fade in while hovering */
opacity: 0.95;
transition-delay: 0;
}
/* Position and style citation */
#cite {
position: absolute;
bottom: 10px;
left: 10px;
font-size: 12px;
}
/* If not using map tiles, show a white background */
.leaflet-container {
background-color: white !important;
}
id = ns("controls")
生成 id bottommap-controls
。所以选择器必须是 #bottommap-controls
而不是 #controls
.