semantic-ui-riot

    2.2.4 • Public • Published

    semantic-ui-riot

    npm version Build Status Coverage Status GitHub license npm

    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/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.0.0/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-riot

    index.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/semantic-ui@2.4.2/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>

    Install

    npm i semantic-ui-riot

    DownloadsWeekly Downloads

    32

    Version

    2.2.4

    License

    MIT

    Unpacked Size

    722 kB

    Total Files

    6

    Last publish

    Collaborators

    • black_trooper