140 lines
1.6 KiB
JavaScript
140 lines
1.6 KiB
JavaScript
|
|
import input from "/elements/input.js"
|
|
|
|
import page from "/elements/page.js"
|
|
|
|
|
|
class label{
|
|
|
|
constructor( text ) {
|
|
|
|
this.text = text;
|
|
|
|
}
|
|
|
|
background = "#0000002e"
|
|
|
|
borderRadius = 6;
|
|
|
|
margin = 10;
|
|
|
|
padding = 26;
|
|
|
|
}
|
|
|
|
class a extends input{
|
|
|
|
boxAlignItems = "center"
|
|
|
|
boxJustifyContent = "center";
|
|
|
|
boxColor = "black"
|
|
|
|
}
|
|
|
|
|
|
class b extends input{
|
|
|
|
//background = "blue";
|
|
|
|
boxAlignItems = "center"
|
|
|
|
boxJustifyContent = "center";
|
|
|
|
boxColor = "black"
|
|
|
|
}
|
|
|
|
class c extends input{
|
|
|
|
//background = "yellow";
|
|
|
|
boxAlignItems = "center"
|
|
|
|
boxJustifyContent = "center";
|
|
|
|
boxColor = "black"
|
|
|
|
|
|
}
|
|
|
|
class d extends input{
|
|
|
|
//boxBackground = "grey";
|
|
|
|
boxAlignItems = "center"
|
|
|
|
boxJustifyContent = "center";
|
|
|
|
boxColor = "black"
|
|
|
|
|
|
}
|
|
|
|
class gridA{
|
|
|
|
display = "grid";
|
|
|
|
gridTemplate = `
|
|
|
|
"label label"
|
|
"a a"
|
|
"b d"
|
|
"c d"
|
|
`;
|
|
|
|
height = 400;
|
|
|
|
width = "100%"
|
|
|
|
label = new label("This is the first Grid, Press tab to navigate trough the inputs.");
|
|
|
|
a = new a();
|
|
|
|
b = new b();
|
|
|
|
c = new c();
|
|
|
|
d = new d();
|
|
|
|
}
|
|
|
|
|
|
class gridB{
|
|
|
|
display = "grid";
|
|
|
|
gridTemplate = `
|
|
|
|
"label label"
|
|
"d d"
|
|
"a empty"
|
|
"b b"
|
|
`;
|
|
|
|
height = 400;
|
|
|
|
width = "100%"
|
|
|
|
label = new label("This is the second Grid, Press tab to navigate trough the inputs.");
|
|
|
|
a = new a();
|
|
|
|
b = new b();
|
|
|
|
c = new c();
|
|
|
|
d = new d();
|
|
|
|
}
|
|
|
|
export default class gridExample extends page{
|
|
|
|
flexDirection = "column"
|
|
|
|
|
|
gridA = new gridA();
|
|
|
|
gridB = new gridB();
|
|
|
|
} |