Comments (18)
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!
:::
:::::
from distill.
@karbartolome, just prepend your option to the whole set of panels; next, go as described by @gadenbuie in #11 (comment).
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.
from distill.
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!
from distill.
Checking back on this issue... Are there any plans of implementing tabsets in distill
? Thanks!
from distill.
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.
from distill.
@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.
from distill.
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.
from distill.
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/
from distill.
+1 tabset in radix - would be really nice!
from distill.
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::.
from distill.
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
from distill.
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
from distill.
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.
from distill.
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 soonthat 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?
from distill.
I failed to create nested panel sets. Do you have any solutions or workarounds on this?
panelset doesn't support nested panel sets (yet). gadenbuie/xaringanExtra#86
from distill.
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 soonthat 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?
from distill.
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>
from distill.
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 😣
from distill.
Related Issues (20)
- Upkeep for distill
- Check and add alt-text to pictures, plots, ... in website
- invalid byte sequence when deploying to github HOT 3
- RSS category-based feeds HOT 1
- Creative Commons Markdown Table Not Rendering Properly
- Warning due to deprecation of 'format' argument to 'as.character.POSIXlt()' HOT 2
- Description in _site.yaml causing Error "STRING_ELT() can only be applied to a 'character vector', not a 'list'" HOT 1
- How to add email and multiple affiliations to a single author? HOT 2
- Article description does not show up when adding posts HOT 1
- Improve alt-text for ORCiD icon HOT 3
- Add <hr> for screen reader accessibility HOT 1
- Space between lines in bulleted lists HOT 1
- Various minor accessibility issues
- Release distill 1.6
- Gallery outdated, remove Quarto pages HOT 1
- Javascript & D3 page error HOT 1
- Journal (site) title is incorrectly prepended to the article title in cititations.
- Has anyone used any alternative to Google analytics? HOT 2
- italicized species names in a Rmarkdown distill package
- Using a `distill` vignette on CRAN HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from distill.