🗂 panelset | xaringanExtra

class: center, middle, inverse, title-slide

.title[
# panelset<br>for xaringan
]
.subtitle[
## 🗂
]
.author[
### <a href='https://www.garrickadenbuie.com/'>Garrick Aden-Buie<a>
]
.date[
### xaringanExtra
]

---

### &#x1F456; Fancy Panels &#x2728;

.panelset[
.panel[.panel-name[R Code]

``` r
library(ggplot2)
ggplot(Orange) +
  aes(x = age, y = circumference, colour = Tree) +
  geom_point() +
  geom_line() +
  guides(colour = "none") +
  theme_bw()
```
]

.panel[
.panel-name[
Plot
]

<img src="index_files/figure-html/oplot-1.png" height="425px" />
]

.panel[

Hey look, I'm a panel! &#x1F47E;

]
]

---

## How to do this in one easy template

Wrap everything in `.panelset[...]` and create a new panel with

```markdown
.panel[.panel-name[NAME]
...content...
]
```

&#x1F448; The previous slide looks something like this

````markdown
.panelset[
.panel[.panel-name[R Code]

```{r oplot, fig.show='hide'}
# ... r code ...
```
]

.panel[.panel-name[Plot]

![](`r knitr::fig_chunk("oplot", ".png")`)
]
]
````

---

### Panelset Chunks

You can use the `panelset` chunk option to create two panels from a code chunk:
the "Code" and "Output".

.panelset[

.panel[.panel-name[Chunk 1]

````markdown
```{r panelset = TRUE, results = "hold"}
# Set panelset = TRUE to create "Code" and "Output" tabs
# Use results = "hold" when chunk contains multiple expressions
print("Oak is strong and also gives shade.")
print("The lake sparkled in the red hot sun.")
```
````

]

.panel[.panel-name[Code]

``` r
# Set panelset = TRUE to create "Code" and "Output" tabs
# Use results = "hold" when chunk contains multiple expressions
print("Oak is strong and also gives shade.")
print("The lake sparkled in the red hot sun.")
```

]

.panel[.panel-name[Output]

```
## [1] "Oak is strong and also gives shade."
## [1] "The lake sparkled in the red hot sun."
```

]

.panel[.panel-name[Chunk 2]

Use a named vector in `panelset` to set the `source` and `output` panel tab names.

````markdown
```{r panelset = c(source = "ggplot2", output = "Plot")}
ggplot(Orange) +
  aes(x = age, y = circumference, colour = Tree) +
  geom_point() +
  geom_line() +
  guides(colour = "none") +
  theme_bw()
```
````

]

.panel[.panel-name[ggplot2]

``` r
ggplot(Orange) +
  aes(x = age, y = circumference, colour = Tree) +
  geom_point() +
  geom_line() +
  guides(colour = "none") +
  theme_bw()
```

]

.panel[.panel-name[Plot]

![](index_files/figure-html/unnamed-chunk-2-1.png)

]

---

## Sideways Panelsets

Add `.sideways` to your `.panelset`, e.g. `.panelset.sideways[ ... ]` to get this:

.panelset.sideways[
.panel[.panel-name[Code for a plot about oranges]

``` r
library(ggplot2)
ggplot(Orange) +
  aes(x = age, y = circumference, colour = Tree) +
  geom_point() +
  geom_line() +
  guides(colour = "none") +
  theme_bw()
```
]

.panel[
.panel-name[
Plot about Orange Trees
]

<img src="index_files/figure-html/oplot-1.png" height="425px" />
]

.panel[.panel-name[The code for the panels on this slide]
````markdown
.panelset.sideways[
```{r include=FALSE}
orange_panel_names <- c(
  source = "Code for a plot about oranges",
  output = "Plot about Orange Trees"
)
```

```{r panelset = orange_panel_names}
ggplot(Orange) +
  aes(x = age, y = circumference, colour = Tree) +
  geom_point() +
  geom_line() +
  guides(colour = "none") +
  theme_bw()
```
]
````
]
]

---

## Right Sideways Panelsets

Add `.sideways.right` to place the tabs on the right side.

.panelset.sideways.right[
.panel[.panel-name[Code for a plot about oranges]

``` r
library(ggplot2)
ggplot(Orange) +
  aes(x = age, y = circumference, colour = Tree) +
  geom_point() +
  geom_line() +
  guides(colour = "none") +
  theme_bw()
```
]

.panel[
.panel-name[
Plot about Orange Trees
]

<img src="index_files/figure-html/oplot-1.png" height="425px" />
]

.panel[.panel-name[The code for the panels on this slide]
````markdown
.panelset.sideways.right-side[
```{r include=FALSE}
orange_panel_names <- c(
  source = "Code for a plot about oranges",
  output = "Plot about Orange Trees"
)
```

```{r panelset = orange_panel_names}
ggplot(Orange) +
  aes(x = age, y = circumference, colour = Tree) +
  geom_point() +
  geom_line() +
  guides(colour = "none") +
  theme_bw()
```
]
````
]
]

---

## Customize appearance

.panelset[
.panel[.panel-name[style_panelset_tabs()]

You can use `style_panelset_tabs()`

````markdown
```{r echo=FALSE}
xaringanExtra::style_panelset_tabs(
  active_foreground = "#0051BA",
  hover_foreground = "#d22",
  font_family = "Roboto"
)
```
````
]

.panel[.panel-name[CSS Custom Properties]

Or use CSS directly...

````markdown
```{css echo=FALSE}
.panelset {
  --panel-tab-foreground: currentColor;
  --panel-tab-active-foreground: #0051BA;
  --panel-tab-hover-foreground: #d22;
  --panel-tabs-border-bottom: #ddd;
  --panel-tab-inactive-opacity: 0.5;
  --panel-tab-font-family: Roboto, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;\
}
```
````

See `?style_panelset_tabs()` for the complete list of CSS properties.
]
]

---
class: center middle

[blogdown]: https://bookdown.org/yihui/blogdown/

## It also works in<br>R Markdown and [blogdown]!

Check out [the R Markdown panelset demo](rmarkdown.html)
to see _panelset_ in action!

---
class: center middle

### [gadenbuie/xaringanExtra](https://github.com/gadenbuie/xaringanExtra)