R/bulma-demo-helpers.R

In tjpalanca/bulma.R: Bulma CSS Framework for R

bulma_demo_helpers <- function() {

  bulma_container(
    bulma_title("Helpers"),
    bulma_subtitle("Helper functions to modify existing tags"),
    bulma_section(
      bulma_title("Alignment", size = 4L),
      bulma_demo_side(
        map(
          c("left", "right", "centered"),
          function(alignment) {
            bulma_buttons(
              bulma_button("Button"),
              bulma_button("Button")
            ) %>%
              bulma_align(alignment)
          }
        )
      ),
      bulma_demo_side(
        map(c("left", "centered", "justified", "right"),
            function(align) {
              bulma_box(stri_rand_lipsum(1L)) %>%
                bulma_text_align(align)
            })
      ),
      bulma_demo_side(
        map(c("left", "centered", "justified", "right"),
            function(align) {
              bulma_box(stri_rand_lipsum(1L)) %>%
                bulma_text_align(align, "mobile")
            })
      )
    ),
    bulma_section(
      bulma_title("Color", size = 4L),
      bulma_demo_side(
        map(c("primary", "link", "info",
              "success", "warning", "danger",
              "white", "black", "light", "dark"),
            function(x) {
              bulma_button(x) %>%
                bulma_color(x)
            })
      ),
      bulma_demo_side(
        map(c("primary", "link", "info",
              "success", "warning", "danger",
              "white", "black", "light", "dark",
              "black-bis", "black-ter", "grey-darker",
              "grey-dark", "grey-light", "grey-lighter",
              "white-ter", "white-bis"),
            function(x) {
              bulma_button(x) %>%
                bulma_text_color(x) %>%
                bulma_background_color("grey-lighter")
            })
      ),
      bulma_demo_side(
        map(c("primary", "link", "info",
              "success", "warning", "danger"),
            function(x) {
              bulma_button(x, style = css(background_color = "grey")) %>%
                bulma_text_color(x, shade = "light")
            })
      ),
      bulma_demo_side(
        map(c("primary", "link", "info",
              "success", "warning", "danger",
              "white", "black", "light", "dark",
              "black-bis", "black-ter", "grey-darker",
              "grey-dark", "grey-light", "grey-lighter",
              "white-ter", "white-bis"),
            function(x) {
              bulma_button(x) %>%
                bulma_background_color(x)
            })
      ),
      bulma_demo_side(
        map(c("primary", "link", "info",
              "success", "warning", "danger",
              "white", "black", "light", "dark",
              "black-bis", "black-ter", "grey-darker",
              "grey-dark", "grey-light", "grey-lighter",
              "white-ter", "white-bis"),
            function(x) {
              bulma_button(x) %>%
                bulma_background_color(NULL)
            })
      ),
      bulma_demo_side(
        map(c("primary", "link", "info",
              "success", "warning", "danger"),
            function(x) {
              bulma_button(x) %>%
                bulma_background_color(x, "light")
            })
      )
    ),
    bulma_section(
      bulma_title("Size", size = 4L),
      bulma_demo_side(
        map(c("small", "normal", "medium", "large"), function(size) {
          bulma_button("Size ", size) %>%
            bulma_size(size)
        })
      ),
      bulma_demo_side(
        map(1:7, function(size) {
          tags$p("Size ", size) %>%
            bulma_text_size(size)
        })
      ),
      bulma_demo_side(
        map(1:7, function(size) {
          tags$p("Size ", size) %>%
            bulma_text_size(size, "mobile")
        })
      )
    ),
    bulma_section(
      bulma_title("Spacing", size = 4L),
      bulma_demo_side(
        map(1:6, function(size) {
          div(
            bulma_button("Spaced") %>%
              bulma_spacing(type = "padding", size = size, side = "right"),
            bulma_button("Pushed")
          )
        })
      ),
      bulma_demo_side(
        map(1:6, function(size) {
          div(
            bulma_button("Spaced") %>%
              bulma_spacing(type = "margin", size = size, side = "right"),
            bulma_button("Pushed")
          )
        })
      )
    ),
    bulma_section(
      bulma_title("Typography", size = 4L),
      bulma_demo_side(
        map(c("capitalized", "lowercase", "uppercase", "italic", "underlined"),
            function(case) {
              tags$p("Transform ", case) %>%
                bulma_text_transform(case)
            })
      ),
      bulma_demo_side(
        map(c("light", "normal", "medium", "semibold", "bold"),
            function(weight) {
              tags$p("Weight ", weight) %>%
                bulma_text_weight(weight)
            })
      ),
      bulma_demo_side(
        map(c("capitalized", "lowercase", "uppercase", "italic", "underlined"),
            function(case) {
              tags$p("Transform ", case) %>%
                bulma_text_transform(case)
            })
      ),
      bulma_demo_side(
        map(c("sans-serif", "monospace", "primary", "secondary", "code"),
            function(family) {
              tags$p("Family ", family) %>%
                bulma_text_family(family)
            })
      )
    ),
    bulma_section(
      bulma_title("Visibility", size = 4L),
      bulma_demo_side(
        map(c("block", "flex", "inline", "hidden",
              "inline-block", "inline-flex"),
            function(display) {
              bulma_box(display) %>%
                bulma_display(display)
            })
      ),
      bulma_demo_side(
        map(c("block", "flex", "inline", "hidden",
              "inline-block", "inline-flex"),
            function(display) {
              bulma_box(display) %>%
                bulma_display(display, "tablet-only")
            })
      ),
      bulma_demo_side(
        bulma_box("You won't see me.") %>%
          bulma_hidden()
      ),
      bulma_demo_side(
        bulma_box("You won't see me on tablet") %>%
          bulma_hidden("tablet-only")
      ),
      bulma_demo_side(
        bulma_box("You won't see me either") %>%
          bulma_invisible()
      )
    ),
    bulma_section(
      bulma_title("State helpers", size = 4L),
      bulma_demo_side(
        bulma_outlined(bulma_button("Hello"))
      ),
      bulma_demo_side(
        bulma_rounded(bulma_tag("Hello"))
      ),
      bulma_demo_side(
        bulma_selected(bulma_menu_list_item("Hello"))
      ),
      bulma_demo_side(
        bulma_inverted(bulma_button("Inverted"))
      ),
      bulma_demo_side(
        bulma_loading(bulma_button("Loading"))
      ),
      bulma_demo_side(
        bulma_disabled(bulma_button("Disabled"))
      ),
      bulma_demo_side(
        bulma_readonly(bulma_form_input(name = "input"))
      )
    ),
    bulma_section(
      bulma_title("Other helpers", size = 4L),
      bulma_demo_html(
        bulma_clearfix(bulma_box("Clearfix"))
      ),
      bulma_demo_side(div(
        bulma_tag("Pulled Left") %>% bulma_pulled("left"),
        bulma_tag("Pulled Right") %>% bulma_pulled("right")
      )),
      bulma_demo_side(div(
        bulma_box(
          id = "overlay",
          style = css(background_color = "black",
                      opacity = 0.3,
                      display = "none"),
          "Overlay"
        ) %>%
          bulma_overlay(),
        bulma_button(
          "Show overlay",
          onclick = "$('#overlay').toggle()"
        )
      )),
      bulma_demo_html(
        bulma_clipped(bulma_box("clipped"))
      ),
      bulma_demo_side(div(
        bulma_radiusless(bulma_button("Sharp")),
        bulma_button("Rounded")
      )),
      bulma_demo_side(div(
        bulma_shadowless(bulma_box("Shadowless")),
        bulma_box("Shadowed")
      )),

      bulma_demo_side(div(
        bulma_unselectable(bulma_box("Unselectable")),
        bulma_box("Selectable")
      )),
      bulma_demo_side(div(
        bulma_clickable(bulma_box("Clickable")),
        bulma_box("Not clickable")
      )),
      bulma_demo_html(div(
        bulma_relative(bulma_box("Relative")),
        bulma_box("Not relative")
      ))
    )
  )

}