Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://cognitom.github.io/riot-bootstrap/

Bootstrap-like Components for Riot.js
https://cognitom.github.io/riot-bootstrap/

Last synced: 27 days ago
JSON representation

Bootstrap-like Components for Riot.js

Awesome Lists containing this project

README

        

# Riot Bootstrap

Bootstrap-like Components for Riot.js

- **Readable**: no more cluttered class names!
- **Stand-alone**: independent from Bootstrap
- **Modular**: one file, one component
- **Packaged**: HTML/CSS/JavaScript are packaged into one file

## v1.0 API Changed

- Use `onclick` event handler on ``, instead of `onpush`
- `onselect` event handler on `` now passes an event object instead of a selected string.

## Demo

- [cognitom.github.io/riot-bootstrap](http://cognitom.github.io/riot-bootstrap)

## Getting started

In short, use the tags as just like HTML: ``, ``, ``...etc.

```html
Your Button
```

### 1) Use directly in HTML file

- load [riot.js](https://muut.com/riotjs/)
- load [normalize.css](http://necolas.github.io/normalize.css/)
- load riot-bootstrap (this library)
- then, `riot.mount('*')`

```html


riot-bootstrap




Default
Primary
Success



riot.mount('*')

```

### 2) Use in tag file (better)

- load [riot.js](https://muut.com/riotjs/)
- load [normalize.css](http://necolas.github.io/normalize.css/)
- load riot-bootstrap (this library)
- load your tag file
- then, `riot.mount('app')`

```html


riot-bootstrap







riot.mount('app')

```

```html
// app.html


Say 'Hi!'


click (e) {
alert('Hi!')
}

```

### 3) Use with rollup (best)

- Install `riot-bootstrap` via NPM.
- Create the main script.
- Prepare your tag files.
- [Rollup](http://rollupjs.org/).
- 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


Say 'Hi!'


this.click = e => {
alert('Hi!')
}

```

```html


riot-bootstrap





```

## Components

See [the demo page](http://cognitom.github.io/riot-bootstrap).

## 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](https://muut.com/riotjs/release-notes.html#2-0-15-em-apr-23-2015-em-)
- 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](https://github.com/cognitom/riot-bootstrap/issues/10)
- v1.0.0: Completely rewrites into ES6!, supports `domEvent`, makes `parentScope` external. Add: `` and ``.
- v1.1.0: `align="right"` option for `` by @cuu508

## TODO:

Rebuilding Bootstrap components for Riot.js

- Input groups
- Breadcrumbs
- Badges
- Panels
- Progress bars
- Anything else? Send us a new issue or PR!