Package 'cascadess'

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())
)

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"
)

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())
)

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())
)

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)
)

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)

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"
)

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")
)

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")
)

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")
)

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")
)

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")
)

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")
)

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")
)

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."
  )
)

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"
)

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()
)

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)
)

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")
)

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"
  )
)

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"
  )
)

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"
  )
)

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."
)

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"
)

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"
)

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)
)

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"
  )
)

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"
)

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)
)

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")
)

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")
)

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"
  )
)

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")
)

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"
)

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())
)

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!"
)

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."
)

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"
)

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"
)

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"
)

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"
)

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"
)

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."
)

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())
)

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")
)

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"
)

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)
)