I want to set a picture as a background for a specific tabPanel in R shiny. The picture in my browser('data/image1.jpg') not from the internet. Could you please assist me on this regard
library(shiny)
ui <-
navbarPage("App Title",
tabPanel("Plot"),# for example I need the background here for Plot tabPanel
tabPanel("Summary"),
tabPanel("Table")
)
server <- function(input, output, session) {}
shinyApp(ui, server)
You can use a selector based on the panel attribute data-value="Plot".
library(shiny)
ui <-
navbarPage("App Title",
tags$style(
'div[data-value="Plot"]{
height: 400px;
background-image: url(https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg);
}'
),
tabPanel("Plot"),# for example I need the background here for Plot tabPanel
tabPanel("Summary"),
tabPanel("Table")
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Related
Accidentally i saw this User Interface in a website, the first thing that i tought was "oh... this is a shiny ui, seems like the developer use shinydashboard::dashboardHeader(), shinydashboard::dashboardBody() and shinydashboard::dashboardSidebar()", Well but how to do this? I never saw a function to create something similar.. i realize the actionButton() but how to do this:
library(shiny)
ui <- fluidPage(
# here
actionButton("button","Faça Login e assine")
)
server <- function(input, output, session) {
observeEvent(input$button, {
## do something
})
}
shinyApp(ui, server)
You can use the normal box() function of shiny along with hr() and do something like this:
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
box(title="TITLE",status="primary",solidHeader=TRUE,style="",
width=2,
h1(strong("$89,90")),
h5("Some text here"),
hr(),
h4("More text"),
hr(),
h4("More text"),
hr(),
h4("More text"),
hr(),
h4("More text"),
hr(),
actionButton("button","Login and subscribe",class="btn-primary")
))
)
server <- function(input, output, session) {
observeEvent(input$button, {
## do something
})
}
shinyApp(ui, server)
This gives an output like :
After this, you can always use css to customize the colors and the fonts in your box.
I hope this answers your question!
I want the text in an HTML tag to be different sizes and red.
In this code, the different sizes works, but the red does not.
library(shiny)
ui <- fluidPage(
HTML("<p style=font-size:28px; font-color:red;>Hello</p><p style=font-size:22px>There</p>"),
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
You have to use color:red instead of font-color:red and it has to be before the font-size tag.
This is the corrected code:
library(shiny)
ui <- fluidPage(
HTML("<p style=color:red;font-size:28px; >Hello</p><p style=font-size:22px>There</p>"),
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
Is it possible to put all tabPanels in a row below the title of a navbarPage? In other words, I would like to keep the appearance of the navbarPage but on two rows: the title on the first one, and the tabPanels on the second. This would allow to "isolate" the title by keeping it on a single row.
library(shiny)
ui <- navbarPage(
title = "some title",
tabPanel("first tab"),
tabPanel("second tab")
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Note that this doesn't have to be a navbarPage. Any UI that could do that is accepted but it has to have the appearance of a navbarPage (no space between the rows, etc.). Hope this is clear enough.
Also asked on RStudio Community
You can force the title to have 100% width via CSS, thereby moving the tabPanels below it:
library(shiny)
ui <- navbarPage(
title = "some title",
tabPanel("first tab"),
tabPanel("second tab"),
tags$style(HTML(".navbar-header { width:100% }
.navbar-brand { width: 100%; text-align: center }")) # center text
)
server <- function(input, output, session) {}
shinyApp(ui, server)
By default tabs in a tabsetPanel are put on the left. Is it possible to place a tab on the right side, while still having other tabs on the left? So that it looks like this?
library(shiny)
ui <- fluidPage(
tabsetPanel(
tabPanel("tab_left1"),
tabPanel("tab_left2"),
tabPanel("tab_right")
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Using float-right should indeed work. The problem with using 2 tabsetPanel is that there are 2 active tabs at the same time.
library(shiny)
ui <- fluidPage(
tags$head(
tags$style(HTML(
".tabbable ul li:nth-child(3) { float: right; }"
))
),
tabsetPanel(
tabPanel("tab_left1"),
tabPanel("tab_left2"),
tabPanel("tab_right")
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Maybe you can create 2 tabsetPanel and pull one over to the right?
rm(list = ls())
library(shiny)
ui <- fluidPage(
div(style="display:inline-block",tabsetPanel(type = c("pills"),tabPanel("tab_left1"),tabPanel("tab_left2"))),
div(style="display:inline-block;float: right",tabsetPanel(type = c("pills"),tabPanel("tab_right")))
)
server <- function(input, output, session) {}
shinyApp(ui, server)
When you apply the class float-right to the ones you want to float to the right, it should do the trick.
I would like to add a tooltip for navbarMenu in Shiny app. Similar question asked here but, there is no answer.Here is my reproducible code
library(shiny)
library(shinyBS)
ui <- shinyUI(fluidPage(
sidebarLayout(
sidebarPanel(),
mainPanel(tabsetPanel(
navbarMenu("Tab1",bsTooltip(id="Tab1", title="Short description for the tab", trigger = "hover"),
tabPanel("Tab1.1"),
tabPanel("Tab1.2")),
tabPanel("Tab2",tabsetPanel(
tabPanel("Tab2.1"),
tabPanel("Tab2.2"))),
tabPanel("Tab3",tabsetPanel(
tabPanel("Tab3.1"),
tabPanel("Tab3.2"),
tabPanel("Tab3.3")))
)))))
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
During my research I found this solution R Shiny: Use navbarPage with bsModal by shinyBS, but for bsModel.
Also, there is a procedure mentioned here which is based in java-script.I know both solutions are for tabpanel but I believe it's the same problem, which is navbarMenu and tabpanel don't have an id.
I'm statistician and I don't have background in HTML or java-script to rewrite the attribute for the tab title or navbarMenu.
I hope I phrase my question in a clear manner. Thanks in advance for your time and kind help.
you can use HTML wenn passing the Title of the Tabs. in this case I just pt the title in a span and added the attribute titlewhich is the attribute HTML uses default for mouse-overs. For me this is much sinpler the trying to add it over shinyBS.
library(shiny)
library(shinyBS)
ui <- shinyUI(fluidPage(
sidebarLayout(
sidebarPanel(),
mainPanel(tabsetPanel(
navbarMenu(span("Tab1",title="Short description for the tab" ),
tabPanel("Tab1.1"),
tabPanel("Tab1.2")),
tabPanel("Tab2",tabsetPanel(
tabPanel("Tab2.1"),
tabPanel("Tab2.2"))),
tabPanel("Tab3",tabsetPanel(
tabPanel("Tab3.1"),
tabPanel("Tab3.2"),
tabPanel("Tab3.3")))
)))))
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
hope this helps!
I found another solution using javascript. Perhaps it may be more useful.
library(shiny)
shinyApp(
ui = navbarPage(
tags$script(HTML('
$( document ).on("shiny:sessioninitialized", function(event) {
$(\'span[data-toggle="tooltip"]\').tooltip({
html: true
});
});'
)),
navbarMenu(
"Menu"
,tabPanel(span("navbarTitle 1",title="XXX",`data-toggle`="tooltip"),
tabsetPanel(
tabPanel(span("Tab 1", title = "aaa",`data-toggle`="tooltip")),
tabPanel(span("Tab 2",title="bbb",`data-toggle`="tooltip")),
tabPanel(span("Tab 3",title="ccc",`data-toggle`="tooltip"))
)
)
,tabPanel( "navbarTitle 2")
)
),
server = function(input, output) {
}
)