生产就绪的themeSelector for Shiny

时间:2017-12-15 07:01:31

标签: r shiny themes

我需要创建一个具有明暗主题的闪亮应用程序,用户可以在UI中选择。在RStudio的网站上有一个页面详细信息themes和themeSelector(),但它声明“主题选择器仅用于开发应用程序时”。是否有任何图书馆允许动态更改生产准备好的主题?

1 个答案:

答案 0 :(得分:2)

它可能只是意味着在开发时使用,但我认为没有任何理由不能在生产中使用它。如果你看一下code,它所做的就是查找并更改stylesheet link部分中的head

没有其他方法可以实现这一点,而不是使用javaScript,所以我会继续使用已经写好的内容。

您可以修改themeSelector功能,从可拖动的固定面板更改为简单的selectInput,如下所示:

library(shiny)
library(shinythemes)

themeSelector <- function() {
    div(
      div(
        selectInput("shinytheme-selector", "Choose a theme",
                    c("default", shinythemes:::allThemes()),
                    selectize = FALSE
        )
      ),
      tags$script(
        "$('#shinytheme-selector')
        .on('change', function(el) {
        var allThemes = $(this).find('option').map(function() {
        if ($(this).val() === 'default')
        return 'bootstrap';
        else
        return $(this).val();
        });
        // Find the current theme
        var curTheme = el.target.value;
        if (curTheme === 'default') {
        curTheme = 'bootstrap';
        curThemePath = 'shared/bootstrap/css/bootstrap.min.css';
        } else {
        curThemePath = 'shinythemes/css/' + curTheme + '.min.css';
        }
        // Find the <link> element with that has the bootstrap.css
        var $link = $('link').filter(function() {
        var theme = $(this).attr('href');
        theme = theme.replace(/^.*\\//, '').replace(/(\\.min)?\\.css$/, '');
        return $.inArray(theme, allThemes) !== -1;
        });
        // Set it to the correct path
        $link.attr('href', curThemePath);
        });"
      )
    )
  }

ui <- fluidPage(
  fluidRow(
    column(4, themeSelector())
  )
)

server <- function(input, output) {

}

shinyApp(ui, server)