mirror of
https://github.com/rstudio/shiny.git
synced 2026-02-05 04:05:06 -05:00
6c2fea7926
I decided against the name flexRow/flexCol as the "flex" prefix is too general for these implementations, which are mostly just useful for filling the space with the children. Flex box has a lot more features than that, such as centering, wrapping, justifying, etc., but I don't currently know how to design an API that presents the full power of flex box without also presenting the full complexity of it as well. This commit also includes some tweaks to the impl of flexfill to fix the behavior of children with 100% size along the main axis, and also introduces support for NA flex values, which sizes the flex item according to its contents.
86 lines
3.3 KiB
R
86 lines
3.3 KiB
R
% Generated by roxygen2: do not edit by hand
|
|
% Please edit documentation in R/bootstrap.R
|
|
\name{fillPage}
|
|
\alias{fillPage}
|
|
\title{Create a page that fills the window}
|
|
\usage{
|
|
fillPage(..., padding = 0, title = NULL, bootstrap = TRUE, theme = NULL)
|
|
}
|
|
\arguments{
|
|
\item{...}{Elements to include within the page.}
|
|
|
|
\item{padding}{Padding to use for the body. This can be a numeric vector
|
|
(which will be interpreted as pixels) or a character vector with valid CSS
|
|
lengths. The length can be between one and four. If one, then that value
|
|
will be used for all four sides. If two, then the first value will be used
|
|
for the top and bottom, while the second value will be used for left and
|
|
right. If three, then the first will be used for top, the second will be
|
|
left and right, and the third will be bottom. If four, then the values will
|
|
be interpreted as top, right, bottom, and left respectively.}
|
|
|
|
\item{title}{The title to use for the browser window/tab (it will not be
|
|
shown in the document).}
|
|
|
|
\item{bootstrap}{If \code{TRUE}, load the Bootstrap CSS library.}
|
|
|
|
\item{theme}{URL to alternative Bootstrap stylesheet.}
|
|
}
|
|
\description{
|
|
\code{fillPage} creates a page whose height and width always fill the
|
|
available area of the browser window.
|
|
}
|
|
\details{
|
|
The \code{\link{fluidPage}} and \code{\link{fixedPage}} functions are used
|
|
for creating web pages that are laid out from the top down, leaving
|
|
whitespace at the bottom if the page content's height is smaller than the
|
|
browser window, and scrolling if the content is larger than the window.
|
|
|
|
\code{fillPage} is designed to latch the document body's size to the size of
|
|
the window. This makes it possible to fill it with content that also scales
|
|
to the size of the window.
|
|
|
|
For example, \code{fluidPage(plotOutput("plot", height = "100\%"))} will not
|
|
work as expected; the plot element's effective height will be \code{0},
|
|
because the plot's containing elements (\code{<div>} and \code{<body>}) have
|
|
\emph{automatic} height; that is, they determine their own height based on
|
|
the height of their contained elements. However,
|
|
\code{fillPage(plotOutput("plot", height = "100\%"))} will work because
|
|
\code{fillPage} fixes the \code{<body>} height at 100\% of the window height.
|
|
|
|
Note that \code{fillPage(plotOutput("plot"))} will not cause the plot to fill
|
|
the page. Like most Shiny output widgets, \code{plotOutput}'s default height
|
|
is a fixed number of pixels. You must explicitly set \code{height = "100\%"}
|
|
if you want a plot (or htmlwidget, say) to fill its container.
|
|
|
|
One must be careful what layouts/panels/elements come between the
|
|
\code{fillPage} and the plots/widgets. Any container that has an automatic
|
|
height will cause children with \code{height = "100\%"} to misbehave. Stick
|
|
to functions that are designed for fill layouts, such as the ones in this
|
|
package.
|
|
}
|
|
\examples{
|
|
fillPage(
|
|
tags$style(type = "text/css",
|
|
".half-fill { width: 50\%; height: 100\%; }",
|
|
"#one { float: left; background-color: #ddddff; }",
|
|
"#two { float: right; background-color: #ccffcc; }"
|
|
),
|
|
div(id = "one", class = "half-fill",
|
|
"Left half"
|
|
),
|
|
div(id = "two", class = "half-fill",
|
|
"Right half"
|
|
),
|
|
padding = 10
|
|
)
|
|
|
|
fillPage(
|
|
fillRow(
|
|
div(style = "background-color: red; width: 100\%; height: 100\%;"),
|
|
div(style = "background-color: blue; width: 100\%; height: 100\%;")
|
|
)
|
|
)
|
|
|
|
}
|
|
|