[英]tab specific sidebar in shinydashboard
我在R中使用shinyjs
包,允許onclick
類型事件在tabset中的選項卡之間導航。 每個選項卡都有一個特定的側邊欄,每個選項卡之間有多種(兩種)方式(即通過單擊選項卡本身或通過單擊valueBoxes)。 我想確保無論您以何種方式訪問特定選項卡,都會加載正確的側欄。
# load libraries
require(shiny)
require(shinydashboard)
require(shinyjs)
# create a simple app
ui <- dashboardPage(
title='Loading graphs',
dashboardHeader(
title = 'Loading Graphs'
),
dashboardSidebar(
div(id='tab1_sidebar',
sliderInput('tab1_slider', 'tab1 slider', min=2,max=7,value=2)),
shinyjs::hidden(
div(id='tab2_sidebar',
sliderInput('tab2_slider', 'tab2 slider', min=2,max=7,value=2))
)
),
dashboardBody(
useShinyjs(),
tabsetPanel(
id = "navbar",
tabPanel(title="tab1 title",id="tab1",value='tab1_val',
valueBoxOutput('tab1_valuebox')),
tabPanel(title="tab2 title",id="tab2",value='tab2_val',
valueBoxOutput('tab2_valuebox'))
)
)
)
server <- shinyServer(function(input, output, session) {
output$tab1_valuebox <- renderValueBox({
valueBox('1000',subtitle = "blah blah",icon = icon("car"),
color = "blue"
)
})
output$tab2_valuebox <- renderValueBox({
valueBox('2000',subtitle = "blah2 blah2",icon = icon("car"),
color = "red"
)
})
# on click of a tab1 valuebox
shinyjs::onclick('tab1_valuebox',expr={
# move to tab2
updateTabsetPanel(session, "navbar", 'tab2_val')
# update the sidebar to match the tab
toggle('tab1_sidebar')
toggle('tab2_sidebar')
})
# on click of a tab2 valuebox
shinyjs::onclick('tab2_valuebox',expr={
# move to tab2
updateTabsetPanel(session, "navbar", 'tab1_val')
# update the sidebar to match the tab
toggle('tab1_sidebar')
toggle('tab2_sidebar')
})
})
shinyApp(ui=ui,server=server)
在上面的代碼中,當單擊選項卡時,側邊欄不會更改,但如果我將以下代碼包含到服務器組件中以允許單擊選項卡,則它似乎無法正確調整...
# change sidebar based on navbar value....
observeEvent(input$navbar,{
if(input$navbar=='tab1_val'){
toggle('tab1_sidebar')
toggle('tab2_sidebar')
} else if(input$navbar=='tab2_val'){
toggle('tab1_sidebar')
toggle('tab2_sidebar')
}
})
任何有關這方面的幫助將非常感謝....
現在看起來你的代碼中沒有任何邏輯告訴滑塊在切換選項卡時更新,只有在單擊valueBox時才會更新。
你可以采取不同的方法。
選項1:在導航欄更改時使用監聽並使用帶有condition
toggle()
這與你的代碼非常相似,但是只要有點擊就調用toggle()
函數,我所做的只是更改所選的選項卡。 當選項卡值更改時(通過單擊valueBox或單擊選項卡),然后調用toggle()
函數。 小而重要的區別。
# load libraries
require(shiny)
require(shinydashboard)
require(shinyjs)
# create a simple app
ui <- dashboardPage(
title='Loading graphs',
dashboardHeader(
title = 'Loading Graphs'
),
dashboardSidebar(
div(id='tab1_sidebar',
sliderInput('tab1_slider', 'tab1 slider', min=2,max=7,value=2)),
shinyjs::hidden(
div(id='tab2_sidebar',
sliderInput('tab2_slider', 'tab2 slider', min=2,max=7,value=2))
)
),
dashboardBody(
useShinyjs(),
tabsetPanel(
id = "navbar",
tabPanel(title="tab1 title",id="tab1",value='tab1_val',
valueBoxOutput('tab1_valuebox')),
tabPanel(title="tab2 title",id="tab2",value='tab2_val',
valueBoxOutput('tab2_valuebox'))
)
)
)
server <- shinyServer(function(input, output, session) {
values <- reactiveValues(selectedTab = 1)
observeEvent(input$navbar, {
toggle("tab1_sidebar", condition = input$navbar == "tab1_val")
toggle("tab2_sidebar", condition = input$navbar == "tab2_val")
})
output$tab1_valuebox <- renderValueBox({
valueBox('1000',subtitle = "blah blah",icon = icon("car"),
color = "blue"
)
})
output$tab2_valuebox <- renderValueBox({
valueBox('2000',subtitle = "blah2 blah2",icon = icon("car"),
color = "red"
)
})
# on click of a tab1 valuebox
shinyjs::onclick('tab1_valuebox',expr={
# move to tab2
updateTabsetPanel(session, "navbar", 'tab2_val')
})
# on click of a tab2 valuebox
shinyjs::onclick('tab2_valuebox',expr={
# move to tab2
updateTabsetPanel(session, "navbar", 'tab1_val')
})
})
shinyApp(ui=ui,server=server)
選項2:使用conditionalPanel()
作為shinyjs
的作者,我喜歡toggle
功能,但在這種情況下,它並非絕對必要,只需使用conditionalPanel()
。 這是我認為你想要的代碼:
# load libraries
require(shiny)
require(shinydashboard)
require(shinyjs)
# create a simple app
ui <- dashboardPage(
title='Loading graphs',
dashboardHeader(
title = 'Loading Graphs'
),
dashboardSidebar(
conditionalPanel("input.navbar == 'tab1_val'",
div(id='tab1_sidebar',
sliderInput('tab1_slider', 'tab1 slider', min=2,max=7,value=2))
),
conditionalPanel("input.navbar == 'tab2_val'",
div(id='tab2_sidebar',
sliderInput('tab2_slider', 'tab2 slider', min=2,max=7,value=2))
)
),
dashboardBody(
useShinyjs(),
tabsetPanel(
id = "navbar",
tabPanel(title="tab1 title",id="tab1",value='tab1_val',
valueBoxOutput('tab1_valuebox')),
tabPanel(title="tab2 title",id="tab2",value='tab2_val',
valueBoxOutput('tab2_valuebox'))
)
)
)
server <- shinyServer(function(input, output, session) {
output$tab1_valuebox <- renderValueBox({
valueBox('1000',subtitle = "blah blah",icon = icon("car"),
color = "blue"
)
})
output$tab2_valuebox <- renderValueBox({
valueBox('2000',subtitle = "blah2 blah2",icon = icon("car"),
color = "red"
)
})
# on click of a tab1 valuebox
shinyjs::onclick('tab1_valuebox',expr={
# move to tab2
updateTabsetPanel(session, "navbar", 'tab2_val')
})
# on click of a tab2 valuebox
shinyjs::onclick('tab2_valuebox',expr={
# move to tab2
updateTabsetPanel(session, "navbar", 'tab1_val')
})
})
shinyApp(ui=ui,server=server)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.