• Stars
    star
    136
  • Rank 261,415 (Top 6 %)
  • Language
    JavaScript
  • Created about 9 years ago
  • Updated almost 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Bootstrap-like Components for Riot.js

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 <btn>, instead of onpush
  • onselect event handler on <menu> now passes an event object instead of a selected string.

Demo

Getting started

In short, use the tags as just like HTML: <btn>, <btn-group>, <menu>...etc.

<btn>Your Button</btn>

1) Use directly in HTML file

<!DOCTYPE html>
<html>
  <head>
    <title>riot-bootstrap</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/normalize/3.0.3/normalize.css">
  </head>
  <body>
    <section>
      <btn>Default</btn>
      <btn option="primary">Primary</btn>
      <btn option="success">Success</btn>
    </section>
    <script src="//cdn.jsdelivr.net/riot/2.0/riot.js"></script>
    <script src="dist/riot-bootstrap.js"></script>
    <script>riot.mount('*')</script>
  </body>
</html>

2) Use in tag file (better)

  • load riot.js
  • load normalize.css
  • load riot-bootstrap (this library)
  • load your tag file
  • then, riot.mount('app')
<!DOCTYPE html>
<html>
  <head>
    <title>riot-bootstrap</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/normalize/3.0.3/normalize.css">
  </head>
  <body>
    <app></app>
    <script src="//cdn.jsdelivr.net/riot/2.0/riot.js"></script>
    <script src="dist/riot-bootstrap.js"></script>
    <script src="app.js"></script>
    <script>riot.mount('app')</script>
  </body>
</html>
// app.html
<app>
  <section>
    <btn onclick={ click }>Say 'Hi!'</btn>
  </section>
  <script>
    click (e) {
      alert('Hi!')
    }
  </script>
</app>

3) Use with rollup (best)

  • Install riot-bootstrap via NPM.
  • Create the main script.
  • Prepare your tag files.
  • Rollup.
  • Load the compiled script into HTML.
$ npm install --save riot-bootstrap
// app.js
import riot from 'riot'
import 'riot-bootstrap'
import './app.tag' // and other components
riot.mount('app')
// app.tag
<app>
  <section>
    <btn onclick={ click }>Say 'Hi!'</btn>
  </section>
  <script>
    this.click = e => {
      alert('Hi!')
    }
  </script>
</app>
<!DOCTYPE html>
<html>
  <head>
    <title>riot-bootstrap</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/normalize/3.0.3/normalize.css">
  </head>
  <body>
    <app></app>
    <script src="app.js"></script>
  </body>
</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:

<app>
  <btn-group>
    <btn onpush={ parent.parent.push }>{ parent.parent.message }</btn>
  </btn-group>
  this.message = 'Click me!'
  push (e) {
    this.message = 'Thanks!'
    this.update() // needed to re-render
  }
</app>

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

<app>
  <btn-group>
    <btn onpush={ push }>{ message }</btn>
  </btn-group>
  this.message = 'Click me!'
  push (e) {
    this.message = 'Thanks!'
    // automatically re-rendered
  }
</app>

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: <btn onpush={ push }>Hi!</btn>
    • NG: <btn onpush={ memberOf.subObject }>Hi!</btn>
    • NG: <btn onpush={ returnFunction() }>Hi!</btn>

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 riot/riot#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: <calendar> and <time-picker>.
  • v1.1.0: align="right" option for <menu> 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!

More Repositories

1

paper-css

Paper CSS for happy printing
CSS
2,443
star
2

symbols-for-sketch

Symbol font templates for Sketch.app
JavaScript
680
star
3

gulp-sketch

A SketchTool plugin for gulp
CoffeeScript
300
star
4

felt

On-demand bundler for ES6 / CSS Next
JavaScript
118
star
5

keiyaku-css

Crazy Style Formatter for Japanese Contract Document
CSS
107
star
6

momy

MongoDB to MySQL replication
JavaScript
98
star
7

tokoro

