gadenbuie / xaringanExtra

:ferris_wheel: A playground of enhancements and extensions for xaringan slides.
https://pkg.garrickadenbuie.com/xaringanExtra
Other
448 stars 36 forks source link

Line indicating Panelset end? #150

Closed SchmidtPaul closed 2 years ago

SchmidtPaul commented 2 years ago

I am creating a distill github page and I think I want to use multiple panelsets per article. (I guess I could also make it work via {.tabset .tabset-fade .tabset-pills} but the panelsets seem nicer)

However, when having text in each panel and more text after the panelset, it is not obvious where the tab-specific text ends and the general text starts:

image

I feel that having the same grey line that is at the top of the panelset also at the bottom of the panelset would be a big improvment. Is is possible to add this line?

Thanks!

Here's the code:

---
title: "Test"
site: distill::distill_website
---

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

::::: {.panelset}

::: {.panel} [Tab A]{.panel-name}

This text belongs to Tab A. :::

::: {.panel} [Tab B]{.panel-name}

This text belongs to Tab B. :::

:::::

This text does not belong to either Tab A or B.

gadenbuie commented 2 years ago

If you want a border just along the bottom of the panel, you could try adding this css to your document:

.panel {
  border-bottom: 2px solid var(--panel-tabs-border-bottom);
}

The first place to start would be to put that in a css chunk in your Rmd:

```{css echo=FALSE}
.panel {
  border-bottom: 2px solid var(--panel-tabs-border-bottom);
}
SchmidtPaul commented 2 years ago

Thanks a lot! I added it to my theme.css and it works. Unless you have an immediate idea how to make this even more visually intuitive (another line on the left?!), I am going to stick with this solution. Cheers

image