Create a fully responsive, fluid and nestable grid layout
UIkitGrid(..., gutter = NULL, divider = FALSE, child_width = NULL)
... | 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" |
Do not forget to wrap UI element in a UIkitGridElement before putting them in a grid layout (see example)!
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) {} ) }