UIkitGrid: Create an UIkit grid

In DivadNojnarg/shinyUIkit: 'shiny' API for the 'UIkit' Web Framework

Description

Create a fully responsive, fluid and nestable grid layout

Usage

UIkitGrid(..., gutter = NULL, divider = FALSE, child_width = NULL)

Arguments

...	Slot for an UIkitGridElement.
gutter	Grid gutter (space bewteen elements): "small", "medium", "large" or "collapse".
divider	Whether to separate grid elements with a vertical divider. FALSE by default.
child_width	Set an automatic width for all UIkitGridElement. From "1-2" to "1-6" as well as "auto" and "expand"

Note

Do not forget to wrap UI element in a UIkitGridElement before putting them in a grid layout (see example)!

Author(s)

David Granjon, [e-mail]

Examples

if(interactive()){
library(shiny)

shiny::shinyApp(
 ui = UIkitPage(
   title = "My UIkit application",
   UIkitGrid(
    child_width = "expand",
    gutter = "small",
    UIkitGridElement(
     UIkitCard(
      width = NULL,
      title = "My card",
      badge = "test",
      hover = TRUE,
      horizontal = FALSE,
      UIkitCardMedia(
        src = "https://getuikit.com/docs/images/light.jpg",
        horizontal = TRUE, 
        position = "left"
      ),
      body = "This is the body"
     )
    ),
    UIkitGridElement(
     UIkitCard(
      width = NULL,
      title = "My card",
      badge = "test",
      hover = TRUE,
      horizontal = FALSE,
      UIkitCardMedia(
        src = "https://getuikit.com/docs/images/light.jpg",
        horizontal = TRUE, 
        position = "left"
      ),
      body = "This is the body"
     )
    ),
    UIkitGridElement(
     UIkitCard(
      width = NULL,
      title = "My card",
      badge = "test",
      hover = TRUE,
      horizontal = FALSE,
      UIkitCardMedia(
        src = "https://getuikit.com/docs/images/light.jpg",
        horizontal = TRUE, 
        position = "left"
      ),
      body = "This is the body"
     )
    )
   )
 ),
 server = function(input, output) {}
 )
}

DivadNojnarg/shinyUIkit documentation built on July 24, 2019, 8:17 a.m.