Skip to contents

Element Plus Affix

Source: R/el_affix.R
el_affix.Rd

Content that stays fixed to the top or bottom of the viewport once scrolled to it.

Usage

el_affix(
  ...,
  id = NULL,
  offset = NULL,
  position = NULL,
  target = NULL,
  z_index = NULL,
  teleported = NULL,
  append_to = NULL,
  width = NULL,
  slots = NULL
)

update_el_affix(
  session = shiny::getDefaultReactiveDomain(),
  id,
  offset = NULL,
  position = NULL,
  z_index = NULL,
  target = NULL,
  teleported = NULL,
  append_to = 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.

offset

Offset distance. Element Plus's offset (number).

position

Position of affix. Element Plus's position ('top' | 'bottom').

target

Target container (CSS selector). Element Plus's target (string).

z_index

z-index of affix. Element Plus's z-index (number).

teleported

Whether affix element is teleported, if true it will be teleported to where append-to sets. Element Plus's teleported (boolean).

append_to

Which element the affix element appends to. Element Plus's append-to (CSSSelector / HTMLElement).

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>_change – Element Plus's change event.

  • input$<id>_scroll – Element Plus's scroll event.

Element methods

Callable with call_el(): update(), updateRoot().

Updating from the server

update_el_affix() changes the component from the server: every argument of el_affix() 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_affix() is called for its side effect and returns NULL invisibly.

Examples

el_affix(el_button("top", "Stays on top"), offset = 120)
#> <div id="el_affix_e10c8cad-0d17-4a3a-960e-88c1e47a681f" data-shiny-vue style="display: contents">
#>   <script type="text/x-template" data-shiny-vue-template><div id="el_affix_e10c8cad-0d17-4a3a-960e-88c1e47a681f_container" style="display: contents">
#>   <el-affix :offset="offset === null ? undefined : offset" :position="position === null ? undefined : position" :target="target === null ? undefined : target" :z-index="zIndex === null ? undefined : zIndex" :teleported="teleported === null ? undefined : teleported" :append-to="appendTo === null ? undefined : appendTo" @change="elEmitChange" @scroll="elEmitScroll">
#>     <el-button :type="type === null ? undefined : type" :plain="plain === null ? undefined : plain" :round="round === null ? undefined : round" :circle="circle" :loading="loading" :disabled="disabled" :native-type="native_type" @click="handleClick" :size="size === null ? undefined : size" :icon="icon === null ? undefined : icon" :autofocus="autofocus === null ? undefined : autofocus" :auto-insert-space="autoInsertSpace === null ? undefined : autoInsertSpace" :bg="bg === null ? undefined : bg" :color="color === null ? undefined : color" :dark="dark === null ? undefined : dark" :dashed="dashed === null ? undefined : dashed" :link="link === null ? undefined : link" :loading-icon="loadingIcon === null ? undefined : loadingIcon" :tag="tag === null ? undefined : tag" :text="text === null ? undefined : text" ref="sv_top" id="top">{{label}}</el-button>
#>   </el-affix>
#> </div></script>
#>   <script type="application/json" data-shiny-vue-options>{"options":{"data":{"offset":120,"position":null,"target":null,"zIndex":null,"teleported":null,"appendTo":null,"label":"Stays on top","type":null,"size":null,"plain":null,"round":null,"circle":false,"loading":false,"disabled":false,"native_type":"button","icon":null,"count":0,"autofocus":false,"autoInsertSpace":null,"bg":null,"color":null,"dark":null,"dashed":null,"link":null,"loadingIcon":null,"tag":null,"text":null},"methods":{"elEmitChange":"function() { window.shinyVue.emit('el_affix_e10c8cad-0d17-4a3a-960e-88c1e47a681f', 'change', arguments); }","elEmitScroll":"function() { window.shinyVue.emit('el_affix_e10c8cad-0d17-4a3a-960e-88c1e47a681f', 'scroll', arguments, 200); }","handleClick":"function() { if (this.disabled || this.loading) return; this.count++; window.Shiny && Shiny.setInputValue && Shiny.setInputValue('top:shiny.action', this.count); }"},"mounted":"function() { var self = this; var send = function() { window.Shiny && Shiny.setInputValue && Shiny.setInputValue(\"top:shiny.action\", self.count); }; if (window.Shiny && Shiny.shinyapp && typeof Shiny.shinyapp.isConnected === 'function' && Shiny.shinyapp.isConnected()) { send(); } else if (window.jQuery) { jQuery(document).one('shiny:connected', send); } var prev = self._svReport; self._svReport = function() { if (prev) prev(); self.$nextTick(send); }; }"},"input":null,"rate":null,"type":null,"use":["shinyElement.plugin"],"absorbed":{"top":{"fields":{"label":"label","type":"type","size":"size","plain":"plain","round":"round","circle":"circle","loading":"loading","disabled":"disabled","native_type":"native_type","icon":"icon","count":"count","autofocus":"autofocus","autoInsertSpace":"autoInsertSpace","bg":"bg","color":"color","dark":"dark","dashed":"dashed","link":"link","loadingIcon":"loadingIcon","tag":"tag","text":"text","handleClick":"handleClick"},"ref":"sv_top"}},"generated":true,"evals":["options.methods.elEmitChange","options.methods.elEmitScroll","options.methods.handleClick","options.mounted"]}</script>
#> </div>