Change background color

Description

The background_color() and background_subtle() functions adjust the background color of a tag element.

Usage

background_color(x, color)

background_subtle(x, color)

Arguments

Value

An object of the same type as x.

Examples

library(htmltools)

div(
  .style %>%
    background_color(theme_primary()),
  "Primary background"
)

div(
  .style %>%
    background_color(theme_danger()),
  "Danger background"
)

div(
  .style %>%
    background_subtle(theme_warning()) %>%
    border_subtle(theme_warning()) %>%
    text_emphasis(theme_warning()),
  "Warning!"
)


div(
  .style %>%
    background_subtle(theme_dark()) %>%
    border_subtle(theme_dark())
)

Add or remove borders

Description

The border_all() and ⁠border_<side>()⁠ functions adjust a tag element's borders.

Usage

border_all(x, include = TRUE)

border_top(x, include = TRUE)

border_right(x, include = TRUE)

border_bottom(x, include = TRUE)

border_left(x, include = TRUE)

Arguments

Value

An object of the same type as x.

Examples

library(htmltools)

h3(
  .style %>%
    border_bottom() %>%
    border_color(theme_warning()) %>%
    text_color(theme_warning()),
  "Warning"
)

Change border color

Description

The border_color() and border_subtle() functions adjust the border color of a tag element.

Usage

border_color(x, color)

border_subtle(x, color)

Arguments

Value

An object of the same type as x.

See Also

Other border utilities: border_width()

Examples

library(htmltools)

div(
  .style %>%
    border_color(theme_primary())
)

div(
  .style %>%
    background_subtle(theme_danger()) %>%
    border_subtle(theme_danger()) %>%
    text_emphasis(theme_danger()),
  "Danger theme with some emphasis"
)


div(
  .style %>%
    background_subtle(theme_light()) %>%
    text_emphasis(theme_light()) %>%
    border_subtle(theme_light())
)

Increase or decrease border width

Description

Adjust the boder width of a tag element.

Usage

border_width(x, width)

Arguments

Value

An object of the same type as x.

See Also

Other border utilities: border_color()

Examples

library(htmltools)

div(
  .style %>%
    border_all() %>%
    border_width(3) %>%
    border_color(theme_primary())
)

Different values for different browser sizes

Description

Many functions in cascadess accept multiple name-value pairs via .... Each argument's name specifies a breakpoint, a browser width. At this breakpoint, at this browser width, the argument value will supercede any values specified for smaller breakpoints, smaller browser widths.

Breakpoints are browser or device widths and enable developing responsive web applications. A responsive web application will adjust its layout and style to accomodate the size of a user's browser or device. A web application with a responsive design allows users to constructively interact from a browser, phone, tablet, or other device.

Available breakpoints

extra small (unnamed or xs)

Specify an unnamed value for this breakpoint or use the name xs. This is the only breakpoint which may be unnamed. However, when specifying multiple breakpoints the best practice is to use the xs name.

The value and style are always applied unless superceded by a larger breakpoint.

small (sm)

Specify a value for this breakpoint using the name sm.

The value and style are applied when the viewport is at least 576px wide, think landscape phone.

medium (md)

Specify a value for this breakpoint using the name md.

The value and style are applied when the viewport is at least 768px wide, think tablet.

large (lg)

Specify a value for this breakpoint using the name lg.

The value and style are applied when the viewport is at least 992px wide, think laptop or smaller desktops.

extra large (xl)

Specify a value for this breakpoint using the name xl.

The value and style are applied when the viewport is at least 1200px wide, think large desktops.

extra extra large (xxl)

Specify a value for this breakpoint using the name xxl.

The value and style are applied when the viewport is at least 1400px wide, think larger desktops.

Further reading

These breakpoints are chosen by and are a part of the Bootstrap library cascadess is built upon. The Bootstrap website goes into greater detail on their design, construction, and usage, see https://getbootstrap.com/docs/5.3/layout/breakpoints/.

