Question

我对我正在处理的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)

Answer 1

快速修订 - 使用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)

希望自定义R闪亮按钮的外观

1 个答案: