Title: | A Style Pronoun for 'htmltools' Tags |
---|---|
Description: | Apply styles to tag elements directly and with the .style pronoun. Using the pronoun, styles are created within the context of a tag element. Change borders, backgrounds, text, margins, layouts, and more. |
Authors: | Nathan Teetor [aut, cre, cph], The Bootstrap Authors [cph] (Bootstrap library), Twitter, Inc [cph] (Bootstrap library) |
Maintainer: | Nathan Teetor <[email protected]> |
License: | MIT + file LICENSE |
Version: | 0.2.0 |
Built: | 2024-10-25 05:27:17 UTC |
Source: | CRAN |
The background_color()
and background_subtle()
functions adjust the
background color of a tag element.
background_color(x, color) background_subtle(x, color)
background_color(x, color) background_subtle(x, color)
x |
A tag element or .style pronoun. |
color |
A character string specifying a color. One of,
|
An object of the same type as x
.
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()) )
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()) )
The border_all()
and border_<side>()
functions adjust a tag element's
borders.
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)
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)
x |
A tag element or .style pronoun. |
include |
A boolean specifying to include a side. One of,
|
An object of the same type as x
.
library(htmltools) h3( .style %>% border_bottom() %>% border_color(theme_warning()) %>% text_color(theme_warning()), "Warning" )
library(htmltools) h3( .style %>% border_bottom() %>% border_color(theme_warning()) %>% text_color(theme_warning()), "Warning" )
The border_color()
and border_subtle()
functions adjust the border
color of a tag element.
border_color(x, color) border_subtle(x, color)
border_color(x, color) border_subtle(x, color)
x |
A tag element or .style pronoun. |
color |
A character string specifying a color. One of,
|
An object of the same type as x
.
Other border utilities:
border_width()
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()) )
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()) )
Adjust the boder width of a tag element.
border_width(x, width)
border_width(x, width)
x |
A tag element or .style pronoun. |
width |
A number between |
An object of the same type as x
.
Other border utilities:
border_color()
library(htmltools) div( .style %>% border_all() %>% border_width(3) %>% border_color(theme_primary()) )
library(htmltools) div( .style %>% border_all() %>% border_width(3) %>% border_color(theme_primary()) )
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.
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.
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/.
library(htmltools) div( .style %>% flex_display() %>% flex_direction(xs = "column", lg = "row") ) div( .style %>% flex_display() %>% gap_all(xs = 0, md = 2, xl = 4) )
library(htmltools) div( .style %>% flex_display() %>% flex_direction(xs = "column", lg = "row") ) div( .style %>% flex_display() %>% gap_all(xs = 0, md = 2, xl = 4) )
For CSS styles to be applied, you must include a call to
cascadess_dependencies()
in your UI or use the bslib package.
cascadess_dependencies()
cascadess_dependencies()
An htmltools::htmlDependency()
.
## 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)
## 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)
The display()
function adjusts how a tag element and its contents are
rendered.
display(x, ...)
display(x, ...)
x |
A tag element or .style pronoun. |
... |
A character string specifying a display type. One of,
|
An object of the same type as x
.
library(htmltools) div( .style %>% display("flex") %>% flex_justify("center"), "Powerful stuff" ) div( .style %>% display( xs = "inline", md = "block" ), "Block and roll" )
library(htmltools) div( .style %>% display("flex") %>% flex_justify("center"), "Powerful stuff" ) div( .style %>% display( xs = "inline", md = "block" ), "Block and roll" )
.style
pronounThe .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") )
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.
flex_align(x, ...)
flex_align(x, ...)
x |
A tag element or .style pronoun. |
... |
A character string specifying the cross axis alignment. One of,
|
An object of the same type as x
.
Other flex utilities:
flex_content()
,
flex_direction()
,
flex_display()
,
flex_justify()
,
flex_wrap()
,
item_align()
,
item_fill()
,
item_grow()
,
item_order()
library(htmltools) div( .style %>% flex_display() %>% flex_align("center"), div("Flex item"), div("Flex item"), div("Flex item") )
library(htmltools) div( .style %>% flex_display() %>% flex_align("center"), div("Flex item"), div("Flex item"), div("Flex item") )
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.
flex_content(x, ...)
flex_content(x, ...)
x |
A tag element or .style pronoun. |
... |
A character string specifying the cross axis alignment. One of,
|
An object of the same type as x
.
Other flex utilities:
flex_align()
,
flex_direction()
,
flex_display()
,
flex_justify()
,
flex_wrap()
,
item_align()
,
item_fill()
,
item_grow()
,
item_order()
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") )
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") )
The flex_direction()
function adjusts the
flex_direction(x, ...)
flex_direction(x, ...)
x |
A tag element or .style pronoun. |
... |
A character string specifying a direction. One of,
|
An object of the same type as x
.
Other flex utilities:
flex_align()
,
flex_content()
,
flex_display()
,
flex_justify()
,
flex_wrap()
,
item_align()
,
item_fill()
,
item_grow()
,
item_order()
library(htmltools) div( .style %>% flex_display() %>% flex_direction("column") )
library(htmltools) div( .style %>% flex_display() %>% flex_direction("column") )
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()
.
flex_display(x)
flex_display(x)
x |
A tag element or .style pronoun. |
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.
An object of the same type as x
.
Other flex utilities:
flex_align()
,
flex_content()
,
flex_direction()
,
flex_justify()
,
flex_wrap()
,
item_align()
,
item_fill()
,
item_grow()
,
item_order()
library(htmltools) div( .style %>% flex_display() %>% flex_justify("end"), div("Flex item"), div("Flex item"), div("Flex item") )
library(htmltools) div( .style %>% flex_display() %>% flex_justify("end"), div("Flex item"), div("Flex item"), div("Flex item") )
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.
flex_justify(x, ...)
flex_justify(x, ...)
x |
A tag element or .style pronoun. |
... |
A character string specifying the main axis alignment. One of,
|
An object of the same type as x
.
Other flex utilities:
flex_align()
,
flex_content()
,
flex_direction()
,
flex_display()
,
flex_wrap()
,
item_align()
,
item_fill()
,
item_grow()
,
item_order()
library(htmltools) div( .style %>% flex_display() %>% flex_justify("end"), div("Flex item"), div("Flex item"), div("Flex item") )
library(htmltools) div( .style %>% flex_display() %>% flex_justify("end"), div("Flex item"), div("Flex item"), div("Flex item") )
The flex_wrap()
function adjusts how a tag element's child elements wrap,
or don't wrap, onto new lines.
flex_wrap(x, ...)
flex_wrap(x, ...)
x |
A tag element or .style pronoun. |
... |
A boolean specifying to wrap or not wrap. One of,
|
An object of the same type as x
.
Other flex utilities:
flex_align()
,
flex_content()
,
flex_direction()
,
flex_display()
,
flex_justify()
,
item_align()
,
item_fill()
,
item_grow()
,
item_order()
library(htmltools) div( .style %>% flex_display() %>% flex_wrap(FALSE), div("Flex item"), div("Flex item"), div("Flex item"), div("Flex item") )
library(htmltools) div( .style %>% flex_display() %>% flex_wrap(FALSE), div("Flex item"), div("Flex item"), div("Flex item"), div("Flex item") )
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.
float(x, ...)
float(x, ...)
x |
A tag element or .style pronoun. |
... |
One of the following,
|
An object of the same type as x
.
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." ) )
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." ) )
The focus_color()
function adjusts the focus shadow color of a tag element.
focus_color(x, color)
focus_color(x, color)
x |
A tag element or .style pronoun. |
color |
A character string specifying a color. One of,
|
An object of the same type as x
.
library(htmltools) tags$button( .style %>% background_color(theme_primary()) %>% focus_color(theme_primary()), "Primary themed button with primary themed focus ring" )
library(htmltools) tags$button( .style %>% background_color(theme_primary()) %>% focus_color(theme_primary()), "Primary themed button with primary themed focus ring" )
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.
gap_all(x, ...) gap_horizontal(x, ...) gap_vertical(x, ...)
gap_all(x, ...) gap_horizontal(x, ...) gap_vertical(x, ...)
x |
A tag element or .style pronoun. |
... |
A number specifying the space between child elements. One of,
|
An object of the same type as x
.
margin_all()
for margins on non flex item elements.
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() )
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() )
The height_relative()
function adjusts a tag element's height relative to
the height of its parent element.
height_relative(x, percent)
height_relative(x, percent)
x |
A tag element or .style pronoun. |
percent |
A number specifying a percent. One of,
|
An object of the same type as x
.
library(htmltools) div( .style %>% height_relative(50) ) div( .style %>% height_relative(75) )
library(htmltools) div( .style %>% height_relative(50) ) div( .style %>% height_relative(75) )
The item_align()
function adjusts
item_align(x, ...)
item_align(x, ...)
x |
A tag element or .style pronoun. |
... |
A character string specifying an alignment. One of,
|
An object of the same type as x
.
Other flex utilities:
flex_align()
,
flex_content()
,
flex_direction()
,
flex_display()
,
flex_justify()
,
flex_wrap()
,
item_fill()
,
item_grow()
,
item_order()
library(htmltools) div( .style %>% flex_display() %>% flex_align("end"), div("Flex item"), div( .style %>% item_align("start"), "Flex item (self aligned)" ), div("Flex item") )
library(htmltools) div( .style %>% flex_display() %>% flex_align("end"), div("Flex item"), div( .style %>% item_align("start"), "Flex item (self aligned)" ), div("Flex item") )
The item_fill()
adjusts how tag elements fill a flex element.
item_fill(x, ...)
item_fill(x, ...)
x |
|
... |
A boolean specifying to fill. One of
Use name-value pairs to specifying breakpoints. |
An object of the same type as x
.
Other flex utilities:
flex_align()
,
flex_content()
,
flex_direction()
,
flex_display()
,
flex_justify()
,
flex_wrap()
,
item_align()
,
item_grow()
,
item_order()
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" ) )
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" ) )
The item_grow()
and item_shrink()
adjust a tag element's ability to grow
or shrink inside a flex element.
item_grow(x, ...) item_shrink(x, ...)
item_grow(x, ...) item_shrink(x, ...)
x |
A tag element or .style pronoun. |
... |
A boolean specifying to grow or shrink. One of,
|
An object of the same type as x
.
Other flex utilities:
flex_align()
,
flex_content()
,
flex_direction()
,
flex_display()
,
flex_justify()
,
flex_wrap()
,
item_align()
,
item_fill()
,
item_order()
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" ) )
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" ) )
The item_order()
function adjusts the visual order of a tag element.
item_order(x, ...)
item_order(x, ...)
x |
A tag element or .style pronoun. |
... |
A number or character string specifying a position. One of,
|
An object of the same type as x
.
Other flex utilities:
flex_align()
,
flex_content()
,
flex_direction()
,
flex_display()
,
flex_justify()
,
flex_wrap()
,
item_align()
,
item_fill()
,
item_grow()
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" ) )
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" ) )
The margin_*()
functions adjust a tag element's margin, the space outside
and around the element, its border, and its content.
margin_all(x, ...) margin_top(x, ...) margin_right(x, ...) margin_bottom(x, ...) margin_left(x, ...) margin_horizontal(x, ...) margin_vertical(x, ...)
margin_all(x, ...) margin_top(x, ...) margin_right(x, ...) margin_bottom(x, ...) margin_left(x, ...) margin_horizontal(x, ...) margin_vertical(x, ...)
x |
A tag element or .style pronoun. |
... |
A number or character string specifying a margin. One or more of,
|
An object of the same type as x
.
gap_all()
for flex spacing.
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." )
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." )
The overflow_*()
functions adjust how an element's content scrolls.
overflow_all(x, behavior) overflow_horizontal(x, behavior) overflow_vertical(x, behavior)
overflow_all(x, behavior) overflow_horizontal(x, behavior) overflow_vertical(x, behavior)
x |
A tag element or .style pronoun. |
behavior |
A character string specifying the content overflow behavior. One of,
|
An object of the same type as x
.
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" )
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" )
The padding_*()
functions adjust a tag element's padding, the space between
the element's border and its content or child elements.
padding_all(x, ...) padding_top(x, ...) padding_right(x, ...) padding_bottom(x, ...) padding_left(x, ...) padding_horizontal(x, ...) padding_vertical(x, ...)
padding_all(x, ...) padding_top(x, ...) padding_right(x, ...) padding_bottom(x, ...) padding_left(x, ...) padding_horizontal(x, ...) padding_vertical(x, ...)
x |
A tag element or .style pronoun. |
... |
A number specifying the amount of padding. One of,
|
An object of the same type as x
.
library(htmltools) div( .style %>% border_color(theme_primary()) %>% padding_all(2), "A padded element" )
library(htmltools) div( .style %>% border_color(theme_primary()) %>% padding_all(2), "A padded element" )
The position_*()
functions adjust set the position of an element.
position(x, method)
position(x, method)
x |
A tag element or .style pronoun. |
method |
A character string specifying the positioning method. One of,
|
An object of the same type as x
.
Other position utilities:
position_centered()
,
position_sticky()
library(htmltools) div( .style %>% position("absolute") %>% position_top(50) )
library(htmltools) div( .style %>% position("absolute") %>% position_top(50) )
Use position_centered()
to position an element by its center instead of its edge.
position_centered(x)
position_centered(x)
x |
A tag element or .style pronoun. |
An object of the same type as x
.
Other position utilities:
position_sticky()
,
position()
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" ) )
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" ) )
Use position_sticky()
to position an element at the top or bottom of the
viewport after scrolling past the element.
position_sticky(x, ...)
position_sticky(x, ...)
x |
A tag element or .style pronoun. |
... |
A character string specifying an edge. One of,
|
An object of the same type as x
.
Other position utilities:
position_centered()
,
position()
library(htmltools) div( .style %>% position_sticky(sm = "top"), "Sticks to the top of the viewport on small screens" )
library(htmltools) div( .style %>% position_sticky(sm = "top"), "Sticks to the top of the viewport on small screens" )
Use position_<side>()
to adjust the position offset of a tag element.
position_top(x, offset) position_left(x, offset) position_bottom(x, offset) position_right(x, offset)
position_top(x, offset) position_left(x, offset) position_bottom(x, offset) position_right(x, offset)
x |
A tag element or .style pronoun. |
offset |
A number specifying a percent. One of,
|
An object of the same type as x
.
library(htmltools) div( .style %>% position("absolute") %>% position_right(0) )
library(htmltools) div( .style %>% position("absolute") %>% position_right(0) )
The rounded_*()
functions adjust the corners of a tag element.
rounded_all(x, size) rounded_top(x, size) rounded_right(x, size) rounded_bottom(x, size) rounded_left(x, size)
rounded_all(x, size) rounded_top(x, size) rounded_right(x, size) rounded_bottom(x, size) rounded_left(x, size)
x |
A tag element or .style pronoun. |
size |
A number or character string specifying a corner size. One of,
|
An object of the same type as x
.
library(htmltools) div( .style %>% rounded_all(3) ) div( .style %>% rounded_left("pill") )
library(htmltools) div( .style %>% rounded_all(3) ) div( .style %>% rounded_left("pill") )
The shadow()
function adjusts the box shadow of a tag element.
shadow(x, size)
shadow(x, size)
x |
A tag element or .style pronoun. |
size |
A character string specifying the shadow size. One of,
|
An object of the same type as x
.
library(htmltools) div( .style %>% shadow("small") ) div( .style %>% border_color(theme_warning()) %>% background_color(theme_warning()) %>% shadow("medium") )
library(htmltools) div( .style %>% shadow("small") ) div( .style %>% border_color(theme_warning()) %>% background_color(theme_warning()) %>% shadow("medium") )
The stack_vertical()
and stack_horizontal()
functions are shortcuts
for creating vertical and horizontal flex layouts.
stack_vertical(x) stack_horizontal(x)
stack_vertical(x) stack_horizontal(x)
x |
A tag element or .style pronoun. |
An object of the same type as x
.
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" ) )
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" ) )
The text_alignment()
function adjusts how the text within a tag element is
aligned.
text_alignment(x, ...)
text_alignment(x, ...)
x |
A tag element or .style pronoun. |
... |
A character string specifying an alignment. One of,
Use name-value pairs to specify breakpoints. |
An object of the same type as x
.
Other text utilities:
text_break()
,
text_color()
,
text_decoration()
,
text_height()
,
text_selection()
,
text_style()
,
text_transform()
,
text_weight()
,
text_wrap()
library(htmltools) div( .style %>% text_alignment("left") ) div( .style %>% text_alignment("center") )
library(htmltools) div( .style %>% text_alignment("left") ) div( .style %>% text_alignment("center") )
The text_break()
function is used to break long strings of text within a
tag element.
text_break(x)
text_break(x)
x |
A tag element or .style pronoun. |
An object of the same type as x
.
Other text utilities:
text_alignment()
,
text_color()
,
text_decoration()
,
text_height()
,
text_selection()
,
text_style()
,
text_transform()
,
text_weight()
,
text_wrap()
library(htmltools) div( .style %>% text_break(), "wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww" )
library(htmltools) div( .style %>% text_break(), "wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww" )
The text_color()
function adjusts the color of text in a tag element.
text_color(x, color) text_emphasis(x, color)
text_color(x, color) text_emphasis(x, color)
x |
A tag element or .style pronoun. |
color |
A character string specifying a color. One of,
|
An object of the same type as x
.
Other text utilities:
text_alignment()
,
text_break()
,
text_decoration()
,
text_height()
,
text_selection()
,
text_style()
,
text_transform()
,
text_weight()
,
text_wrap()
library(htmltools) div( .style %>% text_color(theme_primary()) ) div( .style %>% text_color(theme_dark()) %>% border_color(theme_dark()) )
library(htmltools) div( .style %>% text_color(theme_primary()) ) div( .style %>% text_color(theme_dark()) %>% border_color(theme_dark()) )
The text_dectoration()
function adjusts how text is decorated within a tag
element.
text_decoration(x, decoration)
text_decoration(x, decoration)
x |
A tag element or .style pronoun. |
decoration |
A character string specifying a decoration. One of,
|
An object of the same type as x
.
Other text utilities:
text_alignment()
,
text_break()
,
text_color()
,
text_height()
,
text_selection()
,
text_style()
,
text_transform()
,
text_weight()
,
text_wrap()
library(htmltools) div( .style %>% text_decoration("strike"), "TODO: buy milk" ) div( .style %>% text_emphasis(theme_danger()) %>% text_decoration("underline"), "Red AND underlined!" )
library(htmltools) div( .style %>% text_decoration("strike"), "TODO: buy milk" ) div( .style %>% text_emphasis(theme_danger()) %>% text_decoration("underline"), "Red AND underlined!" )
The text_height()
function adjusts the line height of text within a tag
element.
text_height(x, height)
text_height(x, height)
x |
A tag element or .style pronoun. |
height |
A character string specifying a line height. One of,
|
An object of the same type as x
.
Other text utilities:
text_alignment()
,
text_break()
,
text_color()
,
text_decoration()
,
text_selection()
,
text_style()
,
text_transform()
,
text_weight()
,
text_wrap()
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." )
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." )
The text_selection()
function adjusts how text is selected within a tag
element when the user clicks on the element.
text_selection(x, select)
text_selection(x, select)
x |
A tag element or .style pronoun. |
select |
A character string specifying how text is selected. One of,
|
An object of the same type as x
.
Other text utilities:
text_alignment()
,
text_break()
,
text_color()
,
text_decoration()
,
text_height()
,
text_style()
,
text_transform()
,
text_weight()
,
text_wrap()
library(htmltools) div( .style %>% text_selection("all"), "Click to select all the text" )
library(htmltools) div( .style %>% text_selection("all"), "Click to select all the text" )
The text_size()
function adjusts the font size of a tag element.
text_size(x, size)
text_size(x, size)
x |
A tag element or .style pronoun. |
size |
A number specifying a font size for the text. One of,
|
An object of the same type as x
.
library(htmltools) p( .style %>% text_size(1), "Largest size" ) p( .style %>% text_size(6), "Smallest size" )
library(htmltools) p( .style %>% text_size(1), "Largest size" ) p( .style %>% text_size(6), "Smallest size" )
The text_style()
function adjusts the style of text in a tag element.
text_style(x, style)
text_style(x, style)
x |
A tag element or .style pronoun. |
style |
A character string specifying the text style. One of,
|
An object of the same type as x
.
Other text utilities:
text_alignment()
,
text_break()
,
text_color()
,
text_decoration()
,
text_height()
,
text_selection()
,
text_transform()
,
text_weight()
,
text_wrap()
library(htmltools) p( .style %>% text_style("italic"), "Italic text" ) p( .style %>% text_style("normal"), "Normal text" )
library(htmltools) p( .style %>% text_style("italic"), "Italic text" ) p( .style %>% text_style("normal"), "Normal text" )
The text_transform()
function adjusts the case of text in a tag element.
text_transform(x, transform)
text_transform(x, transform)
x |
A tag element or .style pronoun. |
transform |
A character string specifying the transform. One of,
|
An object of the same type as x
.
Other text utilities:
text_alignment()
,
text_break()
,
text_color()
,
text_decoration()
,
text_height()
,
text_selection()
,
text_style()
,
text_weight()
,
text_wrap()
library(htmltools) div( .style %>% text_transform("lowercase"), "TRANSFORMED TO LOWERCASE" ) div( .style %>% text_color(theme_warning()) %>% text_transform("uppercase"), "transformed to uppercase" )
library(htmltools) div( .style %>% text_transform("lowercase"), "TRANSFORMED TO LOWERCASE" ) div( .style %>% text_color(theme_warning()) %>% text_transform("uppercase"), "transformed to uppercase" )
The text_weight()
function adjusts the font weight of a tag element.
text_weight(x, weight)
text_weight(x, weight)
x |
A tag element or .style pronoun. |
weight |
A character string specifying the font weight. One of,
|
An object of the same type as x
.
Other text utilities:
text_alignment()
,
text_break()
,
text_color()
,
text_decoration()
,
text_height()
,
text_selection()
,
text_style()
,
text_transform()
,
text_wrap()
library(htmltools) p( .style %>% text_weight("bold"), "Bold" ) p( .style %>% text_weight("light"), "Light" )
library(htmltools) p( .style %>% text_weight("bold"), "Bold" ) p( .style %>% text_weight("light"), "Light" )
The text_wrap()
adjusts how text is wrapped, or not wrapped, in a tag
element.
text_wrap(x, wrap)
text_wrap(x, wrap)
x |
A tag element or .style pronoun. |
wrap |
A boolean. One of,
|
An object of the same type as x
.
Other text utilities:
text_alignment()
,
text_break()
,
text_color()
,
text_decoration()
,
text_height()
,
text_selection()
,
text_style()
,
text_transform()
,
text_weight()
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." )
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 color functions.
theme_primary() theme_secondary() theme_success() theme_danger() theme_warning() theme_info() theme_light() theme_dark()
theme_primary() theme_secondary() theme_success() theme_danger() theme_warning() theme_info() theme_light() theme_dark()
A character string.
library(htmltools) div( .style %>% background_color("primary") ) div( .style %>% background_color(theme_primary()) )
library(htmltools) div( .style %>% background_color("primary") ) div( .style %>% background_color(theme_primary()) )
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.
vertical_alignment(x, alignment)
vertical_alignment(x, alignment)
x |
A tag element or .style pronoun. |
alignment |
A character string specifying an alignment. One of,
|
An object of the same type as x
.
library(htmltools) div( "Text", span("Above") %>% vertical_alignment("top"), span("Below") %>% vertical_alignment("bottom") )
library(htmltools) div( "Text", span("Above") %>% vertical_alignment("top"), span("Below") %>% vertical_alignment("bottom") )
The visible()
function adjusts the visibility of a tag element. An
invisible element is both visually hidden and is also hidden from screen
readers.
visible(x, show)
visible(x, show)
x |
A tag element or .style pronoun. |
show |
A boolean specifying the visibility. One of,
|
An object of the same type as x
.
library(htmltools) div( .style %>% visible(FALSE), "Not visible" )
library(htmltools) div( .style %>% visible(FALSE), "Not visible" )
The width_relative()
function adjusts a tag element's width relative to its
parent element's width.
width_relative(x, percent)
width_relative(x, percent)
x |
A tag element or .style pronoun. |
percent |
A number specifying a percent. One of,
|
An object of the same type as x
.
library(htmltools) div( .style %>% width_relative(25) ) div( .style %>% width_relative(100) )
library(htmltools) div( .style %>% width_relative(25) ) div( .style %>% width_relative(100) )