Examples

library(htmltools)

div(
  .style %>%
    flex_display() %>%
    flex_direction(xs = "column", lg = "row")
)

div(
  .style %>%
    flex_display() %>%
    gap_all(xs = 0, md = 2, xl = 4)
)

Cascadess' CSS dependencies

Description

For CSS styles to be applied, you must include a call to cascadess_dependencies() in your UI or use the bslib package.

Usage

cascadess_dependencies()

Value

An htmltools::htmlDependency().

Examples

## Not run: 
library(shiny)

shinyApp(
  ui = list(
    cascadess_dependencies(),
    div(
      .style %>%
        padding_all(3) %>%
        background_color(theme_light()),
      "Etiam laoreet quam sed arcu."
    )
  ),
  server = function(input, output) {}
)

## End(Not run)

## Not run: 
library(shiny)
library(bslib)

shinyApp(
  ui = page(
    .style %>%
      background_color(theme_primary()),
    card(
      .style %>%
        margin_all(3) %>%
        background_color(theme_light()),
      "Hello, world!"
    )
  ),
  server = function(input, output) {}
)

## End(Not run)

Display

Description

The display() function adjusts how a tag element and its contents are rendered.

Usage

display(x, ...)

Arguments

Value

An object of the same type as x.

Examples

library(htmltools)

div(
  .style %>%
    display("flex") %>%
    flex_justify("center"),
  "Powerful stuff"
)

div(
  .style %>%
    display(
      xs = "inline",
      md = "block"
    ),
  "Block and roll"
)

.style pronoun

Description

The .style pronoun allows defining styles within the function call of a tag element. Without the .style pronoun tag element styles are applied outside and after constructing a tag element.

div() %>%
  background_color("primary") %>%
  display("flex") %>%
  flex_justify("between")

Once the content of a tag element grows to more than a few lines, associating the element's styles with the element becomes less and less intuitive. In these situations, make use of the .style pronoun.

div(
  .style %>%
    border_color(theme_primary()) %>%
    text_color(theme_primary()),
  p("Paragraph"),
  p("Paragraph"),
  p("Paragraph")
)

Flex cross axis alignment

Description

The flex_align() function adjusts a tag element's cross axis alignment. By default, the cross axis is the y-axis. When using flex_direction("column") the cross axis becomes the x-axis.

Usage

flex_align(x, ...)

Arguments

Value

An object of the same type as x.

See Also

Other flex utilities: flex_content(), flex_direction(), flex_display(), flex_justify(), flex_wrap(), item_align(), item_fill(), item_grow(), item_order()

Examples

library(htmltools)

div(
  .style %>%
    flex_display() %>%
    flex_align("center"),
  div("Flex item"),
  div("Flex item"),
  div("Flex item")
)

Flex content

Description

The flex_content() function adjusts how a tag element's child elements align as a group on the cross axis (see flex_justify() for more info about the main and cross axis of a flex element). Note, this alignment has no effect on a single row of child elements.

Usage

flex_content(x, ...)

Arguments

Value

An object of the same type as x.

See Also

Other flex utilities: flex_align(), flex_direction(), flex_display(), flex_justify(), flex_wrap(), item_align(), item_fill(), item_grow(), item_order()

Examples

library(htmltools)

div(
  .style %>%
    flex_display() %>%
    flex_content("center") %>%
    flex_wrap(TRUE),
  div("Flex item"),
  div("Flex item"),
  div("Flex item"),
  div("Flex item"),
  div("Flex item")
)

Flex direction

Description

The flex_direction() function adjusts the

Usage

flex_direction(x, ...)

Arguments

Value

An object of the same type as x.

See Also

Other flex utilities: flex_align(), flex_content(), flex_display(), flex_justify(), flex_wrap(), item_align(), item_fill(), item_grow(), item_order()

Examples

library(htmltools)

div(
  .style %>%
    flex_display() %>%
    flex_direction("column")
)

Flex display

Description

The ⁠flex_*()⁠ functions adjust the flexbox layout of an element. The flexbox layout is incredibly powerful and allows centering of elements vertically and horizontally, automatic adjustment of space between and around child elements, and more. To use flexbox make sure to include flex_display() when styling an element. To adjust an element's display at breakpoints see display().

Direct child elements of a flex box container are automatically considered flex items and may be adjusted with the ⁠item_*()⁠ functions, see item_align().

Usage

flex_display(x)

Arguments

Details

Using flexbox, flex_display(), a tag element's child elements are considered flex items. The ⁠item_*()⁠ functions are used to modify the bahvior of these flex items. So, while ⁠flex_*()⁠ functions are applied to the parent element, all the ⁠item_*()⁠ functions are applied to the individual child flex item elements.

Value

An object of the same type as x.

See Also

Other flex utilities: flex_align(), flex_content(), flex_direction(), flex_justify(), flex_wrap(), item_align(), item_fill(), item_grow(), item_order()

Examples

library(htmltools)

div(
  .style %>%
    flex_display() %>%
    flex_justify("end"),
  div("Flex item"),
  div("Flex item"),
  div("Flex item")
)

Flex main axis alignment

Description

The flex_justify() function adjusts a tag element's main axis alignment. By default, the main axis is the x-axis. When using flex_direction("column") the main axis becomes the y-axis.

Usage

flex_justify(x, ...)

Arguments

Value

An object of the same type as x.

See Also

Other flex utilities: flex_align(), flex_content(), flex_direction(), flex_display(), flex_wrap(), item_align(), item_fill(), item_grow(), item_order()

Examples

library(htmltools)

div(
  .style %>%
    flex_display() %>%
    flex_justify("end"),
  div("Flex item"),
  div("Flex item"),
  div("Flex item")
)

Flex wrapping

Description

The flex_wrap() function adjusts how a tag element's child elements wrap, or don't wrap, onto new lines.

Usage

flex_wrap(x, ...)

Arguments

Value

An object of the same type as x.

See Also

Other flex utilities: flex_align(), flex_content(), flex_direction(), flex_display(), flex_justify(), item_align(), item_fill(), item_grow(), item_order()

Examples

library(htmltools)

div(
  .style %>%
    flex_display() %>%
    flex_wrap(FALSE),
  div("Flex item"),
  div("Flex item"),
  div("Flex item"),
  div("Flex item")
)

Floats

Description

The float() function places an element to the left or right side of its parent element. Other text and inline elements wrap around floated elements. Note, float() has no effect on flex items.

Usage

float(x, ...)

Arguments

Value

An object of the same type as x.

Examples

library(htmltools)

div(
  div(
    .style %>%
      border_color("danger") %>%
      float("left"),
    "6.5/10"
  ),
  div(
    "Considering the need for opening sentences.",
    "We may want to reconsider the necessity of second or third sentences.",
    "The whole problem may be avoided by never creating a problem."
  )
)

Focus ring color

Description

The focus_color() function adjusts the focus shadow color of a tag element.

Usage

focus_color(x, color)

Arguments

Value

An object of the same type as x.

Examples

library(htmltools)

tags$button(
  .style %>%
    background_color(theme_primary()) %>%
    focus_color(theme_primary()),
  "Primary themed button with primary themed focus ring"
)

Grid and flex margins

Description

The ⁠gap_*()⁠ functions adjust the margins of child elements of a tag element with a grid or flex display. Instead of applying margin_*() to each child element, a single ⁠gap_*()⁠ function is applied to the parent element.

Usage

gap_all(x, ...)

gap_horizontal(x, ...)

gap_vertical(x, ...)

Arguments

Value

An object of the same type as x.

See Also

margin_all() for margins on non flex item elements.

Examples

library(htmltools)

