Panelset
Description
A panelset designed for showing off code, but useful for anything really.
Usage
use_panelset(in_xaringan = NULL)
style_panelset_tabs(
foreground = NULL,
background = NULL,
...,
active_foreground = NULL,
active_background = NULL,
active_border_color = NULL,
hover_background = NULL,
hover_foreground = NULL,
hover_border_color = NULL,
focus_ring = NULL,
separator_color = NULL,
tabs_border_bottom = NULL,
tabs_sideways_max_width = NULL,
inactive_opacity = NULL,
font_family = NULL,
selector = ":root"
)
style_panelset(...)
html_dependency_panelset()
use_panelset(in_xaringan = NULL)
style_panelset_tabs(
foreground = NULL,
background = NULL,
...,
active_foreground = NULL,
active_background = NULL,
active_border_color = NULL,
hover_background = NULL,
hover_foreground = NULL,
hover_border_color = NULL,
focus_ring = NULL,
separator_color = NULL,
tabs_border_bottom = NULL,
tabs_sideways_max_width = NULL,
inactive_opacity = NULL,
font_family = NULL,
selector = ":root"
)
style_panelset(...)
html_dependency_panelset()
Arguments
in_xaringan |
Set to TRUE if rendering in xaringan slides or FALSE
if using panelset elsewhere. This determines the style of knitr hook that
is registered to enable the panelset chunk option.
|
foreground |
The text color of a non-active panel tab, default is
currentColor.
|
background, active_background, hover_background
|
Background colors for
panel tabs; in-active tabs, active tab, hovered tab. The default values are
all unset.
|
... |
Ignored or passed from style_panelset() to style_panelset_tabs().
|
active_foreground |
The text color of an active, as in selected, panel
tab. Default is currentColor.
|
active_border_color, hover_border_color
|
The color of the top border of
a tab when it is active or the color of the bottom border of a tab when it
is hovered or focused. Defaults are currentColor.
|
hover_foreground |
The text color of a hovered panel tab. Default is
currentColor.
|
focus_ring |
The outline style for the tab focus ring.
|
separator_color, tabs_border_bottom
|
The border color between the tabs
and content. Default is #ddd. tabs_border_bottom is superseded by
separator_color but is kept for backwards compatibility.
|
tabs_sideways_max_width |
The maximum width of the tabs in sideways
mode. The default value is 25%. A value between 25% and 33% is
recommended. The tabs can only ever be at most 50% of the container width.
|
inactive_opacity |
The opacity of inactive panel tabs, default is 0.5.
|
font_family |
The font family to be used for the panel tabs text.
Default is a monospace system font stack.
|
selector |
The CSS selector used to choose which panelset is being
styled. In most cases, you can use the default selector to style all
panelsets on the page. When selector is NULL, style_panelset() will
return the styles without wrapping them in a <style> tag so they can be
used in inline styles.
|
Value
An htmltools::tagList() with the panelset dependencies, or an
htmltools::htmlDependency().
Functions
-
use_panelset(): Adds panelset to your xaringan slides.
-
style_panelset_tabs(): Style the panelset. Returns an htmltools <style>
tag.
-
style_panelset(): Deprecated, renamed style_panelset_tabs().
-
html_dependency_panelset(): Returns an htmltools::htmlDependency() with the tile
view dependencies. Most users will want to use use_panelset().
Usage
To add panelset to your xaringan presentation, add the
following code chunk to your slides' R Markdown file.
```{r xaringan-panelset, echo=FALSE}
xaringanExtra::use_panelset()
```
.panelset[
.panel[.panel-name[app.R]
```r
hist(runif(100))
```
]
.panel[.panel-name[About]
Take a look at the R code in that other panel.
]
]
Sideways Panelsets
As an alternative to the “tabs above content” view, you can also use
sideways panelsets where the tabs appear beside the tabbed content.
To choose this effect, add the .sideways class to .panelset in your
slides or R Markdown text.
.panelset.sideways[
.panel[.panel-name[ui.R]
```r
# shiny ui code here...
```
]
.panel[.panel-name[server.R]
```r
function(input, output, session) {
# shiny server code here...
}
```
]
]
By default in sideways-mode, the tabs will appear on the left side. You
can choose to place the tabs on the right side by including both
.sideways and .right with .panelset.
.panelset.sideways.right[
.panel[.panel-name[ui.R]
```r
# shiny ui code here...
```
]
.panel[.panel-name[server.R]
```r
function(input, output, session) {
# shiny server code here...
}
```
]
]
Style Panelset
To customize the appearance of your panels, you can use
style_panelset_tabs() called directly in an R chunk in your slides.
```{r echo=FALSE}
style_panelset_tabs(foreground = "honeydew", background = "seagreen")
```
The panelset uses opacity to soften the in-active tabs to increase the
chances that the tabs will work with your slide theme. If you decide to
change your tab colors or to use solid colored tabs, you’ll likely want
to set inactive_opacity = 1 in style_panelset() (or the
corresponding --panel-tab-inactive-opacity CSS variable).
Behind the scenes, style_panelset_tabs() updates the values of custom CSS properties
that define the panelset appearance. If you’d rather work with CSS, the
default values of these properties are shown in the CSS code below. You
can copy the whole CSS block to your slides and modify the values to
customize the style to fit your presentation.
```{css echo=FALSE}
.panelset {
--panel-tab-foreground: currentColor;
--panel-tab-background: unset;
--panel-tab-active-foreground: currentColor;
--panel-tab-active-background: unset;
--panel-tab-active-border-color: currentColor;
--panel-tab-hover-foreground: currentColor;
--panel-tab-hover-background: unset;
--panel-tab-hover-border-color: currentColor;
--panel-tab-inactive-opacity: 0.5;
--panel-tabs-border-bottom: #ddd;
--panel-tab-font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
}
```
Usage in R Markdown
Panelset works in all R Markdown HTML outputs like HTML reports and
blogdown webpages!
Panelset works in the same way as rmarkdown’s
tabset
feature, albeit with fewer style options, but the trade-off is that it
works in a wider range of document types. Generally, as long as the
output is HTML, panelset should work.
Another advantage of panelset is that it enables deeplinking: the
currently shown tab is encoded in the URL automatically, allowing users
to link to open tabs. Users can also right click on a panel’s tab and
select Copy Link to link directly to a specific panel’s tab, which
will appear in view when visiting the copied link.
With standard R Markdown,
i.e. rmarkdown::html_document(), you can
use the following template.
# Panelset In R Markdown! {.panelset}
## Tab One
Amet enim aptent molestie vulputate pharetra
vulputate primis et vivamus semper.
## Tab Two
### Sub heading one
Sit etiam malesuada arcu fusce ullamcorper
interdum proin tincidunt curabitur felis?
## Tab Three
Adipiscing mauris egestas vitae pretium
ad dignissim dictumst platea!
# Another section
This content won't appear in a panel.
In other, less-standard R Markdown HTML formats, you can use pandoc’s
fenced divs.
::::: {.panelset}
::: {.panel}
[First Tab]{.panel-name}
Lorem sed non habitasse nulla donec egestas magna
enim posuere fames ante diam!
:::
::: {.panel}
[Second Tab]{.panel-name}
Consectetur ligula taciti neque scelerisque gravida
class pharetra netus lobortis quisque mollis iaculis.
:::
:::::
Alternatively, you can also use raw HTML.
<div class="panelset">
<div class="panel">
<div class="panel-name">First Tab</div>
<!-- Panel content -->
<p>Lorem ipsum, etc, etc</p>
</div>
<div class="panel">
<div class="panel-name">Second Tab</div>
<!-- Panel content -->
<p>Lorem ipsum, etc, etc</p>
</div>
</div>
Panelset knitr Chunks
A common use-case for panelset is to show the code and its output in
separate tabs. For example, you might want to first show the code to
create a plot in the first tab, with the plot itself in a second tab. On
slides where space is constrained, this approach can be useful.
To help facilitate this process, panelset provides a panelset
chunk option. When set to TRUE, the code is included in a panel tab
named Code and the output is included in a panel tab named Output.
Note that you still need to wrap this chunk in a panelset-creating
container.
.panelset[
```{r panelset = TRUE}
list(
normal = rnorm(10),
uniform = runif(10),
cauchy = rcauchy(10)
)
```
]
You can also set the panelset chunk option to a named vector, where
the source item is the tab name for the source code and the output
item is the tab name for the code output.
```{r panelset = c(source = "ggplot2", output = "Plot")}
ggplot(Orange) +
aes(x = age, y = circumference, colour = Tree) +
geom_point() +
geom_line() +
guides(colour = FALSE) +
theme_bw()
```
When your code contains multiple expressions and outputs, you may also
want to set the results = "hold" chunk option. Currently, knitr uses
results = "markup" as the default, in which case each code expression
and output pair will generate a pair of tabs.
```{r panelset = TRUE, results="hold"}
print("Oak is strong and also gives shade.")
print("The lake sparkled in the red hot sun.")
```
Finally, panelset chunks also work in R Markdown documents, but they
must be encapsulated in <div class="panelset"> and </div>
<div class="panelset">
```{r panelset = TRUE}
print("Oak is strong and also gives shade.")
```
</div>
or appear inside a section with the panelset class.
### A Random Sentence {.panelset}
```{r panelset = TRUE}
print("Oak is strong and also gives shade.")
```
[
list(
normal = rnorm(10),
uniform = runif(10),
cauchy = rcauchy(10)
)
]: R:%0A%60%60%60%7Br%20panelset%20=%20TRUE%7D%0Alist(%0A%20%20normal%20=%20rnorm(10),%0A%20%20uniform%20=%20runif(10),%0A%20%20cauchy%20=%20rcauchy(10)%0A)%0A%60%60%60%0A
Examples
use_panelset()
use_panelset()
,
Matthew T. Warkentin [aut] (Contributed scribble,
<https://orcid.org/0000-0001-8730-3511>),
Yotam Mann [cph] (tone.js),
Daniel Eden [cph] (animate.css),
Tachyons authors [cph],
Klaus Hartl, Fagner Brack, GitHub Contributors [cph] (js-cookie),
Chris Andrejewski [cph] (himalaya),
Eric Londaits [cph] (text-poster.js),
Zeno Rocha [cph] (clipboard.js),
Nikita Karamov [cph] (shareon.js),
Ross Zurowski [cph] (fitvids.js),
Michelle Bu and Eric Zhang [cph] (peerjs),
Kiril Vatev [cph] (tiny.toast),
André Restive [cph] (remark.search),
Printio (Juriy Zaytsev, Maxim Chernyak) [cph] (fabric.js),
Christpher Antonellis [cph] (freezeframe.js)