R sáng chínhPhong cách hiển thị kiểu chữ và phông chữ

Question

Tôi đang tìm hiểu các ứng dụng sáng bóng và có một số câu hỏi cơ bản về tinh chỉnh bố cục, đặc biệt là kiểu và phông chữ. Tôi muốn biết ơn về con trỏ hoặc câu trả lời rõ ràng, cảm ơn!

Hãy xem xét một ứng dụng đầu vào-đầu ra cơ bản: người dùng nhập dữ liệu vào thanh bênPanel và nó phản ứng đầu ra một kết quả trong mainPanel.

1. Làm thế nào tôi có thể định dạng bảng đầu ra trong mainPanel để trông giống như các sidebarPanel? nói một hình chữ nhật có kích thước tương tự với nền màu (có thể là màu khác) và dữ liệu xuất hiện trong một hộp có kích thước tương tự.

2. Làm cách nào để kiểm soát loại phông chữ, kích thước phông chữ và kích thước phông chữ bên trong bảng?

Như bạn có thể nhìn thấy từ mã (cf runGist chi tiết một vài dòng dưới đây), tôi đã thành công trong tùy biến kích thước của hộp numericInput trong sidebarPanel, nhưng tôi đã không thể kiểm soát kiểu phông chữ (là mã kiểu $ tag của tôi bị thất lạc?).

Quan trọng hơn cho mục đích thẩm mỹ, tôi không thể tìm ra cách định dạng mainPanel để làm cho nó trông giống như sidebarPanel. Chủ yếu là tôi đã sửa đổi các ví dụ từ trang web sáng bóng, nhưng rõ ràng là tôi đã bỏ lỡ một số điều quan trọng.

Sửa 1: Theo đề nghị Scott Chamberlain, tôi đã sao chép các tập tin server.R và ui.R trên github:

library("shiny") 
runGist("gist.github.com/annoporci/7313856") 

Chỉnh sửa 2: Scott đề nghị sử dụng Chrome/Firefox "Inspect Element" (click chuột phải trên cơ thể của trang html, các trình duyệt khác có thể có cùng chức năng). Dưới đây là một ảnh chụp màn hình:

Kiểm tra Element

gợi ý của Scott để sử dụng "Inspect Element" công cụ tỏ ra rất hiệu quả.

Đây là những gì tôi đã học (nếu tôi không nhầm):

• container-fluid và row-fluid kiểm soát container tổng thể.
• span12 điều khiển headerPanel
• span4 kiểm soát các điều khiển sidebarPanel
• span8 các mainPanel
• shiny-bound-input là cho phía đầu vào
• shiny-bound-output và shiny-html-output (cả hai có vẻ hợp lệ) đều mang tính phía đầu ra

Dựa trên những phát hiện này, tôi p đã đặt các kiểu HTML trong mainPanel, bởi vì nó có vẻ giống như một nơi rõ ràng, nhưng nó dường như cũng hoạt động bên trong sidebarPanel.Nó sẽ trực quan hơn (với tôi) để đặt nó ngay bên trong trangWithSidebar(), nhưng điều đó không hiệu quả.

Đây là chỉnh sửa sáng bóng:

runGist("https://gist.github.com/annoporci/7346772") 

Sau đây là các kiểu HTML:

HTML('<style type="text/css"> 
    .row-fluid { width: 50%; } 
    .well { background-color: #99CCFF; } 
    .shiny-html-output { font-size: 20px; line-height: 21px; } 
    </style>') 

tôi chọn 50% cho chiều rộng chứa tổng thể, để giữ cho nó nhỏ.

Tôi đã chọn cùng một màu cho thanh bênPanel và mainPanel.

Tôi đã chọn phông chữ lớn hơn cho đầu ra, không đẹp ở đây nhưng có ý nghĩa trong ứng dụng thực tế của tôi. Và bên cạnh đó tôi đang thử nghiệm hơn bất cứ thứ gì.

Tôi đã chọn chiều cao dòng 21px thay vì 20px mặc định chỉ để tinh chỉnh chiều cao của hộp đầu ra giống với hộp nhập. Một lần nữa, một thử nghiệm.

Tôi cũng đã thay đổi phong cách trưng bày tại server.R, cụ thể là

output$myResults <- renderText({ 
    r <- myFunction(input$myinput) 
    c("My Output:","<br><br>",r) 
}) 

Đây là vì tôi muốn có kết quả hiển thị bên dưới dòng chữ "Output của tôi". Bằng thử và sai, tôi phát hiện ra rằng tôi có thể siết chặt các chuỗi trong một vector c() với <br><br> làm dấu phân cách để buộc ngắt dòng. Tôi sẽ bị sốc nếu đây là phương pháp được đề nghị, vì vậy hãy kêu gọi nếu bạn biết cách làm đúng.

câu hỏi tiếp theo ít quan trọng hơn:

tôi sẽ xem liệu tôi có thể tìm thấy một cách để có kết quả đầu ra của tôi xuất hiện trong một hộp màu trắng tương tự như số lượng đầu vào trong sidebarPanel. Mọi đề xuất đều được chào đón.

Có thể có khả năng thu thập tất cả các sửa đổi html trong cùng một tệp riêng biệt được lưu trữ cùng với máy chủ.R và ui.R?

Tôi sẽ chọn câu trả lời của Scott vì anh ấy đã giúp khám phá đủ để có được kết quả của tôi theo cách tôi muốn. Nhưng vui lòng chỉnh sửa nếu bạn thấy lỗi hoặc không chính xác trong mô tả của tôi ở trên.

Answer 1

Bạn có thể bao gồm html tùy ý, ví dụ, trong cuộc gọi đến sidebarpanel, bạn có thể làm

HTML('<style type="text/css"> 
    .row-fluid .span4{width: 26%;} 
    </style>') 

này chỉ là một cái gì đó sao chép từ một trong các ứng Shiny tôi

Bạn có thể sử dụng các công cụ thanh tra trong trình duyệt để tìm ra những yếu tố css cần phải được thay đổi.

Nếu bạn sử dụng một wellPanel bên trong mainPanel này sẽ thay đổi mà wellPanel là màu xanh

HTML('<style type="text/css"> 
     .span8 .well { background-color: #00FFFF; } 
     </style>'), 

Answer 2

Một cách khác để chèn phong trong Shiny là thông qua lệnh tag của nó.Kết quả sẽ được giống như chèn HTML đơn giản:

tags$style(type="text/css", ".span8 .well { background-color: #00FFFF; }") 

kết quả sẽ giống như chèn đồng bằng mã HTML (trong ví dụ này kết quả sẽ được giống như đoạn mã cuối bởi Scott)

Answer 3

Đây là một bài viết thực sự cũ, nhưng đối với hậu thế: bạn chỉ có thể đặt css trong cuộc gọi mainPanel() của bạn. Nếu bạn muốn có một âm mưu cố định vị trí trong mainPanel trong một bố cục sidebar:

sidebarLayout(
    sidebarPanel(), 
    mainPanel(style="position:fixed;margin-left:32vw;", 
      plotOutput("plot") 
    ) 
)