BaşlayınÜcretsiz başlayın

Wireframing

Hadi önceki örneğe, bir futbol turnuvasının analiz sonuçları için olan gösterge paneline geri dönelim. Önceki egzersizlerde başlık ve kenar çubuğunu zaten kurdun.

Özellikle, kenar çubuğundaki bir düğme menuItem() ile tanımlanır ve sidebarMenu() içinde yer alır. Bu düğmelerin şu anda hiçbir şey yapmadığını fark etmiş olabilirsin. Şimdi bu kenar çubuğu düğmelerini, arayüzün gövdesindeki farklı bir sayfaya bağlayacaksın. Bu hâlâ wireframing sürecinin bir parçası; her bir nesnenin konumuna karar veriyorsun. Gövde içindeki her sayfa tabItem() ile tanımlanır ve tabItems içinde yer almalıdır.

shiny ve shinydashboard paketleri senin için zaten yüklendi. Ayrıca, gösterge paneli başlığı header olarak kaydedildi.

Bu egzersiz, kursun bir parçasıdır

shinydashboard ile Panolar Oluşturma

Kursa Göz Atın

Uygulamalı etkileşimli egzersiz

Bu egzersizi bu örnek kodu tamamlayarak deneyin.

library(shiny)
library(shinydashboard)

header <- dashboardHeader(
  title = "Analysis results for global soccer tournament",
  titleWidth = 400,
  dropdownMenu(type = "messages",
               messageItem("Colleage", "Hello world!")),
  dropdownMenu(type = "notifications",
               notificationItem("Have you rested today?"),
               taskItem("Dashboard completion", value = 20)))

sidebar <- dashboardSidebar(
  sidebarMenu(
    width = 400,
    id = "pages",
    menuItem("Match details", tabName = "matches", icon = icon("futbol"),
             badgeLabel = "New content!", badgeColor = "green"),
    menuItem("Overall results", tabName = "overall", 
             menuSubItem("Charts", tabName = "charts"),
             menuSubItem("Data table", tabName = "datatable", icon=icon("file-excel"))),
    menuItem("A slider",  sliderInput("slider", "Number of goals", min=0, max=10, value = 2))
  )
)

body <- dashboardBody(
  # Link "matches" to an empty page in the body
  ___(
    ___(___, "Match information goes here")
  )
)
ui <- dashboardPage(header, sidebar, body)
server <- function(input, output){}
shinyApp(ui, server)
Kodu Düzenle ve Çalıştır