padding: Padding

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

Padding

Description

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.

Usage

padding(x, all = NULL, top = NULL, right = NULL, bottom = NULL, left = NULL)

Arguments

x	A tag element or .style pronoun.
all, top, right, bottom, left	A responsive argument. One of 0:5 or "auto" specifying padding for one or more sides of the tag element. 0 removes all inner space and 5 adds the most space.

Details

Centering an element

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

Nam a sapien. Integer placerat tristique nisl.

Building an inline form

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

@@

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

@@

Login

See Also

Other design utilities: active(), affix(), background(), border(), display(), flex(), float(), font(), height(), margin(), scroll(), shadow(), width()

nteetor/dull documentation built on June 10, 2022, 11:30 a.m.