Files
shiny/reference/fixedPage.html
2023-08-08 20:38:10 +00:00

176 lines
12 KiB
HTML

<!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 a fixed layout — fixedPage • shiny</title><!-- favicons --><link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png"><link rel="apple-touch-icon" type="image/png" sizes="180x180" href="../apple-touch-icon.png"><link rel="apple-touch-icon" type="image/png" sizes="120x120" href="../apple-touch-icon-120x120.png"><link rel="apple-touch-icon" type="image/png" sizes="76x76" href="../apple-touch-icon-76x76.png"><link rel="apple-touch-icon" type="image/png" sizes="60x60" href="../apple-touch-icon-60x60.png"><!-- jquery --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></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 a fixed layout — fixedPage"><meta property="og:description" content="Functions for creating fixed page layouts. A fixed 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. Fixed pages limit their width
to 940 pixels on a typical display, and 724px or 1170px on smaller and larger
displays respectively."><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.7.5</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 a fixed layout</h1>
<small class="dont-index">Source: <a href="https://github.com/rstudio/shiny/blob/HEAD/R/bootstrap-layout.R" class="external-link"><code>R/bootstrap-layout.R</code></a></small>
<div class="hidden name"><code>fixedPage.Rd</code></div>
</div>
<div class="ref-description">
<p>Functions for creating fixed page layouts. A fixed 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. Fixed pages limit their width
to 940 pixels on a typical display, and 724px or 1170px on smaller and larger
displays respectively.</p>
</div>
<div id="ref-usage">
<div class="sourceCode"><pre class="sourceCode r"><code><span><span class="fu">fixedPage</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">fixedRow</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>...</dt>
<dd><p>Elements to include within the container</p></dd>
<dt>title</dt>
<dd><p>The browser window title (defaults to the host URL of the page)</p></dd>
<dt>theme</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://rdrr.io/pkg/bslib/man/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>lang</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 fixed page use the <code>fixedPage</code> function and include
instances of <code>fixedRow</code> and <code><a href="column.html">column()</a></code> within it. Note that
unlike <code><a href="fluidPage.html">fluidPage()</a></code>, fixed pages cannot make use of higher-level
layout functions like <code>sidebarLayout</code>, rather, all layout must be done
with <code>fixedRow</code> and <code>column</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 fixed
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="flowLayout.html">flowLayout</a>()</code>,
<code><a href="fluidPage.html">fluidPage</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="va">ui</span> <span class="op">&lt;-</span> <span class="fu">fixedPage</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">fixedRow</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>
<span class="r-in"><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, 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.0.7.</p>
</div>
</footer></div>
</body></html>