# Resizable Containers with r2resize

#### R Packager

#### 2025-11-11

# Introduction to Resizable Containers

The `r2resize` package provides a set of highly customizable and resizable HTML containers for your R Markdown documents and Shiny applications. This vignette will walk you through the usage of `splitCard`, `splitCard2`, `sizeableCard`, `windowCard`, and `empahsisCard`.

## `splitCard()`: Resizable Split Screen Container

The `splitCard` function creates a container with two panels (left/right or top/bottom) and a draggable splitter.

    # Basic vertical split card
    splitCard(
      "Content on the Left/Top",
      "Content on the Right/Bottom"
    )

    # Customizing colors and position
    splitCard(
      "Left Panel Content",
      "Right Panel Content",
      bg.left.color = "lightblue",
      bg.right.color = "lightgreen",
      splitter.color = "darkgray",
      position = "vertical",
      min.height = "300px",
      left.width = "60%"
    )

    # Horizontal split card
    splitCard(
      shiny::tags$h3("Header for Top Panel"),
      shiny::tags$p("Some text for the bottom panel."),
      bg.left.color = "#f0f0f0",
      bg.right.color = "white",
      position = "horizontal"
    )

## `splitCard2()`: Alternative Split Screen Container

`splitCard2` offers another style of split screen container, often useful for comparison or question-answer layouts.

    # Simple splitCard2 with default styling
    splitCard2(
      shiny::tags$h2("Question Section"),
      shiny::tags$p("This is where your question or main topic goes."),
      slider.position = "30" # 30% for the left panel
    )

    # Customizing colors and text
    splitCard2(
      shiny::tags$h3("Code Snippet"),
      shiny::tags$pre("print('Hello, r2resize!')"),
      bg.left.color = "#e0e0e0",
      bg.right.color = "white",
      border.color = "blue",
      text.left.color = "darkred",
      text.right.color = "darkgreen",
      slider.position = "50"
    )

## `sizeableCard()`: Resizable Content Holder

`sizeableCard` creates a container with a resizing toolbar, allowing users to adjust its size.

    # Simple sizeable card
    sizeableCard(
      shiny::tags$h4("My Resizable Content"),
      shiny::tags$p("You can click the 'A' buttons to change the size of this card."),
      bg.color = "#fffafa",
      border.color = "gray"
    )

## `windowCard()`: Resizable, Moveable, Expandable Window Card

`windowCard` creates a draggable and resizable window-like container, great for pop-up information or interactive dashboards.

    # Basic window card
    windowCard(
      "This is content inside a moveable window!",
      title = "My Pop-up Window",
      width = "400px",
      bg.color = "#e6f7ff",
      border.color = "steelblue",
      header.text.color = "white",
      body.text.color = "black"
    )

    # Note: Only one windowCard may be created per page.

## `empahsisCard()`: Emphasis Container

`empahsisCard` creates a container with a moving border effect to draw attention to its content.

    # Emphasis card with custom background
    empahsisCard(
      shiny::tags$h3("Important Information!"),
      shiny::tags$p("This card highlights crucial details with a dynamic border."),
      bg.color = "#fdfbe4"
    )