Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The alignment of Choices on Radio Button #484

Closed
englianhu opened this issue Mar 21, 2022 · 6 comments
Closed

The alignment of Choices on Radio Button #484

englianhu opened this issue Mar 21, 2022 · 6 comments

Comments

@englianhu
Copy link

Debugs

Step 1

> prettyRadioButtons(
     inputId = "radio2",
     label = "Update my choices!",
     thick = TRUE,
     choices = month.name[1:4],
     animation = "pulse",
     status = "info"
 )
<div id="radio2" class="form-group shiny-input-radiogroup shiny-input-container">
  <label class="control-label" for="radio2">Update my choices!</label>
  <div class="shiny-options-group">
    <div style="height:7px;"></div>
    <div class="pretty p-default p-round p-thick p-pulse">
      <input type="radio" name="radio2" value="January" checked="checked"/>
      <div class="state p-info">
        <label>
          <span>January</span>
        </label>
      </div>
    </div>
    <div style="height:3px;"></div>
    <div class="pretty p-default p-round p-thick p-pulse">
      <input type="radio" name="radio2" value="February"/>
      <div class="state p-info">
        <label>
          <span>February</span>
        </label>
      </div>
    </div>
    <div style="height:3px;"></div>
    <div class="pretty p-default p-round p-thick p-pulse">
      <input type="radio" name="radio2" value="March"/>
      <div class="state p-info">
        <label>
          <span>March</span>
        </label>
      </div>
    </div>
    <div style="height:3px;"></div>
    <div class="pretty p-default p-round p-thick p-pulse">
      <input type="radio" name="radio2" value="April"/>
      <div class="state p-info">
        <label>
          <span>April</span>
        </label>
      </div>
    </div>
    <div style="height:3px;"></div>
  </div>
</div>

freely set arguments to test the output of the function...

Step 2

Screenshot_4

Copy and paste the html code above and paste to https://codebeautify.org/htmlviewer to debug with the output...

Step 3

> packageVersion('shinyWidgets')
[1] '0.6.4'
> prettyRadioButtons
function (inputId, label, choices = NULL, selected = NULL, status = "primary", 
    shape = c("round", "square", "curve"), outline = FALSE, fill = FALSE, 
    thick = FALSE, animation = NULL, icon = NULL, plain = FALSE, 
    bigger = FALSE, inline = FALSE, width = NULL, choiceNames = NULL, 
    choiceValues = NULL) 
{
    status <- match.arg(status, c("default", "primary", "success", 
        "info", "danger", "warning"))
    shape <- match.arg(shape)
    if (is.null(choices) && is.null(choiceNames) && is.null(choiceValues)) {
        choices <- character(0)
    }
    args <- normalizeChoicesArgs(choices, choiceNames, choiceValues)
    selected <- shiny::restoreInput(id = inputId, default = selected)
    selected <- if (is.null(selected)) {
        args$choiceValues[[1]]
    }
    else {
        as.character(selected)
    }
    if (length(selected) > 1) 
        stop("The 'selected' argument must be of length 1")
    options <- generatePretty(inputId = inputId, selected = selected, 
        inline = inline, type = "radio", choiceNames = args$choiceNames, 
        choiceValues = args$choiceValues, status = status, shape = shape, 
        outline = outline, fill = fill, thick = thick, animation = animation, 
        icon = icon, plain = plain, bigger = bigger)
    divClass <- "form-group shiny-input-radiogroup shiny-input-container"
    if (inline) 
        divClass <- paste(divClass, "shiny-input-container-inline")
    radioTag <- htmltools::tags$div(id = inputId, style = if (!is.null(width)) 
        paste0("width: ", validateCssUnit(width), ";"), class = divClass, 
        tags$label(class = "control-label", `for` = inputId, 
            class = if (is.null(label)) 
                "shiny-label-null", label), options)
    attachShinyWidgetsDep(radioTag, "pretty")
}
<environment: namespace:shinyWidgets>

source : nirguk/example_shiny_includeHTML#1 (comment)

Reference

@pvictor
Copy link
Member

pvictor commented Mar 25, 2022

Hello,

I'm not sure to understand what you're trying to do, but using prettyRadioButtons() in a shinydashboard app seems to work just fine:

library(shiny)
library(shinydashboard)
library(shinyWidgets)
shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      box(
        prettyRadioButtons(
          inputId = "radio2",
          label = "Update my choices!",
          thick = TRUE,
          choices = month.name[1:4],
          animation = "pulse",
          status = "info"
        )
      )
    ),
    title = "Dashboard example"
  ),
  server = function(input, output) { }
)

@englianhu
Copy link
Author

englianhu commented Mar 27, 2022

ui.R

require('BBmisc')
lib('shiny')
lib('shinythemes')
lib('shinydashboard')
lib('shinydashboardPlus')
lib('dashboardthemes')
lib('shinyWidgets')
lib('shinyjs')
lib('memoise')
if(!require('XML')) devtools::install_github('omegahat/XML')
lib('XML')

### creating custom logo object
logo <- shinyDashboardLogoDIY(
  boldText = 'ξηg', 
  mainText = 'Lιαη Ημ', 
  textSize = 16, 
  badgeText = '🐉 ®γσ', 
  badgeTextColor = 'white', 
  badgeTextSize = 2, 
  badgeBackColor = "#40E0D0", 
  badgeBorderRadius = 3)

alignCenter <- memoise(function(el) {
  htmltools::tagAppendAttributes(el, style="width:500vw;height:100vh;background-color:#fff;display:flex;align-items:center;justify-content:center;")
})

