library(shiny)
library(htmltools)
library(bslib)
# bs_theme_preview()
theme = bs_theme(version = 4, font_scale = 1.2, spacer = "2rem",
bootswatch = "materia")
ui <- bootstrapPage(
theme = theme,
tags$head(
htmlDependency(
name="my stylesheet",
version = "1.0",
src = "www/",
stylesheet = "style.css"
)
),
htmlTemplate(
"www/index.html",
inputwidget = tagList(
sliderInput(inputId = "bins", label = "Number of bins:", min = 1, max = 50, value = 30),
submitButton(text = "Apply Changes", icon = NULL, width = NULL)
),
plot1 = plotOutput(outputId = "distPlot"),
)
)
server <- function(input, output) {
output$distPlot <- renderPlot({
x <- faithful$waiting
bins <- seq(min(x), max(x), length.out = input$bins + 1)
hist(x, breaks = bins, col = "#75AADB", border = "white",
xlab = "Waiting time to next eruption (in mins)",
main = "Histogram of waiting times")
})
}
# Create Shiny app ----
shinyApp(ui = ui, server = server)
.card-header {
margin-top: 0;
}
<ul class="nav navbar bg-dark">
<li class="nav-item">
<a class="navbar-brand" href="#">
<img src="img/uw-crest-web.svg"
width="30" height="30" alt="UWlogo">
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#inputcard">Plots</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#howto">Getting Started</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
</ul>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<h2>
An Easy Solution
</h2>
<p>
Use Bootstrap interative builder and you even do not need to write code!
</p>
<p>
<a class="btn btn-primary btn-large" href="#inputcard">Try now</a>
</p>
</div>
<div class="row" style="display:flex">
<div class="col-md-4" style="align-items:stretch">
<div class="card" id="inputcard" style="height:100%">
<h5 class="card-header" id="input">
Input
</h5>
<div class="card-body">
{{inputwidget}}
</div>
<div class="card-footer">
Here is the input
</div>
</div>
</div>
<div class="col-md-8">
<div class="card">
<h5 class="card-header">
Plot Output
</h5>
<div class="card-body">
{{plot1}}
</div>
<div class="card-footer">
Here should be a plot output
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 id="howto">
How to do this?
</h3>
<ol>
<li class="list-item">
Use Online Bootstrap Builders to build your bootstrap UI without writing any code, and leave place holder for your shiny output.
</li>
<li class="list-item">
Download the HTML file generated. You may need to adjust the HTML a bit like filling in pictures and adjust css of a single element.
</li>
<li class="list-item">
Use "htmlTemplate" in Shiny to render UI and bslib to configure bootstrap version 4 and change theme.
</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h3 id="about">
About
</h3>
<p>This example is a part of tutorial: Customize Shiny UI with HTML and CSS</p>
<p>
<a class="btn" href="https://www.layoutit.com/build" target="_blank">Learn More</a>
</p>
</div>
<div class="col-md-8">
<iframe
src="https://www.youtube.com/embed/0W84gxCm83A"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
style="width: 80%; aspect-ratio: 16/9; margin:3rem;"></iframe>
</div>
</div>
</div>
</div>
</div>
