sideways panelset in quarto revealjs

[GrayHaven]

Looking for a way to implement the .panelset.sideways[] functionality from xaringanExtra in Quarto's revealjs format. I was hacking away at the css for the {.panel-tabset} class in Quarto, but it's a smidge too complicated for me, was struggling to follow the logic of the rules used, I think because some of it is buried in JS.

Anyway, any suggestions/advice for how to achieve this would be much appreciated. Thanks!

[cderv]

Panelset is not dependent to xaringan. It can be used in rmarkdown document

xaringanExtra

This means something like that we get you panel content inside a revealjs slide, which would require some CSS tweaking probably;

---
title: "Test Prez"
format: revealjs
---

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

# Test

## Slide

::::: {.panelset .sideways}

::: {.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.
:::

:::::

However, best solution would be to a Quarto extensions with the panelset dependency. I don't think someone as done it yet.

[GrayHaven]

Hi, yeah. Thanks, cderv! Super helpful as always. I actually tried this approach before, and it has a couple of issues. I know these aren't necessarily Quarto problems, but just want to note them here.

1. It's not sizing the tabs column correctly.
2. It collapses the first two sections and all the other sections are inaccessible.
3. It adds an empty slide if you run use_panelset() at the start of the doc (directly after yaml). This might be something Quarto should look at, maybe? Happy to post an issue on GitHub if you want.

Spacing and collapsed sections

Added "Slide 2"

[cderv]

@GrayHaven

• It's not sizing the tabs column correctly.
• It collapses the first two sections and all the other sections are inaccessible.

yeah probably the JS and / or CSS for panelset would require to be adapted for revealjs

@GrayHaven

It adds an empty slide if you run use_panelset() at the start of the doc (directly after yaml). This might be something Quarto should look at, maybe? Happy to post an issue on GitHub if you want.

I believe this is because there is no title above the content. By putting the chunk with echo = FALSE among the first slide , there should not be an empty slide.

[GrayHaven]

OK, yeah, that makes sense. Unfortunately, my knowledge of JS is really limited; otherwise, I would try to tackle this myself. Maybe Garrick is already working on it?

[GrayHaven]

A ha! It looks like Quarto uses tabby.js to render tabsets, and that has vertical tabset functionality. You just have to fiddle with the css to get it to work. Unfortunately, this keeps some of the styling of the horizontal tabs, so you have to do some more work to get it looking nice, like removing the bottom border.

## Slide 7 bob

```{css}

@media (min-width: 30em) {

  .panel-tabset {
  	display: grid;
  	grid-gap: 2em;
  	grid-template-columns: 25% 75%;
  }
  
  .panel-tabset-tabby {
    border-bottom: none !important;
  	border-right: 1px solid #bbb; 
  }
  
  .panel-tabset [role=tab][aria-selected=true] {
    background-color: transparent;
    border: 1px solid #bbb !important;
  }
  
  h3 {
  	margin-top: 0;
  }
  
}

```

::: {.panel-tabset}

### First Tab

Lorem sed non habitasse nulla donec egestas magna
enim posuere fames ante diam!

### Second Tab

Consectetur ligula taciti neque scelerisque gravida
class pharetra netus lobortis quisque mollis iaculis.

:::

Output:

Do you think this is something that Quarto would be willing to implement with a new css class, maybe ::: {.panel-tabset-vertical} or something like that?

[cderv]

@GrayHaven

Do you think this is something that Quarto would be willing to implement with a new css class, maybe ::: {.panel-tabset-vertical} or something like that?

I did not tabby have that. Yes I think we could implement a variant for vertical tabset. Can you open a feature request on Quarto repo ?

Thank you !