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.
Related
I am having a shiny app with some ui elements.
Is there a way to replace some HTML (e.g. div / div content) with an animation effect, similar to what shinyjs::show(anim=T) does?
library(shiny)
library(shinyjs)
ui <- fluidPage(
shinyjs::useShinyjs(),
actionButton("change","change"),
tags$div(id="someDiv",
"test"),
hidden(tags$div(id="withAnim", "Displayed with animation"))
)
server <- function(input, output) {
observeEvent(input$change, {
shinyjs::html("someDiv", "changed without animation")
shinyjs::delay(1000, show("withAnim", anim=T, animType="fade"))
})
}
shinyApp(ui = ui, server = server)
the shinyjs::html doesn't provide this utility. We can write our own js code and use shinyjs::runjs to run it when button is clicked.
library(shiny)
library(shinyjs)
ui <- fluidPage(
shinyjs::useShinyjs(),
actionButton("change","change"),
tags$div(id="someDiv",
"test"),
hidden(tags$div(id="withAnim", "Displayed with animation"))
)
server <- function(input, output) {
observeEvent(input$change, {
shinyjs::runjs("$('#someDiv').fadeOut(500, function(){$(this).text('changed without animation').fadeIn();})")
shinyjs::delay(1000, show("withAnim", anim=T, animType="fade"))
})
}
shinyApp(ui = ui, server = server)
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)
Hello.
I am trying to align the materialSwitch checkbox with some pickerInput boxes.
Here's what it looks like vs what I want it to look like:
Here is a simplified code of the problem, help please!
library(shiny)
library(shinydashboard)
library(shinyWidgets)
#----------------------------------------------------------------------------#
ui <- {dashboardPage(
dashboardHeader(title=""),
dashboardSidebar(),
dashboardBody(
fluidRow(box(column(materialSwitch("t0"),width=1),
column(pickerInput(inputId="t1",label="",choices=c("Yes","No")),
pickerInput(inputId="t2",label="",choices=c("Yes","No")),width=3),
column(pickerInput(inputId="t3",label="",choices=c("Yes","No")),
pickerInput(inputId="t4",label="",choices=c("Yes","No")),width=4),
column(pickerInput(inputId="t5",label="",choices=c("Yes","No")),
pickerInput(inputId="t6",label="",choices=c("Yes","No")),width=4),
actionButton("t7","",width="100%"),width=12))))
}
#----------------------------------------------------------------------------#
server <- function(input, output) {}
#----------------------------------------------------------------------------#
shinyApp(ui = ui, server = server)
Also, if there's a way to tighten the space, or reduce the margin between the switch and the input boxes that would swell. My current code also makes one of the pickerInputs at a different width than the others (to include the switch), if there's a way to proportion them so they're all the same width that would be extra swell.
Thanks.
You can apply some css to move the materialSwitch.
div(column(materialSwitch("t0"),width=1), style = 'top: 25px;position:relative;')
Complete code -
library(shiny)
library(shinydashboard)
library(shinyWidgets)
#----------------------------------------------------------------------------#
ui <- {dashboardPage(
dashboardHeader(title=""),
dashboardSidebar(),
dashboardBody(
fluidRow(box(div(column(materialSwitch("t0"),width=1), style = ' top: 25px;position: relative;'),
column(pickerInput(inputId="t1",label="",choices=c("Yes","No")),
pickerInput(inputId="t2",label="",choices=c("Yes","No")),width=3),
column(pickerInput(inputId="t3",label="",choices=c("Yes","No")),
pickerInput(inputId="t4",label="",choices=c("Yes","No")),width=4),
column(pickerInput(inputId="t5",label="",choices=c("Yes","No")),
pickerInput(inputId="t6",label="",choices=c("Yes","No")),width=4),
actionButton("t7","",width="100%"),width=12))))
}
#----------------------------------------------------------------------------#
server <- function(input, output) {}
#----------------------------------------------------------------------------#
shinyApp(ui = ui, server = server)
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)