Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://cognitom.github.io/riot-bootstrap/
Bootstrap-like Components for Riot.js
https://cognitom.github.io/riot-bootstrap/
Last synced: 3 months ago
JSON representation
Bootstrap-like Components for Riot.js
- Host: GitHub
- URL: https://cognitom.github.io/riot-bootstrap/
- Owner: cognitom
- Created: 2015-03-20T14:42:12.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-07-09T19:16:58.000Z (over 8 years ago)
- Last Synced: 2024-05-13T02:20:30.802Z (6 months ago)
- Language: JavaScript
- Homepage: http://cognitom.github.io/riot-bootstrap/
- Size: 163 KB
- Stars: 136
- Watchers: 18
- Forks: 11
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-riotjs - Riot Bootstrap
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!