Riot v4 がリリースされて随分経ってしまいましたが、ようやく Semantic UI Riot も v4 に対応できました
Riot.js Advent Calendar 2019の1日目で恐縮ですが宣伝させてください！
Semantic UI Riot って何？
CSSフレームワークのSemantic UIに特化したRiotのコンポーネントセットです。
Semantic UIのJavaScriptやjQueryに依存することなく、Modulesが使えるようになっています。1
https://semantic-ui-riot.web.app
Semantic UI Riot が依存する Riot と Semantic UI のバージョン
Riotのバージョンに合わせて、1.xと2.xのどちらかをお使いください。2
| Semantic UI Riot | Riot | Semantic UI |
|---|---|---|
| 1.x.x | 3.0.0 | 2.3.0 |
| 2.x.x | 4.0.0 | 2.3.0 |
用意されているコンポーネントの一覧
Modules
Semantic UIのModulesの中から個人的によく使うものをコンポーネント化してあります。
- Accordion
- Checkbox
- Dropdown
- Modal
- Popup
- Progress
- Rating
- Tab
Addons
Semanti UIのModulesにはないもので、あったら便利そうなものを作りました。
- Alert
- ブラウザ標準のalert()の代わりに使えます。
- Confirm
- ブラウザ標準のconfirm()の代わりに使えます。
- Datepicker
- Pagination
- Radio
- Semantic UIではCheckboxに含まれているものを独立させました。
- Table
- 列でソートができます。
- Toast
- 一定時間経過したら消えるメッセージです。
- Validation Error
コンポーネントの簡単な紹介
Checkbox
<su-checkbox name="checkbox1">
Make my profile visible
</su-checkbox>
値のやりとりはchecked属性を使います。
this.$("[name='checkbox1']").checked = true
Dropdown
<su-dropdown name="dropdown1" items="{ dropdownItems }"></su-dropdown>
<script>
export default {
dropdownItems: [
{
label: 'Gender',
value: null,
default: true
},
{
label: 'Male',
value: 1
},
{
label: 'Female',
value: 2
},
]
}
</script>
items 属性でドロップダウンの中に表示する項目を設定します。
値のやり取りは value 属性を使いますが、value 属性の場合はgetAttribute , setAttribute じゃないとやり取りできないようです。
（Riot.jsで予約語として扱われているのが原因？と思っていますが、よくわからないので詳しい方教えてください。）
this.$("[name='dropdown1']").getAttribute('value')
this.$("[name='dropdown1']").setAttribute('value', value)
Modal
<su-modal modal="{ modal }" show="{ state.show }" onhide="{ onHide }">
<p>Modal Content</p>
</su-modal>
<button class="ui button" onclick="{ showModal }">Show modal</button>
<script>
export default {
state: {
show: false
},
modal: {
header: 'Select a Photo',
buttons: [{
text: 'Ok',
type: 'primary',
icon: 'checkmark'
}, {
text: 'Cancel'
}]
},
showModal() {
this.update({ show: true })
},
onHide() {
this.update({ show: false })
}
}
</script>
モーダルのコンテンツはタグのテキストに、それ以外のヘッダーやボタンの情報は modal 属性で設定して、 show 属性を true にするとモーダルが表示されます。
モーダルがクローズされると onhide コールバックが呼ばれるので、 show 属性の変数（ここでのstate.show） を false にするのをお忘れなく。
Other
他にも色々なコンポーネントを用意してあるので、興味があればのぞいてみてください。
https://semantic-ui-riot.web.app
インストール
ここまで読んで試してみたくなった方は是非インストールしてみてください！
お手軽に全部CDNから持ってくる方法
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
<script src="https://unpkg.com/riot@4.6.6/riot+compiler.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui-riot@2.1.0/dist/semantic-ui-riot.js"></script>
</head>
<body>
<sample></sample>
<script type="riot" data-src="./sample.riot"></script>
<script>
riot.compile().then(() => {
riot.mount("sample");
});
</script>
</body>
</html>
<sample>
<su-checkbox>Make my profile visible</su-checkbox>
</sample>
Webpackを使う方法
npm i -S semantic-ui-riot
import {component} from 'riot'
import 'semantic-ui-riot'
import Sample from './sample.riot'
component(Sample)(document.getElementById('app'))
module.exports = {
module: {
rules: [
{
test: /\.riot$/,
exclude: /node_modules/,
use: [{
loader: '@riotjs/webpack-loader'
}]
}
]
}
};
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>
<body>
<div id="app"></div>
<script src="main.js"></script>
</body>
</html>
<sample>
<su-checkbox>Make my profile visible</su-checkbox>
</sample>
Thanks!
Semantic UI Riot のアイコンは Riotユーザーでデザイナーの @nibushibu さんに作って頂きました！
どうもありがとうございます！