column: Grid layout

In nteetor/dull: A Reactive Web Framework Built on 'shiny'

Grid layout

Description

These functions are the foundation of any application. Grid elements are nested as follows: ⁠container() > columns() > column() ~ column()⁠. A column() may be created with an explicit width, 1 through 12. To fit a column automatically to its content use width = "content". To divide the space in a row evenly amongst all columns use width = "equal". For examples and usage tips see the sections below.

Usage

column(..., width = "equal")

columns(...)

container(..., centered = FALSE)

Arguments

...	Any number of tags elements passed as child elements or named arguments passed as HTML attributes to the parent element.
width	A responsive argument. One of 1:12, "content", or "equal", defaults to "equal".
centered	One of TRUE or FALSE specifying how a container fills the browser or viewport window. If TRUE the container is responsively centered, otherwise, if FALSE, the container occupies the entire width of the viewport, defaults to FALSE.

Details

Equal width columns

container(
  columns(
    column(
      "Aliquam erat volutpat."
    ),
    column(
      "Mauris mollis tincidunt felis."
    ),
    column(
      "Cum sociis natoque penatibus et magnis dis parturient montes,",
      "nascetur ridiculus mus."
    )
  )
)

Aliquam erat volutpat.

Mauris mollis tincidunt felis.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Sidebar layout

container(
  columns(
    column(
      width = 4,  # <-
      card(
        h5("Sidebar panel")
      )
    ),
    column(
      h5("Main panel")
    )
  )
)

Sidebar panel

Main panel

Mobile friendly

Use the responsive width argument to make mobile friendly applications. On extra small screens each column spans the entire width of the row. On larger screens the columns will instead split the row width evenly.

container(
  columns(
    column(
      width = c(xs = 12, sm = 4),
      "Mauris ac felis vel velit tristique imperdiet."
    ),
    column(
      width = c(xs = 12, sm = 4),
      "Nam vestibulum accumsan nisl."
    ),
    column(
      width = c(xs = 12, sm = 4),
      "Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus."
    )
  )
)

Mauris ac felis vel velit tristique imperdiet.

Nam vestibulum accumsan nisl.

Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus.

Automatic column sizing

Columns may be fit to the width of their content. Other columns in this example will split the remaining space equally.

container(
  columns(
    column(
      .style %>%
        background("warning")
    ),
    column(
      width = "content",
      "Cras placerat accumsan nulla. Aenean in sem ac leo mollis blandit.",
      "Nam euismod tellus id erat.",
      "Donec neque quam, dignissim in, mollis nec, sagittis eu, wisi."
    ),
    column(
      .style %>%
        background("warning")
    )
  )
)

Cras placerat accumsan nulla. Aenean in sem ac leo mollis blandit. Nam euismod tellus id erat. Donec neque quam, dignissim in, mollis nec, sagittis eu, wisi.

Without specficiying widths the space in a row is evenly split between columns.

container(
  columns(
    column(),
    column(),
    column(),
    column()
  )
)

See Also

Other layout functions: fieldset(), navbar(), webpage()

nteetor/dull documentation built on Nov. 7, 2024, 2:11 p.m.