Skip to contents

Closes the table, adds the image holder and attaches the codehover CSS/JavaScript dependency. The result renders as-is in R Markdown, Quarto and the RStudio viewer – no template or YAML set-up needed.

Usage

ch_out(
  .data = "",
  img = "",
  css_class = "",
  url = FALSE,
  alt = "codehover plot",
  aspect = NULL,
  preload = NULL,
  caption = NULL,
  img_tag_add = "",
  div_tag_add = "",
  ...
)

Arguments

.data

codehover string created by [ch_row()].

img

(string) Image shown before any hover interaction, or a URL if `url = TRUE`.

css_class

(string) Extra CSS class for the image holder.

url

(logical) Default FALSE, which embeds the image into the HTML as base64. TRUE writes the path/URL as-is.

alt

(string) Alternative text of the image holder. Default "codehover plot"; rows can override it while they are active via the `alt` argument of [ch_row()].

aspect

(numeric, length 2) Width and height used to reserve the image box (`aspect-ratio` in CSS), so the page does not reflow when a hovered image loads. Default NULL leaves it to the browser.

preload

(character) Image URLs to fetch up front, so hovering a row does not flicker while the file downloads. Only meaningful when `url = TRUE` (base64 images are already in the page).

caption

(string) Optional caption shown under the image.

img_tag_add

(string) Additional HTML attributes for the `<img>` tag.

div_tag_add

(string) Additional HTML attributes for the `<div>` wrapping the image.

...

Additional parameters.

Value

An htmltools tag list, rendered automatically in R Markdown, Quarto and the RStudio viewer.

Examples

ch_out(ch_row(ch_int(), text = "geom_point()", img = "step-1.png",
              url = TRUE),
       img = "step-1.png", url = TRUE, alt = "scatter plot")
#> <div class='codehover codehover-incremental '><div class='codehover-code' ><table ><tr data-link='step-1.png' tabindex='0'><td>geom_point()</td></tr></table></div><div class='codehover-img ' ><img  src='step-1.png' alt='scatter plot'/></div></div>