github/shiny
1
1
Fork 0
mirror of https://github.com/rstudio/shiny.git synced 2026-04-29 03:00:45 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
111c703c30cebca6032bbd444b0933cf899fb58f
shiny/reference/fluidPage.html
schloerke 6c75365d0a Built site for shiny@1.12.1.9000: d2245a2
2025-12-09 21:34:58 +00:00

209 lines
16 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<!-- Generated by pkgdown: do not edit by hand --><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Create a page with fluid layout — fluidPage • shiny</title><!-- jquery --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><!-- Bootstrap --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha256-bZLfwXAP04zRMK2BjiO8iu9pf4FbLqX6zitd+tIvLhE=" crossorigin="anonymous"><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-nuL8/2cJ5NDSSwnKD8VqreErSWHtnEP9E7AySL+1ev4=" crossorigin="anonymous"></script><!-- bootstrap-toc --><link rel="stylesheet" href="../bootstrap-toc.css"><script src="../bootstrap-toc.js"></script><!-- Font Awesome icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/v4-shims.min.css" integrity="sha256-wZjR52fzng1pJHwx4aV2AO3yyTOXrcDW7jBpJtTwVxw=" crossorigin="anonymous"><!-- clipboard.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" integrity="sha256-inc5kl9MA1hkeYUt+EC3BhlIgyp/2jDIyBLS6k3UxPI=" crossorigin="anonymous"></script><!-- headroom.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/headroom.min.js" integrity="sha256-AsUX4SJE1+yuDu5+mAVzJbuYNPHj/WroHuZ8Ir/CkE0=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script><!-- pkgdown --><link href="../pkgdown.css" rel="stylesheet"><script src="../pkgdown.js"></script><meta property="og:title" content="Create a page with fluid layout — fluidPage"><meta property="og:description" content="Functions for creating fluid page layouts. A fluid page layout consists of
rows which in turn include columns. Rows exist for the purpose of making sure
their elements appear on the same line (if the browser has adequate width).
Columns exist for the purpose of defining how much horizontal space within a
12-unit wide grid it's elements should occupy. Fluid pages scale their
components in realtime to fill all available browser width."><meta property="og:image" content="/logo.png"><!-- mathjax --><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-84DKXVJXs0/F8OTMzX4UR909+jtl4G7SPypPavF+GfA=" crossorigin="anonymous"></script><!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]--></head><body data-spy="scroll" data-target="#toc">
<div class="container template-reference-topic">
<header><div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">
<a class="navbar-link" href="../index.html">shiny</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="">1.12.1.9000</span>
</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"><li>
<a href="../reference/index.html">Reference</a>
</li>
<li>
<a href="../news/index.html">Changelog</a>
</li>
</ul><ul class="nav navbar-nav navbar-right"><li>
<a href="https://github.com/rstudio/shiny/" class="external-link">
<span class="fab fa-github fa-lg"></span>
</a>
</li>
</ul></div><!--/.nav-collapse -->
</div><!--/.container -->
</div><!--/.navbar -->
</header><div class="row">
<div class="col-md-9 contents">
<div class="page-header">
<h1>Create a page with fluid layout</h1>
<small class="dont-index">Source: <a href="https://github.com/rstudio/shiny/blob/main/R/bootstrap-layout.R" class="external-link"><code>R/bootstrap-layout.R</code></a></small>
<div class="hidden name"><code>fluidPage.Rd</code></div>
</div>
<div class="ref-description">
<p>Functions for creating fluid page layouts. A fluid page layout consists of
rows which in turn include columns. Rows exist for the purpose of making sure
their elements appear on the same line (if the browser has adequate width).
Columns exist for the purpose of defining how much horizontal space within a
12-unit wide grid it's elements should occupy. Fluid pages scale their
components in realtime to fill all available browser width.</p>
</div>
<div id="ref-usage">
<div class="sourceCode"><pre class="sourceCode r"><code><span><span class="fu">fluidPage</span><span class="op">(</span><span class="va">...</span>, title <span class="op">=</span> <span class="cn">NULL</span>, theme <span class="op">=</span> <span class="cn">NULL</span>, lang <span class="op">=</span> <span class="cn">NULL</span><span class="op">)</span></span>
<span></span>
<span><span class="fu">fluidRow</span><span class="op">(</span><span class="va">...</span><span class="op">)</span></span></code></pre></div>
</div>
<div id="arguments">
<h2>Arguments</h2>
<dl><dt id="arg--">...<a class="anchor" aria-label="anchor" href="#arg--"></a></dt>
<dd><p>Elements to include within the page</p></dd>
<dt id="arg-title">title<a class="anchor" aria-label="anchor" href="#arg-title"></a></dt>
<dd><p>The browser window title (defaults to the host URL of the page).
Can also be set as a side effect of the <code><a href="titlePanel.html">titlePanel()</a></code> function.</p></dd>
<dt id="arg-theme">theme<a class="anchor" aria-label="anchor" href="#arg-theme"></a></dt>
<dd><p>One of the following:</p><ul><li><p><code>NULL</code> (the default), which implies a "stock" build of Bootstrap 3.</p></li>
<li><p>A <code><a href="https://rstudio.github.io/bslib/reference/bs_theme.html" class="external-link">bslib::bs_theme()</a></code> object. This can be used to replace a stock
build of Bootstrap 3 with a customized version of Bootstrap 3 or higher.</p></li>
<li><p>A character string pointing to an alternative Bootstrap stylesheet
(normally a css file within the www directory, e.g. <code>www/bootstrap.css</code>).</p></li>
</ul></dd>
<dt id="arg-lang">lang<a class="anchor" aria-label="anchor" href="#arg-lang"></a></dt>
<dd><p>ISO 639-1 language code for the HTML page, such as "en" or "ko".
This will be used as the lang in the <code>&lt;html&gt;</code> tag, as in <code>&lt;html lang="en"&gt;</code>.
The default (NULL) results in an empty string.</p></dd>
</dl></div>
<div id="value">
<h2>Value</h2>
<p>A UI definition that can be passed to the <a href="shinyUI.html">shinyUI</a> function.</p>
</div>
<div id="details">
<h2>Details</h2>
<p>To create a fluid page use the <code>fluidPage</code> function and include
instances of <code>fluidRow</code> and <code><a href="column.html">column()</a></code> within it. As an
alternative to low-level row and column functions you can also use
higher-level layout functions like <code><a href="sidebarLayout.html">sidebarLayout()</a></code>.</p>
</div>
<div id="note">
<h2>Note</h2>
<p>See the <a href="https://shiny.rstudio.com/articles/layout-guide.html" class="external-link"> Shiny-Application-Layout-Guide</a> for additional details on laying out fluid
pages.</p>
</div>
<div id="see-also">
<h2>See also</h2>
<div class="dont-index"><p><code><a href="column.html">column()</a></code></p>
<p>Other layout functions:
<code><a href="fillPage.html">fillPage()</a></code>,
<code><a href="fixedPage.html">fixedPage()</a></code>,
<code><a href="flowLayout.html">flowLayout()</a></code>,
<code><a href="navbarPage.html">navbarPage()</a></code>,
<code><a href="sidebarLayout.html">sidebarLayout()</a></code>,
<code><a href="splitLayout.html">splitLayout()</a></code>,
<code><a href="verticalLayout.html">verticalLayout()</a></code></p></div>
</div>
<div id="ref-examples">
<h2>Examples</h2>
<div class="sourceCode"><pre class="sourceCode r"><code><span class="r-in"><span><span class="co">## Only run examples in interactive R sessions</span></span></span>
<span class="r-in"><span><span class="kw">if</span> <span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/base/interactive.html" class="external-link">interactive</a></span><span class="op">(</span><span class="op">)</span><span class="op">)</span> <span class="op">{</span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span><span class="co"># Example of UI with fluidPage</span></span></span>
<span class="r-in"><span><span class="va">ui</span> <span class="op">&lt;-</span> <span class="fu">fluidPage</span><span class="op">(</span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span> <span class="co"># Application title</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="titlePanel.html">titlePanel</a></span><span class="op">(</span><span class="st">"Hello Shiny!"</span><span class="op">)</span>,</span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span> <span class="fu"><a href="sidebarLayout.html">sidebarLayout</a></span><span class="op">(</span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span> <span class="co"># Sidebar with a slider input</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="sidebarLayout.html">sidebarPanel</a></span><span class="op">(</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="sliderInput.html">sliderInput</a></span><span class="op">(</span><span class="st">"obs"</span>,</span></span>
<span class="r-in"><span> <span class="st">"Number of observations:"</span>,</span></span>
<span class="r-in"><span> min <span class="op">=</span> <span class="fl">0</span>,</span></span>
<span class="r-in"><span> max <span class="op">=</span> <span class="fl">1000</span>,</span></span>
<span class="r-in"><span> value <span class="op">=</span> <span class="fl">500</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">)</span>,</span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span> <span class="co"># Show a plot of the generated distribution</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="sidebarLayout.html">mainPanel</a></span><span class="op">(</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="plotOutput.html">plotOutput</a></span><span class="op">(</span><span class="st">"distPlot"</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">)</span></span></span>
<span class="r-in"><span><span class="op">)</span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span><span class="co"># Server logic</span></span></span>
<span class="r-in"><span><span class="va">server</span> <span class="op">&lt;-</span> <span class="kw">function</span><span class="op">(</span><span class="va">input</span>, <span class="va">output</span><span class="op">)</span> <span class="op">{</span></span></span>
<span class="r-in"><span> <span class="va">output</span><span class="op">$</span><span class="va">distPlot</span> <span class="op">&lt;-</span> <span class="fu"><a href="renderPlot.html">renderPlot</a></span><span class="op">(</span><span class="op">{</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/graphics/hist.html" class="external-link">hist</a></span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/stats/Normal.html" class="external-link">rnorm</a></span><span class="op">(</span><span class="va">input</span><span class="op">$</span><span class="va">obs</span><span class="op">)</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">}</span><span class="op">)</span></span></span>
<span class="r-in"><span><span class="op">}</span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span><span class="co"># Complete app with UI and server components</span></span></span>
<span class="r-in"><span><span class="fu"><a href="shinyApp.html">shinyApp</a></span><span class="op">(</span><span class="va">ui</span>, <span class="va">server</span><span class="op">)</span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span><span class="co"># UI demonstrating column layouts</span></span></span>
<span class="r-in"><span><span class="va">ui</span> <span class="op">&lt;-</span> <span class="fu">fluidPage</span><span class="op">(</span></span></span>
<span class="r-in"><span> title <span class="op">=</span> <span class="st">"Hello Shiny!"</span>,</span></span>
<span class="r-in"><span> <span class="fu">fluidRow</span><span class="op">(</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="column.html">column</a></span><span class="op">(</span>width <span class="op">=</span> <span class="fl">4</span>,</span></span>
<span class="r-in"><span> <span class="st">"4"</span></span></span>
<span class="r-in"><span> <span class="op">)</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="column.html">column</a></span><span class="op">(</span>width <span class="op">=</span> <span class="fl">3</span>, offset <span class="op">=</span> <span class="fl">2</span>,</span></span>
<span class="r-in"><span> <span class="st">"3 offset 2"</span></span></span>
<span class="r-in"><span> <span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">)</span></span></span>
<span class="r-in"><span><span class="op">)</span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span><span class="fu"><a href="shinyApp.html">shinyApp</a></span><span class="op">(</span><span class="va">ui</span>, server <span class="op">=</span> <span class="kw">function</span><span class="op">(</span><span class="va">input</span>, <span class="va">output</span><span class="op">)</span> <span class="op">{</span> <span class="op">}</span><span class="op">)</span></span></span>
<span class="r-in"><span><span class="op">}</span></span></span>
</code></pre></div>
</div>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="pkgdown-sidebar">
<nav id="toc" data-toggle="toc" class="sticky-top"><h2 data-toc-skip>Contents</h2>
</nav></div>
</div>
<footer><div class="copyright">
<p></p><p>Developed by Winston Chang, Joe Cheng, JJ Allaire, Carson Sievert, Barret Schloerke, Garrick Aden-Buie, Yihui Xie, Jeff Allen, Jonathan McPherson, Alan Dipert, Barbara Borges, Posit Software, PBC.</p>
</div>
<div class="pkgdown">
<p></p><p>Site built with <a href="https://pkgdown.r-lib.org/" class="external-link">pkgdown</a> 2.2.0.</p>
</div>
</footer></div>
</body></html>
Reference in New Issue View Git Blame Copy Permalink