div(
  .style %>%
    flex_display(),
  div(
    .style %>%
      margin_all(2)
  ),
  div(
    .style %>%
      margin_all(2)
  )
)

div(
  .style %>%
    flex_display() %>%
    gap_all(2),
  div(),
  div()
)

Relative height

Description

The height_relative() function adjusts a tag element's height relative to the height of its parent element.

Usage

height_relative(x, percent)

Arguments

Value

An object of the same type as x.

Examples

library(htmltools)

div(
  .style %>%
    height_relative(50)
)

div(
  .style %>%
    height_relative(75)
)

Flex align self

Description

The item_align() function adjusts

Usage

item_align(x, ...)

Arguments

Value

An object of the same type as x.

See Also

Other flex utilities: flex_align(), flex_content(), flex_direction(), flex_display(), flex_justify(), flex_wrap(), item_fill(), item_grow(), item_order()

Examples

library(htmltools)

div(
  .style %>%
    flex_display() %>%
    flex_align("end"),
  div("Flex item"),
  div(
    .style %>%
      item_align("start"),
    "Flex item (self aligned)"
  ),
  div("Flex item")
)

Flex fill

Description

The item_fill() adjusts how tag elements fill a flex element.

Usage

item_fill(x, ...)

Arguments

Value

An object of the same type as x.

See Also

Other flex utilities: flex_align(), flex_content(), flex_direction(), flex_display(), flex_justify(), flex_wrap(), item_align(), item_grow(), item_order()

Examples

library(htmltools)

div(
  .style %>%
    flex_display(),
  div(
    .style %>%
      item_fill(TRUE),
    "Flex item"
  ),
  div(
    .style %>%
      item_fill(TRUE),
    "Flex item"
  ),
  div(
    .style %>%
      item_fill(TRUE),
    "Flex item"
  )
)

Flex grow and shrink

Description

The item_grow() and item_shrink() adjust a tag element's ability to grow or shrink inside a flex element.

Usage

item_grow(x, ...)

item_shrink(x, ...)

Arguments

Value

An object of the same type as x.

See Also

Other flex utilities: flex_align(), flex_content(), flex_direction(), flex_display(), flex_justify(), flex_wrap(), item_align(), item_fill(), item_order()

Examples

library(htmltools)

div(
  .style %>%
    flex_display(),
  div(
    .style %>%
      padding_all(2) %>%
      item_grow(TRUE),
    "Flex item"
  ),
  div(
    .style %>%
      padding_all(2),
    "Flex item"
  ),
  div(
    .style %>%
      padding_all(2),
    "Flex item"
  )
)

Flex reordering

Description

The item_order() function adjusts the visual order of a tag element.

Usage

item_order(x, ...)

Arguments

Value

An object of the same type as x.

See Also

Other flex utilities: flex_align(), flex_content(), flex_direction(), flex_display(), flex_justify(), flex_wrap(), item_align(), item_fill(), item_grow()

Examples

library(htmltools)

div(
  .style %>%
    flex_display(),
  div(
    .style %>%
      item_order(3),
    "Third flex item"
  ),
  div(
    .style %>%
      item_order(2),
    "Second flex item"
  ),
  div(
    "First flex item"
  )
)

Margins

Description

The ⁠margin_*()⁠ functions adjust a tag element's margin, the space outside and around the element, its border, and its content.

Usage

margin_all(x, ...)

margin_top(x, ...)

margin_right(x, ...)

margin_bottom(x, ...)

margin_left(x, ...)

margin_horizontal(x, ...)

margin_vertical(x, ...)

Arguments

Value

An object of the same type as x.

See Also

gap_all() for flex spacing.

Examples

library(htmltools)

div(
  .style %>%
    margin_left(3) %>%
    margin_right(3),
  "Left margin, right margin"
)

div(
  .style %>%
    margin_horizontal(3),
  "Shorthand for left and right margins"
)

div(
  .style %>%
    margin_horizontal("auto"),
  "A centered element."
)

Content overflow

Description

The ⁠overflow_*()⁠ functions adjust how an element's content scrolls.

Usage

overflow_all(x, behavior)

overflow_horizontal(x, behavior)

overflow_vertical(x, behavior)

Arguments

Value

An object of the same type as x.

Examples

library(htmltools)

div(
  .style %>%
    width_relative(25) %>%
    overflow_horizontal("hidden"),
  "We've really got to drag on this sentence because if we don't",
  "then the example does not demonstrat the utility of the overflow",
  "function"
)

Padding

Description

The ⁠padding_*()⁠ functions adjust a tag element's padding, the space between the element's border and its content or child elements.

Usage

padding_all(x, ...)

padding_top(x, ...)

padding_right(x, ...)

padding_bottom(x, ...)

padding_left(x, ...)

padding_horizontal(x, ...)

padding_vertical(x, ...)

Arguments

Value

An object of the same type as x.

Examples

library(htmltools)

div(
  .style %>%
    border_color(theme_primary()) %>%
    padding_all(2),
  "A padded element"
)

Positioning elements

Description

The ⁠position_*()⁠ functions adjust set the position of an element.

Usage

position(x, method)

Arguments

Value

An object of the same type as x.

See Also

Other position utilities: position_centered(), position_sticky()

Examples

library(htmltools)

div(
  .style %>%
    position("absolute") %>%
    position_top(50)
)

Centering positioned elements

Description

Use position_centered() to position an element by its center instead of its edge.

Usage

position_centered(x)

Arguments

Value

An object of the same type as x.

See Also

Other position utilities: position_sticky(), position()

Examples

library(htmltools)

div(
  .style %>%
    position("absolute") %>%
    position_right(0) %>%
    position_centered()
)

tags$button(
  type = "button",
  .style %>%
    position("relative") %>%
    background_color(theme_primary()),
  "Mail",
  span(
    .style %>%
      position("absolute") %>%
      position_top(0) %>%
      position_right(0) %>%
      position_centered() %>%
      rounded_all("pill") %>%
      background_color(theme_secondary()),
    "+99"
  )
)

Sticky positioning

Description

Use position_sticky() to position an element at the top or bottom of the viewport after scrolling past the element.

Usage

position_sticky(x, ...)

Arguments

Value

An object of the same type as x.

See Also

Other position utilities: position_centered(), position()

Examples

library(htmltools)

div(
  .style %>%
    position_sticky(sm = "top"),
  "Sticks to the top of the viewport on small screens"
)

Position offset

Description

Use ⁠position_<side>()⁠ to adjust the position offset of a tag element.

Usage

position_top(x, offset)

position_left(x, offset)

position_bottom(x, offset)

position_right(x, offset)

Arguments

Value

An object of the same type as x.

Examples

library(htmltools)

div(
  .style %>%
    position("absolute") %>%
    position_right(0)
)

Objects exported from other packages

Description

These objects are imported from other packages. Follow the links below to see their documentation.

magrittr

%>%

Element corners

Description

The ⁠rounded_*()⁠ functions adjust the corners of a tag element.

Usage

rounded_all(x, size)

rounded_top(x, size)

rounded_right(x, size)

rounded_bottom(x, size)

rounded_left(x, size)

Arguments

Value

An object of the same type as x.

Examples

library(htmltools)

div(
  .style %>%
    rounded_all(3)
)

div(
  .style %>%
    rounded_left("pill")
)

Visual depth

Description

The shadow() function adjusts the box shadow of a tag element.

Usage

shadow(x, size)

Arguments

Value

An object of the same type as x.

Examples

library(htmltools)

div(
  .style %>%
    shadow("small")
)

div(
  .style %>%
    border_color(theme_warning()) %>%
    background_color(theme_warning()) %>%
    shadow("medium")
)

