Thêm CSS để chỉnh giao diện ứng dụng
CSS là một ngôn ngữ đánh dấu cực kỳ phổ biến dùng để hướng dẫn trình duyệt hiển thị các phần tử trên trang như thế nào. Bạn cần dùng CSS nếu muốn thay đổi khỏi giao diện mặc định của Shiny và tùy chỉnh diện mạo của các thành phần trong ứng dụng.
Hãy nhớ rằng CSS gồm một tập hợp các quy tắc, trong đó mỗi quy tắc là một cặp property: value gắn với một phần tử trên trang. Bạn có thể đưa CSS vào ứng dụng bằng cách viết trong một tệp riêng và nhập vào với includeCSS(), nhưng trong khóa học này chúng ta sẽ dùng cách đơn giản hơn là đặt mã CSS bên trong tags$style() ở UI.
Bài tập này là một phần của khóa học
Nghiên cứu tình huống: Xây dựng ứng dụng web với Shiny trong R
Hướng dẫn bài tập
- Viết các quy tắc CSS để chỉnh ứng dụng theo các cách sau:
- Đổi màu nền của nút tải xuống thành màu cam (dòng 5).
- Đổi kích thước chữ của nút tải xuống thành 20 pixel (dòng 8).
- Đổi màu chữ của bảng thành màu đỏ (dòng 13).
- Thêm các quy tắc CSS này vào ứng dụng Shiny (dòng 20).
Bài tập tương tác thực hành trực tiếp
Hãy thử làm bài tập này bằng cách hoàn thành đoạn mã mẫu này.
my_css <- "
#download_data {
/* Change the background color of the download button
to orange. */
background: ___;
/* Change the text size to 20 pixels. */
font-size: ___px;
}
#table {
/* Change the text color of the table to red. */
color: ___;
}
"
ui <- fluidPage(
h1("Gapminder"),
# Add the CSS that we wrote to the Shiny app
tags$style(___),
tabsetPanel(
tabPanel(
title = "Inputs",
sliderInput(inputId = "life", label = "Life expectancy",
min = 0, max = 120,
value = c(30, 50)),
selectInput("continent", "Continent",
choices = c("All", levels(gapminder$continent))),
downloadButton("download_data")
),
tabPanel(
title = "Plot",
plotOutput("plot")
),
tabPanel(
title = "Table",
DT::dataTableOutput("table")
)
)
)
server <- function(input, output) {
filtered_data <- reactive({
data <- gapminder
data <- subset(
data,
lifeExp >= input$life[1] & lifeExp <= input$life[2]
)
if (input$continent != "All") {
data <- subset(
data,
continent == input$continent
)
}
data
})
output$table <- DT::renderDataTable({
data <- filtered_data()
data
})
output$download_data <- downloadHandler(
filename = "gapminder_data.csv",
content = function(file) {
data <- filtered_data()
write.csv(data, file, row.names = FALSE)
}
)
output$plot <- renderPlot({
data <- filtered_data()
ggplot(data, aes(gdpPercap, lifeExp)) +
geom_point() +
scale_x_log10()
})
}
shinyApp(ui, server)