margin: Margins

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

Margins

Description

The margin utilty changes the outer spacing of a tag element. The margin of a tag element is the space outside and around the tag element, its border, and its content. All arguments default to NULL, in which case they are ignored.

Usage

margin(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 -5:5 or "auto" specifying a margin for one or more sides of the tag element. 0 removes all outer space, 5 adds the most space, and negative values will consume space pulling the element in that direction.

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(), padding(), scroll(), shadow(), width()

nteetor/yonder documentation built on June 8, 2022, 1:36 p.m.