ui <- shinyUI(
  shinydashboardPlus::dashboardPage(#skin = 'midnight', 
    header = shinydashboardPlus::dashboardHeader(title = logo),
    
    sidebar = shinydashboardPlus::dashboardSidebar(
      minified = TRUE, collapsed = FALSE, 
      sidebarMenu(
        id = 'tabs', 
        menuItem('®️Studio ☁️', tabName = 'menu', 
                 ## https://getbootstrap.com/docs/3.4/components/#glyphicons
                ## https://fontawesome.com/icons 
                icon = icon('fa-brand fa-linux'), startExpanded = TRUE, 
                menuSubItem('🏠 Home', tabName = 'home'),
                menuSubItem('🇬🇧 ENGLISH', tabName = 'en'), 
                menuSubItem('🇨🇳 简体中文', tabName = 'cn'), 
                menuSubItem('🇹🇼 繁体中文', tabName = 'tw'),
                menuSubItem('🇯🇵 日本語', tabName = 'jp'),
                menuSubItem('🇰🇷 한국어', tabName = 'kr'),
                menuSubItem('🇩🇪 Deutsch', tabName = 'de'),
                menuSubItem('🇫🇷 français', tabName = 'fr'),
                menuSubItem('🇮🇹 Italiano', tabName = 'it'))#, 
        #menuItem('Appendices', icon = icon('th'), tabName = 'append', 
        #         menuSubItem('Author', tabName = 'author'))
        )), 
    
    body = dashboardBody(
      shinyDashboardThemes(theme = 'blue_gradient'), 
      tabItems(
        tabItem(tabName = 'home', h2('®️Studio ☁️', align = 'center'), alignCenter(
          #shinydashboardPlus::box(
                  prettyRadioButtons(
            inputId = 'rb', label = NULL, 
            choices = c('🇬🇧 ENGLISH' = 'en',
                        '🇨🇳 简体中文' = 'cn', 
                        '🇹🇼 繁体中文' = 'tw', 
                        '🇯🇵 日本語' = 'jp', 
                        '🇰🇷 한국어' = 'kr', 
                        '🇩🇪 Deutsch' = 'de', 
                        '🇫🇷 Français' = 'fr', 
                        '🇮🇹 Italiano' = 'it'), 
            shape = 'curve', animation = 'pulse', 
            selected = character(0), status = 'primary', 
            thick = TRUE, width = '100%', bigger = TRUE, 
            icon = icon('registered')))
          ), 
        tabItem(tabName = 'en', h2('🇬🇧 ENGLISH', align = 'center'), 
                tags$iframe(src = 'http://rpubs.com/englianhu/ryo-en', 
                            height = 800, width = '100%', frameborder = 0)#, 
                #HTML(readLines('www/ryo-en.html')), 
                #fluidPage(includeHTML('www/ryo-en.html'))
                ), 
        tabItem(tabName = 'cn', h2('🇨🇳 简体中文', align = 'center'), 
                #tags$iframe(src = 'https://rpubs.com/englianhu/ryo-cn', 
                #            height = 800, width = '100%', frameborder = 0), 
                #HTML(readLines('www/ryo-cn.html')), 
                fluidPage(includeHTML('www/ryo-cn.html'))), 
        tabItem(tabName = 'tw', h2('🇹🇼 繁体中文', align = 'center'), 
                #tags$iframe(src = 'https://rpubs.com/englianhu/ryo-tw', 
                #            height = 800, width = '100%', frameborder = 0), 
                #HTML(readLines('www/ryo-tw.html')), 
                fluidPage(includeHTML('www/ryo-tw.html'))), 
        tabItem(tabName = 'jp', h2('🇯🇵 日本語', align = 'center'), 
                #tags$iframe(src = 'https://rpubs.com/englianhu/ryo-jp', 
                #            height = 800, width = '100%', frameborder = 0), 
                #HTML(readLines('www/ryo-jp.html')), 
                fluidPage(includeHTML('www/ryo-jp.html'))),
        tabItem(tabName = 'kr', h2('🇰🇷 한국어', align = 'center'), 
                #tags$iframe(src = 'https://rpubs.com/englianhu/ryo-kr', 
                #            height = 800, width = '100%', frameborder = 0), 
                #HTML(readLines('www/ryo-kr.html')), 
                #fluidPage(includeHTML('www/ryo-kr.html'))
                ), 
        tabItem(tabName = 'de', h2('🇩🇪 Deutsch', align = 'center'), 
                #tags$iframe(src = 'https://rpubs.com/englianhu/ryo-de', 
                #            height = 800, width = '100%', frameborder = 0), 
                #HTML(readLines('www/ryo-de.html')), 
                #fluidPage(includeHTML('www/ryo-de.html'))
                ), 
        tabItem(tabName = 'fr', h2('🇫🇷 Français', align = 'center'), 
                #tags$iframe(src = 'https://rpubs.com/englianhu/ryo-fr', 
                #            height = 800, width = '100%', frameborder = 0), 
                #HTML(readLines('www/ryo-fr.html')), 
                #fluidPage(includeHTML('www/ryo-fr.html'))
                ), 
        tabItem(tabName = 'it', h2('🇮🇹 Italiano', align = 'center'), 
                #tags$iframe(src = 'https://rpubs.com/englianhu/ryo-fr', 
                #            height = 800, width = '100%', frameborder = 0), 
                #HTML(readLines('www/ryo-fr.html')), 
                #fluidPage(includeHTML('www/ryo-fr.html'))
                ))), 
  
  footer = shinydashboardPlus::dashboardFooter(
    p('Powered by - Copyright® Intellectual Property Rights of ', 
      tags$a(href='https://www.scibrokes.com', target = '_blank', 
             tags$img(height = '20px', alt = 'scibrokes', #align='right', 
                      src='www/Scibrokes.png')), 
      HTML("<a href='https://www.scibrokes.com'>Sςιβrοκεrs Trαdιηg®</a>"))), 
  title = 'DashboardPage'))

#shinyApp(server = server, ui = ui)

server.R

require('BBmisc')
lib('shiny')
lib('shinythemes')
lib('shinydashboard')
lib('shinydashboardPlus')
lib('dashboardthemes')
lib('shinyWidgets')
lib('shinyjs')
lib('memoise')
if(!require('XML')) devtools::install_github('omegahat/XML')
lib('XML')

server <- shinyServer(function(input, output, session) {
  
  #observeEvent(input$rb, {
  #       newtab <- switch(input$tabs, 
  #                        "en" = "en", 
  #                        "cn" = "cn", 
  #                        "tw" = "tw", 
  #                        "jp" = "jp")
  #       updateTabItems(session, "tabs", newtab)
  #    })
  
  #output$cv_page <- renderUI({
  #  
  #  page = switch(input$rb, 
  #                en = 'www/ryo-en.html',
  #                cn = 'www/ryo-cn.html',
  #                tw = 'www/ryo-tw.html',
  #                jp = 'www/ryo-jp.html')
  #  
    #HTML(markdown::markdownToHTML('ryo-en.md'))
    #HTML(rmarkdown::render(knit('ryo-en.Rmd')))
  #  includeHTML(page)
  #})
  
  #observeEvent(input$rb, {
  #  newtab <- switch(input$tabs,
  #                   "home" = "home",
  #                   "en" = "en", 
  #                   "cn" = "cn",
  #                   "tw" = "tw", 
  #                   "jp" = "jp",
  #                   "author" = "author")
  #  updateTabItems(session, "tabs", newtab)
  #})
  
  observeEvent(input$rb == 'en', {
    updateTabItems(session, "tabs", selected = "en")
  })
  
  observeEvent(input$rb == 'cn', {
    updateTabItems(session, "tabs", selected = "cn")
  })
  
  observeEvent(input$rb == 'tw', {
    updateTabItems(session, "tabs", selected = "tw")
  })
  
  observeEvent(input$rb == 'jp', {
    updateTabItems(session, "tabs", selected = "jp")
  })
  
  #output$ryo_en <- renderUI({
  #  #HTML(markdown::markdownToHTML('ryo-en.md'))
  #  #HTML(rmarkdown::render(knit('ryo-en.Rmd')))
  #  includeHTML("ryo-en.html")
  #})
  
  #output$ryo_cn <- renderUI({
  #  #HTML(markdown::markdownToHTML('ryo-en.md'))
  #  #HTML(rmarkdown::render(knit('ryo-en.Rmd')))
  #  includeHTML("ryo-cn.html")
  #})
  
  #output$ryo_tw <- renderUI({
  #  #HTML(markdown::markdownToHTML('ryo-en.md'))
  #  #HTML(rmarkdown::render(knit('ryo-en.Rmd')))
  #  includeHTML("ryo-tw.html")
  #})
  
  #output$ryo_jp <- renderUI({
  #  #HTML(markdown::markdownToHTML('ryo-en.md'))
  #  #HTML(rmarkdown::render(knit('ryo-en.Rmd')))
  #  includeHTML("ryo-jp.html")
  #})
  
  #observeEvent(input$rb, {
  #  updateTabItems(session, input$rb,
  #                    selected = input$rb)
  #})
  
  #observeEvent(input$rb, {
    #tbs <- c('en', 'cn', 'tw', 'jp', 'kr', 'de', 'fr', 'it')
  #  newtab <- switch(input$tabs, 
  #                   'en' = 'en', 
  #                   'cn' = 'cn', 
  #                   'tw' = 'tw', 
  #                   'jp' = 'jp', 
  #                   'kr' = 'kr', 
  #                     'de' = 'de', 
  #                   'fr' = 'fr', 
  #                   'it' = 'it')
  #  updateTabItems(session, 'tabs', newtab)#, selected = input$rb)
  #})
  
  #observeEvent(input$rb, {
  #  updatePrettyRadioButtons(
  #    session = session,
  #    inputId = 'rb',
  #    choices = c('en', 'cn', 'tw', 'jp', 'kr', 'de', 'fr', 'it'),
  #    prettyOptions = list(animation = 'pulse', status = 'info', 
  #                         shape = 'curve', status = 'primary', 
  #                         thick = TRUE, width = '100%', 
  #                         bigger = TRUE, icon = icon('registered')))
  #}, ignoreInit = TRUE)
  
})

#shinyApp(server = server, ui = ui)

Code shows above, mine doesn't work as shows below... wanna align the PrettyRadioButtons in the center of the webpage as shown below, wonder why the choices not in same line with the selection radio button, somebody take a look?

Question : shinyWidgets::prettyRadioButtons() The alignment of Choices on Radio Button #484

@englianhu
Copy link
Author

englianhu commented Mar 27, 2022

1st option display


tried to fit the prettyRadioButtons() to your sample and adjust alignment shows above...

2nd option display


tried to fit the prettyRadioButtons() to your sample and adjust alignment shows above...


current display (problem as below)


Current output as above, the choices do not align same line with radio buttons

expected display (solution as below)


