panelset: Panelset

In xaringanExtra: Extras and Extensions for 'xaringan' Slides

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,
  tabs_border_bottom = NULL,
  tabs_sideways_max_width = NULL,
  inactive_opacity = NULL,
  font_family = NULL,
  selector = ".panelset"
)

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.
tabs_border_bottom	The border color between the tabs and content. Default is #ddd.
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 and style all panelsets on the page.

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()

xaringanExtra documentation built on July 16, 2022, 5:06 p.m.