Tabsets

[uhuggins]

Thank you for the lovely package. Are there any plans to incorporate {.tabset} class (similar to RMarkdown) in the future?

[jjallaire]

Thanks! We don't currently have plans to implement tabsets but it's a good idea.

Note for future reference that we could use jqueryUI tabsets for this: https://api.jqueryui.com/tabs/

[januz]

While I really like radix's concept, I as well miss tabsets, which prevents me at the moment from switching to using it exclusively. An addition of tabsets would be much appreciated! Thanks!

[modche]

+1 tabset in radix - would be really nice!

[softloud]

This thread answered my question, how to tabset in radix::? Answer. Can't, sadness. Would be very much appreciated. I'm currently writing my thesis in radix::.

[januz]

Checking back on this issue... Are there any plans of implementing tabsets in distill? Thanks!

[phillc73]

I have a rough workaround for including tabsets. I've tested with {.tabset .tabset-dropdown} and this seems to work.

Essentially the workaround is to use htmltools to include a second html file within the distill article.

First Rmd File

---
output: html_document
---

### Heading here {.tabset .tabset-dropdown}

#### Content 1

Content 1 shows here

#### Content 2

Content 2 shows here

#### Content 3

Content 3 shows here

Save this as first.Rmd to generate first.html

Distill article Rmd file

---
title: "Your Article Title"
description:
  Your article description
author:
  - name: Your Name
url: https://yourwebsite.net
date: A date
output:
  distill::distill_article:
  self_contained: false
---
  
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

```{r, echo=FALSE}
library(htmltools)
htmltools::includeHTML("first.html")
```

The heading and font size in the distill article is unfortunately altered, but perhaps there are some other RMarkdown options for the first.Rmd file which could prevent this. Something with css: styles.css in the YAML metadata perhaps.

Unfortunately, setting the output as html_fragment in first.Rmd didn't work, which I think might have been a better solution.

The workaround also creates large files as self_contained: false prevents the tabset-dropdown appearing when first.Rmd is knitted.

[phillc73]

I pretty much abandoned the {.tabset .tabset-dropdown} approach as there was just one big CSS mess and a lot of html_document functionality is not available for distill_article.

While it's not tabs as such, I have now changed to and am happy with <details> and <summary> tags for a collapsible effect. Also supports nested tree collapsible sections. Details of the approach here.

I've coupled this with a knitr <div> hook for more layout control. Using two column 80/20 <div> layout allows my html_fragment to still have <aside>-esque comments within a <details> section.

My Rmd code is here. Live page here

[apreshill]

Looking through a recent Distill article, this tabbed figure pane is very pleasing!

Not tested, but I wonder if panelset from the xaringanExtra package would work?

https://pkg.garrickadenbuie.com/xaringanExtra/#/panelset

[gadenbuie]

Panelset will work in distill, but it requires the fenced-div syntax. There are a couple cosmetic issues that I noticed when trying this out, ~~and I'll fix those soon~~ that I fixed recently.

Panelset with fenced divs

```{r panelset, echo=FALSE}
xaringanExtra::use_panelset()
```

::::: {.panelset}

::: {.panel}

## Tab One {.panel-name}

Amet enim aptent molestie vulputate pharetra
vulputate primis et vivamus semper.

:::

::: {.panel}

## Tab Two {.panel-name}

### Sub heading one

Sit etiam malesuada arcu fusce ullamcorper
interdum proin tincidunt curabitur felis?

:::

::: {.panel}

## Tab Three {.panel-name}

Adipiscing mauris egestas vitae pretium 
ad dignissim dictumst platea!

:::

:::::

[mrworthington]

FWIW, I was talking with one of the authors about this particular component. He said the distill.pub folks like to use svelte for a lot of their article components. Said for this particular set of tabs, they used a tabs component for svelte, which lives here.

[jmbuhr]

I guess this would break the scope of Rmarkdown distill, because svelte itself is not just a a js framework but a compiler that compiles down to js.

[hattesoul]

Panelset will work in distill, but it requires the fenced-div syntax. There are a couple cosmetic issues that I noticed when trying this out, ~and I'll fix those soon~ that I fixed recently. Panelset with fenced divs

While I could get the fenced-div syntax working (which is great!), I failed to create nested panel sets. Do you have any solutions or workarounds on this?

[gadenbuie]

I failed to create nested panel sets. Do you have any solutions or workarounds on this?

panelset doesn't support nested panel sets (yet). https://github.com/gadenbuie/xaringanExtra/issues/86

[karbartolome]

Panelset will work in distill, but it requires the fenced-div syntax. There are a couple cosmetic issues that I noticed when trying this out, ~and I'll fix those soon~ that I fixed recently.

Panelset with fenced divs

I've been using this solution and it works perfectly, thanks! However, I'm not being able to add layout="l-screen" for chunks inside each tab, is it possible?

[CorradoLanera]

@karbartolome, just prepend your option to the whole set of panels; next, go as described by @gadenbuie in https://github.com/rstudio/distill/issues/11#issuecomment-692142414.

E.g.:

```{r panelset, echo=FALSE}
xaringanExtra::use_panelset()
```

# section
::: l-screen

::::: {.panelset}


::: {.panel}

## Tab 1 {.panel-name}

:::


::: {.panel}

## Tab 2 {.panel-name}

:::


:::::

:::

PS: remember to close all the :::s properly to define the scope of your options.

[SchmidtPaul]

Thanks for the panelset solution. However, am I understanding correctly, that <aside> won't work correctly inside a panel? If so, what else is limited?

Show Code!

```{r panelset, echo=FALSE}
xaringanExtra::use_panelset()
```

This is text before the panelset. 

<aside>
This is an aside before the panelset.
</aside>

::::: {.panelset}

::: {.panel}

## Tab 1 {.panel-name}

This is text inside panel 1.

<aside>
This is an aside inside panel 1.
</aside>

:::

::: {.panel}

## Tab 2 {.panel-name}

This is text inside panel 2.

<aside>
This is an aside inside panel 2.
</aside>

:::

:::::

This is text after the panelset. 

<aside>
This is an aside after the panelset.
</aside>

[CorradoLanera]

It seems to me they work as expected.

If you shrink the page, both the before and after asides will move below their corresponding references (like a sort of footnote).

A tabset, at least in my mental model, is a self-contained piece in the document made up of self-contained mutually exclusive parts. Hence, content should not cross the borders of the tabset and should be completely contained inside each tab.

That said, the solution I see in your example seems to me perfectly fine 😊

Mmm, or maybe I have wrongly understood your point 😣

[gadenbuie]

@SchmidtPaul The issue is that the CSS for <aside> elements as direct children of the main content aren't being applied to <aside> elements that are children of a <div class="panelset">. This is probably a good thing because aside elements can be used in many contexts and not all should be pulled into the margin. I recommend inspecting the styles for aside and then trying to add similar styles for .panelset aside to get a similar look.