Skip to contents

Element Plus Splitter

Source: R/el_splitter.R
el_splitter.Rd

Panels side by side, or one above the other, resized by dragging the bars between them. Give it el_splitter_panel()s.

Usage

el_splitter(
  ...,
  id = NULL,
  layout = NULL,
  lazy = NULL,
  width = NULL,
  slots = NULL
)

update_el_splitter(
  session = shiny::getDefaultReactiveDomain(),
  id,
  layout = NULL,
  lazy = NULL
)

Arguments

...

Its content: any Shiny UI. Components of this package are folded into this one's Vue instance, as el_button_group() folds its buttons.

id

Component ID. Auto-generated if NULL.

layout

Layout direction of the splitter. Element Plus's layout ('horizontal' | 'vertical').

lazy

Whether to enable lazy mode. Element Plus's lazy (boolean).

width

Component width, as a CSS unit.

slots

Named list of Element slot contents. A scoped slot is written with template().

session

Shiny session; the current one by default, as for shiny::updateTextInput().

Value

A Shiny UI element.

Shiny inputs

  • input$<id>_resize_start – Element Plus's resize-start event.

  • input$<id>_resize – Element Plus's resize event.

  • input$<id>_resize_end – Element Plus's resize-end event.

  • input$<id>_collapse – Element Plus's collapse event.

Updating from the server

update_el_splitter() changes the component from the server: every argument of el_splitter() that can change once it is drawn, under the same name. One left NULL stays as it is; NA returns it to Element's default.

update_el_splitter() is called for its side effect and returns NULL invisibly.

Examples

el_splitter(el_splitter_panel("Left", size = "30%"), el_splitter_panel("Right"))
#> <div id="el_splitter_3c06abe3-dd72-4f4f-9e61-fa401d026795" data-shiny-vue style="display: contents">
#>   <script type="text/x-template" data-shiny-vue-template><div id="el_splitter_3c06abe3-dd72-4f4f-9e61-fa401d026795_container" style="display: contents">
#>   <el-splitter :layout="layout === null ? undefined : layout" :lazy="lazy === null ? undefined : lazy" @resize-start="elEmitResizeStart" @resize="elEmitResize" @resize-end="elEmitResizeEnd" @collapse="elEmitCollapse">
#>     <el-splitter-panel :size="size === null ? undefined : size" :min="min === null ? undefined : min" :max="max === null ? undefined : max" :resizable="resizable === null ? undefined : resizable" :collapsible="collapsible === null ? undefined : collapsible" ref="sv_el_splitter_panel_69ee45e4_d116_40a7_ba50_52d3e6a86cab" id="el_splitter_panel_69ee45e4-d116-40a7-ba50-52d3e6a86cab">Left</el-splitter-panel>
#>     <el-splitter-panel :size="el3_size === null ? undefined : el3_size" :min="el3_min === null ? undefined : el3_min" :max="el3_max === null ? undefined : el3_max" :resizable="el3_resizable === null ? undefined : el3_resizable" :collapsible="el3_collapsible === null ? undefined : el3_collapsible" ref="sv_el_splitter_panel_86129e5f_b574_481d_b5e5_d1c452f45a75" id="el_splitter_panel_86129e5f-b574-481d-b5e5-d1c452f45a75">Right</el-splitter-panel>
#>   </el-splitter>
#> </div></script>
#>   <script type="application/json" data-shiny-vue-options>{"options":{"data":{"layout":null,"lazy":null,"size":"30%","min":null,"max":null,"resizable":null,"collapsible":null,"el3_size":null,"el3_min":null,"el3_max":null,"el3_resizable":null,"el3_collapsible":null},"methods":{"elEmitResizeStart":"function() { window.shinyVue.emit('el_splitter_3c06abe3-dd72-4f4f-9e61-fa401d026795', 'resize_start', arguments); }","elEmitResize":"function() { window.shinyVue.emit('el_splitter_3c06abe3-dd72-4f4f-9e61-fa401d026795', 'resize', arguments, 200); }","elEmitResizeEnd":"function() { window.shinyVue.emit('el_splitter_3c06abe3-dd72-4f4f-9e61-fa401d026795', 'resize_end', arguments); }","elEmitCollapse":"function() { window.shinyVue.emit('el_splitter_3c06abe3-dd72-4f4f-9e61-fa401d026795', 'collapse', arguments); }"}},"input":null,"rate":null,"type":null,"use":["shinyElement.plugin"],"absorbed":{"el_splitter_panel_69ee45e4-d116-40a7-ba50-52d3e6a86cab":{"fields":{"size":"size","min":"min","max":"max","resizable":"resizable","collapsible":"collapsible"},"ref":"sv_el_splitter_panel_69ee45e4_d116_40a7_ba50_52d3e6a86cab"},"el_splitter_panel_86129e5f-b574-481d-b5e5-d1c452f45a75":{"fields":{"size":"el3_size","min":"el3_min","max":"el3_max","resizable":"el3_resizable","collapsible":"el3_collapsible"},"ref":"sv_el_splitter_panel_86129e5f_b574_481d_b5e5_d1c452f45a75"}},"generated":true,"evals":["options.methods.elEmitResizeStart","options.methods.elEmitResize","options.methods.elEmitResizeEnd","options.methods.elEmitCollapse"]}</script>
#> </div>