View source: R/design-spacing.R
padding | R Documentation |
The padding
utility changes the inner spacing of a tag element. The padding
of a tag element is the space between the tag element's border and its
content or child elements. All arguments default to NULL
, in which case
they are ignored.
padding(x, all = NULL, top = NULL, right = NULL, bottom = NULL, left = NULL)
x |
A tag element or .style pronoun. |
all, top, right, bottom, left |
A responsive argument. One of |
In most modern browsers you want to horizontally center a tag element
using the flex layout. Alternatively, you can horizontally center an
element using margin(.., right = "auto", left = "auto")
.
div( .style %>% margin(t = 2, r = "auto", b = 2, l = "auto") %>% # <- padding(3) %>% background("info"), "Nam a sapien. Integer placerat tristique nisl." )
Inline form elements automatically use the flex layout providing you a means of creating condensed sets of inputs. However, you may need to adjust the spacing of the form’s child elements.
Here is an inline form without any additional spacing applied.
formInput( id = NULL, inline = TRUE, textInput( id = "name", placeholder = "Full name" ), groupTextInput( id = "username", left = "@@", placeholder = "Username" ), checkboxInput( id = "remember", choice = "Remember me" ), formSubmit("Login", "login") )
Without any adjustments the layout is not great. But, with some styling we can make this form sparkle. Notice we are also adjusting the default submit button added to the form input.
formInput( id = NULL, inline = TRUE, textInput( .style %>% margin(r = c(sm = 2), b = 2), # <- id = "name", placeholder = "Full name" ), groupTextInput( .style %>% margin(r = c(sm = 2), b = 2), # <- id = "username", left = "@@", placeholder = "Username" ) , checkboxInput( .style %>% margin(r = c(sm = 2), b = 2), # <- id = "remember", choice = "Remember me" ), formSubmit( .style %>% margin(b = 2), label = "Login", value = "login" ) )
Other design utilities:
active()
,
affix()
,
background()
,
border()
,
display()
,
flex()
,
float()
,
font()
,
height()
,
margin()
,
scroll()
,
shadow()
,
width()
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.