Expected output as above, the choices do align same line with radio buttons


Expected output as above will be BEST, the choices do align same line with radio buttons with stepwise effect (animated bounce-in or fly-in will be wonderful)


Question : shinyWidgets::prettyRadioButtons() The alignment of Choices on Radio Button #484

@englianhu englianhu changed the title The alignment of Label on Radio Button The alignment of Choices on Radio Button Mar 27, 2022
@englianhu
Copy link
Author

require('BBmisc')
lib('shiny')
lib('shinythemes')
lib('shinydashboard')
lib('shinydashboardPlus')
lib('dashboardthemes')
lib('shinyWidgets')
lib('shinyjs')
lib('memoise')
if(!require('XML')) devtools::install_github('omegahat/XML')
lib('XML')

conflict_prefer('dashboardPage', 'shinydashboardPlus')
conflict_prefer('dashboardHeader', 'shinydashboardPlus')
conflict_prefer('dashboardSidebar', 'shinydashboardPlus')
conflict_prefer('dashboardFooter', 'shinydashboardPlus')

### creating custom logo object
logo <- shinyDashboardLogoDIY(
    boldText = 'ξηg', 
    mainText = 'Lιαη Ημ', 
    textSize = 16, 
    badgeText = '🐉 ®γσ', 
    badgeTextColor = 'white', 
    badgeTextSize = 2, 
    badgeBackColor = "#40E0D0", 
    badgeBorderRadius = 3)

alignCenter <- memoise(function(el) {
    htmltools::tagAppendAttributes(el, style="width:500vw;height:100vh;background-color:#fff;display:flex;align-items:center;justify-content:center;")
})

