Skip to content

svbatalov/ractive-component-baron

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ractive-component-baron

Ractive component wrapping Baron.js scroller library.

Usage:

  1. npm install ractive-component-baron
  2. In your app do require('ractive-component-baron'); This will add the Scroll object to Ractive.components.
  3. In your Ractive template:
    <Scroll class="myscroll" id="..." disable='..boolean..' dir='...' opts='..object..'>
      ... scrollable content
    </Scroll>
    All attributes are optional. Use disable='true' when native scroll is preferable. dir may be one of 'x' for horizontal scroll, 'y' for vertical scroll (default) or 'xy' for bidirectional scroll. opts allows to extend default Baron options, which are:
    defaultOpts = {
      scroller: '.scroller',
      bar: '.scroller__bar_v',
      barOnCls: 'baron',
    
      $: function(selector, context) {
        return bonzo(qwery(selector, context));
      },
      event: function(elem, event, func, mode) {
        (mode == 'trigger') && (mode = 'fire');
        bean[mode || 'on'](elem, event, func);
      }
    }
  4. Include baron.css from the repository tweaked to your needs.
  5. Fix height and/or width of .myscroll using some CSS.

See example/ directory for working example. Run npm install in both root and example directories, then node server.js and go to localhost:3333 in your browser.

Note that Baron uses MutationObserver to update scroller when necessary.

License

MIT

About

Ractive component wrapping Baron.js scroller library.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published