Shiny的复选框,图标和文本的HTML格式

时间:2017-09-21 23:33:07

标签: html r shiny

所以,我的问题是关于设计。对不起,从未发布过HTML问题。添加打印屏幕。如果可能,没有代码,它太麻烦了。

我有UI

我的数据分为四组

 ui <- fluidPage(theme = shinytheme("united"),
            titlePanel(HTML("<h1><center><font size=14> Projects </font></center></h1>")), 
            sidebarLayout(
              sidebarPanel(tags$b(tags$em("How about banks")), 

                           checkboxGroupInput("typeInput", h4(tags$b("Sort # Client by type")),
                                              c("Banks 1",
                                                "Banks 2",
                                                "Banks 3",
                                                "Banks 4")),

                tags$br(),          
                tags$br(),           
                column(width = 7, 
                tags$img(src = "Banks 1.png", height = 50, width = 50), h4(tags$b("BANKS 1")),
                h4(tags$em("1. Bank ")),
                h4(tags$em("2. Bank")),
                h4(tags$em("3. Bank")),
                h4(tags$em("4. Bank")),
                h4(tags$em("5. Bank")),

                tags$br(),
                tags$br(),
                tags$img(src = "Banks 2.png", height = 50, width = 50), h4(tags$b("Banks 2")),
                h4(tags$em("6. Bank")),
                h4(tags$em("7. Bank")),
                h4(tags$em("8. Bank")),
                h4(tags$em("9. Bank"))),


                tags$img(src = "Banks 3.png", height = 50, width = 50), h4(tags$b("Banks 3")),
                h4(tags$em("10. Bank")),

                tags$br(),
                tags$img(src = "Banks 4.png", height = 50, width = 50), h4(tags$b("Banks 4")),
                h4(tags$em("11. Bank")),
                h4(tags$em("12. Bank")),
                h4(tags$em("13. Bank")),
                h4(tags$em("14. Bank")),
                h4(tags$em("15. Bank")),
                h4(tags$em("16. Bank")),
                h4(tags$em("17. Bank")),
                h4(tags$em("18. Bank")),
                h4(tags$em("19. Bank")),


                tags$br()

              column(10,style='white-space:nowrap;width:800px;',  
                     leafletOutput("research_map",width="1200px",height="750px"))
            )
)

enter image description here

但是我想把每个复选框放在图标附近,然后是这个图标下的银行列表。所有四个类别都采用相同的方法。图标+复选框 - 以及它们下面的列表。 有什么想法吗? 感谢

1 个答案:

答案 0 :(得分:1)

解决。

由于 checkboxGroupInput

,这很痛苦
ui <- fluidPage(theme = shinytheme("united"),
            titlePanel(HTML("<h1><center><font size=14> Title </font>
</center></h1>")), 
            sidebarLayout(
              sidebarPanel(tags$b(tags$em("Text")), 

                           div(id='typeInput', class="form-group shiny-
input-checkboxgroup shiny-input-container shiny-bound-input",
                               # this was written in order to "separate" 
group checkbox inputs accross page  
                               tags$br(),
                               tags$br(),
                               column(width = 7,
                                      tags$img(src = "Banks 1.png", height = 
50, width = 50), h4(tags$b("Banks 1")),
                                      HTML("<input type=checkbox 
name=typeInput value=Banks 1>"),
                                      h4(tags$em("1. Bank")),
                                      h4(tags$em("2. Bank")),
                                      h4(tags$em("3. Bank")),
                                      h4(tags$em("4. Bank")),
                                      h4(tags$em("5. Bank")),

                                      tags$br(),
                                      tags$br(),
                                      tags$img(src = "Banks 2.png", height = 
 50, width = 50), h4(tags$b("Banks 2")),
                                      HTML("<input type=checkbox 
 name=typeInput value=Banks 2>"),
                                      h4(tags$em("6. Bank")),
                                      h4(tags$em("7. Bank")),
                                      h4(tags$em("8. Bank")),
                                      h4(tags$em("9. Bank"))),

              column(width = 10,style='white-space:nowrap;width:800px;',  
                     leafletOutput("map",width="1200px",height="750px"))#)

谢谢!