Framework7 action button — f7Button • shinyMobile

f7Button generates a Framework7 action button.

updateF7Button updates an f7Button.

A Framework7 segmented button container for f7Button.

Usage

f7Button(
  inputId = NULL,
  label = NULL,
  href = NULL,
  color = NULL,
  fill = TRUE,
  outline = FALSE,
  shadow = FALSE,
  rounded = FALSE,
  size = NULL,
  active = FALSE,
  tonal = FALSE,
  icon = NULL
)

updateF7Button(
  inputId,
  label = NULL,
  color = NULL,
  fill = NULL,
  outline = NULL,
  shadow = NULL,
  rounded = NULL,
  size = NULL,
  tonal = NULL,
  icon = NULL,
  session = shiny::getDefaultReactiveDomain()
)

f7Segment(
  ...,
  container = deprecated(),
  shadow = FALSE,
  rounded = FALSE,
  strong = FALSE
)

Arguments

inputId: The input slot that will be used to access the value.
label: The contents of the button or link–usually a text label, but you could also use any other HTML, like an image or f7Icon.
href: Button link.
color: Button color. Not compatible with outline. See here for valid colors https://framework7.io/docs/badge.html.
fill: Fill style. TRUE by default. Not compatible with outline
outline: Outline style. FALSE by default. Not compatible with fill.
shadow: Button shadow. FALSE by default. Only for material design.
rounded: Round style. FALSE by default.
size: Button size. NULL by default but also "large" or "small".
active: Button active state. Default to FALSE. This is useful when used in f7Segment with the strong parameter set to TRUE.
tonal: Button tonal style. Default to FALSE
icon: Button icon. Expect f7Icon.
session: The Shiny session object, usually the default value will suffice.
...: Slot for f7Button.
container: : removed from Framework7.
strong: Add white background so that text is highlighted. FALSE by default.

Author

David Granjon, dgranjon@ymail.com

Examples

library(shiny)
library(shinyMobile)

app <- shiny::shinyApp(
  ui = f7Page(
    title = "Update f7Button",
    f7SingleLayout(
      navbar = f7Navbar(title = "Update f7Button"),
      f7Block(f7Button("update", "Update Button")),
      f7Block(
        f7Button(
          "button",
          "My button",
          color = "orange",
          outline = FALSE,
          fill = TRUE,
          shadow = FALSE,
          rounded = FALSE,
          icon = f7Icon("speedometer")
        )
      )
    )
  ),
  server = function(input, output, session) {
    observeEvent(input$update, {
      updateF7Button(
        inputId = "button",
        label = "Updated label",
        color = "purple",
        shadow = TRUE,
        rounded = TRUE,
        outline = TRUE,
        fill = FALSE,
        tonal = TRUE,
        size = "large",
        icon = f7Icon("speaker_zzz")
      )
    })
  }
)

if (interactive() || identical(Sys.getenv("TESTTHAT"), "true")) app
if (interactive()) {
  library(shiny)
  library(shinyMobile)

  shinyApp(
    ui = f7Page(
      options = list(dark = FALSE),
      title = "Button Segments",
      f7SingleLayout(
        navbar = f7Navbar(title = "f7Segment, f7Button"),
        f7BlockTitle(title = "Simple Buttons in a segment"),
        f7Segment(
          f7Button(color = "blue", label = "My button", fill = FALSE),
          f7Button(color = "green", label = "My button", fill = FALSE),
          f7Button(color = "yellow", label = "My button", fill = FALSE)
        ),
        f7BlockTitle(title = "Tonal buttons"),
        f7Segment(
          f7Button(color = "blue", label = "My button", tonal = TRUE),
          f7Button(color = "green", label = "My button", tonal = TRUE),
          f7Button(color = "yellow", label = "My button", tonal = TRUE)
        ),
        f7BlockTitle(title = "Filled Buttons in a segment/rounded container"),
        f7Segment(
          rounded = TRUE,
          f7Button(color = "black", label = "My button"),
          f7Button(color = "green", label = "My button"),
          f7Button(color = "yellow", label = "My button")
        ),
        f7BlockTitle(title = "Outline Buttons in a segment/shadow container"),
        f7Segment(
          shadow = TRUE,
          f7Button(label = "My button", outline = TRUE, fill = FALSE),
          f7Button(label = "My button", outline = TRUE, fill = FALSE),
          f7Button(label = "My button", outline = TRUE, fill = FALSE)
        ),
        f7BlockTitle(title = "Buttons in a segment/strong container"),
        f7Segment(
          strong = TRUE,
          f7Button(label = "My button", fill = FALSE),
          f7Button(label = "My button", fill = FALSE),
          f7Button(label = "My button", fill = FALSE, active = TRUE)
        )
      )
    ),
    server = function(input, output) {}
  )
}