``html
Your Button
`

$3

- load riot.js
- load normalize.css
- load riot-bootstrap (this library)
- then, riot.mount('*')

`html









- load riot.js
- load normalize.css
- load riot-bootstrap (this library)
- load your tag file
- then, riot.mount('app')

`html














`

`html
// app.html



- Install riot-bootstrap via NPM.
- Create the main script.
- Prepare your tag files.
- Rollup.
- Load the compiled script into HTML.

`bash
$ npm install --save riot-bootstrap
`

`javascript
// app.js
import riot from 'riot'
import 'riot-bootstrap'
import './app.tag' // and other components
riot.mount('app')
`

`html
// app.tag



`html











`

Components

See the demo page.

Scope emulation

Riot.js has a scope for most inner Tag element. So we need to write like this:

`html


{ parent.parent.message }

this.message = 'Click me!'
push (e) {
this.message = 'Thanks!'
this.update() // needed to re-render
}

`

But this is a little bit inconvenient, so riot-bootstrap has a simple 'Scope emulation' mechanism. Now we can write like this.

`html


{ message }

this.message = 'Click me!'
push (e) {
this.message = 'Thanks!'
// automatically re-rendered
}

`

There is some limitation:

- The variables in the parent's scope are updated just before update event.
- The view is automatically re-rendered only if the method is a member of Tag element. In NG case below, this.update() is needed to call manually.
- OK: Hi!
- NG: Hi!
- NG: Hi!

History

- v0.0.1: Buttons, button groups, dropdowns
- v0.1.0: Now transclusion is supported, thanks to Riot 2.0.15
- v0.1.1: Radio groups
- v0.1.2: Support Browserify and publish to NPM
- v0.1.7: Fix: CommonJS issue
- v0.2.0: Scope emulation. Related to https://github.com/muut/riotjs/issues/662
- v0.2.1: Fix: automatic update
- v0.2.2: Fix: opts also supported in scope emulation
- v0.2.3: Fix: disabled now works with boolean
- v0.2.4: Fix: update disabled status after second update
- v0.3.0: parentScope as a mixin
- v0.3.1: Use mixin initializer
- v0.3.2: Add href attribute to btn tag
- v0.3.3: Fix the bug #10
- v1.0.0: Completely rewrites into ES6!, supports domEvent, makes parentScope external. Add: and .
- v1.1.0: align="right" option for