The alignment of Choices on Radio Button #484
Comments
|
Hello, I'm not sure to understand what you're trying to do, but using 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) { }
) |
|
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 |
1st option display
2nd option display
current display (problem as below)
expected display (solution as below)
Question : shinyWidgets::prettyRadioButtons() The alignment of Choices on Radio Button #484 |
englianhu
changed the title
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)
|
This was referenced Mar 29, 2022
|
Noticed that Wonder if because of
Citation : 55d05f4#commitcomment-70329789 |
## 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
Reference |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Debugs
Step 1
freely set arguments to test the output of the function...
Step 2
Copy and paste the html code above and paste to https://codebeautify.org/htmlviewer to debug with the output...
Step 3
source : nirguk/example_shiny_includeHTML#1 (comment)
Reference
The text was updated successfully, but these errors were encountered: