Browse Source

Update demo with Flex

pull/2301/head
Artur Arseniev 11 years ago
parent
commit
81f6e59c71
  1. 211
      demo.html
  2. BIN
      img/flex-al-center.png
  3. BIN
      img/flex-al-end.png
  4. BIN
      img/flex-al-start.png
  5. BIN
      img/flex-al-str.png
  6. BIN
      img/flex-dir-col-rev.png
  7. BIN
      img/flex-dir-col.png
  8. BIN
      img/flex-dir-row-rev.png
  9. BIN
      img/flex-dir-row.png
  10. BIN
      img/flex-just-end.png
  11. BIN
      img/flex-just-sp-ar.png
  12. BIN
      img/flex-just-sp-bet.png
  13. BIN
      img/flex-just-sp-cent.png
  14. BIN
      img/flex-just-start.png

211
demo.html

@ -22,6 +22,64 @@
.icon-rm {
background: url("./img/icon-sq-r.png") no-repeat center;
}
.icons-flex {
background-size: 70% 65% !important;
height: 15px;
width: 17px;
opacity: 0.9;
}
.icon-dir-row {
background: url("./img/flex-dir-row.png") no-repeat center;
}
.icon-dir-row-rev {
background: url("./img/flex-dir-row-rev.png") no-repeat center;
}
.icon-dir-col {
background: url("./img/flex-dir-col.png") no-repeat center;
}
.icon-dir-col-rev {
background: url("./img/flex-dir-col-rev.png") no-repeat center;
}
.icon-just-start{
background: url("./img/flex-just-start.png") no-repeat center;
}
.icon-just-end{
background: url("./img/flex-just-end.png") no-repeat center;
}
.icon-just-sp-bet{
background: url("./img/flex-just-sp-bet.png") no-repeat center;
}
.icon-just-sp-ar{
background: url("./img/flex-just-sp-ar.png") no-repeat center;
}
.icon-just-sp-cent{
background: url("./img/flex-just-sp-cent.png") no-repeat center;
}
.icon-al-start{
background: url("./img/flex-al-start.png") no-repeat center;
}
.icon-al-end{
background: url("./img/flex-al-end.png") no-repeat center;
}
.icon-al-str{
background: url("./img/flex-al-str.png") no-repeat center;
}
.icon-al-center{
background: url("./img/flex-al-center.png") no-repeat center;
}
#wte-sm-label-parent-flex {
width: 100%;
}
#wte-sm-label-parent-flex .wte-sm-field{display: none;}
#wte-sm-label-parent-flex {
border-bottom: 1px solid #383838;
font-size: 12px;
padding: 15px 3px 5px;
width: 100%;
}
#wte-sm-flex-grow, #wte-sm-flex-shrink{ width:30%;}
#wte-sm-flex-basis{ width:40%;}
</style>
</head>
<body>
@ -901,6 +959,159 @@
functionName: 'rotateZ',
}],
}]
},{
name: 'Flex',
open: false,
properties: [{
name : 'Flex Container',
property : 'display',
type : 'select',
defaults : 'block',
list : [{
value : 'block',
name : 'Disable',
},{
value : 'flex',
name : 'Enable',
}],
},{
name: 'Flex Parent',
property: 'label-parent-flex',
type: 'integer',
},{
name : 'Direction',
property : 'flex-direction',
type : 'radio',
defaults : 'row',
list : [{
value : 'row',
name : 'Row',
className : 'icons-flex icon-dir-row',
title : 'Row',
},{
value : 'row-reverse',
name : 'Row reverse',
className : 'icons-flex icon-dir-row-rev',
title : 'Row reverse',
},{
value : 'column',
name : 'Column',
title : 'Column',
className : 'icons-flex icon-dir-col',
},{
value : 'column-reverse',
name : 'Column reverse',
title : 'Column reverse',
className : 'icons-flex icon-dir-col-rev',
}],
},{
name : 'Justify',
property : 'justify-content',
type : 'radio',
defaults : 'flex-start',
list : [{
value : 'flex-start',
className : 'icons-flex icon-just-start',
title : 'Start',
},{
value : 'flex-end',
title : 'End',
className : 'icons-flex icon-just-end',
},{
value : 'space-between',
title : 'Space between',
className : 'icons-flex icon-just-sp-bet',
},{
value : 'space-around',
title : 'Space around',
className : 'icons-flex icon-just-sp-ar',
},{
value : 'center',
title : 'Center',
className : 'icons-flex icon-just-sp-cent',
}],
},{
name : 'Align',
property : 'align-items',
type : 'radio',
defaults : 'center',
list : [{
value : 'flex-start',
title : 'Start',
className : 'icons-flex icon-al-start',
},{
value : 'flex-end',
title : 'End',
className : 'icons-flex icon-al-end',
},{
value : 'stretch',
title : 'Stretch',
className : 'icons-flex icon-al-str',
},{
value : 'center',
title : 'Center',
className : 'icons-flex icon-al-center',
}],
},{
name: 'Flex Children',
property: 'label-parent-flex',
type: 'integer',
},{
name: 'Order',
property: 'order',
type: 'integer',
defaults : 0,
min: 0
},{
name : 'Flex',
property : 'flex',
type : 'composite',
properties : [{
name: 'Grow',
property: 'flex-grow',
type: 'integer',
defaults : 0,
min: 0
},{
name: 'Shrink',
property: 'flex-shrink',
type: 'integer',
defaults : 0,
min: 0
},{
name: 'Basis',
property: 'flex-basis',
type: 'integer',
units: ['px','%',''],
unit: '',
defaults : 'auto',
}],
},{
name : 'Align',
property : 'align-self',
type : 'radio',
defaults : 'auto',
list : [{
value : 'auto',
name : 'Auto',
},{
value : 'flex-start',
title : 'Start',
className : 'icons-flex icon-al-start',
},{
value : 'flex-end',
title : 'End',
className : 'icons-flex icon-al-end',
},{
value : 'stretch',
title : 'Stretch',
className : 'icons-flex icon-al-str',
},{
value : 'center',
title : 'Center',
className : 'icons-flex icon-al-center',
}],
}]
}
],

BIN
img/flex-al-center.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 280 B

BIN
img/flex-al-end.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 285 B

BIN
img/flex-al-start.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 283 B

BIN
img/flex-al-str.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 327 B

BIN
img/flex-dir-col-rev.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 320 B

BIN
img/flex-dir-col.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 328 B

BIN
img/flex-dir-row-rev.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 302 B

BIN
img/flex-dir-row.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 296 B

BIN
img/flex-just-end.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 282 B

BIN
img/flex-just-sp-ar.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 290 B

BIN
img/flex-just-sp-bet.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 292 B

BIN
img/flex-just-sp-cent.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 283 B

BIN
img/flex-just-start.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 288 B

Loading…
Cancel
Save