BookStack Code Mirror - bookstack/blob - dev/docs/components.md

   1 # JavaScript Components
   2
   3 This document details the format for JavaScript components in BookStack.
   4
   5 #### Defining a Component in JS
   6
   7 ```js
   8 class Dropdown {
   9     setup() {
  10     }
  11 }
  12 ```
  13
  14 #### Using a Component in HTML
  15
  16 A component is used like so:
  17
  18 ```html
  19 <div component="dropdown"></div>
  20
  21 <!-- or, for multiple -->
  22
  23 <div components="dropdown image-picker"></div>
  24 ```
  25
  26 The names will be parsed and new component instance will be created if a matching name is found in the `components/index.js` componentMapping.
  27
  28 #### Element References
  29
  30 Within a component you'll often need to refer to other element instances. This can be done like so:
  31
  32 ```html
  33 <div component="dropdown">
  34     <span refs="dropdown@toggle othercomponent@handle">View more</span>
  35 </div>
  36 ```
  37
  38 You can then access the span element as `this.$refs.toggle` in your component.
  39
  40 #### Component Options
  41
  42 ```html
  43 <div component="dropdown"
  44     option:dropdown:delay="500"
  45     option:dropdown:show>
  46 </div>
  47 ```
  48
  49 Will result with `this.$opts` being:
  50
  51 ```json
  52 {
  53     "delay": "500",
  54     "show": ""
  55 }
  56 ```