How do I add a valuebox as a tab in a dashboard?

[pensivedog]

Description

Can anyone provide a working example of this? I've tried a number of approaches following documentation on tabset and valueboxes and can't get them to work tegether. I'm using Quarto 1.5.57.

[mcanouil]

It would help if you showed what you tried.

[pensivedog]

Thanks for the reply. I have tried the below:

## Row

### Column {.tabset}

```{r}
#| title: "Title Here"
plot_here
```

::: {.valuebox icon="cloud-sun" color="secondary" title="Valuebox Title Here"}
`r value_goes_here`
:::

### Column
```{r}
#| title: "Plot Title"
plot
```

I also tried with the other valuebox syntax:

```{r}
#| content: valuebox
#| title: "Spam per day"
list(
  icon = "trash",
  color = "danger",
  value = spam
)
```

No luck. Help appreciated!

[mcanouil]

Could you properly format your post using code blocks for code and terminal outputs? Thanks.
If your code contains code blocks, you need to enclose it using more backticks, i.e., usually four ````.
See https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us.

[pensivedog]

Thanks for explaining. Updated!

[mcanouil]

I am not sure value box was intended to be used like that but maybe it should work without workaround (cc @cscheid)

If you add an extra fenced div, it works as expected.

Input	Output
--- title: "Quarto Playground" format: dashboard --- ## Row ### Column {.tabset} ```{r} #| title: "Title Here" plot(1) ``` :::: {} ::: {.valuebox icon="cloud-sun" color="secondary" title="Valuebox Title Here"} `{r} 42` ::: :::: ### Column ```{r} #| title: "Plot Title" plot(1) ```

For reference, without the extra fenced div, it is rendered as in the screenshot below, i.e., everything that is not text are removed

[mcanouil]

The title is define by the header.

So better that the extra fenced div to ensure value box is not top-level, is to use the header.

Now, I realised, I don't think there is actually a bug or an enhancement.

---
title: "Quarto Playground"
format: dashboard
---

## Row

### Column {.tabset}

```{r}
#| title: "Title Here"
plot(1)
```

#### My tab header

::: {.valuebox icon="cloud-sun" color="secondary" title="Valuebox Title Here"}
`{r} 42`
:::

### Column

```{r}
#| title: "Plot Title"
plot(1)
```

[pensivedog]

Ok, this is getting closer! Now, the issue is that having third tab in this .tabset column breaks the row/column layout.

[mcanouil]

Now you need to follow the documentation.

[pensivedog]

Alright. Thanks for your help!

[pensivedog]

Ok, here's what I mean. Try adding a second identical row to this example:

---
title: "Quarto Playground"
format: dashboard
scrolling: true
---

## Row

### Column {.tabset}

```{r}
#| title: "Title Here"
plot(1)
```

#### My tab header

::: {.valuebox icon="cloud-sun" color="secondary" title="Valuebox Title Here"}
`{r} 42`
:::

#### Another tab

::: {.valuebox icon="cloud-sun" color="secondary" title="Valuebox Title Here"}
`{r} 42`
:::

### Column

```{r}
#| title: "Plot Title"
plot(1)
```

## Row

### Column {.tabset}

```{r}
#| title: "Title Here"
plot(1)
```

#### My tab header

::: {.valuebox icon="cloud-sun" color="secondary" title="Valuebox Title Here"}
`{r} 42`
:::

#### Another tab

::: {.valuebox icon="cloud-sun" color="secondary" title="Valuebox Title Here"}
`{r} 42`
:::

### Column

```{r}
#| title: "Plot Title"
plot(1)
```

The result is a broken row/column layout:

[mcanouil]

Thanks.

Input	Output
--- title: "Quarto Playground" format: dashboard --- ## Row ### Column {.tabset} #### Tab 1 {{< lipsum 1 >}} #### Tab 2 {{< lipsum 1 >}} ### Column {{< placeholder >}} ## Row ### Column {.tabset} #### Tab 1 {{< lipsum 1 >}} #### Tab 2 {{< lipsum 1 >}} ### Column {{< placeholder >}}

[pensivedog]

Then it seems valueboxes don't work in tabsets in dashboards, as is suggested in #7405?

I agree, it's a bit of an edge case. We're using them as top-level components as well, but have some cases where we want to have them in tabsets. We can find another way to do it, just wanted to see if this was possible, as it would be better than a custom html/css workaround.

[mcanouil]

I have to say that I don't know since no PRs or commits were attached.
It would need further investigation to check if it did work on 1.4.

[pensivedog]

Ok, very much appreciate your efforts on this!

[mcanouil]

To summarise this thread a bit:

1. value box does not seem to work fully in tabset (Cards, valueboxes, etc.. within tabset #7405)
2. tabset breaks row/column layout when using header to define new tab.

[mcanouil]

Here is a full depiction of the issues when nesting/combining value boxes and tabset

---
title: "Quarto Playground"
format: dashboard
---

# Cards

## Row

### Column {.tabset}

::: {.card title="Tab 1"}
::: {.valuebox icon="pencil" color="blue"}
Articles per day

42
:::
:::

::: {.card title="Tab 2"}
::: {.valuebox icon="pencil" color="blue"}
Articles per day

42
:::
:::

### Column

{{< placeholder >}}

## Row

### Column {.tabset}

#### Tab 1

::: {.valuebox icon="pencil" color="blue"}
Articles per day

42
:::

#### Tab 2

::: {.valuebox icon="pencil" color="blue"}
Articles per day

42
:::

### Column

{{< placeholder >}}

# Headers

## Row

### Column {.tabset}

#### Tab 1

::: {.valuebox icon="pencil" color="blue"}
Articles per day

42
:::

#### Tab 2

::: {.valuebox icon="pencil" color="blue"}
Articles per day

42
:::

### Column

{{< placeholder >}}

## Row

### Column {.tabset}

::: {.card title="Tab 1"}
::: {.valuebox icon="pencil" color="blue"}
Articles per day

42
:::
:::

::: {.card title="Tab 2"}
::: {.valuebox icon="pencil" color="blue"}
Articles per day

42
:::
:::

### Column

{{< placeholder >}}

Both rows and pages should display properly the value boxes and the two column layout per rows.