shiny.semantic, 强大的语义用户界面库支持

分享于 

8分钟阅读

GitHub

  繁體 雙語
[Experimental] Shiny support for powerful Semantic UI library.
  • 源代码名称:shiny.semantic
  • 源代码网址:http://www.github.com/Appsilon/shiny.semantic
  • shiny.semantic源代码文档
  • shiny.semantic源代码下载
  • Git URL:
    git://www.github.com/Appsilon/shiny.semantic.git
    Git Clone代码到本地:
    git clone http://www.github.com/Appsilon/shiny.semantic
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/Appsilon/shiny.semantic
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    shiny.semantic

    Shiny的语义用户界面包装器

    使用这个库,可以很容易地包装带有语义UI组件的Shiny。 添加一些简单的代码行以及一些CSS类,为你的UI提供一个新的,现代的和高度交互的外观。

    master 分支包含稳定版本。 将 develop 分支用于最新功能。

    之前



    组件现场演示插件

    源代码 ------------

    这个库源代码可以在science的Appsilon数据找到:
    https://github.com/Appsilon/shiny.semantic

    CircleCI

    如何安装?

    你可以从CRAN库安装 shiny.semantic:

    
    install.packages("shiny.semantic")
    
    
    
    

    要安装以前版本的,你可以运行:

    
    devtools::install_github("Appsilon/shiny.semantic", ref ="0.1.0")
    
    
    
    

    如何使用它?

    首先,你必须使用的semanticPage() 来调用 shinyUI(),而不是像 比如 fluidPage() 那样使用标准的Shiny UI定义。 从现在开始,所有组件都可以用语义用户界面( 特定的CSS类) 注释,并且你也可以使用 shiny.semantic 组件

    基本示例如下所示:

    
    library(shiny)
    
    
    #devtools::install_github("Appsilon/shiny.semantic")
    
    
    library(shiny.semantic)
    
    
    
    ui <- function() {
    
    
     shinyUI(
    
    
     semanticPage(
    
    
     title ="My page",
    
    
     suppressDependencies("bootstrap"),
    
    
     div(class ="ui button", uiicon("user"),"Icon button")
    
    
     )
    
    
     )
    
    
    }
    
    
    
    server <- shinyServer(function(input, output) {
    
    
    })
    
    
    
    shinyApp(ui = ui(), server = server)
    
    
    
    

    并将呈现一个简单的按钮。

    为了更好地理解它,最好检查语义UI文档。

    笔记 #1

    目前,你必须在 semanticPage() 中传递页面标题。

    
    semanticPage(title ="Your page title",.. .)
    
    
    
    

    笔记 #2

    SemanticUI 和 Bootstrap 之间的CSS样式存在一些冲突。 目前,最好通过变形来抑制 Bootstrap:

    
    semanticPage(
    
    
    . . .
    
    
     suppressDependencies("bootstrap"),
    
    
    . . .
    
    
     )
    
    
    
    

    使用语义用户界面JavaScript元素的 [Advanced]

    有些语义UI元素需要在DOM文档就绪时运行特定的JS代码。 至少有 2个选项可以用于执行这里操作:

    
    library(shinyjs)
    
    
    ...
    
    
    jsCode <-" # Semantic UI componts JS"
    
    
    ...
    
    
    ui <- function() {
    
    
     shinyUI(
    
    
     semanticPage(
    
    
     title ="Your page title",
    
    
     shinyjs::useShinyjs(),
    
    
     suppressDependencies("bootstrap"),
    
    
     # Your UI code
    
    
     )
    
    
     )
    
    
    }
    
    
    
    server <- shinyServer(function(input, output) {
    
    
     runjs(jsCode)
    
    
     # Your Shiny logic
    
    
    })
    
    
    
    shinyApp(ui = ui(), server = server)
    
    
    
    
    • 使用 shiny:: tags$script ( )。
    
    ...
    
    
    jsCode <-"
    
    
    $(document).ready(function() {
    
    
     # Semantic UI components JS code, like:
    
    
     #$('.rating').rating('setting', 'clearable', true);
    
    
     #$('.disabled. rating').rating('disable');
    
    
    })
    
    
    ...
    
    
    ui <- function() {
    
    
     shinyUI(semanticPage(
    
    
     title ="My page",
    
    
     tags$script(jsCode),
    
    
     suppressDependencies("bootstrap"),
    
    
     # Your UI code
    
    
     )
    
    
     )
    
    
    }
    
    
    ...
    
    
    server <- shinyServer(function(input, output) {
    
    
     # Your Shiny logic
    
    
    })
    
    
    
    shinyApp(ui = ui(), server = server)
    
    
    
    

    组件示例

    • 带清单的

    
    div(
    
    
     class ="ui raised segment",
    
    
     div(
    
    
     class ="ui relaxed divided list",
    
    
     c(
    
    
    "Apples","Pears",
    
    
    "Oranges"
    
    
     ) %>%
    
    
     purrr::map(~div(
    
    
     class ="item",
    
    
     uiicon("large github middle aligned"),
    
    
     div(
    
    
     class ="content",
    
    
     a(
    
    
     class ="header",
    
    
    "Hello"
    
    
     ),
    
    
     div(
    
    
     class ="description",
    
    
    . 
    
    
     )
    
    
     )
    
    
     ))
    
    
     )
    
    
    )
    
    • 交互式卡

    
    div(
    
    
     class ="ui card",
    
    
     div(
    
    
     class ="content",
    
    
     div(
    
    
     class ="right floated meta",
    
    
    "14h"
    
    
     ), img(
    
    
     class ="ui avatar image",
    
    
     src ="http://semantic-ui.com/images/avatar/large/elliot.jpg"
    
    
     ),
    
    
    "Elliot"
    
    
     ), div(
    
    
     class ="image",
    
    
     img(src ="http://semantic-ui.com/images/wireframe/image.png")
    
    
     ),
    
    
     div(
    
    
     class ="content",
    
    
     span(
    
    
     class ="right floated",
    
    
     uiicon("heart outline like"),
    
    
    "17 likes"
    
    
     ),
    
    
     uiicon("comment"),
    
    
    "3 comments"
    
    
     ),
    
    
     div(
    
    
     class ="extra content",
    
    
     div(
    
    
     class ="ui large transparent left icon input",
    
    
     uiicon("heart ouline"),
    
    
     tags$input(
    
    
     type ="text",
    
    
     placeholder ="Add Comment..."
    
    
     )
    
    
     )
    
    
     )
    
    
    )
    

    所有组件示例可以在以下位置找到:
    https://demo.appsilondatascience.com/shiny-semantic-components/

    组件 live live的源代码位于/示例文件夹中。 要在本地运行它,你必须安装:

    • 荧光笔

      
      devtools::install_github("Appsilon/highlighter")
      
      
      
      

    查看我们的仪表板示例,以 shiny.semantic librabry为基础:

    :如何贡献

    如果你想贡献这个项目,请提交一个正规的公关,一旦你完成了新功能或者 Bug 修复。

    文档的更改

    这两个库都会生成一个带有 Rmarkdown README.md 文件和正式文档页面,所以如果需要更新它们,请修改一个的build_readme.R 文件,并运行一个收费的脚本以。

    故障排除

    我们使用了这个库的最新版本的依赖项,所以在安装之前请更新你的R 环境。

    但是,如果遇到任何问题,请尝试以下操作:

    Up-to-date R 语言环境

    安装特定的依赖库版本

    • 发光

      
      install.packages("shiny", version='0.14.2.9001')
      
      
      
      

    某些 Bug 可能直接与语义用户界面相关。 在这种情况下,请尝试检查它的存储库上的问题。

    一些 Bug 可能与收费的有关。 请确认你已经被禁止。 指令的使用方式是1 磅? 节。

    未来的enhacements

    • 为输入组件创建所有更新功能,以尽可能接近地模拟 shiny
    • 在 dsl.R 中添加一些胶水代码以使这个软件包更加平滑
    • CRAN版本

    Appsilon数据科学

    请联系 dev@appsilondatascience.com


    SUP  POW  sem  Shiny  Semantic Ui  
    相关文章