@dlightjs/components v1.0.0-next.8
@dlightjs/components
This is a well-maintained components library for DLight.
Stack
HStack
usage
class MyComp extends View {
Body() {
HStack()
{
div("we will")
div("be in one line")
}
}
}
props
name | type | default value | description |
---|---|---|---|
alignment | "top" | "center" | "button" | "top" | how elements with different height inside HStack will align |
spacing | number | 10 | column-gap between elements |
width | string | "100%" | HStack div's width |
height | string | "max-content" | HStack div's height |
VStack
usage
class MyComp extends View {
Body() {
VStack()
{
div("we will")
div("be vertically displayed")
}
}
}
props
name | type | default value | description |
---|---|---|---|
alignment | "leading" | "center" | "tailing" | "leading" | how elements with different width inside VStack will align |
spacing | number | 10 | row-gap between elements |
width | string | "max-content" | VStack div's width |
height | string | "100%" | VStack div's height |
ZStack
usage
class MyComp extends View {
Body() {
ZStack()
{
div("we will")
div("be overlapped")
}
}
}
props
name | type | default value | description |
---|---|---|---|
hAlignment | "leading" | "center" | "tailing" | "leading" | how elements with different width inside ZStack will align |
vAlignment | "top" | "center" | "button" | "top" | how elements with different height inside HStack will align |
width | string | "max-content" | ZStack div's width |
height | string | "max-content" | ZStack div's height |
Spacer
Push elements away.
usage
class MyComp extends View {
Body() {
HStack()
{
Spacer()
div("I will be in the center horizontally")
Spacer()
}
}
}
Route
It's too powerful and easy to use, try it out.
class Page extends View {
// RouteParam will be passed through env. It has navigator and current path.
@Env RouteParam = required
navigator = this.RouteParam.navigator
path = this.RouteParam.navigator
Body() {
div(`I am page: ${this.path}`)
button("goto home")
.onclick(() => {
this.navigator.to("../home")
})
// nested router
RouterSpace()
{
Route("hello") // -> /page/hello
{
div("hello")
}
Route("world") // -> /page/world
{
div("world")
}
}
}
}
class MyComp extends View {
navigator?
Body() {
RouterSpace()
.navigator(navigator)
{
Route("home") // -> /home
{
div("I am home")
}
Route("page") // -> /pate
{
Page()
}
Route(/abc+/) // -> /abcc....
{
div("I will match abc+++") // regex route
}
Route()
{
div("I am others") // default route
}
}
}
}
Switch
Simple implemented switch-case expression.
class MyComp extends View {
idx = 0
Body() {
Switch(idx)
{
Case(0)
{
div("0")
}
Case(1)
{
div("1")
}
Case()
{
div("other")
}
}
}
}
Transition
Transition
usage
class MyComp extends View {
@State width = 50
Body() {
button("+ width")
.onclick(() => {
this.width += 50
})
Transition()
{
div()
._backgroundColor("red")
._width(this.width)
}
}
}
props
name | type | default value | description |
---|---|---|---|
duration | number | 0.5 | transition's duration (s) |
easing | string | "ease-in-out" | transition's easing type |
delay | number | 0 | transition's delay (s) |
TransitionGroup
Too powerful to describe, just try these codes and you'll know how to use it(maybe).
function getData(text) {
return {
id: Math.random().toString(20),
text
}
}
export class TransitionTest extends View {
@State list = [
getData("First one"),
getData("II 222"),
getData("333333 okk"),
getData("This is four"),
getData("555555!!"),
]
remove() {
this.list.splice(Math.floor(Math.random()*(this.list.length-1)), 1)
this.list = [...this.list]
}
add() {
this.list.splice(Math.floor(Math.random()*(this.list.length-1)), 0, getData(`---${this.list.length}`))
this.list = [...this.list]
}
shuffle() {
let newList = this.list
while(JSON.stringify(newList) === JSON.stringify(this.list)) {
newList = this.list
.map(value => ({ value, sort: Math.random() }))
.sort((a, b) => a.sort - b.sort)
.map(({ value }) => value)
}
this.list = [...newList]
}
@State length = 100
@State toggle = true
Body() {
button("shuffle")
.onclick(() => {
this.shuffle()
})
button("toggle")
.onclick(() => {
this.toggle = !this.toggle
})
button("remove")
.onclick(() => {
this.remove()
})
button("add")
.onclick(() => {
this.add()
})
button("+")
.onclick(() => {
this.length += 50
})
button("-")
.onclick(() => {
this.length -= 50
})
if (this.toggle){
TransitionGroup()
.duration(1)
.delay({
firstAppear: (el) => {
return el.dataset.index * 0.7 ?? 0
}
})
.appearWith((el) => ({
opacity: 0,
backgroundColor: "yellow",
transform: `translateX(${40 + 80 * el.dataset.index ?? 0}px)`
}))
.disappearWith({
opacity: 0,
transform: "translateX(100px)",
backgroundColor: "yellow"
})
{
for(let [idx, ok] of Object.entries(this.list)) { [ok.id]
div(ok.text)
.willAppear((el) => {
el.dataset.index = idx
})
._width(`${this.length}px`)
._marginTop("10px")
._backgroundColor(this.toggle ? "blue" : "red")
}
}
}
}
}
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
8 months ago
10 months ago
10 months ago
10 months ago
8 months ago
8 months ago
10 months ago
8 months ago
10 months ago
8 months ago
10 months ago
8 months ago
8 months ago
10 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
8 months ago
10 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago