Я пытаюсь создать приложение Shiny, используя шаблон HTML, как указано в документах . Я использую Bulma в качестве CSS фреймворка, и поскольку в приложении много графики, я решил использовать вкладки для их разделения.
Вывод (некоторые renderText в этом примере) отображается правильно на первой вкладке, но на второй вкладке вывод не отображается, только selectInput, и я не вижу никаких сообщений об ошибках в консоли. Ниже приведен воспроизводимый пример того, что я пытаюсь выполнить sh и некоторые изображения для иллюстрации.
Я подозреваю, что, возможно, мне не хватает дополнительного кода (JavaScript, может быть?), Чтобы сказать блестящему для отображения вывод на второй вкладке, но если это так, почему отображается selectInput, а не textOuptut? Кто-нибудь может мне помочь? Заранее спасибо.
шаблон. html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shiny app</title>
{{ headContent() }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<script src="index.js"></script>
</head>
<body>
<section class="hero is-danger is-bold is-small">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title">
Example Shiny app
</h1>
</div>
</div>
<div class="hero-foot">
<nav class="tabs is-boxed is-centered">
<div class="container">
<ul>
<li class="tab is-active" onclick="openTab(event,'Tab1')"><a>Tab 1</a></li>
<li class="tab" onclick="openTab(event,'Tab2')"><a>Tab 2</a></li>
<li class="tab" onclick="openTab(event,'Tab3')"><a>Tab 3</a></li>
</ul>
</div>
</nav>
</div>
</section>
<section class="section main">
<div class="container">
<div id="Tab1" class="content-tab">
<p>
tab1<br>
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
<div>
{{ select }}
</div>
<div>
{{ text }}
</div>
</div>
<div id="Tab2" class="content-tab" style="display:none">
<p>
tab2<br>
Details Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.</p>
<div>
{{ select2 }}
</div>
<div>
{{ text2 }}
</div>
</div>
<div id="Tab3" class="content-tab" style="display:none">
<p>
tab3 <br>
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</section>
</body>
</html>
server.R
library(shiny)
function(input, output) {
output$selected_var <- renderText({
paste("You have selected", input$var)
})
output$selected_var2 <- renderText({
paste("You have selected", input$var2)
})
}
ui.R
htmlTemplate("template.html",
select = selectInput("var",
label = "Choose a variable to display",
choices = c("Percent White",
"Percent Black",
"Percent Hispanic",
"Percent Asian"),
selected = "Percent White"),
text = textOutput("selected_var"),
select2 = selectInput("var2",
label = "Choose a variable to display",
choices = c("Choice one",
"Choice two",
"Choice three",
"Choice four"),
selected = "Percent White"),
text2 = textOutput("selected_var2")
)
index. js (javascript для открытия вкладок)
function openTab(evt, tabName) {
var i, x, tablinks;
x = document.getElementsByClassName("content-tab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tab");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" is-active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " is-active";
}
