1 # JavaScript Components
3 This document details the format for JavaScript components in BookStack. This is a really simple class-based setup with a few helpers provided.
5 #### Defining a Component in JS
10 this.toggle = this.$refs.toggle;
11 this.menu = this.$refs.menu;
13 this.speed = parseInt(this.$opts.speed);
18 All usage of $refs, $manyRefs and $opts should be done at the top of the `setup` function so any requirements can be easily seen.
20 #### Using a Component in HTML
22 A component is used like so:
25 <div component="dropdown"></div>
27 <!-- or, for multiple -->
29 <div components="dropdown image-picker"></div>
32 The names will be parsed and new component instance will be created if a matching name is found in the `components/index.js` componentMapping.
34 #### Element References
36 Within a component you'll often need to refer to other element instances. This can be done like so:
39 <div component="dropdown">
40 <span refs="dropdown@toggle othercomponent@handle">View more</span>
44 You can then access the span element as `this.$refs.toggle` in your component.
46 #### Component Options
49 <div component="dropdown"
50 option:dropdown:delay="500"
55 Will result with `this.$opts` being: