期待定制R Shiny中按钮的外观(Looking to Customize Appearance of Buttons in R Shiny)

我对我正在处理的Shiny App中的默认操作按钮的外观不满意。 下面包含一些示例代码。 我不知道从哪里开始学习如何调整Shiny的HTML和CSS方面以实现我想要的。

我正在寻找关于如何改进这些按钮布局的建议。

这是按钮默认情况下的样子。

这就是我想要按钮排列的方式。

工作示例代码包括:

library(shiny) library(shinydashboard) # UI ---------------------------------------------------------------------- # Header Header <- dashboardHeader( ) # Sidebar Sidebar <- dashboardSidebar( # / Sidebar Inputs ---- # Date Slider dateRangeInput( "Date_Range", label = "Date Range", start = Sys.time(), end = Sys.time(), startview = "year"), # Date Buttons fluidRow( column(4, align = "left", offset = 1, actionButton("Last_Month", label = "Last Month")), column(4, align = "right", offset = 1, actionButton("Default_Dates", label = "All Dates"))), fluidRow( column(4, align = "left", offset = 1, actionButton("Three_Months", label = "Last 3 Months"))), fluidRow( column(4, align = "right", offset = 1, actionButton("Six_Months", label = "Last 6 Months"))) ) # Body Body <- dashboardBody( ) # UI UI <- dashboardPage(Header, Sidebar, Body) # Server ------------------------------------------------------------------ Server <- function(input, output, session) { } # Run --------------------------------------------------------------------- shinyApp(UI, Server)

I'm not satisfied with the appearance of the default action buttons in the Shiny App I'm working on. Some sample code is included below. I'm not sure where to begin with learning how to adjust the HTML and CSS aspects of Shiny in order to achieve what I want.

I'm looking for suggestions as to how to improve the layout of these buttons.

Here is what the buttons look like by default.

Here is how I would like the buttons to be arranged.

Working sample code included:

library(shiny) library(shinydashboard) # UI ---------------------------------------------------------------------- # Header Header <- dashboardHeader( ) # Sidebar Sidebar <- dashboardSidebar( # / Sidebar Inputs ---- # Date Slider dateRangeInput( "Date_Range", label = "Date Range", start = Sys.time(), end = Sys.time(), startview = "year"), # Date Buttons fluidRow( column(4, align = "left", offset = 1, actionButton("Last_Month", label = "Last Month")), column(4, align = "right", offset = 1, actionButton("Default_Dates", label = "All Dates"))), fluidRow( column(4, align = "left", offset = 1, actionButton("Three_Months", label = "Last 3 Months"))), fluidRow( column(4, align = "right", offset = 1, actionButton("Six_Months", label = "Last 6 Months"))) ) # Body Body <- dashboardBody( ) # UI UI <- dashboardPage(Header, Sidebar, Body) # Server ------------------------------------------------------------------ Server <- function(input, output, session) { } # Run --------------------------------------------------------------------- shinyApp(UI, Server)

最满意答案

快速修订 - 使用HTML添加换行符,使用列宽适当对齐,将自定义CSS注入页面。

还需要做更多工作才能正确对齐所有内容。

在此处输入图像描述

library(shiny) library(shinydashboard) # UI ---------------------------------------------------------------------- # Header Header <- dashboardHeader() # Sidebar Sidebar <- dashboardSidebar( # / Sidebar Inputs ---- # Date Slider dateRangeInput( "Date_Range", label = "Date Range", start = Sys.time(), end = Sys.time(), startview = "year"), fluidPage( # Date Buttons fluidRow( column(12, align = "center", actionButton("Default_Dates", label = "All Dates", width = "100%")) ), fluidRow( column(3, align = "center", actionButton("Last_Month", label = HTML("<span style='font-size:0.75em;'>Last<br />Month</span>"))), column(3, align = "center", actionButton("Three_Months", label = HTML("<span style='font-size:0.75em;'>Last 3<br />Months</span>"))), column(3, align = "center", actionButton("Six_Months", label = HTML("<span style='font-size:0.75em;'>Last 6<br />Months</span>"))), column(3, align = "center", actionButton("YTD", label = HTML("<span style='font-size:0.75em;'>Year to<br />Date</span>"))) ) ) ) # Body Body <- dashboardBody( tags$head( tags$style(HTML(".col-sm-3 button {padding:5px;}")) ) ) UI <- dashboardPage(Header, Sidebar, Body) # Server ------------------------------------------------------------------ Server <- function(input, output, session) { } # Run --------------------------------------------------------------------- shinyApp(UI, Server)

A quick revision -- use HTML to add line breaks, use the column widths to appropriately align, inject custom CSS into the page.

Some more work needs to be done to align everything properly.

enter image description here

library(shiny) library(shinydashboard) # UI ---------------------------------------------------------------------- # Header Header <- dashboardHeader() # Sidebar Sidebar <- dashboardSidebar( # / Sidebar Inputs ---- # Date Slider dateRangeInput( "Date_Range", label = "Date Range", start = Sys.time(), end = Sys.time(), startview = "year"), fluidPage( # Date Buttons fluidRow( column(12, align = "center", actionButton("Default_Dates", label = "All Dates", width = "100%")) ), fluidRow( column(3, align = "center", actionButton("Last_Month", label = HTML("<span style='font-size:0.75em;'>Last<br />Month</span>"))), column(3, align = "center", actionButton("Three_Months", label = HTML("<span style='font-size:0.75em;'>Last 3<br />Months</span>"))), column(3, align = "center", actionButton("Six_Months", label = HTML("<span style='font-size:0.75em;'>Last 6<br />Months</span>"))), column(3, align = "center", actionButton("YTD", label = HTML("<span style='font-size:0.75em;'>Year to<br />Date</span>"))) ) ) ) # Body Body <- dashboardBody( tags$head( tags$style(HTML(".col-sm-3 button {padding:5px;}")) ) ) UI <- dashboardPage(Header, Sidebar, Body) # Server ------------------------------------------------------------------ Server <- function(input, output, session) { } # Run --------------------------------------------------------------------- shinyApp(UI, Server)

更多推荐

I'm,Shiny,label,buttons,电脑培训,计算机培训,IT培训"/> <meta name="