Quick flex layouts

Description

The stack_vertical() and stack_horizontal() functions are shortcuts for creating vertical and horizontal flex layouts.

Usage

stack_vertical(x)

stack_horizontal(x)

Arguments

Value

An object of the same type as x.

Examples

library(htmltools)

div(
  .style %>%
    stack_vertical() %>%
    gap_all(3),
  p(
    .style %>%
      border_all() %>%
      padding_all(2),
    "First item"
  ),
  p(
    .style %>%
      border_all() %>%
      padding_all(2),
    "Second item"
  ),
  p(
    .style %>%
      border_all() %>%
      padding_all(2),
    "Third item"
  )
)

Align text

Description

The text_alignment() function adjusts how the text within a tag element is aligned.

Usage

text_alignment(x, ...)

Arguments

Value

An object of the same type as x.

See Also

Other text utilities: text_break(), text_color(), text_decoration(), text_height(), text_selection(), text_style(), text_transform(), text_weight(), text_wrap()

Examples

library(htmltools)

div(
  .style %>%
    text_alignment("left")
)

div(
  .style %>%
    text_alignment("center")
)

Break long text

Description

The text_break() function is used to break long strings of text within a tag element.

Usage

text_break(x)

Arguments

Value

An object of the same type as x.

See Also

Other text utilities: text_alignment(), text_color(), text_decoration(), text_height(), text_selection(), text_style(), text_transform(), text_weight(), text_wrap()

Examples

library(htmltools)

div(
  .style %>%
    text_break(),
  "wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww"
)

Text color

Description

The text_color() function adjusts the color of text in a tag element.

Usage

text_color(x, color)

text_emphasis(x, color)

Arguments

Value

An object of the same type as x.

See Also

Other text utilities: text_alignment(), text_break(), text_decoration(), text_height(), text_selection(), text_style(), text_transform(), text_weight(), text_wrap()

Examples

library(htmltools)

div(
  .style %>%
    text_color(theme_primary())
)

div(
  .style %>%
    text_color(theme_dark()) %>%
    border_color(theme_dark())
)

Text decoration

Description

The text_dectoration() function adjusts how text is decorated within a tag element.

Usage

text_decoration(x, decoration)

Arguments

Value

An object of the same type as x.

See Also

Other text utilities: text_alignment(), text_break(), text_color(), text_height(), text_selection(), text_style(), text_transform(), text_weight(), text_wrap()

Examples

library(htmltools)

div(
  .style %>%
    text_decoration("strike"),
  "TODO: buy milk"
)

div(
  .style %>%
    text_emphasis(theme_danger()) %>%
    text_decoration("underline"),
  "Red AND underlined!"
)

Text height

Description

The text_height() function adjusts the line height of text within a tag element.

Usage

text_height(x, height)

Arguments

Value

An object of the same type as x.

See Also

Other text utilities: text_alignment(), text_break(), text_color(), text_decoration(), text_selection(), text_style(), text_transform(), text_weight(), text_wrap()

Examples

library(htmltools)

p(
  .style %>%
    text_height("base"),
  "This is the browser's default line height spacing.",
  "Make sure there are multiple lines of text in a paragraph.",
  "Otherwise, the changes applied by these utilities are not visible."
)

Text selection

Description

The text_selection() function adjusts how text is selected within a tag element when the user clicks on the element.

Usage

text_selection(x, select)

Arguments

Value

An object of the same type as x.

See Also

Other text utilities: text_alignment(), text_break(), text_color(), text_decoration(), text_height(), text_style(), text_transform(), text_weight(), text_wrap()

Examples

library(htmltools)

div(
  .style %>%
    text_selection("all"),
  "Click to select all the text"
)

Text size

Description

The text_size() function adjusts the font size of a tag element.

Usage

text_size(x, size)

Arguments

Value

An object of the same type as x.

Examples

library(htmltools)

p(
  .style %>%
    text_size(1),
  "Largest size"
)

p(
  .style %>%
    text_size(6),
  "Smallest size"
)

Text style

Description

The text_style() function adjusts the style of text in a tag element.

Usage

text_style(x, style)

Arguments

Value

An object of the same type as x.

See Also

Other text utilities: text_alignment(), text_break(), text_color(), text_decoration(), text_height(), text_selection(), text_transform(), text_weight(), text_wrap()

Examples

library(htmltools)

p(
  .style %>%
    text_style("italic"),
  "Italic text"
)

p(
  .style %>%
    text_style("normal"),
  "Normal text"
)

Text transformation

Description

The text_transform() function adjusts the case of text in a tag element.

Usage

text_transform(x, transform)

Arguments

Value

An object of the same type as x.

See Also

Other text utilities: text_alignment(), text_break(), text_color(), text_decoration(), text_height(), text_selection(), text_style(), text_weight(), text_wrap()

Examples

library(htmltools)

div(
  .style %>%
    text_transform("lowercase"),
  "TRANSFORMED TO LOWERCASE"
)

div(
  .style %>%
    text_color(theme_warning()) %>%
    text_transform("uppercase"),
  "transformed to uppercase"
)

Text weight

Description

The text_weight() function adjusts the font weight of a tag element.

Usage

text_weight(x, weight)

Arguments

Value

An object of the same type as x.

See Also

Other text utilities: text_alignment(), text_break(), text_color(), text_decoration(), text_height(), text_selection(), text_style(), text_transform(), text_wrap()

Examples

library(htmltools)

p(
  .style %>%
    text_weight("bold"),
  "Bold"
)

p(
  .style %>%
    text_weight("light"),
  "Light"
)

Text wrap

Description

The text_wrap() adjusts how text is wrapped, or not wrapped, in a tag element.

Usage

text_wrap(x, wrap)

Arguments

Value

An object of the same type as x.

See Also

Other text utilities: text_alignment(), text_break(), text_color(), text_decoration(), text_height(), text_selection(), text_style(), text_transform(), text_weight()

Examples

library(htmltools)

div(
  style = "width: 5rem;",
  .style %>%
    background_color(theme_primary()) %>%
    text_wrap(TRUE),
  "Wrap text to fit the element"
)

div(
  style = "width: rem;",
  .style %>%
    background_color(theme_secondary()) %>%
    text_wrap(FALSE),
  "This text won't wrap onto a new line."
)

Theme colors

Description

Theme color functions.

Usage

theme_primary()

theme_secondary()

theme_success()

theme_danger()

theme_warning()

theme_info()

theme_light()

theme_dark()

Value

A character string.

Examples

library(htmltools)

div(
  .style %>%
    background_color("primary")
)

div(
  .style %>%
    background_color(theme_primary())
)

Vertical alignment

Description

The vertical_alignment() function adjusts the inline position of inline, inline-block, and table cell elements. The utility may be used to adjust the vertical alignment of an image in a line of text or the contents of a table cell.

Usage

vertical_alignment(x, alignment)

Arguments

Value

An object of the same type as x.

Examples

library(htmltools)

div(
  "Text",
  span("Above") %>%
    vertical_alignment("top"),
  span("Below") %>%
    vertical_alignment("bottom")
)

Visibility

Description

The visible() function adjusts the visibility of a tag element. An invisible element is both visually hidden and is also hidden from screen readers.

Usage

visible(x, show)

Arguments

Value

An object of the same type as x.

Examples

library(htmltools)

div(
  .style %>%
    visible(FALSE),
  "Not visible"
)

Relative width

Description

The width_relative() function adjusts a tag element's width relative to its parent element's width.

Usage

width_relative(x, percent)

Arguments

Value

An object of the same type as x.

Examples

library(htmltools)

div(
  .style %>%
    width_relative(25)
)

div(
  .style %>%
    width_relative(100)
)