+
+
+
+
+
+
+
+
+
+
+
+Content not found. Please use links in the navbar.
+
+ First of all, thank you for considering contributing! Below are guidelines for helping you contribute to this repository.
+This is adapted from the Angular team’s commit guidelines
+A commit message consists of a header, a body, and a possible footer, separated by a blank line.
+<type>(<scope>): <subject>
+<BLANK LINE>
+<body>
+<BLANK LINE>
+<footer><type>
+| value | +description | +
|---|---|
| feat | +feature | +
| fix | +bug fix | +
| docs | +documentation | +
| style | +formatting, missing semi colons, … | +
| test | +adding missing tests | +
| chore | +maintenance | +
<scope>
+Scope can be anything specifying what the commit affects. For example renderBadge, tableInput, background, css, …
+Use * if there isn’t a more fitting scope.
+d3("yonder")+A shiny framework. +
+ ++Build shiny applications with an all new set of +inputs, utilties, and design tools. Click + +to see these great new tools help build pieces of this page. +
+ +# button group input
+div(
+ .style %>%
+ display("flex") %>%
+ flex(justify = "center"),
+ buttonGroupInput(
+ .style %>%
+ background("primary"),
+ id = NULL,
+ choices = c("Sample", "Model", "Download")
+ )
+)New inputs let you build a variety of user interfaces. Develop the best ui for +your users’ needs. Whether your building an application for personal use, +internal use, or public use an intuitive ui helps guide users through your +application.
+Another section to fill out later.
+# list group input
+div(
+ .style %>%
+ display("flex") %>%
+ flex(align = "center", justify = "center"),
+ card(
+ .style %>%
+ border("info") %>%
+ background("info") %>%
+ font("light"),
+ header = "Learn more",
+ listGroupInput(
+ .style %>%
+ background("info"),
+ flush = TRUE,
+ id = NULL,
+ choices = c("About", "Our process", "Partners", "License")
+ )
+ )
+)Based on the widely used Bootstrap library, yonder provides a series of design +utilities to help prototype and produce the shiny apps you imagine.
+That control panel never has to sit on the left again.
+div(
+ .style %>%
+ width(100) %>%
+ padding(2) %>%
+ display("flex") %>%
+ flex(justify = "center") %>%
+ border("dark", round = "all"),
+ card(
+ header = "Controls",
+ formGroup(
+ label = "Options",
+ selectInput(
+ id = NULL,
+ choices = c("Option 1", "Option 2", "Option 3")
+ )
+ ),
+ buttonInput(
+ .style %>%
+ background("primary"),
+ id = NULL,
+ label = "Run"
+ )
+ )
+)div(
+ .style %>%
+ width(100) %>%
+ padding(2) %>%
+ display("flex") %>%
+ flex(justify = "end") %>%
+ border("dark", round = "all"),
+ dropdown(
+ .style %>%
+ background("secondary"),
+ label = "Menu",
+ tags$h6("Controls"),
+ formInput(
+ .style %>% padding(r = 3, l = 3),
+ id = NULL,
+ formGroup(
+ label = "Target",
+ input = textInput(
+ id = NULL
+ )
+ ),
+ formGroup(
+ label = "Description",
+ input = textInput(
+ id = NULL
+ )
+ ),
+ buttonInput(
+ .style %>% background("primary"),
+ id = NULL,
+ label = "Update"
+ )
+ )
+ )
+)Convey more.
+checkboxInput(
+ .style %>% background("success"),
+ id = NULL,
+ choices = c("Choice 1", "Choice 2"),
+ selected = "Choice 1"
+)checkboxInput(
+ .style %>% background("dark"),
+ id = NULL,
+ choices = c("Choice 1", "Choice 2"),
+ selected = "Choice 2"
+)checkboxInput(
+ .style %>% background("danger"),
+ id = NULL,
+ choices = c("Choice 1", "Choice 2", "Choice 3"),
+ selected = "Choice 2"
+)… and much more!
+column() function’s width argument now accepts the values: 1:12, "content", and "equal". The new "content" value is equivalent to the previous value "auto". "equal" is the new default and the placeholder value, so as to allow column(width = c(xs = 2, lg = "equal")).modal() function no longer includes a title argument, instead use header
+alert() are now evaluated in the correct environment (#171)updateRadiobarInput() correctly selects a new choice if only selected is specified (#155)updateMenuInput() correctly selects a new choice if only selected is specifiedupdateTextInput() correctly passes valid and invalid feedbackselected by removing names (#170)updateButtonInput()
+choices
+updateFormInput() may be used to trigger a form submission from the server (#160)webpage() function may be used as the top-level element of an applicationAsIs character vectors are now concatenated with <br> when passing character values as choices or labels (#159)multiple argument (#167)placeholder argument to chip inputscollapsePane() function now includes the argument animate to optionally prevent animation when toggling a collapsible paneupdateMenuInput()
+active.RdAs part of an effort to revert yonder's default bootstrap styles, the
+active() utility has been deprecated. In future versions of the application
+the function will be removed entirely.
Previously, active() would change the
+highlight color of an input's selected choices.
active(tag, color)+ +
| tag | +A tag element. |
+
|---|---|
| color | +One of |
+
affix.RdThe affix utility function applies Bootstrap classes to fix elements to the
+top or bottom of a page. Use "sticky" to cause an element to fix to the top
+of a page after the element is scrolled past. Important, the IE11 and Edge
+browsers do not support the sticky behavior.
affix(x, position)+ +
| x | +A tag element or .style pronoun. |
+
|---|---|
| position | +One of |
+
alert.RdUse an alert element to let the user know of successes or to call attention +to problems.
+alert(..., dismissible = TRUE, fade = TRUE)+ +
| ... | +Character strings specifying the text of the alert or additional +named arguments passed as HTML attributes to the alert element. |
+
|---|---|
| dismissible | +One of |
+
| fade | +One of |
+
Other components:
+badge(),
+blockquote(),
+card(),
+collapsePane(),
+d1(),
+dropdown(),
+img(),
+jumbotron(),
+modal(),
+navContent(),
+popover(),
+pre(),
+toast()
+#> <div class="alert alert-dismissible fade show alert-primary" role="alert"> +#> Donec at pede. +#> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> +#> <span aria-hidden="true">×</span> +#> </button> +#> </div>+### A more complex alert + +alert( + .style %>% + background("warning"), + h4("Etiam vel tortor sodales"), + hr(), + p("Fusce commodo.") +)#> <div class="alert alert-dismissible fade show alert-warning" role="alert"> +#> <h4 class="alert-heading">Etiam vel tortor sodales</h4> +#> <hr/> +#> <p>Fusce commodo.</p> +#> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> +#> <span aria-hidden="true">×</span> +#> </button> +#> </div>+
background.RdUse background() to modify the background color of a tag element.
background(x, color)+ +
| x | +A tag element or .style pronoun. |
+
|---|---|
| color | +One of |
+
Other design utilities:
+active(),
+affix(),
+border(),
+display(),
+flex(),
+float(),
+font(),
+height(),
+margin(),
+padding(),
+scroll(),
+shadow(),
+width()
Input backgrounds will change differently according to the particular
+input. Changing the background of a buttonGroupInput() will change the
+background colors of the buttons in the group.
buttonGroupInput(
+ .style %>%
+ background("info"),
+ id = "flavors",
+ choices = c("Mint", "Strawberry", "Swirl"),
+ values = c("mint", "sberry", "swirl")
+)
+Another one.
+ +++### Modifying input elements + +checkbarInput( + .style %>% background("info"), + id = "bar1", + choices = c( + "Nunc rutrum turpis sed pede.", + "Etiam vel neque.", + "Lorem ipsum dolor sit amet." + ) +)#> <div class="yonder-checkbar btn-group btn-group-toggle d-flex bg-info" data-toggle="buttons" id="bar1"> +#> <label class="btn"> +#> <input type="checkbox" autocomplete="off" value="Nunc rutrum turpis sed pede."/> +#> Nunc rutrum turpis sed pede. +#> </label> +#> <label class="btn"> +#> <input type="checkbox" autocomplete="off" value="Etiam vel neque."/> +#> Etiam vel neque. +#> </label> +#> <label class="btn"> +#> <input type="checkbox" autocomplete="off" value="Lorem ipsum dolor sit amet."/> +#> Lorem ipsum dolor sit amet. +#> </label> +#> </div>+
badge.RdSmall highlighted content which scales to its parent's size. A badge may
+be dynamically updated with replaceContent(), in which case be sure to
+pass an id argument as part of ....
badge(...)+ +
| ... | +Named arguments passed as HTML attributes to the parent +element or tag elements passed as children to the parent element. |
+
|---|
ui <- container(
+ buttonInput(
+ id = "clicker",
+ label = list(
+ "Clicks",
+ badge(id = "counter") %>%
+ margin(left = 2) %>%
+ background("info")
+ )
+ )
+)
+
+server <- function(input, output) {
+ observe({
+ clicks <- if (is.null(input$clicker)) 0 else input$clicker
+ replaceContent("counter", clicks)
+ })
+}
+
+shinyApp(ui, server)
+
+
+ Other components:
+alert(),
+blockquote(),
+card(),
+collapsePane(),
+d1(),
+dropdown(),
+img(),
+jumbotron(),
+modal(),
+navContent(),
+popover(),
+pre(),
+toast()
++### Button & badge + +buttonInput( + .style %>% + background("primary"), + id = "counter", + label = "Count", + badge(3) %>% background("light") +)#> <button autocomplete="off" class="yonder-button btn btn-primary" id="counter" role="button" type="button"> +#> Count +#> <span class="badge badge-light">3</span> +#> </button>+
blockquote.RdStylized blockquotes, an updated builder function for <blockquote>.
blockquote(..., source = NULL, align = "left")+ +
| ... | +Any number of tags elements or character strings passed as child +elements or named arguments passed as HTML attributes to the parent +element. |
+
|---|---|
| source | +The quote source, use |
+
| align | +One of |
+
Other components:
+alert(),
+badge(),
+card(),
+collapsePane(),
+d1(),
+dropdown(),
+img(),
+jumbotron(),
+modal(),
+navContent(),
+popover(),
+pre(),
+toast()
++### Simple example + +blockquote( + "Anyone can love a thing because.", + "That's as easy as putting a penny in your pocket.", + "But to love something despite.", + "To know the flaws and love them too.", + "That is rare and pure and perfect.", + source = list( + "Patrick Rothfuss,", tags$cite("The Wise Man's Fear") + ) +)#> <blockquote class="blockquote"> +#> Anyone can love a thing because. +#> That's as easy as putting a penny in your pocket. +#> But to love something despite. +#> To know the flaws and love them too. +#> That is rare and pure and perfect. +#> <footer class="blockquote-footer"> +#> Patrick Rothfuss, +#> <cite>The Wise Man's Fear</cite> +#> </footer> +#> </blockquote>+
border.RdUse border() to add or modify tag element borders.
border(x, color = NULL, sides = "all", round = NULL)+ +
| x | +A tag element or .style pronoun. |
+
|---|---|
| color | +One of |
+
| sides | +One or more of |
+
| round | +One or more of |
+
buttonGroupInput.RdA set of buttons with custom values.
+buttonGroupInput( + ..., + id, + choices = NULL, + values = choices, + labels = deprecated(), + direction = "horizontal" +) + +updateButtonGroupInput( + id, + choices = NULL, + values = choices, + enable = NULL, + disable = NULL, + session = getDefaultReactiveDomain() +)+ +
| ... | +Additional named arguments passed as HTML attributes to the parent +element. |
+
|---|---|
| id | +A character string specifying the id of the reactive input. |
+
| choices | +A character vector specifying the labels for each button in +the group. |
+
| values | +A character vector specifying the values of each button in the
+group, defaults to |
+
| labels | +Deprecated, see |
+
| direction | +One of |
+
| enable | +One of |
+
| disable | +One of |
+
| session | +A reactive context, defaults to |
+
Other inputs:
+buttonInput(),
+checkbarInput(),
+checkboxInput(),
+chipInput(),
+fileInput(),
+formInput(),
+listGroupInput(),
+menuInput(),
+navInput(),
+radioInput(),
+radiobarInput(),
+rangeInput(),
+selectInput(),
+textInput()
++### Default input + +buttonGroupInput( + id = "group1", + choices = c("Once", "Twice", "Thrice"), + values = c(1, 2, 3) +)#> <div class="yonder-button-group btn-group" id="group1" role="group"> +#> <button type="button" class="btn" value="1">Once</button> +#> <button type="button" class="btn" value="2">Twice</button> +#> <button type="button" class="btn" value="3">Thrice</button> +#> </div>+### Styling the button group + +buttonGroupInput( + .style %>% + background("primary"), + id = "group2", + choices = c("Button 1", "Button 2", "Button 3") +)#> <div class="yonder-button-group btn-group btn-group-primary" id="group2" role="group"> +#> <button type="button" class="btn" value="Button 1">Button 1</button> +#> <button type="button" class="btn" value="Button 2">Button 2</button> +#> <button type="button" class="btn" value="Button 3">Button 3</button> +#> </div>+
buttonInput.RdButton inputs are useful as triggers for reactive or observer expressions.
+The reactive value of a button input begins as NULL, but subsequently is
+the number of clicks.
buttonInput(..., id, label, stretch = FALSE, download = FALSE, tooltip = NULL) + +updateButtonInput( + id, + label = NULL, + value = NULL, + disable = NULL, + enable = NULL, + tooltip = NULL, + session = getDefaultReactiveDomain() +) + +linkInput(..., id, label, stretch = FALSE, download = FALSE, tooltip = NULL) + +updateLinkInput( + id, + label = NULL, + value = NULL, + enable = NULL, + disable = NULL, + tooltip = NULL, + session = getDefaultReactiveDomain() +) + +tooltip(..., placement = "top", fade = TRUE)+ +
| ... | +Additional named arguments passed as HTML attributes to the parent +element. |
+
|---|---|
| id | +A character string specifying the id of the reactive input. |
+
| label | +A character string specifying the label text on the button or +link input. |
+
| stretch | +One of |
+
| download | +One of |
+
| tooltip | +A call to |
+
| value | +A number specifying a new value for the button, defaults to
+ |
+
| disable | +if |
+
| enable | +If |
+
| session | +A reactive context, defaults to |
+
| placement | +One of |
+
| fade | +One of |
+
Tooltips
+To remove a button or link input's tooltip pass an empty tooltip,
+tooltip(), to updateButtonInput() or updateLinkInput().
Other inputs:
+buttonGroupInput(),
+checkbarInput(),
+checkboxInput(),
+chipInput(),
+fileInput(),
+formInput(),
+listGroupInput(),
+menuInput(),
+navInput(),
+radioInput(),
+radiobarInput(),
+rangeInput(),
+selectInput(),
+textInput()
++### A plain button + +buttonInput( + id = "button1", + label = "Simple" +)#> <button class="yonder-button btn" type="button" role="button" id="button1" autocomplete="off">Simple</button>+### Add a little color + +buttonInput( + .style %>% + background("primary"), + id = "button2", + label = "Blue" +)#> <button autocomplete="off" class="yonder-button btn btn-primary" id="button2" role="button" type="button">Blue</button>+# Alternatively, a button can fill the width of its parent element. + +buttonInput( + .style %>% + background("danger"), + id = "button3", + label = "Full-width", + fill = TRUE # <- +)#> <button autocomplete="off" class="yonder-button btn btn-danger" fill="TRUE" id="button3" role="button" type="button">Full-width</button>+# Use design utilities to further adjust the width of a button. + +buttonInput( + .style %>% + background("danger") %>% + width(75), # <- + id = "button4", + label = "Full and back again", + fill = TRUE # <- +)#> <button autocomplete="off" class="yonder-button btn btn-danger w-75" fill="TRUE" id="button4" role="button" type="button">Full and back again</button>+### Reactive links + +div("Curabitur", linkInput(id = "link1", label = "vulputate"), + "vestibulum lorem.")#> <div> +#> Curabitur +#> <button class="yonder-link btn btn-link" id="link1">vulputate</button> +#> vestibulum lorem. +#> </div>+### Stretched buttons and links + +card( + header = "Card with stretched button", + p("Notice when you hover over the card, the button also detects ", + "the hover."), + buttonInput( + .style %>% + background("primary"), + id = "go", + label = "Go go go", + stretch = TRUE + ) +)#> <div class="card"> +#> <div class="card-header">Card with stretched button</div> +#> <div class="card-body"> +#> <p class="card-text"> +#> Notice when you hover over the card, the button also detects +#> the hover. +#> </p> +#> </div> +#> <div class="card-body"> +#> <button autocomplete="off" class="yonder-button btn stretched-link btn-primary" id="go" role="button" type="button">Go go go</button> +#> </div> +#> </div>+### Download button + +buttonInput( + download = TRUE, + id = "download1", + label = "Download", + icon("download") +)#> <a class="yonder-button btn shiny-download-link" type="button" role="button" href="" _target download id="download1" autocomplete="off"> +#> Download +#> <i class="fa fa-download"></i> +#> </a>+
card.RdCreate blocks of content with card. deck is used to group and add padding
+is placed around any number of cards. Additionally, grouping cards with
+deck has the benefit of aligning the footer of each card.
card(..., header = NULL, footer = NULL) + +deck(...)+ +
| ... | +For card, For deck, any number of |
+
|---|---|
| header | +A character string or tag element specifying the header of the
+card, defaults to |
+
| footer | +A character string or tag element specifying the footer of the
+card, defaults to |
+
Other components:
+alert(),
+badge(),
+blockquote(),
+collapsePane(),
+d1(),
+dropdown(),
+img(),
+jumbotron(),
+modal(),
+navContent(),
+popover(),
+pre(),
+toast()
+#> <div class="col-4"> +#> <div class="card"> +#> <div class="card-body"> +#> <p class="card-text">Praesent fermentum tempor tellus.</p> +#> </div> +#> </div> +#> </div>+### Adding a title, subtitle + +column( + width = 4, + card( + h5("Mauris mollis tincidunt felis."), + h6("Phasellus at dui in ligula mollis ultricies."), + p("Nullam tempus. Mauris mollis tincidunt felis."), + p("Nullam libero mauris, consequat quis, varius et, dictum id, arcu.") + ) +)#> <div class="col-4"> +#> <div class="card"> +#> <div class="card-body"> +#> <h5 class="card-title">Mauris mollis tincidunt felis.</h5> +#> </div> +#> <div class="card-body"> +#> <h6 class="card-subtitle">Phasellus at dui in ligula mollis ultricies.</h6> +#> </div> +#> <div class="card-body"> +#> <p class="card-text">Nullam tempus. Mauris mollis tincidunt felis.</p> +#> </div> +#> <div class="card-body"> +#> <p class="card-text">Nullam libero mauris, consequat quis, varius et, dictum id, arcu.</p> +#> </div> +#> </div> +#> </div>+### Styling cards + +deck( + card( + .style %>% + border("info") %>% + font("info"), + header = "Donec pretium posuere tellus", + p("Donec hendrerit tempor tellus."), + p("Cras placerat accumsan nulla.") + ), + card( + .style %>% + border("danger") %>% + font("danger"), + p("Aliquam posuere."), + p("Phasellus neque orci, porta a, aliquet quis, semper a, massa."), + p("Pellentesque dapibus suscipit ligula.") + ), + card( + .style %>% + background("dark") %>% + font("light"), + header = "Phasellus lacus", + p("Etiam laoreet quam sed arcu."), + p("Etiam vel tortor sodales tellus ultricies commodo."), + footer = "Nam euismod tellus id erat." + ) +)#> <div class="card-deck"> +#> <div class="card border border-info text-info"> +#> <div class="card-header">Donec pretium posuere tellus</div> +#> <div class="card-body"> +#> <p class="card-text">Donec hendrerit tempor tellus.</p> +#> </div> +#> <div class="card-body"> +#> <p class="card-text">Cras placerat accumsan nulla.</p> +#> </div> +#> </div> +#> <div class="card border border-danger text-danger"> +#> <div class="card-body"> +#> <p class="card-text">Aliquam posuere.</p> +#> </div> +#> <div class="card-body"> +#> <p class="card-text">Phasellus neque orci, porta a, aliquet quis, semper a, massa.</p> +#> </div> +#> <div class="card-body"> +#> <p class="card-text">Pellentesque dapibus suscipit ligula.</p> +#> </div> +#> </div> +#> <div class="card bg-dark text-light"> +#> <div class="card-header">Phasellus lacus</div> +#> <div class="card-body"> +#> <p class="card-text">Etiam laoreet quam sed arcu.</p> +#> </div> +#> <div class="card-body"> +#> <p class="card-text">Etiam vel tortor sodales tellus ultricies commodo.</p> +#> </div> +#> <div class="card-footer">Nam euismod tellus id erat.</div> +#> </div> +#> </div>+### Cards with list groups + +column( + width = 4, + card( + listGroupInput( + id = "lg1", + flush = TRUE, + choices = c( + "Pellentesque tristique imperdiet tortor.", + "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.", + "Phasellus purus." + ), + values = c( + "choice1", + "choice2", + "choice3" + ) + ) + ) +)#> <div class="col-4"> +#> <div class="card"> +#> <div class="yonder-list-group list-group list-group-flush" id="lg1"> +#> <button class="list-group-item list-group-item-action" value="choice1">Pellentesque tristique imperdiet tortor.</button> +#> <button class="list-group-item list-group-item-action" value="choice2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</button> +#> <button class="list-group-item list-group-item-action" value="choice3">Phasellus purus.</button> +#> </div> +#> </div> +#> </div>+### Tabbed content in cards + +card( + header = navInput( + id = "tabs", + choices = c("Tab 1", "Tab 2", "Tab 3"), + appearance = "tabs" + ), + navContent( + navPane( + "Phasellus purus.", + "Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus.", + "Phasellus purus." + ), + navPane( + "Donec at pede. Praesent augue.", + "Pellentesque tristique imperdiet tortor." + ), + navPane( + "Fusce suscipit, wisi nec facilisis facilisis,", + "est dui fermentum leo, quis tempor ligula erat quis odio.", + "Donec hendrerit tempor tellus." + ) + ) +)#> <div class="card"> +#> <div class="card-header"> +#> <ul class="yonder-nav nav nav-tabs card-header-tabs" id="tabs"> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link active" value="Tab 1">Tab 1</button> +#> </li> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link" value="Tab 2">Tab 2</button> +#> </li> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link" value="Tab 3">Tab 3</button> +#> </li> +#> </ul> +#> </div> +#> <div class="card-body"> +#> <div class="tab-content"> +#> <div class="tab-pane fade" role="tab-panel" id="Phasellus purus."> +#> Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus. +#> Phasellus purus. +#> </div> +#> <div class="tab-pane fade" role="tab-panel" id="Donec at pede. Praesent augue.">Pellentesque tristique imperdiet tortor.</div> +#> <div class="tab-pane fade" role="tab-panel" id="Fusce suscipit, wisi nec facilisis facilisis,"> +#> est dui fermentum leo, quis tempor ligula erat quis odio. +#> Donec hendrerit tempor tellus. +#> </div> +#> </div> +#> </div> +#> </div>+### Deck of cards + +deck( + card( + .style %>% + background("info"), + title = "Nullam tristique", + p("Fusce sagittis, libero non molestie mollis, magna orci ultrices ", + "dolor, at vulputate neque nulla lacinia eros."), + p("Nunc rutrum turpis sed pede."), + footer = "Cras placerat accumsan nulla." + ), + card( + .style %>% + background("dark"), + title = "Integer placerat", + p("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ", + "hendrerit tempor tellus."), + footer = "Cras placerat accumsan nulla." + ), + card( + .style %>% + background("primary"), + title = "Phasellus neque", + p("Donec at pede. Etiam vel neque nec dui dignissim bibendum."), + footer = "Cras placerat accumsan nulla." + ) +)#> <div class="card-deck"> +#> <div class="card bg-info" title="Nullam tristique"> +#> <div class="card-body"> +#> <p class="card-text"> +#> Fusce sagittis, libero non molestie mollis, magna orci ultrices +#> dolor, at vulputate neque nulla lacinia eros. +#> </p> +#> </div> +#> <div class="card-body"> +#> <p class="card-text">Nunc rutrum turpis sed pede.</p> +#> </div> +#> <div class="card-footer">Cras placerat accumsan nulla.</div> +#> </div> +#> <div class="card bg-dark" title="Integer placerat"> +#> <div class="card-body"> +#> <p class="card-text"> +#> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec +#> hendrerit tempor tellus. +#> </p> +#> </div> +#> <div class="card-footer">Cras placerat accumsan nulla.</div> +#> </div> +#> <div class="card bg-primary" title="Phasellus neque"> +#> <div class="card-body"> +#> <p class="card-text">Donec at pede. Etiam vel neque nec dui dignissim bibendum.</p> +#> </div> +#> <div class="card-footer">Cras placerat accumsan nulla.</div> +#> </div> +#> </div>+
checkbarInput.RdA stylized checkbox input. The checkbar input appears similar to a group of +buttons, but with a checked or highlighted state.
+checkbarInput(..., id, choices = NULL, values = choices, selected = NULL) + +updateCheckbarInput( + id, + choices = NULL, + values = choices, + selected = NULL, + enable = NULL, + disable = NULL, + session = getDefaultReactiveDomain() +)+ +
| ... | +Additional named arguments passed as HTML attributes to the +parent element or tag elements passed as child elements to the parent +element. |
+
|---|---|
| id | +A character string specifying the id of the reactive input. |
+
| choices | +A character vector or list of tag element specifying the
+input's choices, defaults to |
+
| values | +A vector of values specifying the values of the input's
+choices, defaults to |
+
| selected | +One or more of |
+
| enable | +One of |
+
| disable | +One of |
+
| session | +A reactive context, defaults to |
+
Other inputs:
+buttonGroupInput(),
+buttonInput(),
+checkboxInput(),
+chipInput(),
+fileInput(),
+formInput(),
+listGroupInput(),
+menuInput(),
+navInput(),
+radioInput(),
+radiobarInput(),
+rangeInput(),
+selectInput(),
+textInput()
+#> <div class="yonder-checkbar btn-group btn-group-toggle d-flex" id="cb1" data-toggle="buttons"> +#> <label class="btn"> +#> <input type="checkbox" autocomplete="off" value="When"/> +#> When +#> </label> +#> <label class="btn"> +#> <input type="checkbox" autocomplete="off" value="Why"/> +#> Why +#> </label> +#> <label class="btn"> +#> <input type="checkbox" autocomplete="off" value="Where"/> +#> Where +#> </label> +#> </div>+### Modifying background color + +checkbarInput( + id = "cb2", + choices = c("What", "Which") +) %>% + background("info")#> <div class="yonder-checkbar btn-group btn-group-toggle d-flex btn-group-info" id="cb2" data-toggle="buttons"> +#> <label class="btn"> +#> <input type="checkbox" autocomplete="off" value="What"/> +#> What +#> </label> +#> <label class="btn"> +#> <input type="checkbox" autocomplete="off" value="Which"/> +#> Which +#> </label> +#> </div>+### Labeling a checkbar + +formGroup( + label = "Toppings", + checkbarInput( + id = "fixins", + choices = c( + "Sprinkles", + "Nuts", + "Fudge" + ) + ) +)#> <div class="form-group"> +#> <label>Toppings</label> +#> <div class="yonder-checkbar btn-group btn-group-toggle d-flex" id="fixins" data-toggle="buttons"> +#> <label class="btn"> +#> <input type="checkbox" autocomplete="off" value="Sprinkles"/> +#> Sprinkles +#> </label> +#> <label class="btn"> +#> <input type="checkbox" autocomplete="off" value="Nuts"/> +#> Nuts +#> </label> +#> <label class="btn"> +#> <input type="checkbox" autocomplete="off" value="Fudge"/> +#> Fudge +#> </label> +#> </div> +#> </div>+
checkboxInput.RdReactive checkbox and checkbar inputs. Users may select one or more choices.
+The checkbox input appears as a standard checkbox or set of checkboxes. When
+a checkbox input has no selected choices the reactive value is NULL. Switch
+inputs differ from checkboxes only in appearance.
checkboxInput( + ..., + id, + choices = NULL, + values = choices, + selected = NULL, + inline = FALSE +) + +updateCheckboxInput( + id, + choices = NULL, + values = choices, + selected = NULL, + inline = FALSE, + enable = NULL, + disable = NULL, + valid = NULL, + invalid = NULL, + session = getDefaultReactiveDomain() +) + +switchInput(..., id, choices, values = choices, selected = NULL) + +updateSwitchInput( + id, + choices = NULL, + values = choices, + selected = NULL, + enable = NULL, + disable = NULL, + valid = NULL, + invalid = NULL, + session = getDefaultReactiveDomain() +)+ +
| ... | +Additional named arguments passed as HTML attributes to the +parent element or tag elements passed as child elements to the parent +element. |
+
|---|---|
| id | +A character string specifying the id of the reactive input. |
+
| choices | +A character string or vector specifying a label or labels for +the checkbox or checkbar. |
+
| values | +A character string or vector specifying values for the
+checkbox or checkbar input, defaults to |
+
| selected | +One or more of |
+
| inline | +One of |
+
| enable | +One of |
+
| disable | +One of |
+
| valid | +A character string specifying a message to the user indicating
+how the input's value is valid, defaults to |
+
| invalid | +A character string specifying a message to the user
+indicating how the input's value is invalid, defaults to |
+
| session | +A reactive context, defaults to |
+
Other inputs:
+buttonGroupInput(),
+buttonInput(),
+checkbarInput(),
+chipInput(),
+fileInput(),
+formInput(),
+listGroupInput(),
+menuInput(),
+navInput(),
+radioInput(),
+radiobarInput(),
+rangeInput(),
+selectInput(),
+textInput()
++### One option + +checkboxInput( + id = "checkbox1", + choices = "Choice 1", + selected = "Choice 1" +)#> <div class="yonder-checkbox" id="checkbox1"> +#> <div class="custom-control custom-checkbox"> +#> <input class="custom-control-input" type="checkbox" id="checkbox-173-407" name="checkbox-173-407" value="Choice 1" checked autocomplete="off"/> +#> <label class="custom-control-label" for="checkbox-173-407">Choice 1</label> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div> +#> </div>+### Multiple options + +checkboxInput( + id = "checkbox2", + choices = c("Choice 1", "Choice 2") +)#> <div class="yonder-checkbox" id="checkbox2"> +#> <div class="custom-control custom-checkbox"> +#> <input class="custom-control-input" type="checkbox" id="checkbox-460-63" name="checkbox-460-63" value="Choice 1" autocomplete="off"/> +#> <label class="custom-control-label" for="checkbox-460-63">Choice 1</label> +#> </div> +#> <div class="custom-control custom-checkbox"> +#> <input class="custom-control-input" type="checkbox" id="checkbox-485-870" name="checkbox-485-870" value="Choice 2" autocomplete="off"/> +#> <label class="custom-control-label" for="checkbox-485-870">Choice 2</label> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div> +#> </div>+### Inline checkbox + +checkboxInput( + id = "checkbox3", + choices = c("Choice 1", "Choice 2", "Choice 3"), + inline = TRUE +)#> <div class="yonder-checkbox" id="checkbox3"> +#> <div class="custom-control custom-checkbox custom-control-inline"> +#> <input class="custom-control-input" type="checkbox" id="checkbox-879-559" name="checkbox-879-559" value="Choice 1" autocomplete="off"/> +#> <label class="custom-control-label" for="checkbox-879-559">Choice 1</label> +#> </div> +#> <div class="custom-control custom-checkbox custom-control-inline"> +#> <input class="custom-control-input" type="checkbox" id="checkbox-927-452" name="checkbox-927-452" value="Choice 2" autocomplete="off"/> +#> <label class="custom-control-label" for="checkbox-927-452">Choice 2</label> +#> </div> +#> <div class="custom-control custom-checkbox custom-control-inline"> +#> <input class="custom-control-input" type="checkbox" id="checkbox-998-201" name="checkbox-998-201" value="Choice 3" autocomplete="off"/> +#> <label class="custom-control-label" for="checkbox-998-201">Choice 3</label> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div> +#> </div>+### Switches + +switchInput( + id = "switch1", + .style %>% background("success"), + choices = paste("Switch choice", 1:3), + selected = "Switch choice 3" +)#> <div class="yonder-checkbox custom-control-group-success" id="switch1"> +#> <div class="custom-control custom-switch"> +#> <input class="custom-control-input" type="checkbox" id="checkbox-197-517" name="checkbox-197-517" value="Switch choice 1" autocomplete="off"/> +#> <label class="custom-control-label" for="checkbox-197-517">Switch choice 1</label> +#> </div> +#> <div class="custom-control custom-switch"> +#> <input class="custom-control-input" type="checkbox" id="checkbox-767-536" name="checkbox-767-536" value="Switch choice 2" autocomplete="off"/> +#> <label class="custom-control-label" for="checkbox-767-536">Switch choice 2</label> +#> </div> +#> <div class="custom-control custom-switch"> +#> <input class="custom-control-input" type="checkbox" id="checkbox-847-77" name="checkbox-847-77" value="Switch choice 3" checked autocomplete="off"/> +#> <label class="custom-control-label" for="checkbox-847-77">Switch choice 3</label> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div> +#> </div>+
chipInput.RdThe chip input is a selectize alternative. Choices are selected from a
+dropdown menu and appear as chips below the input's text box. Chips do not
+appear in the order they are selected. Instead chips are shown in the order
+specified by the choices argument. Use the max argument to limit the
+number of choices a user may select.
chipInput( + id, + choices = NULL, + values = choices, + selected = NULL, + ..., + placeholder = NULL, + max = Inf, + inline = TRUE +) + +updateChipInput( + id, + choices = NULL, + values = choices, + selected = NULL, + max = NULL, + enable = NULL, + disable = NULL, + session = getDefaultReactiveDomain() +)+ +
| id | +A character string specifying the id of the reactive input. |
+
|---|---|
| choices | +A character vector or list specifying the possible choices. |
+
| values | +A character vector or list of strings specifying the input's
+values, defaults to |
+
| selected | +One or more of |
+
| ... | +Additional named arguments passed as HTML attributes to the +parent element or tag elements passed as child elements to the parent +element. |
+
| placeholder | +A character string specifying placeholder text of the
+chip input, defaults to |
+
| max | +A number specifying the maximum number of items a user may select,
+defaults to |
+
| inline | +One of |
+
| enable | +One of |
+
| disable | +One of |
+
| session | +A reactive context, defaults to |
+
ui <- container(
+ chipInput(
+ .style %>% width(50),
+ id = "chips",
+ choices = paste("Option number", 1:10),
+ values = 1:10,
+ inline = TRUE
+ )
+)
+
+server <- function(input, output) {
+
+}
+
+shinyApp(ui, server)
+ui <- container(
+ chipInput(
+ .style %>%
+ width(50) %>%
+ background("primary"),
+ id = "chips",
+ choices = c(
+ "A rather long option, isn't it?",
+ "Shorter",
+ "A middle-size option",
+ "One more"
+ ),
+ values = 1:4,
+ fill = FALSE
+ )
+)
+
+server <- function(input, output) {
+
+}
+
+shinyApp(ui, server)
+Other inputs:
+buttonGroupInput(),
+buttonInput(),
+checkbarInput(),
+checkboxInput(),
+fileInput(),
+formInput(),
+listGroupInput(),
+menuInput(),
+navInput(),
+radioInput(),
+radiobarInput(),
+rangeInput(),
+selectInput(),
+textInput()
++### Default input + +chipInput( + id = "chip1", + choices = paste("Choice", 1:5), + selected = c("Choice 3", "Choice 4") +)#> <div id="chip1" class="yonder-chip btn-group dropup" data-max="-1"> +#> <input class="form-control custom-select" data-toggle="dropdown"/> +#> <div class="dropdown-menu"> +#> <button class="dropdown-item" value="Choice 1">Choice 1</button> +#> <button class="dropdown-item" value="Choice 2">Choice 2</button> +#> <button class="dropdown-item selected" value="Choice 3">Choice 3</button> +#> <button class="dropdown-item selected" value="Choice 4">Choice 4</button> +#> <button class="dropdown-item" value="Choice 5">Choice 5</button> +#> </div> +#> <div class="chips chips-inline chips-grey"> +#> <button class="chip" value="Choice 1"> +#> <span class="chip-content">Choice 1</span> +#> <span class="chip-close">×</span> +#> </button> +#> <button class="chip" value="Choice 2"> +#> <span class="chip-content">Choice 2</span> +#> <span class="chip-close">×</span> +#> </button> +#> <button class="chip active" value="Choice 3"> +#> <span class="chip-content">Choice 3</span> +#> <span class="chip-close">×</span> +#> </button> +#> <button class="chip active" value="Choice 4"> +#> <span class="chip-content">Choice 4</span> +#> <span class="chip-close">×</span> +#> </button> +#> <button class="chip" value="Choice 5"> +#> <span class="chip-content">Choice 5</span> +#> <span class="chip-close">×</span> +#> </button> +#> </div> +#> </div>+
collapsePane.RdThe collapsePane() creates a collapsible container. The state of the
+container, expanded or collapsed, is toggled using showCollapsePane(),
+hideCollapsePane(), and toggleCollapsePane().
collapsePane(id, ..., show = FALSE, animate = TRUE) + +hideCollapsePane(id, session = getDefaultReactiveDomain()) + +showCollapsePane(id, session = getDefaultReactiveDomain()) + +toggleCollapsePane(id, session = getDefaultReactiveDomain())+ +
| id | +A character string specifying the id of the collapse pane. |
+
|---|---|
| ... | +Tag elements inside the collapsible pane or additional named +arguments passed as HTML attributes to parent element. |
+
| show | +One of |
+
| animate | +One of |
+
| session | +A reactive context, defaults to |
+
Padding may not be applied to the collapsible pane div element. To pad a +collapsible pane first wrap the pane in another element and add padding to +this new element.
+ui <- container(
+ buttonInput(
+ id = "demo",
+ label = "Toggle collapse"
+ ),
+ collapsePane(
+ id = "collapse",
+ p(
+ "Pellentesque condimentum, magna ut suscipit hendrerit, ",
+ "ipsum augue ornare nulla, non luctus diam neque sit amet urna."
+ ),
+ p(
+ "Praesent fermentum tempor tellus. Vestibulum convallis, ",
+ "lorem a tempus semper, dui dui euismod elit, vitae placerat ",
+ "urna tortor vitae lacus."
+ )
+ )
+)
+
+server <- function(input, output) {
+ observeEvent(input$demo, {
+ toggleCollapsePane("collapse")
+ })
+}
+
+shinyApp(ui, server)
+Other components:
+alert(),
+badge(),
+blockquote(),
+card(),
+d1(),
+dropdown(),
+img(),
+jumbotron(),
+modal(),
+navContent(),
+popover(),
+pre(),
+toast()
++### Examples + +# As these are server-side utilities, please run the example applications +# above. + +
column.RdThese functions are the foundation of any application. Grid elements are
+nested as follows: container() > columns() > column() ~ column(). A
+column() may be created with an explicit width, 1 through 12. To fit a
+column automatically to its content use width = "content". To divide the
+space in a row evenly amongst all columns use width = "equal". For examples
+and usage tips see the sections below.
column(..., width = "equal") + +columns(...) + +container(..., centered = FALSE)+ +
| ... | +Any number of tags elements passed as child elements or named +arguments passed as HTML attributes to the parent element. |
+
|---|---|
| width | +A responsive argument. One of |
+
| centered | +One of |
+
++### Equal width columns + +container( + columns( + column( + "Aliquam erat volutpat." + ), + column( + "Mauris mollis tincidunt felis." + ), + column( + "Cum sociis natoque penatibus et magnis dis parturient montes,", + "nascetur ridiculus mus." + ) + ) +)#> <div class="container-fluid"> +#> <div class="row"> +#> <div class="col">Aliquam erat volutpat.</div> +#> <div class="col">Mauris mollis tincidunt felis.</div> +#> <div class="col"> +#> Cum sociis natoque penatibus et magnis dis parturient montes, +#> nascetur ridiculus mus. +#> </div> +#> </div> +#> </div>+### Shiny's panel with sidebar layout + +container( + columns( + column( + width = 4, + card( + title = "Sidebar", + formGroup( + label = "Control 1", + selectInput("control1", "...") + ), + formGroup( + label = "Control 2", + selectInput("control2", "...") + ), + formGroup( + label = "Control 3", + selectInput("control3", "...") + ) + ) + ), + column( + d4("Main panel") + ) + ) +)#> <div class="container-fluid"> +#> <div class="row"> +#> <div class="col-4"> +#> <div class="card" title="Sidebar"> +#> <div class="card-body"> +#> <div class="form-group"> +#> <label>Control 1</label> +#> <div class="yonder-select" id="control1"> +#> <input type="text" class="form-control custom-select" data-toggle="dropdown" data-boundary="window" placeholder="..."/> +#> <div class="dropdown-menu"> +#> <button class="dropdown-item active" value="...">...</button> +#> </div> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div> +#> </div> +#> </div> +#> <div class="card-body"> +#> <div class="form-group"> +#> <label>Control 2</label> +#> <div class="yonder-select" id="control2"> +#> <input type="text" class="form-control custom-select" data-toggle="dropdown" data-boundary="window" placeholder="..."/> +#> <div class="dropdown-menu"> +#> <button class="dropdown-item active" value="...">...</button> +#> </div> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div> +#> </div> +#> </div> +#> <div class="card-body"> +#> <div class="form-group"> +#> <label>Control 3</label> +#> <div class="yonder-select" id="control3"> +#> <input type="text" class="form-control custom-select" data-toggle="dropdown" data-boundary="window" placeholder="..."/> +#> <div class="dropdown-menu"> +#> <button class="dropdown-item active" value="...">...</button> +#> </div> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div> +#> </div> +#> </div> +#> </div> +#> </div> +#> <div class="col"> +#> <h1 class="display-4">Main panel</h1> +#> </div> +#> </div> +#> </div>+### Mobile friendly grids + +# Use `column()`s [responsive] `width` argument to make mobile friendly +# applications. + +container( + columns( + column( + width = c(sm = 4), + "Mauris ac felis vel velit tristique imperdiet." + ), + column( + width = c(sm = 4), + "Nam vestibulum accumsan nisl." + ), + column( + width = c(sm = 4), + "Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus." + ) + ) +)#> <div class="container-fluid"> +#> <div class="row"> +#> <div class="col-sm-4">Mauris ac felis vel velit tristique imperdiet.</div> +#> <div class="col-sm-4">Nam vestibulum accumsan nisl.</div> +#> <div class="col-sm-4">Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus.</div> +#> </div> +#> </div>+# or + +container( + columns( + column( + width = c(sm = 4), + "Aenean in sem ac leo mollis blandit." + ), + column( + width = c(sm = 8), + "Nulla posuere. In id erat non orci commodo lobortis." + ) + ) +)#> <div class="container-fluid"> +#> <div class="row"> +#> <div class="col-sm-4">Aenean in sem ac leo mollis blandit.</div> +#> <div class="col-sm-8">Nulla posuere. In id erat non orci commodo lobortis.</div> +#> </div> +#> </div>+### Fit columns to their content + +container( + columns( + column(), + column( + width = "content", + "Cras placerat accumsan nulla. Aenean in sem ac leo mollis blandit." + ), + column() + ) +)#> <div class="container-fluid"> +#> <div class="row"> +#> <div class="col"></div> +#> <div class="col-auto">Cras placerat accumsan nulla. Aenean in sem ac leo mollis blandit.</div> +#> <div class="col"></div> +#> </div> +#> </div>+
d1.RdDisplay headings are not meant to replace the standard HTML heading tags, +they are a stand out alternative for eye-catching titles.
+d1(...) + +d2(...) + +d3(...) + +d4(...)+ +
| ... | +Any number of character strings or tag elements or named arguments +passed as HTML attributes to the parent element. |
+
|---|
Other components:
+alert(),
+badge(),
+blockquote(),
+card(),
+collapsePane(),
+dropdown(),
+img(),
+jumbotron(),
+modal(),
+navContent(),
+popover(),
+pre(),
+toast()
++### d1 + +d1("Eye-catching!")#> <h1 class="display-1">Eye-catching!</h1>+### d2 + +d2("Just incredible")#> <h1 class="display-2">Just incredible</h1>+### d3 + +d3("Wowie, zowie")#> <h1 class="display-3">Wowie, zowie</h1>+### d4 + +d4("You'll never guess what happens next.")#> <h1 class="display-4">You'll never guess what happens next.</h1>+
display.RdUse the display() utility to adjust how a tag element is rendered. All
+arguments are responsive allowing you to hide elements on small screens or
+convert elements from inline to block on large screens.
display(x, type)+ +
| x | +A tag element or .style pronoun. |
+
|---|---|
| type | +A responsive argument. One of |
+
dot-style.RdThe .style pronoun allows you to define styles for a tag element within the
+context of the element. Prior to the introduction of the .style pronoun tag
+styles were always applied outside or after constructing a tag element.
card() %>% background("primary") %>% display("flex")
+However, once the content of a tag element grows to more than a few lines,
+associating the element's styles with the element becomes increasingly
+unintuitive. In these situations, make use of the .style pronoun.
card(
+ .style %>%
+ border("primary") %>%
+ font("primary")
+)
+.style
+
+
+
+ dropdown.RdDropdown menus are a container for buttons, text, and form inputs. See
+argument ... for details on composing dropdown menus.
dropdown(label, ..., direction = "down", align = "left")+ +
| label | +A character string specifying the label of the dropdown's +button. |
+
|---|---|
| ... | +Character strings or vectors, header tag elements, button inputs,
+or form inputs specifying the elements of the dropdown. These elements may
+be grouped into lists to create a menu with sections. Additional named arguments are passed as HTML attributes to the parent +element. |
+
| direction | +One of |
+
| align | +One of |
+
Other components:
+alert(),
+badge(),
+blockquote(),
+card(),
+collapsePane(),
+d1(),
+img(),
+jumbotron(),
+modal(),
+navContent(),
+popover(),
+pre(),
+toast()
++### Dropdown with buttons + +dropdown( + label = "Choices", + buttonInput(id = "choice1", label = "Choice 1"), + buttonInput(id = "choice2", label = "Choice 2"), + buttonInput(id = "choice3", label = "Choice 3") +)#> <div class="dropdown"> +#> <button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspop="true" aria-expanded="false">Choices</button> +#> <div class="dropdown-menu"> +#> <button autocomplete="off" class="yonder-button btn dropdown-item" id="choice1" role="button" type="button">Choice 1</button> +#> <button autocomplete="off" class="yonder-button btn dropdown-item" id="choice2" role="button" type="button">Choice 2</button> +#> <button autocomplete="off" class="yonder-button btn dropdown-item" id="choice3" role="button" type="button">Choice 3</button> +#> </div> +#> </div>+### Dropdown with links + +dropdown( + label = "Choices", + linkInput(id = "link1", label = "Choice 1"), + linkInput(id = "link2", label = "Choice 2") +)#> <div class="dropdown"> +#> <button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspop="true" aria-expanded="false">Choices</button> +#> <div class="dropdown-menu"> +#> <button class="yonder-link btn btn-link dropdown-item" id="link1">Choice 1</button> +#> <button class="yonder-link btn btn-link dropdown-item" id="link2">Choice 2</button> +#> </div> +#> </div>+### Grouped sections + +dropdown( + label = "Sections", + h6("Section 1"), + buttonInput(id = "a", label = "Option A"), + buttonInput(id = "b", label = "Option B"), + hr(), + h6("Section 2"), + buttonInput(id = "c", label = "Option C"), + buttonInput(id = "d", label = "Option D") +)#> <div class="dropdown"> +#> <button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspop="true" aria-expanded="false">Sections</button> +#> <div class="dropdown-menu"> +#> <h6 class="dropdown-header">Section 1</h6> +#> <button autocomplete="off" class="yonder-button btn dropdown-item" id="a" role="button" type="button">Option A</button> +#> <button autocomplete="off" class="yonder-button btn dropdown-item" id="b" role="button" type="button">Option B</button> +#> <div class="dropdown-divider"></div> +#> <h6 class="dropdown-header">Section 2</h6> +#> <button autocomplete="off" class="yonder-button btn dropdown-item" id="c" role="button" type="button">Option C</button> +#> <button autocomplete="off" class="yonder-button btn dropdown-item" id="d" role="button" type="button">Option D</button> +#> </div> +#> </div>+### Direction variations + +dropdown( + label = "Up!", + direction = "up", + buttonInput(id = "up1", label = "Choice 1"), + buttonInput(id = "up2", label = "Choice 2") +)#> <div class="dropdown dropup"> +#> <button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspop="true" aria-expanded="false">Up!</button> +#> <div class="dropdown-menu"> +#> <button autocomplete="off" class="yonder-button btn dropdown-item" id="up1" role="button" type="button">Choice 1</button> +#> <button autocomplete="off" class="yonder-button btn dropdown-item" id="up2" role="button" type="button">Choice 2</button> +#> </div> +#> </div>+### Dropdowns with forms + +dropdown( + label = "Sign in", + formInput( + id = "login", + formGroup( + label = "Username / Email", + textInput( + type = "email", + id = "user" + ) + ), + formGroup( + label = "Password", + textInput( + type = "password", + id = "pass" + ) + ), + formSubmit( + label = "Sign in", + value = "signin" + ) + ) %>% + padding(3, 4, 3, 4) +)#> <div class="dropdown"> +#> <button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspop="true" aria-expanded="false">Sign in</button> +#> <div class="dropdown-menu"> +#> <form class="yonder-form p-3 pt-4 pr-3 pb-4" id="login"> +#> <div class="form-group"> +#> <label>Username / Email</label> +#> <div class="yonder-textual" id="user"> +#> <input class="form-control" type="email" autocomplete="off"/> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div> +#> </div> +#> <div class="form-group"> +#> <label>Password</label> +#> <div class="yonder-textual" id="pass"> +#> <input class="form-control" type="password" autocomplete="off"/> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div> +#> </div> +#> <button class="yonder-form-submit btn btn-blue" value="signin">Sign in</button> +#> </form> +#> </div> +#> </div>+
fieldset.RdUse fieldset to associate and label inputs. This is good for screen readers
+and other assistive technologies.
fieldset(..., legend = NULL)+ +
| ... | +Any number of inputs to group or named arguments passed as HTML +attributes to the parent element. |
+
|---|---|
| legend | +A character string specifying the fieldset's legend. |
+
++### Grouping related inputs + +fieldset( + legend = "Pizza order", + formGroup( + "What toppings would you like?", + div( + checkbarInput( + id = "toppings", + choices = c( + "Cheese", + "Black olives", + "Mushrooms" + ) + ) + ) + ), + formGroup( + "Is this for delivery?", + checkboxInput( + id = "deliver", + choice = "Deliver" + ) + ), + buttonInput( + .style %>% background("primary"), + id = "order", + label = "Place order" + ) +)#> <fieldset class="form-group"> +#> <legend class="col-form-legend">Pizza order</legend> +#> <div> +#> <div class="form-group"> +#> <label>What toppings would you like?</label> +#> <div> +#> <div class="yonder-checkbar btn-group btn-group-toggle d-flex" id="toppings" data-toggle="buttons"> +#> <label class="btn"> +#> <input type="checkbox" autocomplete="off" value="Cheese"/> +#> Cheese +#> </label> +#> <label class="btn"> +#> <input type="checkbox" autocomplete="off" value="Black olives"/> +#> Black olives +#> </label> +#> <label class="btn"> +#> <input type="checkbox" autocomplete="off" value="Mushrooms"/> +#> Mushrooms +#> </label> +#> </div> +#> </div> +#> </div> +#> <div class="form-group"> +#> <label>Is this for delivery?</label> +#> <div class="yonder-checkbox" id="deliver" choice="Deliver"></div> +#> </div> +#> <button autocomplete="off" class="yonder-button btn btn-primary" id="order" role="button" type="button">Place order</button> +#> </div> +#> </fieldset>+
fileInput.RdUpload files to the server.
+fileInput( + id, + placeholder = "Choose file", + browse = "Browse", + ..., + multiple = TRUE, + accept = NULL +)+ +
| id | +A character string specifying the id of the reactive input. |
+
|---|---|
| placeholder | +A character string specifying the text inside the file
+input, defaults to |
+
| browse | +A character string specifying the label of file input, defaults
+to |
+
| ... | +Additional named arguments passed as HTML attributes to the +parent element or tag elements passed as child elements to the parent +element. |
+
| multiple | +One of |
+
| accept | +A character vector of possible MIME types or file extensions,
+defaults to |
+
shinyApp(
+ ui = container(
+ fileInput("upload") %>%
+ margin(0, "auto", 0, "auto")
+ ),
+ server = function(input, output) {
+ observe({
+ req(input$upload)
+
+ print(input$upload)
+ })
+ }
+)
+Other inputs:
+buttonGroupInput(),
+buttonInput(),
+checkbarInput(),
+checkboxInput(),
+chipInput(),
+formInput(),
+listGroupInput(),
+menuInput(),
+navInput(),
+radioInput(),
+radiobarInput(),
+rangeInput(),
+selectInput(),
+textInput()
++### Standard file input + +fileInput(id = "file1")#> <div class="yonder-file custom-file" id="file1"> +#> <input type="file" class="custom-file-input" multiple autocomplete="off"/> +#> <label class="custom-file-label" data-browse="Browse">Choose file</label> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div>+### Adding a button + +fileInput( + id = "file2", + left = buttonInput(id = "upload", label = "Upload") %>% + background("success") +)#> <div class="yonder-file custom-file" id="file2" left="<button class="yonder-button btn btn-success" type="button" role="button" id="upload" autocomplete="off">Upload</button>"> +#> <input type="file" class="custom-file-input" multiple autocomplete="off"/> +#> <label class="custom-file-label" data-browse="Browse">Choose file</label> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div>+### Customizing text + +fileInput( + id = "file3", + placeholder = "Pick a file", + browse = "Go go go!" +)#> <div class="yonder-file custom-file" id="file3"> +#> <input type="file" class="custom-file-input" multiple autocomplete="off"/> +#> <label class="custom-file-label" data-browse="Go go go!">Pick a file</label> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div>+
flex.RdUse flex() to control how a flex container tag element places its flex
+items or child tag elements. For more on turning a tag element into a flex
+container see display(). By default tag elements within a flex container
+are treated as flex items.
flex( + x, + direction = NULL, + justify = NULL, + align = NULL, + wrap = NULL, + reverse = NULL +)+ +
| x | +A tag element or .style pronoun. |
+
|---|---|
| direction | +A responsive argument. One of |
+
| justify | +A responsive argument. One of |
+
| align | +A responsive argument. One of |
+
| wrap | +A responsive argument. One of |
+
| reverse | +A responsive argument. One of |
+
Other design utilities:
+active(),
+affix(),
+background(),
+border(),
+display(),
+float(),
+font(),
+height(),
+margin(),
+padding(),
+scroll(),
+shadow(),
+width()
++### Different `direction`s + +# Many of `flex()`'s arguments are viewport responsive and below we will see +# how useful this can be. On small screens the flex items are placed +# vertically and can occupy the full width of the mobile device. On medium +# or larger screens the items are placed horizontally once again. + +div( + .style %>% + display("flex") %>% + flex( + direction = list(xs = "column", md = "row") # <- + ) %>% + background("secondary") %>% + border(), + div("A flex item") %>% + padding(3) %>% + border(), + div("A flex item") %>% + padding(3) %>% + border(), + div("A flex item") %>% + padding(3) %>% + border() +)#> <div class="d-flex flex-column flex-md-row bg-secondary border"> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> </div>+# *Resize the browser for this example.* + +# You can keep items as a column by specifying only `"column"`. + +div( + .style %>% + display("flex") %>% + flex("column"), # <- + div("A flex item") %>% + padding(3) %>% + border(), + div("A flex item") %>% + padding(3) %>% + border(), + div("A flex item") %>% + padding(3) %>% + border() +)#> <div class="d-flex flex-column"> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> </div>+### Spacing items with `justify` + +# Below is a series of examples showing how to change the horizontal +# alignment of your flex items. Let's start by pushing items to the +# beginning of their parent container. + +div( + replicate( + div("A flex item") %>% + padding(3) %>% + border(), + n = 5, + simplify = FALSE + ) +) %>% + display("flex") %>% + flex(justify = "start") # <-#> <div class="d-flex justify-content-start"> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> </div>+# We can also push items to the **end**. + +div( + replicate( + div("A flex item") %>% + padding(3) %>% + border(), + n = 5, + simplify = FALSE + ) +) %>% + display("flex") %>% + flex(justify = "end") # <-#> <div class="d-flex justify-content-end"> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> </div>+# Without using a table layout we can **center** items. + +div( + replicate( + div("A flex item") %>% + padding(3) %>% + border(), + n = 5, + simplify = FALSE + ) +) %>% + display("flex") %>% + flex(justify = "center") # <-#> <div class="d-flex justify-content-center"> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> </div>+# You can also put space **between** items + +div( + replicate( + div("A flex item") %>% + padding(3) %>% + border(), + n = 5, + simplify = FALSE + ) +) %>% + display("flex") %>% + flex(justify = "between") # <-#> <div class="d-flex justify-content-between"> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> </div>+# ... or put space **around** items. + +div( + replicate( + div("A flex item") %>% + padding(3) %>% + border(), + n = 5, + simplify = FALSE + ) +) %>% + display("flex") %>% + flex(justify = "around") # <-#> <div class="d-flex justify-content-around"> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> <div class="p-3 border">A flex item</div> +#> </div>+# *The "between" and "around" values come from the original CSS values +# "space-between" and "space-around".* + +### Wrap onto new lines + +# Using flexbox we can also control how items wrap onto new lines. + +div( + .style %>% + display("flex") %>% + flex(wrap = TRUE), + replicate( + div("A flex item") %>% + padding(3) %>% + margin(1) %>% + border(), + n = 10, + simplify = FALSE + ) +)#> <div class="d-flex flex-wrap"> +#> <div class="p-3 m-1 border">A flex item</div> +#> <div class="p-3 m-1 border">A flex item</div> +#> <div class="p-3 m-1 border">A flex item</div> +#> <div class="p-3 m-1 border">A flex item</div> +#> <div class="p-3 m-1 border">A flex item</div> +#> <div class="p-3 m-1 border">A flex item</div> +#> <div class="p-3 m-1 border">A flex item</div> +#> <div class="p-3 m-1 border">A flex item</div> +#> <div class="p-3 m-1 border">A flex item</div> +#> <div class="p-3 m-1 border">A flex item</div> +#> </div>+
float.RdUse float() to float an element to the left or right side of its parent
+element. A newspaper layout is a classic example where an image is floated
+with text wrapped around.
float(x, side)+ +
| x | +A tag element or .style pronoun. |
+
|---|---|
| side | +A responsive argument. One of |
+
Other design utilities:
+active(),
+affix(),
+background(),
+border(),
+display(),
+flex(),
+font(),
+height(),
+margin(),
+padding(),
+scroll(),
+shadow(),
+width()
++### Float an alert + +div( + .style %>% + padding(2), + alert("This just in!") %>% + margin(3) %>% + background("warning") %>% + float("left"), + p("Fusce commodo. Nullam tempus. Nunc rutrum turpis sed pede.", + "Phasellus lacus. Cras placerat accumsan nulla.", + "Fusce sagittis, libero non molestie mollis, ", + "magna orci ultrices dolor, at vulputate neque nulla lacinia eros."), + p("Nulla facilisis, risus a rhoncus fermentum, tellus tellus", + "lacinia purus, et dictum nunc justo sit amet elit."), + p("Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus.", + "Aliquam posuere.", + "Sed id ligula quis est convallis tempor."), + p("Fusce dapibus, tellus ac cursus commodo, ", + "tortor mauris condimentum nibh, ut fermentum massa justo sit", + "amet risus.") +)#> <div class="p-2"> +#> <div class="alert alert-dismissible fade show m-3 alert-warning float-left" role="alert"> +#> This just in! +#> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> +#> <span aria-hidden="true">×</span> +#> </button> +#> </div> +#> <p> +#> Fusce commodo. Nullam tempus. Nunc rutrum turpis sed pede. +#> Phasellus lacus. Cras placerat accumsan nulla. +#> Fusce sagittis, libero non molestie mollis, +#> magna orci ultrices dolor, at vulputate neque nulla lacinia eros. +#> </p> +#> <p> +#> Nulla facilisis, risus a rhoncus fermentum, tellus tellus +#> lacinia purus, et dictum nunc justo sit amet elit. +#> </p> +#> <p> +#> Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus. +#> Aliquam posuere. +#> Sed id ligula quis est convallis tempor. +#> </p> +#> <p> +#> Fusce dapibus, tellus ac cursus commodo, +#> tortor mauris condimentum nibh, ut fermentum massa justo sit +#> amet risus. +#> </p> +#> </div>+
font.RdThe font() utility modifies the color, size, weight, case, or alignment of
+a tag element's text. All arguments default to NULL, in which case they are
+ignored. For example, font(.., size = "lg") increases font size without
+affecting color, weight, case, or alignment.
font(x, color = NULL, size = NULL, weight = NULL, case = NULL, align = NULL)+ +
| x | +A tag element or .style pronoun. |
+
|---|---|
| color | +One of |
+
| size | +Deprecated, in future versions of bootstrap resonsive font sizing +will be enabled by default, +https://github.com/twbs/bootstrap/pull/29152. +One of |
+
| weight | +One of |
+
| case | +One of |
+
| align | +A responsive argument. One of |
+
Other design utilities:
+active(),
+affix(),
+background(),
+border(),
+display(),
+flex(),
+float(),
+height(),
+margin(),
+padding(),
+scroll(),
+shadow(),
+width()
++### Changing text color + +card( + .style %>% + font("primary") %>% + border("primary"), + header = h3("Important!"), + p("This is a reminder.") +)#> <div class="card text-primary border border-primary"> +#> <div class="card-header"> +#> <h3>Important!</h3> +#> </div> +#> <div class="card-body"> +#> <p class="card-text">This is a reminder.</p> +#> </div> +#> </div>+### Changing font weight + +p("Curabitur lacinia pulvinar nibh.") %>% + font(weight = "bold")#> <p class="font-weight-bold">Curabitur lacinia pulvinar nibh.</p>+p("Proin quam nisl, tincidunt et.") %>% + font(weight = "light")#> <p class="font-weight-light">Proin quam nisl, tincidunt et.</p>+
formGroup.RdForm groups are a way of labeling an input. Form rows are similar to
+columns()s, but include additional styles intended for forms. The
+flexibility provided by form rows and groups means you can confidently
+develop shiny applications for devices and screens of varying sizes.
formGroup(label, input, ..., help = NULL, width = NULL) + +formRow(...)+ +
| label | +A character string specifying a label for the input or |
+
|---|---|
| input | +A tag element specifying the input to label. |
+
| ... | +For formGroup, additional named arguments passed as HTML +attributes to the parent element. +For formRow, any number of |
+
| help | +A character string specifying help text for the input, defaults
+to |
+
| width | +A responsive argument. One of |
+
++### Grid layout forms + +# Use responsive arguments to adjust form layouts based on viewport size. +# Be sure to adjust the size of your browser window between large and small. + +card( + .style %>% + background("secondary") %>% + margin(3), + formRow( + formGroup( + width = c(md = 6), # <- + label = "Username", + textInput( + id = "user" + ) + ), + formGroup( + width = c(md = 6), # <- + label = "Password", + textInput( + type = "password", + id = "pass" + ) + ) + ), + formGroup( + label = "Username", + groupTextInput( + id = "username", + left = "@" + ) + ), + buttonInput( + id = "go", + label = "Go!" + ) %>% + background("primary") +)#> <div class="card bg-secondary m-3"> +#> <div class="card-body"> +#> <div class="form-row"> +#> <div class="form-group col-md-6"> +#> <label>Username</label> +#> <div class="yonder-textual" id="user"> +#> <input class="form-control" type="text" autocomplete="off"/> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div> +#> </div> +#> <div class="form-group col-md-6"> +#> <label>Password</label> +#> <div class="yonder-textual" id="pass"> +#> <input class="form-control" type="password" autocomplete="off"/> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div> +#> </div> +#> </div> +#> </div> +#> <div class="card-body"> +#> <div class="form-group"> +#> <label>Username</label> +#> <div class="yonder-group-text input-group" id="username"> +#> <div class="input-group-prepend"> +#> <span class="input-group-text">@</span> +#> </div> +#> <input type="text" class="form-control" autocomplete="off"/> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div> +#> </div> +#> </div> +#> <div class="card-body"> +#> <button class="yonder-button btn btn-primary" type="button" role="button" id="go" autocomplete="off">Go!</button> +#> </div> +#> </div>+
formInput.RdForm inputs are a new reactive input. Form inputs are an alternative to +shiny's submit buttons. A form input is comprised of any number of inputs. +The value of these inputs will not change until a form submit button within +the form input is clicked. A form input's reactive value depends on the +clicked form submit button. This allows you to distinguish between different +form submission types, think "login" versus "register".
+A form submit button, formSubmit(), is a special type of button used to
+control form input submission. A form input and its child reactive inputs
+will never update if a form submit button is not included in ... passed
+to formInput().
formInput(id, ..., inline = FALSE) + +formSubmit(label, value = label, ...) + +updateFormInput(id, submit = FALSE, session = getDefaultReactiveDomain())+ +
| id | +A character string specifying the id of the reactive input. |
+
|---|---|
| ... | +Any number of unnamed arguments passed as child elements to the
+parent form element or named arguments passed as HTML attributes to the
+parent element. At least one |
+
| inline | +One of |
+
| label | +A character string specifying the label of the form submit +button. |
+
| value | +A character string specifying the value of the form submit
+button and the value of the form input when the button is clicked,
+defaults to |
+
| submit | +One of |
+
| session | +A reactive context, defaults to |
+
When inline is TRUE you may want to adjust the right margin of each child
+element for viewports larger than mobile, margin(<TAG>, right = c(sm = 2)),
+see margin(). You only need to apply extra space for larger viewports
+because inline forms do not take effect on small viewports.
Use updateFormInput() to submit a form input. This will cause all the form's
+child inputs to update.
ui <- container(
+ formInput(
+ id = "login",
+ formGroup(
+ label = "Username",
+ textInput(
+ id = "user"
+ )
+ ),
+ formGroup(
+ label = "Password",
+ textInput(
+ type = "password",
+ id = "pass"
+ )
+ ),
+ formSubmit(
+ label = "Login",
+ value = "login"
+ )
+ )
+)
+
+server <- function(input, output) {
+ # Will not react until the form submit button is
+ # clicked.
+ observe({
+ print(input$email)
+ print(input$password)
+ })
+}
+
+shinyApp(ui, server)
+Other inputs:
+buttonGroupInput(),
+buttonInput(),
+checkbarInput(),
+checkboxInput(),
+chipInput(),
+fileInput(),
+listGroupInput(),
+menuInput(),
+navInput(),
+radioInput(),
+radiobarInput(),
+rangeInput(),
+selectInput(),
+textInput()
++### A simple form + +card( + header = "Please pick a flavor", + formInput( + id = "form1", + formGroup( + label = "Ice creams", + radioInput( + id = "flavor", + choices = c("Mint", "Moose tracks", "Marble"), + ) + ), + formSubmit("Make choice", "choice") %>% + background("info") + ) +) %>% + border("info") %>% + width(50)#> <div class="card border border-info w-50"> +#> <div class="card-header">Please pick a flavor</div> +#> <div class="card-body"> +#> <form class="yonder-form" id="form1"> +#> <div class="form-group"> +#> <label>Ice creams</label> +#> <div class="yonder-radio" id="flavor"> +#> <div class="custom-control custom-radio"> +#> <input class="custom-control-input" type="radio" id="radio-898-446" name="flavor" value="Mint" checked autocomplete="off"/> +#> <label class="custom-control-label" for="radio-898-446">Mint</label> +#> </div> +#> <div class="custom-control custom-radio"> +#> <input class="custom-control-input" type="radio" id="radio-567-427" name="flavor" value="Moose tracks" autocomplete="off"/> +#> <label class="custom-control-label" for="radio-567-427">Moose tracks</label> +#> </div> +#> <div class="custom-control custom-radio"> +#> <input class="custom-control-input" type="radio" id="radio-62-555" name="flavor" value="Marble" autocomplete="off"/> +#> <label class="custom-control-label" for="radio-62-555">Marble</label> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div> +#> </div> +#> </div> +#> <button class="yonder-form-submit btn btn-blue bg-info" value="choice">Make choice</button> +#> </form> +#> </div> +#> </div>+
height.RdUtility function to change a tag element's height. Heights are specified +relative the height of a parent element, an element's content, or the +size of the browser window.
+height(x, size)+ +
| x | +A tag element or .style pronoun. |
+
|---|---|
| size | +A character string or number specifying the height of the tag +element. Possible values: +One of 25, 50, 75, 100 specifying the element's height as a +percentage of its parent's height. The height of the parent element must +also be specified. Percentages do not account for margins or padding and +may cause an element to extend beyond its parent element. +
|
+
img.RdA small update to tags$img and tags$figure. Create responsive images with
+img. figure has specific arguments for an image child element and image
+caption.
img(src, ...) + +figure(image, caption = NULL, ...)+ +
| src | +A character string specifying the source of the image. |
+
|---|---|
| ... | +Additional tag elements or named arguments passed as HTML attributes +to the parent element. |
+
| image | +An |
+
| caption | +A character string specifying the image caption, defaults to
+ |
+
Other components:
+alert(),
+badge(),
+blockquote(),
+card(),
+collapsePane(),
+d1(),
+dropdown(),
+jumbotron(),
+modal(),
+navContent(),
+popover(),
+pre(),
+toast()
Build out your user interfaces.
+alert()
+ + Alert boxes +
+badge()
+ + Badges +
+blockquote()
+ + Blockquotes +
++ Collapsible panes +
+dropdown()
+ + Dropdown menus +
+fieldset()
+ + Group and label multiple inputs +
+jumbotron()
+ + Jumbotron +
++ Modal dialogs +
+navbar()
+ + Navigation bar +
++ Navigation panes +
++ Popovers +
+pre()
+ + Scrollable code snippets +
++ Toasts +
+Customize components and inputs.
+.style
+ + Style pronoun +
+active()
+ + Selected choice color +
+affix()
+ + Fixed position elements +
+background()
+ + Backgrounds +
+border()
+ + Border colors +
+display()
+ + Display +
+float()
+ + Floats +
+font()
+ + Font color, size, weight +
+height()
+ + Height +
+margin()
+ + Margins +
+padding()
+ + Padding +
+scroll()
+ + Vertical and horizontal scroll +
+shadow()
+ + Shadows +
+width()
+ + Width +
+Get information from the user with reactive inputs.
++ Button group inputs +
++ Button and link inputs +
++ Checkbar input +
++ Checkbox and switch inputs +
+chipInput()
+ updateChipInput()
+ + Chip inputs +
+fileInput()
+ + File inputs +
++ Form inputs +
++ List group inputs +
+menuInput()
+ updateMenuInput()
+ + Menu inputs +
+navInput()
+ updateNavInput()
+ + Page navigation inputs +
++ Radio inputs +
++ Radiobar inputs +
++ Range input +
++ Select inputs +
++ Text inputs +
+Build user interfaces for devices of all sizes.
++ Grid layout +
+flex()
+ + Flex layout +
+formGroup()
+ formRow()
+ + Input labels, help text, and formatting to inputs +
+responsive
+ + Understanding responsive arguments +
+webpage()
+ + User interface +
+Assorted tools for more possibilities.
++ Dynamic content +
+jumbotron.RdA showcase banner, good for front or splash pages.
+jumbotron(..., title = NULL, subtitle = NULL)+ +
| ... | +Tag elements passed as child elements or named arguments passed as +HTML attributes to the parent element. |
+
|---|---|
| title | +A character string specifying a title for the jumbotron,
+defaults to |
+
| subtitle | +A character string specifying a subtitle for the jumbotron,
+defaults to |
+
Other components:
+alert(),
+badge(),
+blockquote(),
+card(),
+collapsePane(),
+d1(),
+dropdown(),
+img(),
+modal(),
+navContent(),
+popover(),
+pre(),
+toast()
++### Landing page welcome + +jumbotron( + title = "Welcome, welcome!", + subtitle = "Here we are showcasing the very showcase itself.", + tags$p( + "Now let's talk more about that superb new feature." + ) +)#> <div class="jumbotron"> +#> <h1 class="display-3">Welcome, welcome!</h1> +#> <p class="lead">Here we are showcasing the very showcase itself.</p> +#> <hr class="my-4"/> +#> <p>Now let's talk more about that superb new feature.</p> +#> </div>+
listGroupInput.RdList group inputs are an actionable list of items. They behave similarly to +checkboxes or radios, that is, users may select one or more items from the +list. However, list group items may include highly variable content.
+listGroupInput( + ..., + id, + choices = NULL, + values = choices, + selected = NULL, + layout = "vertical", + flush = FALSE +) + +updateListGroupInput( + id, + choices = NULL, + values = choices, + selected = NULL, + enable = NULL, + disable = NULL, + session = getDefaultReactiveDomain() +)+ +
| ... | +Additional named arguments passed as HTML attributes to the +parent element or tag elements passed as child elements to the parent +element. |
+
|---|---|
| id | +A character string specifying the id of the reactive input. |
+
| choices | +A vector of character strings or list of tag elements specifying +the content of the list group's items. |
+
| values | +A character vector specifying the values of the list items,
+defaults to |
+
| selected | +One or more of |
+
| layout | +A responsive argument. One of |
+
| flush | +One of |
+
| enable | +One of |
+
| disable | +One of |
+
| session | +A reactive context, defaults to |
+
A list group can also control a set of panes. Be sure to set multiple = FALSE. This layout is reminiscent of a table of contents.
ui <- container(
+ columns(
+ column(
+ width = 3,
+ listGroupInput(
+ id = "nav",
+ selected = "pane1",
+ choices = c(
+ "Item 1",
+ "Item 2",
+ "Item 3"
+ ),
+ values = c(
+ "pane1",
+ "pane2",
+ "pane3"
+ )
+ )
+ ),
+ column(
+ navContent(
+ navPane(
+ id = "pane1",
+ p("Pellentesque tristique imperdiet tortor.")
+ ),
+ navPane(
+ id = "pane2",
+ p("Sed bibendum. Donec pretium posuere tellus.")
+ ),
+ navPane(
+ id = "pane3",
+ p("Pellentesque tristique imperdiet tortor.")
+ )
+ )
+ )
+ )
+)
+
+server <- function(input, output) {
+ observeEvent(input$nav, {
+ showPane(input$nav)
+ })
+}
+
+shinyApp(ui, server)
+Other inputs:
+buttonGroupInput(),
+buttonInput(),
+checkbarInput(),
+checkboxInput(),
+chipInput(),
+fileInput(),
+formInput(),
+menuInput(),
+navInput(),
+radioInput(),
+radiobarInput(),
+rangeInput(),
+selectInput(),
+textInput()
+#> <div class="yonder-list-group list-group" id="list1"> +#> <button class="list-group-item list-group-item-action" value="Item 1">Item 1</button> +#> <button class="list-group-item list-group-item-action" value="Item 2">Item 2</button> +#> <button class="list-group-item list-group-item-action" value="Item 3">Item 3</button> +#> <button class="list-group-item list-group-item-action" value="Item 4">Item 4</button> +#> <button class="list-group-item list-group-item-action" value="Item 5">Item 5</button> +#> </div>+### List group within a card + +card( + header = h6("Pick an item"), + listGroupInput( + id = "list2", + flush = TRUE, + choices = paste("Item", 1:5), + ) +)#> <div class="card"> +#> <div class="card-header"> +#> <h6>Pick an item</h6> +#> </div> +#> <div class="yonder-list-group list-group list-group-flush" id="list2"> +#> <button class="list-group-item list-group-item-action" value="Item 1">Item 1</button> +#> <button class="list-group-item list-group-item-action" value="Item 2">Item 2</button> +#> <button class="list-group-item list-group-item-action" value="Item 3">Item 3</button> +#> <button class="list-group-item list-group-item-action" value="Item 4">Item 4</button> +#> <button class="list-group-item list-group-item-action" value="Item 5">Item 5</button> +#> </div> +#> </div>+### Horizontal list group + +listGroupInput( + id = "list3", + choices = paste("Item", 1:4), + layout = "horizontal" +)#> <div class="yonder-list-group list-group list-group-horizontal" id="list3"> +#> <button class="list-group-item list-group-item-action" value="Item 1">Item 1</button> +#> <button class="list-group-item list-group-item-action" value="Item 2">Item 2</button> +#> <button class="list-group-item list-group-item-action" value="Item 3">Item 3</button> +#> <button class="list-group-item list-group-item-action" value="Item 4">Item 4</button> +#> </div>+
margin.RdThe margin utilty changes the outer spacing of a tag element. The margin of
+a tag element is the space outside and around the tag element, its border,
+and its content. All arguments default to NULL, in which case they are
+ignored.
margin(x, all = NULL, top = NULL, right = NULL, bottom = NULL, left = NULL)+ +
| x | +A tag element or .style pronoun. |
+
|---|---|
| all, top, right, bottom, left | +A responsive argument. One of |
+
Other design utilities:
+active(),
+affix(),
+background(),
+border(),
+display(),
+flex(),
+float(),
+font(),
+height(),
+padding(),
+scroll(),
+shadow(),
+width()
++### Centering an element + +# In most modern browsers you want to horizontally center a tag element using +# the flex layout. Alternatively, you can horizontally center an element +# using `margin(.., right = "auto", left = "auto")`. + +div( + "Nam a sapien. Integer placerat tristique nisl.", + style = "height: 100px; width: 200px;" +) %>% + margin(top = 2, r = "auto", b = 2, l = "auto") %>% # <- + padding(3) %>% + background("info")#> <div style="height: 100px; width: 200px;" class="pt-2 pr-auto pb-2 ml-auto p-3 bg-info">Nam a sapien. Integer placerat tristique nisl.</div>+### Building an inline form + +# Inline form elements automatically use the flex layout providing you a +# means of creating condensed sets of inputs. However, you may need to adjust +# the spacing of the form's child elements. + +# Here is an inline form without any additional spacing applied. + +formInput( + id = "form1", + inline = TRUE, + textInput( + id = "name", + placeholder = "Full name" + ), + groupTextInput( + id = "username", + left = "@", + placeholder = "Username" + ), + checkboxInput( + id = "remember", + choice = "Remember me" + ), + formSubmit("Login", "login") +)#> <form class="yonder-form form-inline" id="form1"> +#> <div class="yonder-textual" id="name"> +#> <input class="form-control" type="text" placeholder="Full name" autocomplete="off"/> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div> +#> <div class="yonder-group-text input-group" id="username"> +#> <div class="input-group-prepend"> +#> <span class="input-group-text">@</span> +#> </div> +#> <input type="text" class="form-control" placeholder="Username" autocomplete="off"/> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div> +#> <div class="yonder-checkbox" id="remember" choice="Remember me"></div> +#> <button class="yonder-form-submit btn btn-blue" value="login">Login</button> +#> </form>+# Without any adjustments the layout is not great. But, with some styling we +# can make this form sparkle. Notice we are also adjusting the default submit +# button added to the form input. + +formInput( + id = "form2", + inline = TRUE, + textInput( + id = "name", + placeholder = "Full name" + ) %>% + margin(r = c(sm = 2), b = 2), # <- + groupTextInput( + id = "username", + left = "@", + placeholder = "Username" + ) %>% + margin(r = c(sm = 2), b = 2), # <- + checkboxInput( + id = "remember", + choice = "Remember me" + ) %>% + margin(r = c(sm = 2), b = 2), # <- + formSubmit( + label = "Login", + value = "login" + ) %>% + margin(b = 2) # <- +)#> <form class="yonder-form form-inline" id="form2"> +#> <div class="yonder-textual pr-sm-2 pb-2" id="name"> +#> <input class="form-control" type="text" placeholder="Full name" autocomplete="off"/> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div> +#> <div class="yonder-group-text input-group pr-sm-2 pb-2" id="username"> +#> <div class="input-group-prepend"> +#> <span class="input-group-text">@</span> +#> </div> +#> <input type="text" class="form-control" placeholder="Username" autocomplete="off"/> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div> +#> <div class="yonder-checkbox pr-sm-2 pb-2" id="remember" choice="Remember me"></div> +#> <button class="yonder-form-submit btn btn-blue pb-2" value="login">Login</button> +#> </form>+
menuInput.RdA toggleable dropdown menu input. Menu inputs may be used as standalone
+reactive inputs or within a navInput(). For building custom, more complex
+dropdown elements please see dropdown().
menuInput( + id, + label, + choices = NULL, + values = choices, + selected = NULL, + ..., + direction = "down", + align = "left" +) + +updateMenuInput( + id, + label = NULL, + choices = NULL, + values = choices, + selected = NULL, + enable = NULL, + disable = NULL, + session = getDefaultReactiveDomain() +)+ +
| id | +A character string specifying the id of the reactive input. |
+
|---|---|
| label | +A character string or tag element specifying the label of the +menu's toggle button. |
+
| choices | +A character vector specifying the choice text of the menu's +items. |
+
| values | +A character vector specifying the values of the menu's items,
+defaults to |
+
| selected | +One or more of |
+
| ... | +Additional named arguments passed as HTML attributes to the +parent element or tag elements passed as child elements to the parent +element. |
+
| direction | +One of |
+
| align | +One or |
+
| enable | +One of |
+
| disable | +One of |
+
| session | +A reactive context, defaults to |
+
Other inputs:
+buttonGroupInput(),
+buttonInput(),
+checkbarInput(),
+checkboxInput(),
+chipInput(),
+fileInput(),
+formInput(),
+listGroupInput(),
+navInput(),
+radioInput(),
+radiobarInput(),
+rangeInput(),
+selectInput(),
+textInput()
++### A simple menu + +menuInput( + id = "menu1", + label = "Menu", + choices = c( + "Choice 1", + "Choice 2", + "Choice 3" + ) +)#> <div class="yonder-menu dropdown" id="menu1"> +#> <button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</button> +#> <div class="dropdown-menu"> +#> <button class="dropdown-item" type="button" value="Choice 1">Choice 1</button> +#> <button class="dropdown-item" type="button" value="Choice 2">Choice 2</button> +#> <button class="dropdown-item" type="button" value="Choice 3">Choice 3</button> +#> </div> +#> </div>+### Use in navigation + +navInput( + id = "nav1", + choices = list( + "Tab 1", + menuInput( + id = "navOptions", + label = "Tab 2", + choices = c( + "Option 1", + "Option 2", + "Option 3" + ) + ), + "Tab 3", + "Tab 4" + ), + values = paste0("tab", 1:4) +)#> <ul class="yonder-nav nav" id="nav1"> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link active" value="tab1">Tab 1</button> +#> </li> +#> <li class="yonder-menu dropdown nav-item" id="navOptions"> +#> <button class="btn dropdown-toggle nav-link btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" value="tab2">Tab 2</button> +#> <div class="dropdown-menu"> +#> <button class="dropdown-item" type="button" value="Option 1">Option 1</button> +#> <button class="dropdown-item" type="button" value="Option 2">Option 2</button> +#> <button class="dropdown-item" type="button" value="Option 3">Option 3</button> +#> </div> +#> </li> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link" value="tab3">Tab 3</button> +#> </li> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link" value="tab4">Tab 4</button> +#> </li> +#> </ul>+
modal.RdModals are a flexible alert window, which disable interaction with the page
+behind them. Modals may include inputs, buttons, or simply text. Each modal
+may be assigned an id. By default hideModal() will hide all modals, but
+you may instead specify a modal's id in which case only that modal is
+closed. Additionally, when id is not NULL observers and reactives may
+watch for the modal's close event.
modal( + id, + ..., + header = NULL, + footer = NULL, + center = FALSE, + size = "md", + fade = TRUE +) + +showModal(modal, session = getDefaultReactiveDomain()) + +closeModal(id = NULL, session = getDefaultReactiveDomain())+ +
| id | +A character string specifying the id of the modal, when closed
+ |
+
|---|---|
| ... | +Unnamed values passed as tag elements to the body of the modal. +or named values passed as HTML attributes to the body element of the +modal. |
+
| header | +A character string or tag element specifying the header of the +modal. |
+
| footer | +A character string or tag element specifying the footer of the +modal. |
+
| center | +One of |
+
| size | +One of |
+
| fade | +One of |
+
| modal | +A modal tag element created using |
+
| session | +A reactive context, defaults to |
+
ui <- container(
+ buttonInput(
+ id = "open",
+ "Open modal",
+ icon("plus")
+ )
+)
+
+server <- function(input, output) {
+ modal1 <- modal(
+ title = "A simple modal",
+ p(
+ "Cras mattis consectetur purus sit amet fermentum.",
+ "Cras justo odio, dapibus ac facilisis in, egestas",
+ "eget quam. Morbi leo risus, porta ac consectetur",
+ "ac, vestibulum at eros."
+ )
+ )
+
+ observeEvent(input$open, ignoreInit = TRUE, {
+ showModal(modal1)
+ })
+}
+
+shinyApp(ui, server)
+Other components:
+alert(),
+badge(),
+blockquote(),
+card(),
+collapsePane(),
+d1(),
+dropdown(),
+img(),
+jumbotron(),
+navContent(),
+popover(),
+pre(),
+toast()
++### Simple modal + +modal( + id = "simple", + header = h5("Title"), + p("Cras placerat accumsan nulla.") +)#> <div class="yonder-modal modal fade" id="simple" tabindex="-1" role="dialog"> +#> <div class="modal-dialog" role="document"> +#> <div class="modal-content"> +#> <div class="modal-header"> +#> <h5 class="modal-title">Title</h5> +#> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> +#> <span aria-hidden="true">×</span> +#> </button> +#> </div> +#> <div class="modal-body"> +#> <p>Cras placerat accumsan nulla.</p> +#> </div> +#> </div> +#> </div> +#> </div>+### Modal with container body + +modal( + id = "more_complex", + size = "lg", + header = h5("More complex"), + container( + columns( + column("Cras placerat accumsan nulla."), + column("Curabitur lacinia pulvinar nibh."), + column( + "Aliquam posuere.", + "Praesent fermentum tempor tellus." + ) + ) + ) +)#> <div class="yonder-modal modal fade" id="more_complex" tabindex="-1" role="dialog"> +#> <div class="modal-dialog modal-lg" role="document"> +#> <div class="modal-content"> +#> <div class="modal-header"> +#> <h5 class="modal-title">More complex</h5> +#> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> +#> <span aria-hidden="true">×</span> +#> </button> +#> </div> +#> <div class="modal-body"> +#> <div class="container-fluid"> +#> <div class="row"> +#> <div class="col">Cras placerat accumsan nulla.</div> +#> <div class="col">Curabitur lacinia pulvinar nibh.</div> +#> <div class="col"> +#> Aliquam posuere. +#> Praesent fermentum tempor tellus. +#> </div> +#> </div> +#> </div> +#> </div> +#> </div> +#> </div> +#> </div>+
navContent.RdThese functions pair with navInput(). Use navContent() and navPane() to
+create the pane layout. To show a new pane use showNavPane() from within an
+observer. showNavPane() will also hide a previously active pane. If needed
+you can hide an active pane with hideNavPane(). hideNavPane() is useful
+when you do not have a new pane to show, but want to hide the current active
+pane.
navContent(...) + +navPane(id, ..., fade = TRUE) + +showNavPane(id, session = getDefaultReactiveDomain()) + +hideNavPane(id, session = getDefaultReactiveDomain())+ +
| ... | +For navContent, any number of nav panes passed as child +elements to the nav parent element or named arguments passed as HTML +attributes to the parent element. +For navPane, any number of unnamed arguments passed as tag elements to +the parent element or named arguments passed as HTML elements to the +parent element. |
+
|---|---|
| id | +A character string specifying the id of the nav pane. |
+
| fade | +One of |
+
| session | +A reactive context, defaults to |
+
ui <- container(
+ navInput(
+ id = "tabs",
+ choices = paste("Tab", 1:3),
+ values = paste0("pane", 1:3),
+ appearance = "pills"
+ ),
+ navContent(
+ navPane(
+ id = "pane1",
+ "Nullam tristique diam non turpis.",
+ "Cum sociis natoque penatibus et magnis dis parturient montes, ",
+ "nascetur ridiculus mus.",
+ "Etiam laoreet quam sed arcu.",
+ "Curabitur vulputate vestibulum lorem."
+ ),
+ navPane(
+ id = "pane2",
+ "Praesent fermentum tempor tellus.",
+ "Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus.",
+ "Phasellus lacus.",
+ "Nam euismod tellus id erat."
+ ),
+ navPane(
+ id = "pane3",
+ "Nullam eu ante vel est convallis dignissim.",
+ "Phasellus at dui in ligula mollis ultricies.",
+ "Fusce suscipit, wisi nec facilisis facilisis, est dui ",
+ "fermentum leo, quis tempor ligula erat quis odio.",
+ "Donec hendrerit tempor tellus."
+ )
+ )
+)
+
+server <- function(input, output) {
+ observeEvent(input$tabs, {
+ showNavPane(input$tabs)
+ })
+}
+
+shinyApp(ui, server)
+ui <- container(
+ navInput(
+ id = "tabs",
+ choices = list(
+ "Tab 1",
+ dropdown(
+ label = "Tab 2",
+ buttonInput("action", "Action"),
+ buttonInput("another", "Another action")
+ ),
+ "Tab 3"
+ ),
+ values = paste0("pane", 1:3),
+ appearance = "tabs"
+ ),
+ navContent(
+ navPane(
+ id = "pane1",
+ "Donec at pede.",
+ "Pellentesque tristique imperdiet tortor.",
+ "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
+ ),
+ navPane(
+ id = "pane2",
+ "Nullam tristique diam non turpis.",
+ "Cras placerat accumsan nulla.",
+ "Donec at pede."
+ ),
+ navPane(
+ id = "pane3",
+ "Phasellus purus.",
+ "Etiam laoreet quam sed arcu.",
+ "Donec pretium posuere tellus."
+ )
+ )
+)
+
+server <- function(input, output) {
+ observeEvent(input$tabs, {
+ showNavPane(input$tabs)
+ })
+
+ observeEvent(c(input$action, input$another), {
+ if (input$action > 0 || input$another > 0) {
+ showNavPane("pane2")
+ }
+ })
+}
+
+shinyApp(ui, server)
+ui <- container(
+ navInput(
+ id = "tabs",
+ choices = paste("Tab", 1:3),
+ values = paste0("pane", 1:3)
+ ),
+ columns(
+ column(
+ navContent(
+ navPane(
+ id = "pane1_1",
+ "Aenean eu leo quam. Pellentesque ornare sem lacinia quam ",
+ "venenatis vestibulum. Praesent commodo cursus magna, vel ",
+ "scelerisque nisl consectetur et. Vivamus sagittis lacus vel ",
+ "augue laoreet rutrum faucibus dolor auctor."
+ ),
+ navPane(
+ id = "pane2_1",
+ "Nullam quis risus eget urna mollis ornare vel eu leo. ",
+ "Maecenas faucibus mollis interdum. Praesent commodo cursus ",
+ "magna, vel scelerisque nisl consectetur et."
+ ),
+ navPane(
+ id = "pane3_1",
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. ",
+ "Vivamus sagittis lacus vel augue laoreet rutrum faucibus ",
+ "dolor auctor. Etiam porta sem malesuada magna mollis euismod."
+ )
+ )
+ ),
+ column(
+ navContent(
+ navPane(
+ id = "pane1_2",
+ "Aenean eu leo quam. Pellentesque ornare sem lacinia quam ",
+ "venenatis vestibulum. Praesent commodo cursus magna, vel ",
+ "scelerisque nisl consectetur et. Vivamus sagittis lacus vel ",
+ "augue laoreet rutrum faucibus dolor auctor."
+ ),
+ navPane(
+ id = "pane2_2",
+ "Nullam quis risus eget urna mollis ornare vel eu leo. ",
+ "Maecenas faucibus mollis interdum. Praesent commodo cursus ",
+ "magna, vel scelerisque nisl consectetur et."
+ ),
+ navPane(
+ id = "pane3_2",
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. ",
+ "Vivamus sagittis lacus vel augue laoreet rutrum faucibus ",
+ "dolor auctor. Etiam porta sem malesuada magna mollis euismod."
+ )
+ )
+ )
+ )
+)
+
+server <- function(input, output) {
+ observeEvent(input$tabs, {
+ showNavPane(paste0(input$tabs, "_1"))
+ showNavPane(paste0(input$tabs, "_2"))
+ })
+}
+
+shinyApp(ui, server)
+Other components:
+alert(),
+badge(),
+blockquote(),
+card(),
+collapsePane(),
+d1(),
+dropdown(),
+img(),
+jumbotron(),
+modal(),
+popover(),
+pre(),
+toast()
++### Examples + +# Because these are server-side utilities please see the example applications +# above. + +
navInput.RdA reactive input styled as a navigation control. The navigation input can be
+styled as links, tabs, or pills. A nav input is paired with navContent()
+and showNavPane() to create tabbed user interfaces. Observers and reactives
+are triggered when a nav choice or menu item is clicked. The reactive value
+of a nav input is NULL or a singleton character string. The value of any
+menus in the nav input must be retrieved with its own reactive id.
navInput( + id, + choices = NULL, + values = choices, + selected = values[[1]], + ..., + appearance = "links", + fill = FALSE +) + +updateNavInput( + id, + choices = NULL, + values = choices, + selected = NULL, + enable = NULL, + disable = NULL, + session = getDefaultReactiveDomain() +)+ +
| id | +A character string specifying the id of the reactive input. |
+
|---|---|
| choices | +A character vector or list of tag elements specifying the +navigation items of the input. |
+
| values | +A character vector specifying the values of the input's
+chocies, defaults to |
+
| selected | +One of |
+
| ... | +Additional named arguments passed as HTML attributes to the +parent element or tag elements passed as child elements to the parent +element. |
+
| appearance | +One of |
+
| fill | +One of |
+
| enable | +One of |
+
| disable | +One of |
+
| session | +A reactive context, defaults to |
+
Use the reactive id of any nav menus to know when a menu item is clicked.
ui <- navInput(
+ id = "navigation",
+ choices = list(
+ "Item 1",
+ "Item 2",
+ menuInput(
+ id = "navMenu", # <-
+ label = "Item 3",
+ choices = c("Choice 1", "Choice 2")
+ )
+ ),
+ values = c("item1", "item2", "item3")
+)
+
+server <- function(input, output) {
+ observeEvent(input$navMenu, {
+ cat(paste("Click menu item:", input$navMenu, "\n"))
+ })
+}
+
+shinyApp(ui, server)
+Other inputs:
+buttonGroupInput(),
+buttonInput(),
+checkbarInput(),
+checkboxInput(),
+chipInput(),
+fileInput(),
+formInput(),
+listGroupInput(),
+menuInput(),
+radioInput(),
+radiobarInput(),
+rangeInput(),
+selectInput(),
+textInput()
++### Nav styled as tabs + +navInput( + id = "tabs1", + choices = c( + "Tab 1", + "Tab 2", + "Tab 3" + ), + selected = "Tab 1", + appearance = "tabs" +)#> <ul class="yonder-nav nav nav-tabs" id="tabs1"> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link active" value="Tab 1">Tab 1</button> +#> </li> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link" value="Tab 2">Tab 2</button> +#> </li> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link" value="Tab 3">Tab 3</button> +#> </li> +#> </ul>+### Nav styled as pills + +navInput( + id = "tabs2", + choices = paste("Tab", 1:3), + selected = "Tab 1", + appearance = "pills" +)#> <ul class="yonder-nav nav nav-pills" id="tabs2"> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link active" value="Tab 1">Tab 1</button> +#> </li> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link" value="Tab 2">Tab 2</button> +#> </li> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link" value="Tab 3">Tab 3</button> +#> </li> +#> </ul>+### Nav with dropdown + +navInput( + id = "tabs3", + choices = list( + "Tab 1", + menuInput( + id = "menu1", + label = "Tab 2", + choices = c( + "Action", + "Another action" + ) + ), + "Tab 2" + ), + values = c("tab1", "tab2", "tab3") +)#> <ul class="yonder-nav nav" id="tabs3"> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link active" value="tab1">Tab 1</button> +#> </li> +#> <li class="yonder-menu dropdown nav-item" id="menu1"> +#> <button class="btn dropdown-toggle nav-link btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" value="tab2">Tab 2</button> +#> <div class="dropdown-menu"> +#> <button class="dropdown-item" type="button" value="Action">Action</button> +#> <button class="dropdown-item" type="button" value="Another action">Another action</button> +#> </div> +#> </li> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link" value="tab3">Tab 2</button> +#> </li> +#> </ul>+### Full width nav input + +navInput( + id = "tabs4", + choices = paste("Tab", 1:5), + values = paste0("tab", 1:5), + appearance = "pills", + fill = TRUE +)#> <ul class="yonder-nav nav nav-fill nav-pills" id="tabs4"> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link active" value="tab1">Tab 1</button> +#> </li> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link" value="tab2">Tab 2</button> +#> </li> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link" value="tab3">Tab 3</button> +#> </li> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link" value="tab4">Tab 4</button> +#> </li> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link" value="tab5">Tab 5</button> +#> </li> +#> </ul>+### Centering a nav input + +navInput( + id = "tabs5", + choices = paste("Tab", 1:3) +) %>% + flex(justify = "center")#> <ul class="yonder-nav nav justify-content-center" id="tabs5"> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link active" value="Tab 1">Tab 1</button> +#> </li> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link" value="Tab 2">Tab 2</button> +#> </li> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link" value="Tab 3">Tab 3</button> +#> </li> +#> </ul>+
navbar.RdAdd a navigation bar to your application with navbar(). Navigation bars may
+include a tab toggle (useful for multi-page applications), inline forms
+(perhaps a search feature or login item), or character strings to add simple
+text. Navbars are responsive and will collapse on small screens, think mobile
+device. A button is automatically added to toggle between the collapsed and
+expanded states.
navbar(..., brand = NULL, collapse = NULL)+ +
| ... | +A tab toggle, inline forms, or text to add to include as part of +the navigation bar. |
+
|---|---|
| brand | +A tag element or text placed on the left end of the navbar,
+defaults to |
+
| collapse | +One of |
+
++### Navbar with tabs + +div( + navbar( + brand = "Navbar", + navInput( + id = "tabs", + choices = c("Home", "About", "Our process") + ) %>% + margin(right = "auto"), + formInput( + inline = TRUE, + id = "navForm", + textInput( + type = "search", + id = "site_search", + placeholder = "Search" + ) %>% + margin(right = c(sm = 2)), + formSubmit( + label = "Search", + value = "search" + ) %>% + background("warning") + ) + ) %>% + background("info"), + container( + navContent( + navPane( + h3("Home") + ), + navPane( + h3("About") + ), + navPane( + h3("The process") + ) + ) + ) +)#> <div> +#> <nav class="navbar navbar-expand navbar-light bg-info"> +#> <a class="navbar-brand" href="#">Navbar</a> +#> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content-773-469" aria-controls="nav-content-773-469" aria-expanded="false" aria-label="Toggle navigation"> +#> <span class="navbar-toggler-icon"></span> +#> </button> +#> <div class="collapse navbar-collapse" id="nav-content-773-469"> +#> <ul class="yonder-nav nav pr-auto navbar-nav" id="tabs"> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link active" value="Home">Home</button> +#> </li> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link" value="About">About</button> +#> </li> +#> <li class="nav-item"> +#> <button class="nav-link btn btn-link" value="Our process">Our process</button> +#> </li> +#> </ul> +#> </div> +#> </nav> +#> <div class="container-fluid"> +#> <div class="tab-content"> +#> <div class="tab-pane fade" role="tab-panel" id="<h3>Home</h3>"></div> +#> <div class="tab-pane fade" role="tab-panel" id="<h3>About</h3>"></div> +#> <div class="tab-pane fade" role="tab-panel" id="<h3>The process</h3>"></div> +#> </div> +#> </div> +#> </div>+
padding.RdThe padding utility changes the inner spacing of a tag element. The padding
+of a tag element is the space between the tag element's border and its
+content or child elements. All arguments default to NULL, in which case
+they are ignored.
padding(x, all = NULL, top = NULL, right = NULL, bottom = NULL, left = NULL)+ +
| x | +A tag element or .style pronoun. |
+
|---|---|
| all, top, right, bottom, left | +A responsive argument. One of |
+
popover.RdPopovers are small windows of content associated with a tag element. Use
+popover() to construct the element and showPopover() to add it to any tag
+element with an HTML id. Popovers are great for explaining inputs and giving
+hints to the users. Popovers are hidden with closePopover().
popover(..., title = NULL) + +showPopover( + id, + popover, + placement = "top", + duration = NULL, + session = getDefaultReactiveDomain() +) + +closePopover(id, session = getDefaultReactiveDomain())+ +
| ... | +Character strings or tag elements specifying the content of the +popover or additional named arguments passed as HTML attributes to the +parent element. |
+
|---|---|
| title | +A character string specifying a title for the popover, defaults
+to |
+
| id | +A character string specifying the id of a popover's target tag +element. |
+
| popover | +The popover element to show, typically a call to |
+
| placement | +One of |
+
| duration | +A positive integer specifying the duration of the popover in
+seconds or |
+
| session | +A reactive context, defaults to |
+
ui <- container(
+ buttonInput("showHelp", "Help!"),
+ div(
+ id = "textBlock1",
+ "Sociis natoque penatibus et magnis"
+ ) %>%
+ padding(3)
+) %>%
+ display("flex") %>%
+ flex(justify = "around")
+
+server <- function(input, output) {
+ observeEvent(input$showHelp, ignoreInit = TRUE, {
+ showPopover(
+ target = "textBlock1",
+ popover(title = "Hint", "I am a <div> element!"),
+ placement = "bottom",
+ duration = 4
+ )
+ })
+}
+
+shinyApp(ui, server)
+Other components:
+alert(),
+badge(),
+blockquote(),
+card(),
+collapsePane(),
+d1(),
+dropdown(),
+img(),
+jumbotron(),
+modal(),
+navContent(),
+pre(),
+toast()
++### Examples + +# Please see example application above. + +
pre.RdThe pre function adds a maximum height and scroll bar to the standard
+<pre> element.
pre(...)+ +
| ... | +Text, tag elements, or named arguments passed as HTML attributes +to the tag. |
+
|---|
Other components:
+alert(),
+badge(),
+blockquote(),
+card(),
+collapsePane(),
+d1(),
+dropdown(),
+img(),
+jumbotron(),
+modal(),
+navContent(),
+popover(),
+toast()
++### Simple example + +pre( + "shinyApp(", + " ui = container(", + " columns(", + " column(", + " ", + " )", + " )", + " )", + " server = function(input, output) {", + " ", + " }", + ")" +)#> <pre class="pre-scrollable"> +#> shinyApp( +#> ui = container( +#> columns( +#> column( +#> +#> ) +#> ) +#> ) +#> server = function(input, output) { +#> +#> } +#> ) +#> </pre>+
radioInput.RdA stylized radio input. A reactive input with multiple choices where only one +choice and value at most may be selected.
+radioInput( + id, + choices = NULL, + values = choices, + selected = values[[1]], + ..., + inline = FALSE +) + +updateRadioInput( + id, + choices = NULL, + values = choices, + selected = NULL, + inline = FALSE, + enable = NULL, + disable = NULL, + valid = NULL, + invalid = NULL, + session = getDefaultReactiveDomain() +)+ +
| id | +A character string specifying the id of the reactive input. |
+
|---|---|
| choices | +A character vector or list of tag elements specifying the +input's choices. |
+
| values | +A character vector, list of character strings, vector of values
+to coerce to character strings, or list of values to coerce to character
+strings specifying the values of the radio input's choices, defaults to
+ |
+
| selected | +One of |
+
| ... | +Additional named arguments passed as HTML attributes to the +parent element or tag elements passed as child elements to the parent +element. |
+
| inline | +If |
+
| enable | +One of |
+
| disable | +One of |
+
| valid | +A character string specifying a message to the user indicating
+how the input's value is valid, defaults to |
+
| invalid | +A character string specifying a message to the user
+indicating how the input's value is invalid, defaults to |
+
| session | +A reactive context, defaults to |
+
Other inputs:
+buttonGroupInput(),
+buttonInput(),
+checkbarInput(),
+checkboxInput(),
+chipInput(),
+fileInput(),
+formInput(),
+listGroupInput(),
+menuInput(),
+navInput(),
+radiobarInput(),
+rangeInput(),
+selectInput(),
+textInput()
++### Out-of-the-box radios + +radioInput( + id = "radio1", + choices = c( + "Vehicula adipiscing mattis", + "Magna nullam", + "Aenean venenatis", + "Tristique quam porta" + ) +)#> <div class="yonder-radio" id="radio1"> +#> <div class="custom-control custom-radio"> +#> <input class="custom-control-input" type="radio" id="radio-300-957" name="radio1" value="Vehicula adipiscing mattis" checked autocomplete="off"/> +#> <label class="custom-control-label" for="radio-300-957">Vehicula adipiscing mattis</label> +#> </div> +#> <div class="custom-control custom-radio"> +#> <input class="custom-control-input" type="radio" id="radio-546-70" name="radio1" value="Magna nullam" autocomplete="off"/> +#> <label class="custom-control-label" for="radio-546-70">Magna nullam</label> +#> </div> +#> <div class="custom-control custom-radio"> +#> <input class="custom-control-input" type="radio" id="radio-447-260" name="radio1" value="Aenean venenatis" autocomplete="off"/> +#> <label class="custom-control-label" for="radio-447-260">Aenean venenatis</label> +#> </div> +#> <div class="custom-control custom-radio"> +#> <input class="custom-control-input" type="radio" id="radio-752-674" name="radio1" value="Tristique quam porta" autocomplete="off"/> +#> <label class="custom-control-label" for="radio-752-674">Tristique quam porta</label> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div> +#> </div>+### Inline radio input + +radioInput( + id = "radio2", + choices = c( + "Choice 1", + "Choice 2", + "Choice 3" + ), + inline = TRUE # <- +)#> <div class="yonder-radio" id="radio2"> +#> <div class="custom-control custom-radio custom-control-inline"> +#> <input class="custom-control-input" type="radio" id="radio-675-217" name="radio2" value="Choice 1" checked autocomplete="off"/> +#> <label class="custom-control-label" for="radio-675-217">Choice 1</label> +#> </div> +#> <div class="custom-control custom-radio custom-control-inline"> +#> <input class="custom-control-input" type="radio" id="radio-726-555" name="radio2" value="Choice 2" autocomplete="off"/> +#> <label class="custom-control-label" for="radio-726-555">Choice 2</label> +#> </div> +#> <div class="custom-control custom-radio custom-control-inline"> +#> <input class="custom-control-input" type="radio" id="radio-903-544" name="radio2" value="Choice 3" autocomplete="off"/> +#> <label class="custom-control-label" for="radio-903-544">Choice 3</label> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div> +#> </div>+
radiobarInput.RdA stylized group of radio inputs. A radiobar input is similar to a button +group, but with a checked or highlighted stated. Additionally, only one value +at most may be selected at any given time.
+radiobarInput(id, choices, values = choices, selected = values[[1]], ...) + +updateRadiobarInput( + id, + choices = NULL, + values = choices, + selected = NULL, + enable = NULL, + disable = NULL, + session = getDefaultReactiveDomain() +)+ +
| id | +A character string specifying the id of the reactive input. |
+
|---|---|
| choices | +A character vector or list of tag elements specifying the +labels of the input's choices. |
+
| values | +A vector specifying the values of the input's choices,
+defaults to |
+
| selected | +One of |
+
| ... | +Additional named arguments passed as HTML attributes to the +parent element or tag elements passed as child elements to the parent +element. |
+
| enable | +One of |
+
| disable | +One of |
+
| session | +A reactive context, defaults to |
+
Other inputs:
+buttonGroupInput(),
+buttonInput(),
+checkbarInput(),
+checkboxInput(),
+chipInput(),
+fileInput(),
+formInput(),
+listGroupInput(),
+menuInput(),
+navInput(),
+radioInput(),
+rangeInput(),
+selectInput(),
+textInput()
++### Radiobars + +radiobarInput( + id = "radiobar1", + choices = c( + "fusce sagittis", + "libero non molestie", + "magna orci", + "ultrices dolor" + ), + selected = "ultrices dolor" +) %>% + background("secondary")#> <div class="yonder-radiobar btn-group btn-group-toggle d-flex bg-secondary" id="radiobar1" data-toggle="buttons"> +#> <label class="btn"> +#> <input name="radiobar1" type="radio" value="fusce sagittis" autocomplete="off"/> +#> fusce sagittis +#> </label> +#> <label class="btn"> +#> <input name="radiobar1" type="radio" value="libero non molestie" autocomplete="off"/> +#> libero non molestie +#> </label> +#> <label class="btn"> +#> <input name="radiobar1" type="radio" value="magna orci" autocomplete="off"/> +#> magna orci +#> </label> +#> <label class="btn active"> +#> <input name="radiobar1" type="radio" value="ultrices dolor" checked autocomplete="off"/> +#> ultrices dolor +#> </label> +#> </div>+
rangeInput.RdrangeInput() creates a simple numeric range input.
rangeInput(id, min = 0, max = 100, default = min, step = 1, ...) + +updateRangeInput( + id, + value = NULL, + enable = NULL, + disable = NULL, + session = getDefaultReactiveDomain() +)+ +
| id | +A character string specifying the id of the reactive input. |
+
|---|---|
| min | +A number specifying the minimum value of the input, defaults to
+ |
+
| max | +A number specifying the maximum value of the input, defaults to
+ |
+
| default | +A number between |
+
| step | +A number specifying the interval step of the input, defaults to
+ |
+
| ... | +Additional named arguments passed as HTML attributes to the +parent element or tag elements passed as child elements to the parent +element. |
+
| value | +A number specifying a new value for the input, defaults to
+ |
+
| enable | +One of |
+
| disable | +One of |
+
| session | +A reactive context, defaults to |
+
The sophistication of this input will improve as browsers adopt the latest +HTML standards.
+Other inputs:
+buttonGroupInput(),
+buttonInput(),
+checkbarInput(),
+checkboxInput(),
+chipInput(),
+fileInput(),
+formInput(),
+listGroupInput(),
+menuInput(),
+navInput(),
+radioInput(),
+radiobarInput(),
+selectInput(),
+textInput()
++### Range inputs + +# Select from a range of numeric values. + +rangeInput(id = "range1")#> <div class="yonder-range" id="range1"> +#> <input class="custom-range" type="range" step="1" min="0" max="100" value="0" autocomplete="off"/> +#> </div>+### Custom step + +rangeInput(id = "range2", step = 10)#> <div class="yonder-range" id="range2"> +#> <input class="custom-range" type="range" step="10" min="0" max="100" value="0" autocomplete="off"/> +#> </div>+
reexports.RdThese objects are imported from other packages. Follow the links +below to see their documentation.
+%>%
replaceContent.RdAn application may require dynamic content. This content may be quite simple.
+The content could also be quite variable. These tools are an alternative to
+the standard output related render*() functions.
replaceContent(id, ..., session = getDefaultReactiveDomain()) + +removeContent(id, session = getDefaultReactiveDomain())+ +
| id | +A character string specifying a reactive id. |
+
|---|---|
| ... | +Additional named arguments passed as HTML attributes to the parent +element or unnamed arguments passed as the new contents of the output +element. |
+
| session | +A reactive context, defaults to |
+
These functions are experimental and are subject to change. Additionally, +they may be moved from this package entirely.
+ +responsive.RdA responsive argument may be a single value or a named list. Possible names
+includes default or xs, sm, md, lg, and xl. Specifying a single
+unnamed value is equivalent to specifying default or xs. The possible
+values will be described in the specific help page. Most responsive arguments
+will default to NULL in which case no corresponding style is applied.
Responsive arguments allow you to apply styles to tag elements based on the
+size of the viewport. This is important when developing applications for both
+web and mobile. Specifying a single unnamed value the style will be applied
+for all viewport sizes. Use the names above to apply a style for viewports of
+that size and larger. For example, specifying list(default = x, md = y)
+will apply x on extra small and small viewports, but for medium, large, and
+extra large viewports y is applied.
Styles for larger viewports take precedance. See below for details about each +breakpoint.
+extra small
+How: pass a single value, use name xs, or use name default.
When: the style is always applied, unless supplanted by a style for any other +viewport size.
+small
+How: use name sm.
When: the style is applied when the viewport is at least 576px wide, think +landscape phones.
+medium
+How: use name md.
When: the style is applied when the viewport is at least 768px wide, think +tablets.
+large
+How: use name lg.
When: the style is applied when the viewport is at least 992px wide, think +laptop or smaller desktops.
+extra large
+How: use name xl.
When: the style is applied when the viewport is at least 1200px wide, think +large desktops.
+scroll.RdMany of the applications you build despite a complex layout will still fit
+onto a single page. To help scroll long content alongside shorter content use
+the scroll() utility function.
scroll(x, direction = "vertical")+ +
| x | +A tag element or .style pronoun. |
+
|---|---|
| direction | +One of |
+
selectInput.RdCreate a select input. Select elements typically appear as a simple menu of +choices and may have one selected choice. A group select input is a select +input with one or two additional components. These addon components are used +to change the reactivity or value of the input, see Details for more +information.
+selectInput( + id, + choices = NULL, + values = choices, + selected = values[[1]], + ..., + placeholder = NULL +) + +updateSelectInput( + id, + choices = NULL, + values = choices, + selected = choices[[1]], + enable = NULL, + disable = NULL, + valid = NULL, + invalid = NULL, + session = getDefaultReactiveDomain() +) + +groupSelectInput( + id, + choices, + values = choices, + selected = values[[1]], + ..., + left = NULL, + right = NULL +) + +updateGroupSelectInput( + id, + choices = NULL, + values = choices, + selected = NULL, + enable = NULL, + disable = NULL, + valid = NULL, + invalid = NULL, + session = getDefaultReactiveDomain() +)+ +
| id | +A character string specifying the id of the reactive input. |
+
|---|---|
| choices | +A character vector specifying the input's choices. |
+
| values | +A character vector specifying the values of the input's
+choices, defaults to |
+
| selected | +One of |
+
| ... | +Additional named arguments passed as HTML attributes to the +parent element or tag elements passed as child elements to the parent +element. |
+
| placeholder | +A character string specifying the placeholder text of
+the select input, defaults to |
+
| enable | +One of |
+
| disable | +One of |
+
| valid | +A character string specifying a message to the user indicating
+how the input's value is valid, defaults to |
+
| invalid | +A character string specifying a message to the user
+indicating how the input's value is invalid, defaults to |
+
| session | +A reactive context, defaults to |
+
| left, right | +A character vector specifying static addons or
+
If
The button does not change the value of the group input. However, the input +no longer triggers event when the text box is updated. Instead the value is +updated when a button is clicked. Static addons are still applied to the +group input value. +
The value of the group input does chance depending on the clicked dropdown +menu item. The value of the input group is the concatentation of the +dropdown input value, the value of the text input, and any static addons. |
+
Other inputs:
+buttonGroupInput(),
+buttonInput(),
+checkbarInput(),
+checkboxInput(),
+chipInput(),
+fileInput(),
+formInput(),
+listGroupInput(),
+menuInput(),
+navInput(),
+radioInput(),
+radiobarInput(),
+rangeInput(),
+textInput()
++### Simple select input + +selectInput( + id = "select1", + choices = c( + "Choice 1", + "Choice 2", + "Choice 3" + ), + values = list(1, 2, 3) +)#> <div class="yonder-select" id="select1"> +#> <input type="text" class="form-control custom-select" data-toggle="dropdown" data-boundary="window" placeholder="Choice 1"/> +#> <div class="dropdown-menu"> +#> <button class="dropdown-item active" value="1">Choice 1</button> +#> <button class="dropdown-item" value="2">Choice 2</button> +#> <button class="dropdown-item" value="3">Choice 3</button> +#> </div> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div>+### Group select input + +groupSelectInput( + id = "select2", + choices = 1:5, + left = "$", + right = ".00" +)#> <div class="yonder-group-select input-group" id="select2"> +#> <div class="input-group-prepend"> +#> <span class="input-group-text">$</span> +#> </div> +#> <select class="custom-select"> +#> <option selected value="1">1</option> +#> <option value="2">2</option> +#> <option value="3">3</option> +#> <option value="4">4</option> +#> <option value="5">5</option> +#> </select> +#> <div class="input-group-append"> +#> <span class="input-group-text">.00</span> +#> </div> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div>+
shadow.RdThe shadow utility applies a shadow to a tag element. By default many
+elements include a shadow to help distinguish them. Use "none" to remove an
+element's shadow.
shadow(x, size = "medium")+ +
| x | +A tag element or .style pronoun. |
+
|---|---|
| size | +One of |
+
Other design utilities:
+active(),
+affix(),
+background(),
+border(),
+display(),
+flex(),
+float(),
+font(),
+height(),
+margin(),
+padding(),
+scroll(),
+width()
++### Styling a navbar + +div( + navbar(brand = "Navbar") %>% + background("dark") %>% + font("light") %>% + margin(bottom = 3), + p( + "Cras mattis consectetur purus sit amet fermentum. Donec sed ", + "odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing ", + "elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam ", + "venenatis vestibulum." + ) +)#> <div> +#> <nav class="navbar navbar-expand navbar-light bg-dark text-light pb-3"> +#> <a class="navbar-brand" href="#">Navbar</a> +#> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content-949-70" aria-controls="nav-content-949-70" aria-expanded="false" aria-label="Toggle navigation"> +#> <span class="navbar-toggler-icon"></span> +#> </button> +#> <div class="collapse navbar-collapse" id="nav-content-949-70"></div> +#> </nav> +#> <p> +#> Cras mattis consectetur purus sit amet fermentum. Donec sed +#> odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing +#> elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam +#> venenatis vestibulum. +#> </p> +#> </div>+### Different shadows + +div( + buttonInput(id = "b1", label = "Small") %>% + margin(2) %>% + shadow("small"), + buttonInput(id = "b2", label = "Medium") %>% + margin(2) %>% + shadow("medium"), + buttonInput(id = "b3", label = "Large") %>% + margin(2) %>% + shadow("large") +)#> <div> +#> <button class="yonder-button btn m-2 shadow-sm" type="button" role="button" id="b1" autocomplete="off">Small</button> +#> <button class="yonder-button btn m-2 shadow" type="button" role="button" id="b2" autocomplete="off">Medium</button> +#> <button class="yonder-button btn m-2 shadow-lg" type="button" role="button" id="b3" autocomplete="off">Large</button> +#> </div>+
textInput.RdA text input. A group text input is an alternative text input. The group text +input allows you to include static prefixes or buttons with a standard text +input.
+numberInput() is a simple wrapper around textInput() with type set to
+"number" and explicit arguments for specifying a min value, max value, and
+the step amount. Use updateTextInput() to update a number input.
textInput(id, value = NULL, placeholder = NULL, ..., type = "text") + +numberInput( + id, + value = NULL, + placeholder = NULL, + ..., + min = NULL, + max = NULL, + step = 1 +) + +updateTextInput( + id, + value = NULL, + enable = NULL, + disable = NULL, + valid = NULL, + invalid = NULL, + session = getDefaultReactiveDomain() +) + +groupTextInput( + id, + value = NULL, + placeholder = NULL, + ..., + type = "text", + left = NULL, + right = NULL +) + +updateGroupTextInput( + id, + value = NULL, + enable = NULL, + disable = NULL, + valid = NULL, + invalid = NULL, + session = getDefaultReactiveDomain() +)+ +
| id | +A character string specifying the id of the reactive input. |
+
|---|---|
| value | +A character string or a value coerced to a character string +specifying the default value of the textual input. |
+
| placeholder | +A character string specifying placeholder text for the
+input, defaults to |
+
| ... | +Additional named arguments passed as HTML attributes to the +parent element or tag elements passed as child elements to the parent +element. |
+
| type | +One of " For details on a particular type please see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input. |
+
| min | +A number specifying the minimum allowed value of the number input,
+defaults to |
+
| max | +A number specifying the maximum allowed value of the number input,
+defaults to |
+
| step | +A number specifying the increment step of the number input, +defaults to 1. |
+
| enable | +One of |
+
| disable | +One of |
+
| valid | +A character string specifying a message to the user indicating
+how the input's value is valid, defaults to |
+
| invalid | +A character string specifying a message to the user
+indicating how the input's value is invalid, defaults to |
+
| session | +A reactive context, defaults to |
+
| left | +A character vector specifying static addons or
+
If
The button does not change the value of the group input. However, the input +no longer triggers event when the text box is updated. Instead the value is +updated when a button is clicked. Static addons are still applied to the +group input value. +
The value of the group input does chance depending on the clicked dropdown +menu item. The value of the input group is the concatentation of the +dropdown input value, the value of the text input, and any static addons. |
+
| right | +A character vector specifying static addons or
+
If
The button does not change the value of the group input. However, the input +no longer triggers event when the text box is updated. Instead the value is +updated when a button is clicked. Static addons are still applied to the +group input value. +
The value of the group input does chance depending on the clicked dropdown +menu item. The value of the input group is the concatentation of the +dropdown input value, the value of the text input, and any static addons. |
+
Other inputs:
+buttonGroupInput(),
+buttonInput(),
+checkbarInput(),
+checkboxInput(),
+chipInput(),
+fileInput(),
+formInput(),
+listGroupInput(),
+menuInput(),
+navInput(),
+radioInput(),
+radiobarInput(),
+rangeInput(),
+selectInput()
++### Default text input + +textInput(id = "text")#> <div class="yonder-textual" id="text"> +#> <input class="form-control" type="text" autocomplete="off"/> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div>+### Default number input + +numberInput(id = "num1")#> <div class="yonder-textual" id="num1"> +#> <input class="form-control" type="number" autocomplete="off" step="1"/> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div>+### Specify `min`, `max`, and `step` + +numberInput( + id = "num2", + min = 1, + max = 10, + step = 2 +)#> <div class="yonder-textual" id="num2"> +#> <input class="form-control" type="number" autocomplete="off" min="1" max="10" step="2"/> +#> <div class="valid-feedback"></div> +#> <div class="invalid-feedback"></div> +#> </div>+
toast.RdSend notifications to the user. Create notification elements, toasts, with
+the toast() function. Display toasts with showToast() and remove all
+active toasts with closeToast().
toast(header, ...) + +showToast( + toast, + duration = 4, + action = NULL, + session = getDefaultReactiveDomain() +) + +closeToast(session = getDefaultReactiveDomain())+ +
| header | +A character string or tag element specifying a header for the
+toast, defaults to |
+
|---|---|
| ... | +Any number of character strings or tag elements to include in the +body of the toast. +Any number of named arguments passed as HTML attributes to the parent +element. |
+
| toast | +A toast element, typically built with |
+
| duration | +A positive integer or |
+
| action | +A character string specifying a reactive id. If specified, the
+hiding or closing of the toast will set the reactive id |
+
| session | +A reactive context, defaults to |
+
ui <- container(
+ buttonInput(
+ id = "show",
+ label = "Show notification"
+ ) %>%
+ margin(3)
+)
+
+server <- function(input, output) {
+ observeEvent(input$show, {
+ showToast(
+ toast(
+ list(
+ span("Notification") %>%
+ margin(right = "4"),
+ span(strftime(Sys.time(), "%H:%M")) %>%
+ margin(right = 1)
+ ),
+ "This is notification ", input$show
+ ) %>%
+ margin(right = 2, top = 2)
+ )
+ })
+}
+
+shinyApp(ui, server)
+When a notification is not automatically closed you may want to know +when the notification is manually closed.
ui <- container(
+ buttonInput(
+ id = "show",
+ label = "Show notification"
+ ) %>%
+ margin(3)
+)
+
+server <- function(input, output) {
+ observeEvent(input$show, {
+ showToast(
+ action = "undo",
+ duration = NULL,
+ toast(
+ tags$strong("Close") %>%
+ margin(right = "auto"),
+ "When closing this notification, see the console"
+ ) %>%
+ margin(right = 2, top = 2)
+ )
+ })
+
+ observeEvent(input$undo, {
+ print("The notification was closed")
+ })
+}
+
+shinyApp(ui, server)
+Other components:
+alert(),
+badge(),
+blockquote(),
+card(),
+collapsePane(),
+d1(),
+dropdown(),
+img(),
+jumbotron(),
+modal(),
+navContent(),
+popover(),
+pre()
++### A simple toast + +# The `"fade"` and `"show"` classes have been added for the sake of +# these examples. + +toast( + class = "fade show", + header = div("Header") %>% + margin(right = "auto"), + "Hello, world!" +)#> <div aria-atomic="true" aria-live="polite" class="toast fade show" role="alert"> +#> <div class="toast-header"> +#> <div class="pr-auto">Header</div> +#> <button type="button" class="ml-auto close" data-dismiss="toast" aria-label="Close"> +#> <span aria-hidden="true">×</span> +#> </button> +#> </div> +#> <div class="toast-body">Hello, world!</div> +#> </div>+### Styling pieces of a toast + +toast( + class = "fade show", + list( + div("Notification") %>% + font(weight = "bold") %>% + margin(right = "auto"), + tags$small("1 min ago") + ), + "Hello, world!" +)#> <div aria-atomic="true" aria-live="polite" class="toast fade show" role="alert"> +#> <div class="toast-header"> +#> <div class="font-weight-bold pr-auto">Notification</div> +#> <small>1 min ago</small> +#> <button type="button" class="ml-auto close" data-dismiss="toast" aria-label="Close"> +#> <span aria-hidden="true">×</span> +#> </button> +#> </div> +#> <div class="toast-body">Hello, world!</div> +#> </div>+
webpage.RdBegin creating a user interface. The webpage() function properly lays out a
+navigation bar and main section of elements.
webpage(..., nav = NULL)+ +
| ... | +Any number of tag elements or named values added as children and +attributes to the main section of the page. |
+
|---|---|
| nav | +A navigation element, typically a call to |
+
++webpage( + p("Pretty simple") +)#> <body> +#> <header></header> +#> <main role="main"> +#> <p>Pretty simple</p> +#> </main> +#> </body>#> <body> +#> <header> +#> <nav class="navbar navbar-expand navbar-light"> +#> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content-265-150" aria-controls="nav-content-265-150" aria-expanded="false" aria-label="Toggle navigation"> +#> <span class="navbar-toggler-icon"></span> +#> </button> +#> <div class="collapse navbar-collapse" id="nav-content-265-150"></div> +#> </nav> +#> </header> +#> <main role="main"> +#> <div class="container-fluid"> +#> <div class="row"> +#> <div class="col"></div> +#> <div class="col"></div> +#> </div> +#> </div> +#> </main> +#> </body>+
width.RdUtility function to change a tag element's width. Widths are specified +relative the width of a parent element, an element's content, or the size of +the browser window.
+width(x, size)+ +
| x | +A tag element or .style pronoun. |
+
|---|---|
| size | +A character string or number specifying the width of the tag +element. Possible values: +One of 25, 50, 75, or 100 specifying the element's width is a percentage of +its parent's width. The width of the parent element must be +specified. Percentages do not account for margins or padding and may cause +an element to extend beyond its parent element. +
|
+
yonder-package.RdYonder is a set of tools for flexible and creative shiny application +construction and design.
+ +Yonder provides many familiar inputs like selectInput() or radioInput().
+There are also new inputs like groupTextInput() or formInput().
Changes to be mindful of
Input functions have an id argument instead of inputId.
Input functions do not include a label argument for the purpose of adding
+a label above the input. Button and menu inputs do include a label
+argument, but these arguments refer to button labels. If you would like to
+add a label above an input please use formGroup().
Familiar variants
+Looking for ... ?
actionButton() or actionLink() use buttonInput() or linkInput()
radioButtons() use radioInput()
checkboxGroupInput() use checkbarInput() or checkboxInput()
numericInput() use numberInput()
selectizeInput() use selectInput() or chipInput()
submitButton() use formInput() and formSubmit()
Included are a handful of utilities for building applications suited for
+devices and screens of varying sizes. For real control over spacing elements
+be sure to check out flex(), which gives you the power of flexbox layout.
Familiar variants
+Looking for ... ?
fluidRow() or fixedRow() use columns()
fixedPage(), fluidPage(), or sidebarLayout() use container(),
+columns(), and column()
navbarPage() use navbar()
tabPanel() use navContent() and navPane()
modalDialog() use modal()
Useful links:
Report bugs at https://github.com/nteetor/yonder/issues
Maintainer: Nathan Teetor nathanteetor@gmail.com
+Other contributors:
The Bootstrap Authors (Bootstrap library) [copyright holder]
Twitter, Inc (Bootstrap library) [copyright holder]
JS Foundation (jQuery library) [copyright holder]
Federico Zivolo (popper.js library) [contributor, copyright holder]
Johann Servoire (bs-custom-file-input library) [contributor, copyright holder]
yonder.RdYonder is a set of tools for flexible and creative shiny application +construction and design.
+Yonder provides many familiar inputs like selectInput() or radioInput().
+There are also new inputs like groupTextInput() or formInput().
Changes to be mindful of
Input functions have an id argument instead of inputId.
Input functions do not include a label argument for the purpose of adding
+a label above the input. Button and menu inputs do include a label
+argument, but these arguments refer to button labels. If you would like to
+add a label above an input please use formGroup().
Familiar variants
+Looking for ... ?
actionButton() or actionLink() use buttonInput() or linkInput()
radioButtons() use radioInput()
checkboxGroupInput() use checkbarInput() or checkboxInput()
numericInput() use numberInput()
selectizeInput() use selectInput() or chipInput()
submitButton() use formInput() and formSubmit()
Included are a handful of utilities for building applications suited for
+devices and screens of varying sizes. For real control over spacing elements
+be sure to check out flex(), which gives you the power of flexbox layout.
Familiar variants
+Looking for ... ?
fluidRow() or fixedRow() use columns()
fixedPage(), fluidPage(), or sidebarLayout() use container(),
+columns(), and column()
navbarPage() use navbar()
tabPanel() use navContent() and navPane()
modalDialog() use modal()
Useful links:
Report bugs at https://github.com/nteetor/yonder/issues
Maintainer: Nathan Teetor nathanteetor@gmail.com
+Other contributors:
The Bootstrap Authors (Bootstrap library) [copyright holder]
Twitter, Inc (Bootstrap library) [copyright holder]
JS Foundation (jQuery library) [copyright holder]
Federico Zivolo (popper.js library) [contributor, copyright holder]
Johann Servoire (bs-custom-file-input library) [contributor, copyright holder]
+A shiny framework. +
+ +```{r, echo = FALSE} +p( + class = "lead", + "Build shiny applications with an all new set of", + "inputs, utilties, and design tools. Click", + linkInput( + id = NULL, + label = "here", + `data-toggle` = "collapse", + `data-target` = ".hasCopyButton" + ), + "to see these great new tools help build pieces of this page." +) +``` + +## Inputs + +::: { .row } +::: { .col-md-6 .col-12 } +```{r} +# button group input +div( + .style %>% + display("flex") %>% + flex(justify = "center"), + buttonGroupInput( + .style %>% + background("primary"), + id = NULL, + choices = c("Sample", "Model", "Download") + ) +) +``` +::: + +::: { .col-md-6 .col-12 } +New inputs let you build a variety of user interfaces. Develop the best ui for +your users' needs. Whether you are building an application for personal use, +internal use, or public use an intuitive ui helps guide users through your +application. +::: +::: + +::: { .row } +::: { .col-md-6 .col-12 } +As shiny developers we are not only developing programs and scripts for a +variety of users we are developing applications for many different devices. +Yonder's inputs are ready for both mobile and web. Once you include +::: + +::: { .col-md-6 .col-12 } +```{r} +# list group input +div( + .style %>% + display("flex") %>% + flex(align = "center", justify = "center"), + card( + .style %>% + border("info") %>% + background("info") %>% + font("light"), + header = "Learn more", + listGroupInput( + .style %>% + background("info"), + flush = TRUE, + id = NULL, + choices = c("About", "Our process", "Partners", "License") + ) + ) +) +``` +::: +::: + +## Designs + +::: { .row } +::: { .col-12 } +Based on the widely used Bootstrap library, yonder provides a series of design +utilities to help prototype and produce the shiny apps you imagine. +::: +::: + +::: { .row } +::: { .col-4-md .col-12 } +That control panel never has to sit on the left again. +::: + +::: { .col-8-md .col-12 } +```{r} +div( + .style %>% + width(100) %>% + padding(2) %>% + display("flex") %>% + flex(justify = "center") %>% + border("dark", round = "all"), + card( + header = "Controls", + formGroup( + label = "Options", + selectInput( + id = NULL, + choices = c("Option 1", "Option 2", "Option 3") + ) + ), + buttonInput( + .style %>% + background("primary"), + id = NULL, + label = "Run" + ) + ) +) +``` +::: +::: + +::: { .row .mt-5 } +::: { .col-12 } +```{r} +div( + .style %>% + width(100) %>% + padding(2) %>% + display("flex") %>% + flex(justify = "end") %>% + border("dark", round = "all"), + dropdown( + .style %>% + background("secondary"), + label = "Menu", + h5("Controls") %>% margin(r = 3, l = 3), + formInput( + .style %>% padding(r = 3, l = 3), + id = NULL, + formGroup( + label = "Target", + input = textInput( + id = NULL + ) + ), + formGroup( + label = "Description", + input = textInput( + id = NULL + ) + ), + buttonInput( + .style %>% background("primary"), + id = NULL, + label = "Update" + ) + ) + ) +) +``` +::: +::: + +::: { .row } +::: { .col-md-4 .col-12 } +Convey more. +::: + +::: { .col-md-8 .col-12 .d-flex .flex-row .justify-content-around } +```{r} +checkboxInput( + .style %>% background("success"), + id = NULL, + choices = c("Choice 1", "Choice 2"), + selected = "Choice 1" +) +``` + +```{r} +checkboxInput( + .style %>% background("dark"), + id = NULL, + choices = c("Choice 1", "Choice 2"), + selected = "Choice 2" +) +``` + +```{r} +checkboxInput( + .style %>% background("danger"), + id = NULL, + choices = c("Choice 1", "Choice 2", "Choice 3"), + selected = "Choice 2" +) +``` +::: +::: + +::: { .row } +::: { .col-12 .d-flex .justify-content-center } + +::: { .display-4 } +... and much [more](reference/index.html)! +::: + +::: +::: diff --git a/pkgdown/index.md b/pkgdown/index.md new file mode 100644 index 00000000..ba219db9 --- /dev/null +++ b/pkgdown/index.md @@ -0,0 +1,355 @@ + + + ++A shiny framework. +
+ ++Build shiny applications with an all new set of +inputs, utilties, and design tools. Click + +to see these great new tools help build pieces of this page. +
+ +# button group input
+div(
+ .style %>%
+ display("flex") %>%
+ flex(justify = "center"),
+ buttonGroupInput(
+ .style %>%
+ background("primary"),
+ id = NULL,
+ choices = c("Sample", "Model", "Download")
+ )
+)New inputs let you build a variety of user interfaces. Develop the best ui for +your users’ needs. Whether your building an application for personal use, +internal use, or public use an intuitive ui helps guide users through your +application.
+Another section to fill out later.
+# list group input
+div(
+ .style %>%
+ display("flex") %>%
+ flex(align = "center", justify = "center"),
+ card(
+ .style %>%
+ border("info") %>%
+ background("info") %>%
+ font("light"),
+ header = "Learn more",
+ listGroupInput(
+ .style %>%
+ background("info"),
+ flush = TRUE,
+ id = NULL,
+ choices = c("About", "Our process", "Partners", "License")
+ )
+ )
+)Based on the widely used Bootstrap library, yonder provides a series of design +utilities to help prototype and produce the shiny apps you imagine.
+That control panel never has to sit on the left again.
+div(
+ .style %>%
+ width(100) %>%
+ padding(2) %>%
+ display("flex") %>%
+ flex(justify = "center") %>%
+ border("dark", round = "all"),
+ card(
+ header = "Controls",
+ formGroup(
+ label = "Options",
+ selectInput(
+ id = NULL,
+ choices = c("Option 1", "Option 2", "Option 3")
+ )
+ ),
+ buttonInput(
+ .style %>%
+ background("primary"),
+ id = NULL,
+ label = "Run"
+ )
+ )
+)div(
+ .style %>%
+ width(100) %>%
+ padding(2) %>%
+ display("flex") %>%
+ flex(justify = "end") %>%
+ border("dark", round = "all"),
+ dropdown(
+ .style %>%
+ background("secondary"),
+ label = "Menu",
+ tags$h6("Controls"),
+ formInput(
+ .style %>% padding(r = 3, l = 3),
+ id = NULL,
+ formGroup(
+ label = "Target",
+ input = textInput(
+ id = NULL
+ )
+ ),
+ formGroup(
+ label = "Description",
+ input = textInput(
+ id = NULL
+ )
+ ),
+ buttonInput(
+ .style %>% background("primary"),
+ id = NULL,
+ label = "Update"
+ )
+ )
+ )
+)Convey more.
+checkboxInput(
+ .style %>% background("success"),
+ id = NULL,
+ choices = c("Choice 1", "Choice 2"),
+ selected = "Choice 1"
+)+
+checkboxInput(
+ .style %>% background("dark"),
+ id = NULL,
+ choices = c("Choice 1", "Choice 2"),
+ selected = "Choice 2"
+)+
+checkboxInput(
+ .style %>% background("danger"),
+ id = NULL,
+ choices = c("Choice 1", "Choice 2", "Choice 3"),
+ selected = "Choice 2"
+)+
++
+… and much more!
+