'Element Plus' Components for 'shiny'

'Element Plus' ('Vue' 3) components for 'shiny': forms, tables, trees, menus, dialog boxes and the rest, each reporting to the server and updated from it like any other 'shiny' input. 'Element Plus' and 'Vue' are bundled, so applications work offline.

shiny.element

Use Element Plus, the Vue 3 component library, in Shiny — inputs, tables, trees, dialogs, menus, every component it documents — each reporting through input$<id> and updatable from the server, like any other Shiny input.

Element Plus 2.14.7, its icons and Vue 3.5 ship inside the package, so apps work without a network connection.

Lifecycle

shiny.element is experimental: until 1.0.0 an argument or a function may change when a better design turns up, and every such change is listed under "Breaking changes" in NEWS. From the first CRAN release on, nothing is removed without first being deprecated, with a warning, for at least one minor release. Element Plus is followed as upstream changes: what it deprecates is deprecated here too, and what it removes goes with the next upgrade.

Installation

remotes::install_github("kaipingyang/shiny.element")

Quick start

library(shiny)
library(shiny.element)

ui <- el_page(
  el_input("name", label = "Name", placeholder = "Your name"),
  el_rate("score", value = 3),
  el_button("save", "Save", type = "primary"),
  el_alert("hint", title = "Nothing saved yet", type = "info")
)

server <- function(input, output, session) {
  observeEvent(input$save, {
    update_el_alert(session, "hint",
      title = paste0("Saved ", input$name, " (", input$score, "/5)"),
      type = "success"
    )
  })
}

shinyApp(ui, server)

el_page() sets up the Vue root and loads the dependencies. Inside an existing layout — a fluidPage(), or bslib's page_sidebar() — call use_element() once at the top instead:

ui <- bslib::page_sidebar(
  theme = el_theme(),
  use_element(),
  sidebar = bslib::sidebar(el_select("metric", choices = c("Mean", "Median"))),
  el_table(data = head(iris), id = "summary")
)

el_theme() is the page's look: a bslib theme carrying Element Plus's own colours, font and sizes, so Shiny's actionButton() or textInput() sit beside Element Plus components without clashing. It is el_page()'s default. el_theme(primary = "#7c3aed") changes the brand colour -- on Element Plus's components as well as Bootstrap's -- and el_theme(element =) any of its CSS variables; any bslib::bs_theme() replaces it, and theme = NULL leaves Shiny's plain Bootstrap.

Components

The components follow Element Plus's own documentation, group by group:


Basic	`el_button()` `el_button_group()` `el_container()` `el_icon()` `el_row()` `el_col()` `el_link()` `el_text()` `el_scrollbar()` `el_space()` `el_splitter()`
Configuration	`el_config_provider()`
Form	`el_autocomplete()` `el_cascader()` `el_checkbox()` `el_checkbox_group()` `el_color_picker()` `el_color_picker_panel()` `el_date_picker()` `el_date_picker_panel()` `el_form()` `el_input()` `el_input_number()` `el_input_tag()` `el_input_otp()` `el_mention()` `el_radio_group()` `el_rate()` `el_select()` `el_select_v2()` `el_slider()` `el_switch()` `el_time_picker()` `el_time_select()` `el_transfer()` `el_tree_select()` `el_upload()`
Data	`el_avatar()` `el_badge()` `el_calendar()` `el_card()` `el_carousel()` `el_collapse()` `el_descriptions()` `el_empty()` `el_image()` `el_infinite_scroll()` `el_pagination()` `el_progress()` `el_result()` `el_skeleton()` `el_table()` `el_table_v2()` `el_tag()` `el_timeline()` `el_tour()` `el_tree()` `el_tree_v2()` `el_statistic()` `el_segmented()`
Navigation	`el_affix()` `el_anchor()` `el_backtop()` `el_breadcrumb()` `el_dropdown()` `el_menu()` `el_page_header()` `el_steps()` `el_tabs()`
Feedback	`el_alert()` `el_dialog()` `el_drawer()` `el_loading()` `el_message()` `el_message_box()` `el_notification()` `el_popconfirm()` `el_popover()` `el_tooltip()`
Others	`el_divider()` `el_watermark()`

Each has a page, as on element-plus.org: its demos in R and its API tables beside the R names.

Form Table Tree

el_page(dev = TRUE) loads Vue's development build, which reports template errors in the browser console instead of failing silently. The package's own test suite runs in this mode and asserts that the console stays clean.

Learn more

Installation & Quick Start
Components -- one page per Element Plus component
Element Plus's guides from R: i18n, Theming, Dark Mode, Custom Defaults, Built-in Transitions, Migration from Element UI
Forms and validation, Shiny integration
Dashboards -- whole apps: an admin layout, a sales overview, an orders admin page
Function reference

Licence

MIT. The bundled Element Plus, its icons and Vue are MIT-licensed by their authors; see LICENSE.note.

Reference manual

install.packages("shiny.element")

0.3.1 by Kaiping Yang, a day ago

https://kaipingyang.github.io/shiny.element/, https://github.com/kaipingyang/shiny.element

Report a bug at https://github.com/kaipingyang/shiny.element/issues

Browse source code at https://github.com/cran/shiny.element

Authors: Kaiping Yang [aut, cre] , Element Plus team [ctb, cph] (Element Plus and its icons , bundled in inst/element-plus , MIT licence) , Evan You [ctb, cph] (Vue library bundled in inst/vue3 , MIT licence)

Documentation: PDF Manual

MIT + file LICENSE license

Imports htmltools, shiny, jsonlite, uuid, stats, bslib, grDevices, utils, jquerylib

Suggests testthat, shinyjs, shinyvalidate, shinytest2, fontawesome, callr, chromote, httpuv, pkgload, promises, withr, knitr, rmarkdown, DT, later

See at CRAN

shiny.element

'Element Plus' Components for 'shiny'

shiny.element

Lifecycle

Installation

Quick start

Components

Learn more

Licence

Reference manual

R links

R homepage

Download R

Mailing lists

R documentation

R manuals

R FAQs

The R Journal

CRAN links

CRAN homepage

CRAN repository policy

Submit a package

METACRAN stuff

About METACRAN

At github

Report a bug