1.2.4 • Published 2 years ago
@itkyk/view v1.2.4
@itkyk/view
Install
$ npm i @itkyk/view
How to use this module.
<div data-view="sample"></div>
import View from "@itkyk/view";
// OR
const View = require("@itkyk/view");
View.createComponent("sample", class extends View.Component {
constructor(props) {
super(props);
this.init(()=> {
console.log("Hello, World!") // output console "Hello,World!"
})
}
})
Methods
Ref
<div data-view="sample">
<h1 data-sample-ref="title">Hello, World!</h1>
</div>
View.creareComponent("sample", class extends View.Component {
constructor(props) {
super(props);
this.init(() => {
this.getHeaderText(); // output console "Hello, World!";
})
}
getHeaderText = () => {
const text = this.refs.title.innerText;
console.log(text)
}
})
Events
When add events for Node, you should set Data Attributes
.
HTML
<div data-{data-view Name}-{eventName}="functionName"></div>
Example
<div data-view="sample">
<!--- When you click button, popup "You clicked Alert! button." --->
<button type="button" data-sample-click="onClick">Alert!</button>
</div>
createComponent("sample", class extends View.Component {
constructor(props) {
super(props);
this.init(() => {});
}
onClick = (e: Event) => {
const target = e.target;
const text = `You clicked ${target.innerText} button.`
alert(text);
}
})
Event Type
event | ex |
---|---|
click | data-xx-click |
scroll | data-xx-scroll |
load | data-xx-load |
mouseenter | data-xx-mouseenter |
mouseleave | data-xx-mouseleave |
mouseover | data-xx-mouseover |
change | data-xx-change |
Watch
This library has watch
function like a NuxtJS
.
createComponent("sample", class extends View.Component {
private count: number;
constructor(props) {
super(props);
this.count = 0;
this.init(()=>{
this.setCountUp();
});
}
watch = () => {
return {
count: () => {
// when this.count is updated,
// the function is executed below.
console.log(`count: ${this.count}`);
}
}
}
setCountUp = () => {
setInterval(() => {
this.count ++;
}, 1000)
}
})
style
This library includes EmotionJS
.
<div data-view="sample">
<div data-sample-css="red-block"></div>
<div data-sample-css="blue-block"></div>
<div data-sample-css="green-block"></div>
</div>
import {css} from "@emotion/css";
createComponent("sample", class extends View.Component {
constructor(props) {
super(props);
this.init(()=>{});
}
style = () => {
const block = css({
width: "100px",
height: "100px"
})
return {
"red-block": css(block, {
backgroundColor: "red"
}),
"blue-block": css(clock, {
backgroundColor: "blue"
}),
"green-block"; css(block, {
backgroundColor: "greeen"
})
}
}
})
this variables
<!--- Exsample --->
<div data-view="sample">
<h1 data-sample-ref="title">Hello, world!</h1>
</div>
id | value | ex |
---|---|---|
section | HTMLElement | <div data-view="sample"></div> |
refs | Record<string, HTMLElement> | this.refs.title ▼<h1 data-sample-ref="title">Hello, world!</h1> |
1.2.4
2 years ago
1.2.0
2 years ago
1.2.3
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.1.1
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.0
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago