盘点强大的shinyUI美化包

盘点强大的shinyUI美化包

从前只知道shiny和shinydashboard,开发简单的网页是够的,但一旦对颜值有了要求,就不能对html和css丝毫不知。

关于shiny与CSS:https://shiny.rstudio.com/articles/css.html

这几天搜索发现了几个UI包,学会了基本操作,来分享一下。

1.shinythemes

shiny主题,最兼容原始shiny的美化包,内置http://bootswatch.com/上几乎所有的bootstrap主题,手到擒来。是这样的:

链接:https://rstudio.github.io/shinythemes/

shinytheme有一个很好的功能:themeselector,可以在线切换主题,方便选择和比较。

if(!require(shinythemes)) install.packages("shinythemes")

shinyApp(

ui = fluidPage(

shinythemes::themeSelector(), # <--- Add this somewhere in the UI

sidebarPanel(

textInput("txt", "Text input:", "text here"),

sliderInput("slider", "Slider input:", 1, 100, 30),

actionButton("action", "Button"),

actionButton("action2", "Button2", class = "btn-success"),

selectInput("txt1","species", c("a","b","c"))

),

mainPanel(

tabsetPanel(

tabPanel("Tab 1"),

tabPanel("Tab 2")

)

)

),

server = function(input, output) {}

)

2.dashboardthemes

如果网页是用shinydashboard写的,shiny主题很多用不了。这事就有了dashboardthemes:

可供选择的只有七个主题。但扩展性非常强,可以自己写主题,每一个控件都是可改动的,非常实用。

链接:https://github.com/nik01010/dashboardthemes

3.semantic.dashboard

https://github.com/Appsilon/semantic.dashboard

https://appsilon.com/create-outstanding-dashboards-with-the-new-semantic-dashboard-package/

这是一个公司开发的dashboard包美化版本,示例造型是这样的:

可选的theme有不少:http://semantic-ui-forest.com/themes/

参考链接:https://github.com/Appsilon/semantic.dashboard

https://appsilon.com/create-outstanding-dashboards-with-the-new-semantic-dashboard-package/

library(shiny)

library(semantic.dashboard)

ui <- dashboardPage(

dashboardHeader(),

dashboardSidebar(),

dashboardBody()

)

server <- shinyServer(function(input, output, session) {

})

shinyApp(ui, server)

示例的完整代码:

library(shiny)

library(semantic.dashboard)

library(ggplot2)

library(plotly)

library(DT)

ui <- dashboardPage(

dashboardHeader(color = "blue",title = "Dashboard Demo", inverted = TRUE),

dashboardSidebar(

size = "thin", color = "teal",

sidebarMenu(

menuItem(tabName = "main", "Main", icon = icon("car")),

menuItem(tabName = "extra", "Extra", icon = icon("table"))

)

),

dashboardBody(

tabItems(

selected = 1,

tabItem(

tabName = "main",

fluidRow(

box(width = 8,

title = "Graph 1",

color = "green", ribbon = TRUE, title_side = "top right",

column(width = 8,

plotOutput("boxplot1")

)

),

box(width = 8,

title = "Graph 2",

color = "red", ribbon = TRUE, title_side = "top right",

column(width = 8,

plotlyOutput("dotplot1")

)

)

)

),

tabItem(

tabName = "extra",

fluidRow(

dataTableOutput("carstable")

)

)

)

), theme = "cerulean"

)

server <- shinyServer(function(input, output, session) {

data("mtcars")

colscale <- c(semantic_palette[["red"]], semantic_palette[["green"]], semantic_palette[["blue"]])

mtcars$am <- factor(mtcars$am,levels=c(0,1),

labels=c("Automatic","Manual"))

output$boxplot1 <- renderPlot({

ggplot(mtcars, aes(x = am, y = mpg)) +

geom_boxplot(fill = semantic_palette[["green"]]) +

xlab("gearbox") + ylab("Miles per gallon")

})

output$dotplot1 <- renderPlotly({

ggplotly(ggplot(mtcars, aes(wt, mpg))

+ geom_point(aes(colour=factor(cyl), size = qsec))

+ scale_colour_manual(values = colscale)

)

})

output$carstable <- renderDataTable(mtcars)

})

shinyApp(ui, server)

4.bs4Dash

这个包可以作为shiny的辅助,是18年刚开发的,目前基本没有中文教程,看下他的结构:

cran页面:https://cran.r-project.org/web/packages/bs4Dash/index.html

github:https://github.com/RinteRface/bs4Dash

(1)空框架

if(!require(bs4Dash))install.packages("bs4Dash")

library(shiny)

library(bs4Dash)

shiny::shinyApp(

ui = bs4DashPage(

navbar = bs4DashNavbar(),

sidebar = bs4DashSidebar(),

controlbar = bs4DashControlbar(),

footer = bs4DashFooter(),

title = "Basic Dashboard",

body = bs4DashBody()

),

server = function(input, output) {}

)

(2)示例网页,除了前面的加载,其实只有一行代码看示例

if(!require(fontawesome))devtools::install_github("rstudio/fontawesome")

if(!require(shinyWidgets))install.packages("shinyWidgets")

if(!require(bs4Dash))install.packages("bs4Dash")

if(!require(plotly))install.packages("plotly")

library(shiny)

library(fontawesome)

library(shinyWidgets)

library(bs4Dash)

library(plotly)

bs4DashGallery()

相关数据

淘宝商品券在哪里看?怎么用?
microsoft 365下载

淘宝商品券在哪里看?怎么用?

⌛ 06-28 👁️ 5623
中国电信云卡套餐_电信云卡是什么意思
microsoft 365下载

中国电信云卡套餐_电信云卡是什么意思

⌛ 07-07 👁️ 1393