R 모양의 단추 모양 사용자 정의하려는 경우

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)