R语言 如何使用CSS(文件库)设计一个闪亮的应用程序

yc0p9oo0  于 2023-03-10  发布在  其他
关注(0)|答案(1)|浏览(168)

现在我正在为我的大学做一个项目,我已经尝试过很多次设计这个闪亮的应用程序,但是它看起来没有在app.

中发生任何变化。即使当我把tags$head放进去并与外部文件CSS链接时,它也没有在应用程序中发生任何变化。我想知道问题是什么,以及如何在未来防止这种情况。
这是代码.有没有什么方法可以让我用CSS来设计它的样式?
'

Define UI ----
ui <- navbarPage("Thai Economic",
             # Global Economic Development Page.
             tabPanel("Population",
                      id = "population",
                      h1("Thailand Population"),
                      br(),
                      plotlyOutput("thai_population_chart"),
                      br(),
                      fluidRow(
                        column(width = 2, actionButton("pop_line","Line Chart")),
                        column(width = 2, actionButton("button_id", "Bar Chart"))
                      ),
                      br(),
                      p("Over the last decade, Thailand's population has continued to grow steadily. 
                According to the World Bank, the population of Thailand in 2011 was approximately 68.3 million, 
                while the estimated population in 2020 was approximately 69.8 million. 
                This represents an increase of around 1.5 million people over the course of the decade. 
                Despite this growth, the rate of population increase in Thailand has been slowing down in recent years, 
                due in part to a declining birth rate and an aging population. Nonetheless, 
                Thailand remains one of the most populous countries in Southeast Asia, with a diverse population that includes a mix of ethnic groups, 
                religions, and languages.")
                      
             ),
             
             
             
             # Thailand GDP Page
             tabPanel("GDP",
                      h1("Thailand GDP"),
                      br(),
                      plotlyOutput("thai_gdp_chart"),
                      br(),
                      fluidRow(
                        column(width = 2, actionButton("gdp_line", "Line Chart")),
                        column(width = 2, actionButton("gdp_bar", "Bar Chart"))
                      ),
                      br(),
                      p("Thailand's...")
             ),
             
             # Poverty Page
             tabPanel("Poverty",
                      h1("Thailand Poverty"),
                      br(),
                      plotlyOutput("thai_poverty_chart"),
                      br(),
                      fluidRow(
                        column(width = 2, actionButton("pov_line", "Line Chart")),
                        column(width = 2, actionButton("poverty_bar", "Bar Chart"))
                      ),
                      br(),
                      p("Over the past decade....")
             ),
             
             # Import and Export goods and Service Page
             tabPanel("Import and Export goods and Service",
                      h1("Import and Export goods and Service"),
                      br(),
                      fluidRow(
                        column(width = 6, plotlyOutput("thai_imports_chart")),
                        column(width = 6, plotlyOutput("thai_export_chart"))
                      ),
                      br(),
                      fluidRow(
                        column(width = 3,
                               actionButton("im_line", "Line Chart"),
                               actionButton("im_bar", "Bar Chart")
                        ),
                        column(width = 3, offset = 6,
                               actionButton("ex_line", "Line Chart"),
                               actionButton("ex_bar", "Bar Chart")
                        ),
                      ),
                      br(),
                      p("Thailand is a major ...")
             ),
            
)`

先谢谢你。

1mrurvl1

1mrurvl11#

首先,这里是一个改变CSS内联的方法:

library(shiny)
library(plotly)

shinyApp(ui = navbarPage(title = "Thai Economic",
                         
      tags$head(
        tags$style(HTML("
      body {
        background-color: black;
        color: white;
      }"))
                         ),
                         
                 # Global Economic Development Page.
                 tabsetPanel(
                   tabPanel("Population",
                          id = "population",
                          h1("Thailand Population"),
                          br(),
                          plotlyOutput("thai_population_chart"),
                          br(),
                          fluidRow(
                            column(width = 2, actionButton("pop_line","Line Chart")),
                            column(width = 2, actionButton("button_id", "Bar Chart"))
                          ),
                          br(),
                          p("Over the last decade, Thailand's population has continued to grow steadily. 
                According to the World Bank, the population of Thailand in 2011 was approximately 68.3 million, 
                while the estimated population in 2020 was approximately 69.8 million. 
                This represents an increase of around 1.5 million people over the course of the decade. 
                Despite this growth, the rate of population increase in Thailand has been slowing down in recent years, 
                due in part to a declining birth rate and an aging population. Nonetheless, 
                Thailand remains one of the most populous countries in Southeast Asia, with a diverse population that includes a mix of ethnic groups, 
                religions, and languages.")
                
                 ),
                
                
                
                # Thailand GDP Page
                tabPanel("GDP",
                         h1("Thailand GDP"),
                         br(),
                         plotlyOutput("thai_gdp_chart"),
                         br(),
                         fluidRow(
                           column(width = 2, actionButton("gdp_line", "Line Chart")),
                           column(width = 2, actionButton("gdp_bar", "Bar Chart"))
                         ),
                         br(),
                         p("Thailand's...")
                ),
                
                # Poverty Page
                tabPanel("Poverty",
                         h1("Thailand Poverty"),
                         br(),
                         plotlyOutput("thai_poverty_chart"),
                         br(),
                         fluidRow(
                           column(width = 2, actionButton("pov_line", "Line Chart")),
                           column(width = 2, actionButton("poverty_bar", "Bar Chart"))
                         ),
                         br(),
                         p("Over the past decade....")
                ),
                
                # Import and Export goods and Service Page
                tabPanel("Import and Export goods and Service",
                         h1("Import and Export goods and Service"),
                         br(),
                         fluidRow(
                           column(width = 6, plotlyOutput("thai_imports_chart")),
                           column(width = 6, plotlyOutput("thai_export_chart"))
                         ),
                         br(),
                         fluidRow(
                           column(width = 3,
                                  actionButton("im_line", "Line Chart"),
                                  actionButton("im_bar", "Bar Chart")
                           ),
                           column(width = 3, offset = 6,
                                  actionButton("ex_line", "Line Chart"),
                                  actionButton("ex_bar", "Bar Chart")
                           ),
                         ),
                         br(),
                         p("Thailand is a major ...")
                ))
                
),
server = function(input, output, session) {
  
})

或者,将head标记替换为以下代码,并将custom.css放在www文件夹中:

tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
  )

相关问题