updating chapther 04

Author: AngelFelizR

04_handle-html-dependencies-with-htmltools.Rmd

@@ -18,4 +18,5 @@ Imports:
     purrr,
     rmarkdown,
     shiny,
-    shinydashboard
+    shinydashboard,
+    shinydashboardPlus

DESCRIPTION

@@ -0,0 +1,34 @@
+
+library(shiny)
+
+my_card <- function(...) {
+  withTags(
+    div(
+      class = "card",
+      div(
+        class = "card-body",
+        h5(class = "card-title", "Card title"),
+        p(class = "card-text", "Card content"),
+        button(
+          type = "button",
+          class = "btn btn-primary",
+          "Button"
+        )
+      )
+    )
+  )
+}
+
+shinyApp(
+  ui = fluidPage(
+    fluidRow(
+      column(
+        width = 6,
+        align = "center",
+        br(),
+        my_card("Card Content")
+      )
+    )
+  ),
+  server = function(input, output) {}
+)

examples/chapter-04/01-card-without-dependencies.R

@@ -0,0 +1,50 @@
+
+library(shiny)
+
+my_card <- function(...) {
+  withTags(
+    div(
+      class = "card",
+      div(
+        class = "card-body",
+        h5(class = "card-title", "Card title"),
+        p(class = "card-text", "Card content"),
+        button(
+          type = "button",
+          class = "btn btn-primary",
+          "Button"
+        )
+      )
+    )
+  )
+}
+
+mdb_cdn <- "https://cdnjs.cloudflare.com/ajax/libs/"
+mdb_css <- paste0(mdb_cdn, "mdb-ui-kit/3.6.0/mdb.min.css")
+
+
+shinyApp(
+  ui = fluidPage(
+    tags$style("body {background: gainsboro;}"),
+
+    ## load the css code
+    tags$head(
+      ## Adding a link
+      tags$link(
+        rel = "stylesheet",
+        type = "text/css",
+        href = mdb_css
+      ),
+      ## Pasting all css code
+      #includeCSS(path = mdb_css)
+    ),
+    fluidRow(
+      column(
+        width = 6,
+        br(),
+        my_card("Card Content")
+      )
+    )
+  ),
+  server = function(input, output) {}
+)

examples/chapter-04/02-card-with-dependencies.R

@@ -0,0 +1,56 @@
+
+library(shiny)
+library(htmltools)
+
+my_card <- function(...) {
+  withTags(
+    div(
+      class = "card",
+      div(
+        class = "card-body",
+        h5(class = "card-title", "Card title"),
+        p(class = "card-text", "Card content"),
+        button(
+          type = "button",
+          class = "btn btn-primary",
+          "Button"
+        )
+      )
+    )
+  )
+}
+
+# handle dependency
+mdb_cdn <- "https://cdnjs.cloudflare.com/ajax/libs/"
+mdb_card_dep <- function() {
+  htmlDependency(
+    name = "mdb-card",
+    version = "1.0",
+    src = c(href = mdb_cdn),
+    stylesheet = "mdb-ui-kit/3.6.0/mdb.min.css"
+  )
+}
+
+# create the card
+my_card_with_deps <- function(...) {
+  cardTag <- my_card(...)
+
+  tagList(cardTag, mdb_card_dep())
+
+}
+
+
+shinyApp(
+  ui = fluidPage(
+    tags$style("body {background: gainsboro;}"),
+
+    fluidRow(
+      column(
+        width = 6,
+        br(),
+        my_card_with_deps("Card Content")
+      )
+    )
+  ),
+  server = function(input, output) {}
+)