ComeçarComece de graça

Layouts com barra lateral

As funções de layout permitem organizar visualmente entradas e saídas na UI. Um layout bem escolhido deixa o app Shiny mais atraente e também melhora a experiência de uso.

Neste exercício, você vai modificar o layout de um app Shiny que permite explorar a popularidade de nomes em alta. Seu app final deve ficar visualmente parecido com isto:

Um app em que o seletor de nomes aparece na barra lateral à esquerda, enquanto o gráfico aparece à direita, no painel principal

Este exercício faz parte do curso

Construindo Aplicações Web com Shiny em R

Ver curso

Instruções do exercício

  • Modifique o layout deste app para que o seletor de nomes apareça na barra lateral e o gráfico e a tabela apareçam à direita.

Exercício interativo prático

Experimente este exercício completando este código de exemplo.

ui <- fluidPage(
  # MODIFY CODE BELOW: Wrap in a sidebarLayout
    # MODIFY CODE BELOW: Wrap in a sidebarPanel
    selectInput('name', 'Select Name', top_trendy_names$name),
    # MODIFY CODE BELOW: Wrap in a mainPanel
    plotly::plotlyOutput('plot_trendy_names'),
    DT::DTOutput('table_trendy_names')
)

# DO NOT MODIFY
server <- function(input, output, session){
  # Function to plot trends in a name
  plot_trends <- function(){
     babynames %>% 
      filter(name == input$name) %>% 
      ggplot(aes(x = year, y = n)) +
      geom_col()
  }
  output$plot_trendy_names <- plotly::renderPlotly({
    plot_trends()
  })
  
  output$table_trendy_names <- DT::renderDT({
    babynames %>% 
      filter(name == input$name)
  })
}

shinyApp(ui = ui, server = server)
Editar e executar o código