How to flip up shapes in shiny by clicking a button?

问题

I want to include a semantic shape element in my shiny app (shapes: https://semantic-ui.com/modules/shape.html#/usage). I am able to construct the shape by using shinyjs and shiny.semantic. But I don't know how to create a button that flips the shape by clicking on it.

Here an example:

Ui.R:

    library(shiny)

    # Define UI for application that draws a histogram
    shinyUI(semanticPage(
      shinyjs::useShinyjs(),

      div(class="ui text shape",
          div(class="sides",
              div(class="ui header side active","This side starts visible."),
              div(class="ui header side","This is yet another side"),
              div(class="ui header side","This is the last side")
          )
      ),
 tags$button(id="test",class="ui button","Flip")

      ))

Server.R:

library(shiny)
library(shinyjs)
#devtools::install_github("Appsilon/shiny.semantic")
library(shiny.semantic)
#devtools::install_github("Appsilon/highlighter")
library(highlighter)
jsCode <- "
$('.shape').shape();
$('.shape').shape('flip up');
$('test').shape('flip up');
"

# Define server logic required to draw a histogram
shinyServer(function(input, output) {
  runjs(jsCode)

})

This creates both the button and a shape, but how do I make the button flipping the shape?

回答1:

I think you need this JS code:

jsCode <- "
$('.shape').shape();
$('#test').on('click', function(){$('.shape').shape('flip up');});
"

Or just:

jsCode <- "
    $('.shape').shape();
    "

and in the ui:

  tags$button(id="test", class="ui button", "Flip", onclick="$('.shape').shape('flip up');")

来源：https://stackoverflow.com/questions/44988097/how-to-flip-up-shapes-in-shiny-by-clicking-a-button