adding

3 years ago · 9f26abd582
parent ef6a902252
commit 9f26abd582
5 changed files with 18 additions and 12 deletions
--- a/README.md
+++ b/README.md
@ -2,7 +2,7 @@

 Created with [Riot.js](https://riot.js.org)

-Loading as Riot-Component from [Plain-UI](https://plain-ui.com)
+Loading Indicator from [Plain-UI](https://plain-ui.com) in Riot.

 ## Install

@ -10,3 +10,9 @@ Loading as Riot-Component from [Plain-UI](https://plain-ui.com)
 npm install @tiny-components\loading --save
 ```

+## How to use
+
+```
+<tiny-loading active={ state.isActive }></tiny-loading>
+```
+
--- a/example/example.css
+++ b/example/example.css
--- a/example/example.js
+++ b/example/example.js
--- a/example/index.html
+++ b/example/index.html
@ -3,8 +3,8 @@

 <head>
    <meta charset="UTF-8">
-    <title>Tiny Components | Notification</title>
-    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+    <title>Tiny Components | Loading</title>
+    <link rel="icon" href="data:,">
    <link href="/example.css" rel="stylesheet" type="text/css">
 </head>

--- a/src/exampleLoading.riot
+++ b/src/exampleLoading.riot
@ -4,9 +4,9 @@
            <input class="field-choice" type="checkbox" name="radio" value="true" onchange={ () => { handleSwitch() }  }>
            <span class="field-switch"></span>
        </label>
-        <div class="panel" if={ state.active }>
+        <div class="panel" if={ state.isActive }>
            <div class="panel__body">
-                <tiny-loading active={ state.active }></tiny-loading>
+                <tiny-loading active={ state.isActive }></tiny-loading>
            </div>
        </div>
    </div>
@ -15,7 +15,7 @@
        export default {

            state: {
-                active: false
+                isActive: false
            },

            /**
@ -24,10 +24,10 @@
             */
            handleSwitch()
            {
-                if (this.state.active === true) {
-                    this.state.active = false
+                if (this.state.isActive === true) {
+                    this.state.isActive = false
                } else {
-                    this.state.active = true
+                    this.state.isActive = true
                }

                this.update()