住所緯度経度変換ライブラリ (ジオコーディング)
CoffeeScript
93
star
8

webdriverio-examples

JavaScript
64
star
9

ikki

An extention toolkit for Riot.js
JavaScript
53
star
10

symbols

The Template of Symbol Fonts for Web
CSS
48
star
11

symbol-font-in-web

CoffeeScript
48
star
12

gulp-slim

Slim plugin for gulp
CoffeeScript
44
star
13

ModernAqua-Theme-for-SugarCRM

MacOSX-like theme by CogniTom
CSS
20
star
14

gulp-straw

Gulp Task Manager: The command-line tool for managing your gulpfile.
CoffeeScript
17
star
15

Qiita

Articles on Qiita
14
star
16

shinkan.today

「新刊トゥデイ」
JavaScript
14
star
17

riot-mixin-pack

JavaScript
12
star
18

sankaku

三角かな配列 ― USキーボードでカナ入力
12
star
19

sometime-riot

Timepicker for Riot.js
JavaScript
12
star
20

coder2-docker

Dockerfile
10
star
21

west-or-east

郵便番号から、西日本か東日本を判定
JavaScript
9
star
22

wdio-phantomjs-service

WebdriverIO service to start & stop PhantomJS
JavaScript
8
star
23

riot-fa

Font Awesome icons for Riot.js
JavaScript
8
star
24

fafgag

Creates an Observable from FAFGAG (Function / Async Function / Generator / Async Generator)
JavaScript
8
star
25

es-http-error

HttpError class for browsers (without Node.js dependencies)
JavaScript
7
star
26

gulp-handbook

gulp.js Handbook
CoffeeScript
7
star
27

electron-starter

Electron Sample Application
CoffeeScript
7
star
28

gulpfiles

gulpfiles for gulp.js
CoffeeScript
6
star
29

gulp-phantom

PhantomJS plugin for gulp
CoffeeScript
6
star
30

comic-viewer

A comic viewer built on Riot.js
JavaScript
6
star
31

dominiq

A happy medium between classic DOMs and upcoming new ES features
JavaScript
5
star
32

riot-action

JavaScript
5
star
33

mornin

Check-in! Mornin'!
JavaScript
5
star
34

CAPITALS

CAPITALS illustrates how to attach source map to the code during compilation.
JavaScript
5
star
35

riotjs-currency-calculator

Riot.js Currency Calculator
CoffeeScript
4
star
36

bookreader.js

JavaScript
4
star
37

EventWall

JavaScript
4
star
38

SugarCE-JLP

Japanese Language Pack for SugarCE
PHP
3
star
39

dotfiles

Dotfiles without dotfiles
Shell
3
star
40

presentation-cmu12

CSS
3
star
41

riot-tutorial

HTML
3
star
42

entry

Sample app with Riot.js
JavaScript
3
star
43

riot-checker

Riot Tag Syntax Checker
HTML
2
star
44

felt-rollup

JavaScript
2
star
45

felt-recipe-minimal

Minimal recipe for Felt
JavaScript
2
star
46

felt-recipe-react

A recipe for Felt with React
JavaScript
2
star
47

felt-recipe-riot

A recipe for Felt with Riot
JavaScript
2
star
48

StaffRoll.net-Libraries-and-Themes

JavaScript
2
star
49

windmill

A keymap for 40% ortholinear keyboards.
C
1
star
50

mb_emulator

PHP
1
star
51

dali-example

JavaScript
1
star
52

CoffeeSugar

Helper functions written in CoffeeScript
1
star
53

Vagrant-LAMP-concrete5

A LAMP stack for Laravel using Vagrant with Chef
Ruby
1
star
54

canvas-lesson

1
star
55

CycleThroughWindows

1
star
56

wagon

Embed images into the CSS on the fly.
PHP
1
star
57

cognitom.github.com

public site
PHP
1
star
58

felt-postcss

JavaScript
1
star
59

devsync

Syncing npm modules while development
JavaScript
1
star