Могу ли я обернуть абзац текста вокруг изображения в Shiny? - PullRequest
0 голосов
/ 06 августа 2020

Я хочу посмотреть, можно ли в Shiny обернуть текст вокруг изображения. У меня есть блестящая панель управления с вкладкой «О программе» с несколькими абзацами текста и несколькими изображениями. Ниже я написал упрощенную версию концепции. В такой программе, как MS Word, есть несколько различных вариантов того, как изображение может быть встроено в текст и как текст обтекает изображение (см. Рисунок внизу, который я создал в Word).

My Текущее решение состоит в том, чтобы использовать fluidRow () и column (), чтобы разделить страницу и разместить текст отдельно от изображения. Это может сработать, но не обеспечивает такой чистоты конечного продукта, как функции переноса текста в Word.

library(shiny)
library(shinydashboard)


ui <- dashboardPage(

  # # Dashboard Header
  dashboardHeader(title = "Menu"),
  #

  dashboardSidebar(
    sidebarMenu(
      menuItem("Example Tab", tabName = "tabA")
    )
  ), # End Dashboard Sidebar


  # Body of the dashboard
  dashboardBody(

    # Start with overall tabItems
    tabItems(
      tabItem(
        tabName = "tabA",


        fluidRow(
          column(
            width = 10,

            p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
          mollit anim id est laborum."),
          ),
          column(
            width = 2,

            img(
              height = 100,

              src = "https://www.r-project.org/logo/Rlogo.png"
            ),
          ), # end column
        ), # end fluidRow

        br(),
        br(),

        fluidRow(
          column(
            width = 8,


            p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
          laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
          nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
          fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
          qui officia deserunt mollit anim id est laborum.")
          ),

          column(
            width = 4,

            img(
              height = 200,

              src = "https://www.r-project.org/logo/Rlogo.png"
            ),
          ), # end column
        ), # end fluid row
      )
    )
  )
)



####################################################
####################################################

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

}




shinyApp(ui = ui, server = server)


Пример в MS Word

Ответы [ 2 ]

1 голос
/ 07 августа 2020

CSS способ:

library(shiny)
library(shinydashboard)

CSS <- "
p {
  line-height: 1.6; 
  font-family: Helvetica;
  text-align: justify;
  margin: 0;
  font-size: 14px;
}

.Rlogo {
  float: left;
  width: 250px;
  shape-outside: url(https://www.r-project.org/logo/Rlogo.svg);
  shape-margin: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}
"

ui <- dashboardPage(
  
  # # Dashboard Header
  dashboardHeader(title = "Menu"),
  #
  
  dashboardSidebar(
    sidebarMenu(
      menuItem("Example Tab", tabName = "tabA")
    )
  ), # End Dashboard Sidebar
  
  
  # Body of the dashboard
  dashboardBody(
    
    tags$head(
      tags$style(HTML(CSS))
    ),
    
    # Start with overall tabItems
    tabItems(
      tabItem(
        tabName = "tabA",
        
        fluidRow(
          column(
            width = 12,
            
            img(
              class = "Rlogo",
              src = "https://www.r-project.org/logo/Rlogo.svg"
            ),
            p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
          laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
          nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
          fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
          qui officia deserunt mollit anim id est laborum.")
            
          ) # end column
          
        ) # end fluid row
      )
    )
  )
)


####################################################
####################################################

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

shinyApp(ui = ui, server = server)

введите описание изображения здесь

JavaScript способ:

CSS <- "
.Rlogo {
  float: left;
  width: 250px;
  padding: 30px;
}
"

JS <- "
$(document).ready(function(){
  $('.Rlogo').slickWrap();
});
" 

ui <- dashboardPage(
  
  # # Dashboard Header
  dashboardHeader(title = "Menu"),
  #
  
  dashboardSidebar(
    sidebarMenu(
      menuItem("Example Tab", tabName = "tabA")
    )
  ), # End Dashboard Sidebar
  
  
  # Body of the dashboard
  dashboardBody(
    
    tags$head(
      tags$script(src = "https://cdn.jsdelivr.net/gh/jasonwyatt/jQSlickWrap/jquery.slickwrap.js"),
      tags$script(HTML(JS)),
      tags$style(HTML(CSS))
    ),
    
    # Start with overall tabItems
    tabItems(
      tabItem(
        tabName = "tabA",
        
        fluidRow(
          column(
            width = 12,
            
            img(
              class = "Rlogo",
              src = "https://www.r-project.org/logo/Rlogo.svg"
            ),
            p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
          laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
          nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
          fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
          qui officia deserunt mollit anim id est laborum.")
            
          ) # end column
          
        ) # end fluid row
      )
    )
  )
)


####################################################
####################################################

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

shinyApp(ui = ui, server = server)
0 голосов
/ 06 августа 2020

Если вы стилизуете свой p с css text-align в соответствии с обоснованием, он должен работать

p(style="text-align: justify;", "Lorem ipsum etc etc")
...