Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

ChristoPy/kuva

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

19 Commits

Repository files navigation

Kuva

Aims to be a lightweight and straightforward reactive front-end library.
Always basic and easy to read.

Installation

npm i kuva

Usage

Your script

import Kuva from 'kuva';
const app = Kuva({
 name: 'John',
 canShowLastName: false
})

Your HTML

<label for="name-input">What is your name?</label>
<input k-bind="name" name="name-input"/>
<div>your name is:
 <b k-text="name"></b>
</div>
<p k-if="canShowLastName">This node doesn't exists until the clause is true</p>
<p k-not="canShowLastName">This node doesn't exists while the clause is false</p>
<p k-hide="canShowLastName">This node is hidden</p>

Directives

Every Kuva directive, starts with a k- prefix.
The available ones are:

  • k-text:
    Shows the value of the received reference in the element's text.
  • k-if:
    Removes the element if received reference is falsy. Add if truthy.
  • k-not:
    Oposite of k-if. Removes when truthy. Add when falsy.
  • k-hide:
    Hides the element if received reference is falsy. Shows if truthy.
  • k-bind:
    Adds two way data binding to an input with the received reference.

Docs

Soon

Version

0.0.3, not stable nor production ready, use with caution

About

Lighweight and straightforward reactive front-end library.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

AltStyle によって変換されたページ (->オリジナル) /