ui <- shinyUI(
    
    #fluidPage(
    ## https://dreamrs.github.io/shinyWidgets/reference/setBackgroundColor.html
    # use a gradient in background
    #  setBackgroundColor(
    #    color = c('#2171B5', '#F7FBFF'),
    #    gradient = 'radial',
    #    direction = c('top', 'left')
    #    ),
    #...)
    #
    dashboardPage(#skin = 'midnight', 
        header = dashboardHeader(title = logo),
        
        sidebar = dashboardSidebar(
            minified = TRUE, collapsed = FALSE, 
            sidebarMenu(
                id = 'tabs', 
                menuItem('®️Studio ☁️', tabName = 'menu', 
                         ## https://getbootstrap.com/docs/3.4/components/#glyphicons
                         ## https://fontawesome.com/icons 
                         icon = icon('fa-brand fa-linux'), startExpanded = TRUE, 
                         menuSubItem('🏠 Home', tabName = 'home'),
                         menuSubItem('🇬🇧 ENGLISH', tabName = 'en'), 
                         menuSubItem('🇨🇳 简体中文', tabName = 'cn'), 
                         menuSubItem('🇹🇼 繁体中文', tabName = 'tw'),
                         menuSubItem('🇯🇵 日本語', tabName = 'jp'),
                         menuSubItem('🇰🇷 한국어', tabName = 'kr'),
                         menuSubItem('🇩🇪 Deutsch', tabName = 'de'),
                         menuSubItem('🇫🇷 français', tabName = 'fr'),
                         menuSubItem('🇮🇹 Italiano', tabName = 'it'))#, 
                #menuItem('Appendices', icon = icon('th'), tabName = 'append', 
                #         menuSubItem('Author', tabName = 'author'))
            )), 
        
        body = dashboardBody(
            shinyDashboardThemes(theme = 'blue_gradient'), 
            
            ## https://stackoverflow.com/questions/52198452/how-to-change-the-background-color-of-the-shiny-dashboard-body
            tags$head(tags$style(HTML('
            /* logo */
            /* .skin-blue .main-header .logo { */
            /* background-color: #f4b943; */
            /* } */
            
            /* logo when hovered */
            .skin-blue .main-header .logo:hover {
            /* background-color: #146275; */
              color: #FFD64D;
              background: linear-gradient(155deg, #17687C 0%, #146275 100%);
              transition: all 0.45s;
              &:hover{
                background: linear-gradient(155deg, #17687C 20%, #3098B3 80%);
              }
            }
            
            /* navbar (rest of the header) */
            .skin-blue .main-header .navbar {
            /* background-color: #f4b943; */
              color: #FFD64D;
              background: linear-gradient(155deg, #17687C 0%, #146275 100%);
              transition: all 0.45s;
              &:hover{
                background: linear-gradient(155deg, #17687C 20%, #146275 80%);
              }
            }
            
            /* main sidebar */
            /* .skin-blue .main-sidebar { */
            /* background-color: #f4b943; */
            /* } */
            
            /* active selected tab in the sidebarmenu */
            .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
              background-color: #ff0000;
            }
            
            /* other links in the sidebarmenu */
            /* .skin-blue .main-sidebar .sidebar .sidebar-menu a{ */
            /* background-color: #00ff00; */
            /* color: #000000; */
            /* } */
            
            /* other links in the sidebarmenu when hovered */
            .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
            /* background-color: #FFD64D; */
            /* color: #FFD64D; */
            }
            
            /* toggle button when hovered  */
            .skin-blue .main-header .navbar .sidebar-toggle:hover{
            /* background-color: #FFD64D; */
              color: #FFD64D;
              background: linear-gradient(155deg, #002C54 0%, #4CB5F5 100%);
              transition: all 0.45s;
              &:hover{
                background: linear-gradient(155deg, #002C54 20%, #4CB5F5 80%);
                }
            }
            
            /* body */
            .content-wrapper, .right-side {
              background-color: #7da2d1;
            }
            '))), 
            
            tabItems(
                tabItem(tabName = 'home', h2('®️Studio ☁️', align = 'center'),
                        alignCenter(
                            prettyRadioButtons(
                                inputId = 'rb', label = NULL, 
                                choices = c('🇬🇧 ENGLISH' = 'en', 
                                            '🇨🇳 简体中文' = 'cn', 
                                            '🇹🇼 繁体中文' = 'tw', 
                                            '🇯🇵 日本語' = 'jp', 
                                            '🇰🇷 한국어' = 'kr', 
                                            '🇩🇪 Deutsch' = 'de', 
                                            '🇫🇷 Français' = 'fr', 
                                            '🇮🇹 Italiano' = 'it'), 
                                shape = 'curve', animation = 'pulse', 
                                selected = character(0), status = 'primary', 
                                thick = TRUE, width = '100%', bigger = TRUE, 
                                icon = icon('registered'))
                        )
                ), 
                tabItem(tabName = 'en', h2('🇬🇧 ENGLISH', align = 'center'), 
                        tags$iframe(src = 'http://rpubs.com/englianhu/ryo-en', 
                                    height = 800, width = '100%', frameborder = 0)#, 
                        #HTML(readLines('www/ryo-en.html')), 
                        #fluidPage(includeHTML('www/ryo-en.html'))
                ), 
                tabItem(tabName = 'cn', h2('🇨🇳 简体中文', align = 'center'), 
                        tags$iframe(src = 'https://rpubs.com/englianhu/ryo-cn', 
                                    height = 800, width = '100%', frameborder = 0)#, 
                        #HTML(readLines('www/ryo-cn.html')), 
                        #fluidPage(includeHTML('www/ryo-cn.html'))
                ), 
                tabItem(tabName = 'tw', h2('🇹🇼 繁体中文', align = 'center'), 
                        tags$iframe(src = 'https://rpubs.com/englianhu/ryo-tw', 
                                    height = 800, width = '100%', frameborder = 0)#, 
                        #HTML(readLines('www/ryo-tw.html')), 
                        #fluidPage(includeHTML('www/ryo-tw.html'))
                ), 
                tabItem(tabName = 'jp', h2('🇯🇵 日本語', align = 'center'), 
                        tags$iframe(src = 'https://rpubs.com/englianhu/ryo-jp', 
                                    height = 800, width = '100%', frameborder = 0)#, 
                        #HTML(readLines('www/ryo-jp.html')), 
                        #fluidPage(includeHTML('www/ryo-jp.html'))
                ), 
                tabItem(tabName = 'kr', h2('🇰🇷 한국어', align = 'center'), 
                        tags$iframe(src = 'https://rpubs.com/englianhu/ryo-kr', 
                                    height = 800, width = '100%', frameborder = 0)#, 
                        #HTML(readLines('www/ryo-kr.html')), 
                        #fluidPage(includeHTML('www/ryo-kr.html'))
                ), 
                tabItem(tabName = 'de', h2('🇩🇪 Deutsch', align = 'center'), 
                        tags$iframe(src = 'https://rpubs.com/englianhu/ryo-de', 
                                    height = 800, width = '100%', frameborder = 0)#, 
                        #HTML(readLines('www/ryo-de.html')), 
                        #fluidPage(includeHTML('www/ryo-de.html'))
                ), 
                tabItem(tabName = 'fr', h2('🇫🇷 Français', align = 'center'), 
                        tags$iframe(src = 'https://rpubs.com/englianhu/ryo-fr', 
                                    height = 800, width = '100%', frameborder = 0)#, 
                        #HTML(readLines('www/ryo-fr.html')), 
                        #fluidPage(includeHTML('www/ryo-fr.html'))
                ), 
                tabItem(tabName = 'it', h2('🇮🇹 Italiano', align = 'center'), 
                        tags$iframe(src = 'https://rpubs.com/englianhu/ryo-fr', 
                                    height = 800, width = '100%', frameborder = 0)#, 
                        #HTML(readLines('www/ryo-fr.html')), 
                        #fluidPage(includeHTML('www/ryo-fr.html'))
                )
            )
        ), 
        
        footer = dashboardFooter(
            p('Powered by - Copyright® Intellectual Property Rights of ', 
              tags$a(href='https://www.scibrokes.com', target = '_blank', 
                     tags$img(height = '20px', alt = 'scibrokes', #align='right', 
                              src='www/Scibrokes.png')), 
              HTML("<a href='https://www.scibrokes.com'>Sςιβrοκεrs Trαdιηg®</a>"))), 
        title = 'DashboardPage'))


server <- shinyServer(function(input, output) { })
shinyApp(ui, server)

@englianhu
Copy link
Author

englianhu commented Apr 3, 2022

Noticed that shinyWidgets supports shinyDashboard and shinyDashboardPlus, wonder why the error was there?

Wonder if because of shinyDashboard::sidebarDashboard() not yet changed to more advanced
shinyDashboardPlus::sidebarDashboard()

useShinydashboardPlus <- function() {
  if (!requireNamespace(package = "shinydashboardPlus"))
    message("Package 'shinydashboardPlus' is required to run this function")
  deps <- findDependencies(shinydashboardPlus::dashboardPagePlus(
    header = shinydashboardPlus::dashboardHeaderPlus(),
  deps <- findDependencies(shinydashboardPlus::dashboardPage(
    header = shinydashboardPlus::dashboardHeader(),
    sidebar = shinydashboard::dashboardSidebar(),
    body = shinydashboard::dashboardBody()
  ))

why not update sidebar = shinydashboardPlus::dashboardSidebar()?

Citation : 55d05f4#commitcomment-70329789

@englianhu englianhu reopened this Apr 3, 2022
@englianhu
Copy link
Author

## https://github.com/moldach/scss-shiny
## https://shiny.rstudio.com/articles/packaging-javascript.html
## https://codepen.io/victorfreire/pen/XXzqEr

require('BBmisc')
lib('shiny')
lib('shinyMobile')
lib('shinyWidgets')
lib('sass')

ui <- shinyMobile::f7Page(
  tags$head(tags$style(HTML('
    @keyframes fade {
  0%, 50% {
    opacity: 0;
    transform: scale(0);
  }
}
@keyframes dot-anim {
  0% {
    top: -4vw;
  }
  50% {
    top: 4vw;
  }
  100% {
    top: -4vw;
  }
}
@keyframes checked-radio-3 {
  0% {
    top: -10vw;
    transform: scale(0);
  }
  100% {
    top: 0;
    transform: scale(1);
  }
}
@keyframes unchecked-radio-3 {
  0% {
    bottom: 0;
    transform: scale(1);
  }
  100% {
    bottom: -10vw;
    transform: scale(0);
  }
}
@keyframes checked-radio-4 {
  0% {
    transform: rotate(0) translateY(-4.8vw) scale(.2);
  }
  83% {
    transform: rotate(360deg) translateY(-2.5vw) scale(1);
    transform-origin: 2vw;
  }
  88% {
    transform: translateY(.6vw) scale(1);
  }
  93% {
    transform: translateY(-.9vw) scale(1);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes checked-radio-5 {
  0% {
    top: -10vw;
    transform: scale(0);
  }
  100% {
    top: 0;
    transform: scale(1);
  }
}
@keyframes unchecked-radio-5 {
  0% {
    bottom: 0;
    transform: scale(1);
  }
  100% {
    bottom: -10vw;
    transform: scale(0);
  }
}
@keyframes checked-radio-6 {
  0% {
    transform: rotate(0) translateY(-4.8vw) scale(.2);
  }
  83% {
    transform: rotate(360deg) translateY(-2.5vw) scale(1);
    transform-origin: 2vw;
  }
  88% {
    transform: translateY(.6vw) scale(1);
  }
  93% {
    transform: translateY(-.9vw) scale(1);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes unchecked-radio-6 {
  25% {
    top: -6.5vw;
  }
  50% {
    top: 9vw;
  }
  75% {
    top: -10vw;
  }
  100% {
    top: -10vw;
    transform: scale(0);
  }
}
@keyframes checked-radio-7 {
  0% {
    top: -10vw;
    transform: scale(0);
  }
  100% {
    top: 0;
    transform: scale(1);
  }
}
@keyframes unchecked-radio-7 {
  0% {
    bottom: 0;
    transform: scale(1);
  }
  100% {
    bottom: -10vw;
    transform: scale(0);
  }
}
@keyframes checked-radio-8 {
  0% {
    transform: rotate(0) translateY(-4.8vw) scale(.2);
  }
  83% {
    transform: rotate(360deg) translateY(-2.5vw) scale(1);
    transform-origin: 2vw;
  }
  88% {
    transform: translateY(.6vw) scale(1);
  }
  93% {
    transform: translateY(-.9vw) scale(1);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes unchecked-radio-8 {
  25% {
    top: -6.5vw;
  }
  50% {
    top: 9vw;
  }
  75% {
    top: -10vw;
  }
  100% {
    top: -10vw;
    transform: scale(0);
  }
}
@keyframes checked-radio-9 {
  0% {
    transform: rotate(0) translateY(-4.8vw) scale(.2);
  }
  83% {
    transform: rotate(360deg) translateY(-2.5vw) scale(1);
    transform-origin: 2vw;
  }
  88% {
    transform: translateY(.6vw) scale(1);
  }
  93% {
    transform: translateY(-.9vw) scale(1);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes unchecked-radio-9 {
  25% {
    top: -6.5vw;
  }
  50% {
    top: 9vw;
  }
  75% {
    top: -10vw;
  }
  100% {
    top: -10vw;
    transform: scale(0);
  }
}

*, *:before, *:after {
  margin: auto;
  padding: 0;
  outline: 0;
  overflow: hidden;
  box-sizing: border-box;
}
html, body {
  /* background: white; */
  background: linear-gradient(155DEG, #146275 0%, #33A8C4 100%);
  transition: all 0.25s;
  /* background-image: url("file:///home/englianhu/Documents/GitHub/owner/test/www/maths.jpg"); */
}
main, .container, label, label:before, label:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
main {
  width: 95vw;
  height: 50vw;
}
.container {
  width: 100%;
  height: 100%;
  animation: fade 1s;
}
label {
  display: inline-block;
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  transition: all .2s ease-in-out;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 1.6s;
  animation-name: dot-anim;
}
.radio:checked + label {
  animation-play-state: paused;
}
label:before {
  content: "";
  position: absolute;
  width: 5vw;
  height: 5vw;
  background: white;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.117647) 0 0 .8vw 0, rgba(0, 0, 0, 0.239216) 0 .8vw .8vw 0;
  transition: all .2s;
}
label:hover:before {
  box-shadow: rgba(0, 0, 0, 0.0784314) 0 0 1vw 0, rgba(0, 0, 0, 0.239216) 0 1vw 1vw 0;
}
label:after {
  content: "";
  position: absolute;
  width: 10vw;
  height: 10vw;
  background: rgba(255, 255, 255, .5);
  border-radius: 50%;
  transform: scale(0);
}
.radio:checked + label:after {
  background: transparent;
  transition: all .5s;
  transform: scale(1);
}
/**** BLUE RED Radio button code ****/
#radio-1 + label {
  left: -80vw;
  bottom: 80vw;
  /* background: #4285F4; */
  color: #FF0000;
  background: linear-gradient(155DEG, #200769 0%, #69B4F5 100%);
  transition: all 0.45s;
  animation-delay: 0s;
}
#radio-1 + label:before {
  /* background: linear-gradient(155DEG, #200769 0%, #69B4F5 100%); */
  /* transition: all 0.45s; */
  transform: scale(0);
}
#radio-1:checked + label:before {
  content: "🇬🇧 \\A ENG";
  white-space: pre; /* or pre-wrap */
  color: #FF0000;
  background: linear-gradient(155DEG, #200769 0%, #69B4F5 100%);
  transition: all 0.45s;
  transform: scale(1);
  transition: all .4s;
}
/**** RED YELLOW radio button code ****/
#radio-2 + label {
  left: -60vw;
  bottom: 60vw;
  /* background: #EA4335; */
  background: linear-gradient(155DEG, #FF0000 0%, #FF8787 100%);
  transition: all 0.45s;
  border-color: #EA4335!important;
  animation-delay: .2s;
}
#radio-2:checked + label {
  background: white;
  border: 1vw solid;
  box-shadow: inset rgba(0, 0, 0, 0.117647) 0 0 .6vw 0, inset rgba(0, 0, 0, 0.239216) 0 .6vw .8vw 0;
  transition: all .2s;
}
#radio-2:checked + label:before {
  width: 5vw;
  height: 5vw;
  content: "🇨🇳 \\A 简";
  white-space: pre; /* or pre-wrap */
  color: #FFBE00;
  /* background: #EA4335; */
  /* transition: all .4s; */
  background: linear-gradient(155DEG, #FF0000 0%, #FF8787 100%);
  transition: all 0.45s;
}
/* for IE */
#radio-2:not(:checked) + label:before {
  width: 8vw;
  height: 8vw;
  /* https://stackoverflow.com/a/17047836/3806250 */
  content: "🇨🇳 \\A 简体中文";
  white-space: pre; /* or pre-wrap */
  color: #FFBE00;
  /* background: #EA4335; */
  background: linear-gradient(155DEG, #FF0000 0%, #FF8787 100%);
  transition: all 0.45s;
  box-shadow: none;
}
/**** RED BLUE radio button code ****/
#radio-3 + label {
  left: -40vw;
  bottom: 40vw;
  color: #E0DFED;
  /* background: #FBBC05; */
  background: linear-gradient(155DEG, #200769 0%, #69B4F5 100%);
  transition: all 0.45s;
  animation-delay: .4s;
}
#radio-3 + label:before {
  /* background: #E91E63; */
  content: "🇹🇼 \\A 繁";
  white-space: pre; /* or pre-wrap */
  color: #E0DFED;
  background: linear-gradient(155DEG, #200769 0%, #69B4F5 100%);
  transition: all 0.45s;
  transform: scale(0);
  animation-name: unchecked-radio-3;
  animation-duration: .2s;
  animation-timing-function: ease-in-out;
}
#radio-3:checked + label:before {
  animation-name: checked-radio-3;
  animation-duration: .4s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}
/**** RED WHITE radio button code ****/
#radio-4 + label {
  left: -20vw;
  bottom: 20vw;
  /* background: #EA4335; */
  background: linear-gradient(155DEG, #FF0000 0%, #FF8787 100%);
  transition: all 0.45s;
  border-color: #EA4335!important;
  animation-delay: .2s;
}
#radio-4:checked + label {
  background: white;
  border: 1vw solid;
  box-shadow: inset rgba(0, 0, 0, 0.117647) 0 0 .6vw 0, inset rgba(0, 0, 0, 0.239216) 0 .6vw .8vw 0;
  transition: all .2s;
}
#radio-4:checked + label:before {
  width: 5vw;
  height: 5vw;
  content: "🇯🇵 \\A 日";
  white-space: pre; /* or pre-wrap */
  color: #E0DFED;
  /* background: #EA4335; */
  /* transition: all .4s; */
  background: linear-gradient(155DEG, #FF0000 0%, #FF8787 100%);
  transition: all 0.45s;
}
/* for IE */
#radio-4:not(:checked) + label:before {
  width: 8vw;
  height: 8vw;
  /* https://stackoverflow.com/a/17047836/3806250 */
  content: "🇯🇵 \\A 日本語";
  white-space: pre; /* or pre-wrap */
  color: #E0DFED;
  /* background: #EA4335; */
  background: linear-gradient(155DEG, #FF0000 0%, #FF8787 100%);
  transition: all 0.45s;
  box-shadow: none;
}
/**** LIGHT BLUE BLACK Radio button code ****/
#radio-5 + label {
  left: 0vw;
  bottom: 0vw;
  content: "🇰🇷 \\A 한국어 \\A 🇰🇷";
  white-space: pre; /* or pre-wrap */
  /* bottom: -6vw; */
  /* background: #4285F4; */
  background: linear-gradient(155DEG, #4285F4 0%, #E4E3E8 100%);
  transform: scale(1);
  animation-delay: 0s;
}
#radio-5 + label:before {
  transform: scale(0);
}
#radio-5:checked + label:before {
  color: #200769;
  content: "🇰🇷 \\A 한";
  white-space: pre; /* or pre-wrap */
  background: linear-gradient(155DEG, #4285F4 0%, #E4E3E8 100%);
  transform: scale(1);
  transition: all .4s;
}
/**** LIGHT BLUE WHITE radio button code ****/
#radio-6 + label {
  left: 20vw;
  bottom: -20vw;
  /* background: #FBBC05; */
  color: #E0DFED;
  background: linear-gradient(155DEG, #4285F4 0%, #E4E3E8 100%);
  transition: all 0.45s;
  animation-delay: .4s;
}
#radio-6 + label:before {
  /* background: #E91E63; */
  color: #E0DFED;
  content: "🇬🇷 \\A Ελλη";
  white-space: pre; /* or pre-wrap */
  background: linear-gradient(155DEG, #4285F4 0%, #E4E3E8 100%);
  transition: all 0.45s;
  transform: scale(0);
  animation-name: unchecked-radio-6;
  animation-duration: .2s;
  animation-timing-function: ease-in-out;
}
#radio-6:checked + label:before {
  animation-name: checked-radio-6;
  animation-duration: .4s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}
/**** BLACK YELLOW radio button code ****/
#radio-7 + label {
  left: 40vw;
  bottom: -40vw;
  content: "🇩🇪 \\A Deutsch \\A 🇩🇪";
  white-space: pre; /* or pre-wrap */
  /* background: #000000; */
  color: #FBBC05;
    background: linear-gradient(155DEG, #000000 0%, #E4E3E8 100%);
    transition: all 0.45s;
    animation-delay: .6s;
}
#radio-7 + label:before {
  /* background: #E0DFED; */
  color: #FBBC05;
  content: "🇩🇪 \\A DE";
  white-space: pre; /* or pre-wrap */
  background: linear-gradient(155DEG, #000000 0%, #E4E3E8 100%);
  transition: all 0.45s;
  animation: unchecked-radio-7 .5s both;
}
#radio-7:checked + label:before {
  animation-name: checked-radio-7;
  animation-duration: .6s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: both;
}
/**** BLUE WHITE Radio button code ****/
#radio-8 + label {
  left: 60vw;
  bottom: -60vw;
  color: #E0DFED;
  /* background: #4285F4; */
  background: linear-gradient(155DEG, #200769 0%, #69B4F5 100%);
  transition: all 0.45s;
  animation-delay: 0s;
}
#radio-8 + label:before {
  background: linear-gradient(155DEG, #200769 0%, #69B4F5 100%);
  transition: all 0.45s;
  transform: scale(0);
}
#radio-8:checked + label:before {
  color: #E0DFED;
  content: "🇫🇷 \\A FR";
  white-space: pre; /* or pre-wrap */
  transform: scale(1);
  transition: all .4s;
}
/**** GREEN WHITE radio button code ****/
#radio-9 + label {
  left: 80vw;
  bottom: -80vw;
  color: #E0DFED;
  /* background: #34A853; */
  background: linear-gradient(155DEG, #146275 0%, #33A8C4 100%);
  transition: all 0.45s;
  animation-delay: .6s;
}
#radio-9 + label:before {
  /* background: #8BC34A; */
  /* color: #E0DFED; */
  background: linear-gradient(155DEG, #146275 0%, #33A8C4 100%);
  transition: all 0.45s;
  animation: unchecked-radio-9 .5s both;
}
#radio-9:checked + label:before {
  color: #E0DFED;
  content: "🇮🇹 \\A IT";
  white-space: pre; /* or pre-wrap */
  animation-name: checked-radio-9;
  animation-duration: .6s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: both;
}
[type="radio"] {
    display: none;
}
  '))), 
  HTML('
    <div class="container" align="center">
  <input type="radio" class="radio" id="radio-1" name="group"/>
    <label for="radio-1"><br>🇬🇧<br>English</label>
  <input type="radio" class="radio" id="radio-2" name="group"/>
    <label for="radio-2"></label>
  <input type="radio" class="radio" id="radio-3" name="group"/>
    <label for="radio-3"><br>🇹🇼<br>繁体中文</label>
  <input type="radio" class="radio" id="radio-4" name="group"/>
    <label for="radio-4"></label>
  <input type="radio" class="radio" id="radio-5" name="group"/>
    <label for="radio-5"><br>🇰🇷<br>한국어</label>
  <input type="radio" class="radio" id="radio-6" name="group"/>
    <label for="radio-6"><br>🇬🇷<br>Ελληνικά</label>
  <input type="radio" class="radio" id="radio-7" name="group"/>
    <label for="radio-7"><br>🇩🇪<br>Deutsch</label>
  <input type="radio" class="radio" id="radio-8" name="group"/>
    <label for="radio-8"><br>🇫🇷<br>Français</label>
  <input type="radio" class="radio" id="radio-9" name="group"/>
    <label for="radio-9"><br>🇮🇹<br>Italiano</label>
</div>
    ')
  #includeHTML("www/test21B.html")#, 
  #includeCSS("www/test21B.css")#, 
  #includeScript('www/test21B.scss')
  #sass(sass_file('www/test21B.scss'), 
  #  'www/test21B.css', 
  #options = sass_options(
  #  output_style = 'compressed',
  #  source_map_embed = TRUE)
  #  )
  )

server <- function(input, output) {
}

shinyApp(ui = ui, server = server)

Source : Shiny Dynamic Radio Buttons

Dynamic Radio Buttons

Reference

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants