New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to Show Tabpanels in bs4navbar() ? #108
Comments
|
Do you mean a navbar navigation with tabs like for the sidebar? |
|
|
@DivadNojnarg Have you got any solution on this? |
|
I don't have time to include it at the moment. |
|
|
I'll implement a better solution but here is a starting point: library(shiny)
library(bs4Dash)
navbarTab <- function(tabName, ..., icon = NULL) {
tags$li(
class = "nav-item",
tags$a(
class = "nav-link",
id = paste0("tab-", tabName),
href = paste0("#shiny-tab-", tabName),
`data-toggle` = "tab",
`data-value` = tabName,
icon,
tags$p(...)
)
)
}
navbarMenu <- function(..., id = NULL) {
if (is.null(id)) id <- paste0("tabs_", round(stats::runif(1, min = 0, max = 1e9)))
tags$ul(
class = "nav dropdown",
role = "menu",
id = "sidebar-menu",
...,
div(
id = id,
class = "sidebarMenuSelectedTabItem",
`data-value` = "null",
)
)
}
shinyApp(
ui = dashboardPage(
header = dashboardHeader(
navbarMenu(
navbarTab(tabName = "Tab1", "Tab 1"),
navbarTab(tabName = "Tab2", "Tab 2")
)
),
body = dashboardBody(
tabItems(
tabItem(
tabName = "Tab1",
"Tab 1"
),
tabItem(
tabName = "Tab2",
"Tab 2"
)
)
),
sidebar = dashboardSidebar()
),
server = function(input, output, session) {
}
) |
|
Hey @DivadNojnarg this works superbly |
|
Is there a |
|
@fmmattioni : what do you mean? |
|
I was wondering if I could change the color of the navbar link. I was thinking something like this: https://dreamrs.github.io/fresh/articles/vars-bs4dash.html#navbar |
|
Sure with: create_theme(
bs4dash_vars("navbar-light-active-color" = "purple")
)I also had to change the .navbar-nav {
.nav-link {
color: $navbar-light-color;
@include hover-focus() {
color: $navbar-light-hover-color;
}
&.disabled {
color: $navbar-light-disabled-color;
}
}
.show > .nav-link,
.active > .nav-link,
.nav-link.show,
.nav-link.active {
color: $navbar-light-active-color;
}
}library(shiny)
library(bs4Dash)
library(fresh)
navbarTab <- function(tabName, ..., icon = NULL) {
tags$li(
class = "nav-item",
tags$a(
class = "nav-link",
id = paste0("tab-", tabName),
href = paste0("#shiny-tab-", tabName),
`data-toggle` = "tab",
`data-value` = tabName,
icon,
tags$p(...)
)
)
}
navbarMenu <- function(..., id = NULL) {
if (is.null(id)) id <- paste0("tabs_", round(stats::runif(1, min = 0, max = 1e9)))
tags$ul(
class = "navbar-nav dropdown",
role = "menu",
id = "sidebar-menu",
...,
div(
id = id,
class = "sidebarMenuSelectedTabItem",
`data-value` = "null",
)
)
}
shinyApp(
ui = dashboardPage(
freshTheme = create_theme(
bs4dash_vars("navbar-light-active-color" = "purple")
),
header = dashboardHeader(
navbarMenu(
navbarTab(tabName = "Tab1", "Tab 1"),
navbarTab(tabName = "Tab2", "Tab 2")
)
),
body = dashboardBody(
tabItems(
tabItem(
tabName = "Tab1",
"Tab 1"
),
tabItem(
tabName = "Tab2",
"Tab 2"
)
)
),
sidebar = dashboardSidebar()
),
server = function(input, output, session) {
}
) |
|
This is great!!! Thanks a lot, @DivadNojnarg! |
|
Leave it open until it is implemented in core |
|
Hey @DivadNojnarg, I have noticed that since a few commits, the above kind of breaks. For example, it doesn't show the home page anymore (need to click on the first tab to show), and once I click on another tab I can't go back anymore. I have been using the following commit that still worked: remotes::install_github("RinteRface/bs4Dash@d8cb044f267abb8162068c29e2d959ba520cd040")But I was wondering what the issue is? I am sorry that I can't give more info |
|
@fmmattioni . As per latest {bs4Dash}: library(shiny)
library(bs4Dash)
library(fresh)
navbarTab <- function(tabName, ..., icon = NULL) {
tags$li(
class = "nav-item",
tags$a(
class = "nav-link",
id = paste0("tab-", tabName),
href = paste0("#shiny-tab-", tabName),
`data-toggle` = "tab",
`data-value` = tabName,
icon,
tags$p(...)
)
)
}
navbarMenu <- function(..., id = NULL) {
if (is.null(id)) id <- paste0("tabs_", round(stats::runif(1, min = 0, max = 1e9)))
tags$ul(
class = "navbar-nav dropdown sidebar-menu",
role = "menu",
...,
div(
id = id,
class = "sidebarMenuSelectedTabItem",
`data-value` = "null",
)
)
}
shinyApp(
ui = dashboardPage(
freshTheme = create_theme(
bs4dash_vars("navbar-light-active-color" = "purple")
),
header = dashboardHeader(
navbarMenu(
navbarTab(tabName = "Tab1", "Tab 1"),
navbarTab(tabName = "Tab2", "Tab 2")
)
),
body = dashboardBody(
tabItems(
tabItem(
tabName = "Tab1",
"Tab 1"
),
tabItem(
tabName = "Tab2",
"Tab 2"
)
)
),
sidebar = dashboardSidebar()
),
server = function(input, output, session) {
}
) |
|
Fantastic! Thanks a lot for looking into it, @DivadNojnarg ! |
|
This is just great! |
|
Thanks DivadNojnarg, i was searching this kind of thing in a modern way to do with shiny for a couple of days. |
|
Thanks for this. Just a note to self (and others if interested) that some time in the future I want to build on this and make custom navigation tabs like this: |
No description provided.
The text was updated successfully, but these errors were encountered: