semantic-ui-riot
Semantic UI Riot is a set of Riot components based on Semantic UI markup and CSS. As a result no dependency on jQuery or Semantic UI's JavaScript is required.
Here is a list of minimal required versions of Riot and Semantic UI for semantic-ui-riot:
| semantic-ui-riot | Riot | Semantic UI |
|---|---|---|
| 0.x.x | 3.0.0 | 2.3.0 |
| 1.x.x | 3.0.0 | 2.3.0 |
| 2.x.x | 4.0.0 | 2.3.0 |
Demo
https://semantic-ui-riot.web.app/
Getting started
1) Use in tag file
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" />
<script src="https://unpkg.com/[email protected]/riot+compiler.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic-ui-riot.js"></script>
</head>
<body>
<sample></sample>
<script type="riot" data-src="./app/sample.riot"></script>
<script>
riot.compile().then(() => {
riot.mount("sample");
});
</script>
</body>
</html>sample.riot
<sample>
<su-checkbox>Make my profile visible</su-checkbox>
</sample>2) Use with webpack
npm install --save semantic-ui-riotindex.js
import {component} from 'riot'
import 'semantic-ui-riot'
import Sample from './sample.riot'
component(Sample)(document.getElementById('app'))webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.riot$/,
exclude: /node_modules/,
use: [{
loader: '@riotjs/webpack-loader'
}]
}
]
}
};index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
</head>
<body>
<div id="app"></div>
<script src="main.js"></script>
</body>
</html>sample.tag
<sample>
<su-checkbox>Make my profile visible</su-checkbox>
</sample>