Střelby: zobrazení nápovědy

Uživatelům vždycky pomůže, když jim poskytneš více kontextu o tvé aplikaci. Jednou z možností je přidat tlačítko About a zobrazit tyto informace v modálním dialogu.

Přesně to uděláme v tomto cvičení. Až uživatel klikne na tlačítko „About", bude tvoje aplikace vypadat jako na tomto snímku obrazovky.

An app displaying red circles for each mass shooting incident with details appearing on clicking the circle

Připomeň si, že text „About" v modálním dialogu zobrazíš pomocí tohoto fragmentu:

showModal(modalDialog("About"))

Toto cvičení je součástí kurzu

Tvorba webových aplikací se Shiny v R

Zobrazit kurz

Pokyny k cvičení

UI: Přidej akční tlačítko s názvem show_about.
Server: Pomocí observeEvent spusť zobrazení modálního dialogu s použitím showModal(modalDialog(text_about, title = 'About')).

Interaktivní cvičení na vyzkoušení si v praxi

Vyzkoušejte si toto cvičení dokončením tohoto ukázkového kódu.

ui <- bootstrapPage(
  theme = shinythemes::shinytheme('simplex'),
  leaflet::leafletOutput('map', width = '100%', height = '100%'),
  absolutePanel(top = 10, right = 10, id = 'controls',
    sliderInput('nb_fatalities', 'Minimum Fatalities', 1, 40, 10),
    dateRangeInput(
      'date_range', 'Select Date', "2010-01-01", "2019-12-01"
    ),
    # CODE BELOW: Add an action button named show_about
    
  ),
  tags$style(type = "text/css", "
    html, body {width:100%;height:100%}     
    #controls{background-color:white;padding:20px;}
  ")
)

server <- function(input, output, session) {
  # CODE BELOW: Use observeEvent to display a modal dialog
  # with the help text stored in text_about.

  
  
  output$map <- leaflet::renderLeaflet({
    mass_shootings %>% 
      filter(
        date >= input$date_range[1],
        date <= input$date_range[2],
        fatalities >= input$nb_fatalities
      ) %>% 
      leaflet() %>% 
      setView( -98.58, 39.82, zoom = 5) %>% 
      addTiles() %>% 
      addCircleMarkers(
        popup = ~ summary, radius = ~ sqrt(fatalities)*3,
        fillColor = 'red', color = 'red', weight = 1
      )
  })
}

shinyApp(ui, server)

Upravit a spustit kód