In all the apps we have made so far, we have simply wrapped a series of objects in
fluidPage() to create
fluidPage() works well enough, and it rescales content to the browser window size (in contrast to
fixedPage()). We can and should continue to use
fluidPage(), but instead of simply listing our inputs and outputs inside, we can use combinations of
*Layout() functions, as well as HTML tags, to make our app more aesthetically pleasing and user-friendly.
7.1 *Panel() and *Layout() functions
A panel is a visually distinct unit that contains one or more objects. We saw panels earlier in the inputs app, where inputs and their code were grouped together in a light gray box created by
We can use
conditionalPanel() to show or hide inputs or other panels only if a certain condition is true. An example of this can be seen in the colorpicker app, where a different number of
colourInput() are shown depending on the number selected in
Inputs, outputs, and panels can be arranged with one or more of
*Layout() functions. Layouts allow us to arrange objects horizontally, vertically, or some combination of the two.
Shiny layouts are best understood if they can be seen. Visit the app linked below for examples of several layouts, which have been arranged into a larger tabbed page with
7.3 Simple is Best
When customizing the layout of our Shiny apps, we should be mindful of how we will publish the app. Some layouts will rearrange themselves when the window is small enough, which is the case when embedding an app in another webpage (see Embedding Shiny Apps). The limited window width of the frame will change the layout of the app. To see this, try resizing the window while you browse the different tabs of layouts.
Additionally, if we are embedding our apps in webpages that introduce the app, we might not need to include text or a title within the app.
Create Your Own App:
Choose a layout. Make sure your app responds well when shrinking to mobile view (decreasing the browser window width).
Add at least one header, some text, and a title to
uiin your Shiny app.