diff --git a/docs/articles/Tabs-Layout.html b/docs/articles/Tabs-Layout.html index 784900e6..2da72bde 100644 --- a/docs/articles/Tabs-Layout.html +++ b/docs/articles/Tabs-Layout.html @@ -95,7 +95,8 @@
shinyMobile 0.1.0
- + +

Tabs-Layout

@@ -112,21 +113,20 @@

2024-01-20

The second layout is the f7TabLayout(), very similar to that of miniUI.

- -
-
-
-
-
-
-
-
- +

The app below runs with specific options:

+
+f7Page(
+  options = list(dark = FALSE, filled = FALSE, theme = "md"),
+  ...
+)
+
+
+
-
-
+ +
-
+
 library(shiny)
 library(shinyMobile)
 library(apexcharter)
@@ -138,6 +138,7 @@ 
2024-01-20

 
 shinyApp(
   ui = f7Page(
+    options = list(dark = FALSE, filled = FALSE, theme = "md"),
     title = "My app",
     f7TabLayout(
       panels = tagList(
@@ -155,60 +156,11 @@ 
2024-01-20

         animated = TRUE,
         #swipeable = TRUE,
         f7Tab(
-          tabName = "Tab 1",
+          title = "Tab 1",
+          tabName = "Tab1",
           icon = f7Icon("folder"),
           active = TRUE,
 
-          f7Flex(
-            prettyRadioButtons(
-              inputId = "theme",
-              label = "Select a theme:",
-              thick = TRUE,
-              inline = TRUE,
-              selected = "md",
-              choices = c("ios", "md"),
-              animation = "pulse",
-              status = "info"
-            ),
-
-            prettyRadioButtons(
-              inputId = "color",
-              label = "Select a color:",
-              thick = TRUE,
-              inline = TRUE,
-              selected = "dark",
-              choices = c("light", "dark"),
-              animation = "pulse",
-              status = "info"
-            )
-          ),
-
-          tags$head(
-            tags$script(
-              'Shiny.addCustomMessageHandler("ui-tweak", function(message) {
-                var os = message.os;
-                var skin = message.skin;
-                if (os === "md") {
-                  $("html").addClass("md");
-                  $("html").removeClass("ios");
-                  $(".tab-link-highlight").show();
-                } else if (os === "ios") {
-                  $("html").addClass("ios");
-                  $("html").removeClass("md");
-                  $(".tab-link-highlight").hide();
-                }
-
-                if (skin === "dark") {
-                 $("html").addClass("theme-dark");
-                } else {
-                  $("html").removeClass("theme-dark");
-                }
-
-               });
-              '
-            )
-          ),
-
           f7Shadow(
             intensity = 10,
             hover = TRUE,
@@ -219,7 +171,8 @@ 
2024-01-20

           )
         ),
         f7Tab(
-          tabName = "Tab 2",
+          title = "Tab 2",
+          tabName = "Tab2",
           icon = f7Icon("keyboard"),
           active = FALSE,
           f7Shadow(
@@ -232,7 +185,8 @@ 
2024-01-20

           )
         ),
         f7Tab(
-          tabName = "Tab 3",
+          title = "Tab 3",
+          tabName = "Tab3",
           icon = f7Icon("layers_alt"),
           active = FALSE,
           f7Shadow(
@@ -285,15 +239,6 @@ 
2024-01-20

     output$data <- renderTable({
       mtcars[, c("mpg", input$variable), drop = FALSE]
     }, rownames = TRUE)
-
-    # send the theme to javascript
-    observe({
-      session$sendCustomMessage(
-        type = "ui-tweak",
-        message = list(os = input$theme, skin = input$color)
-      )
-    })
-
   }
 )