H2D CSS - R32/heaps GitHub Wiki

由于 h2d.Flow 能快速地布局, 因此 css 组件已经在 deleted h2d.comp/css 被完全删除，因此下边的内容已经是过时了的

实际上 h2d.Flow 非常地简单, 虽然它的源码看上去很长, 你可以把它看成一个用来布局的容器。

HTML Element

所支持的元素，通过查看 h2d.comp.Parser 的源码可以得知:

  • body : 将作为所有组件的根元素

  • style : 由于 body 将为根元素，因此这个元素放在 body 下就好了。

  • script : 由于运行时，因此这些脚本应该为 hscript，还有实际上 h2d.comp 下有个模拟的 JQuery 类，你可以看下

  • div, box : 对应为 h2d.comp.Box

    默认CSS属性: layout: inline

  • button : 对应为 h2d.comp.Button

  • slider : 对应为 h2d.comp.Slider

  • label, span : 对应为 h2d.comp.Label

  • h1, h2, h3, h4 : 对应为 h2d.comp.Label，例: <label class=":h2">Hi</>

  • checkbox : 对应为 h2d.comp.Checkbox

  • itemlist : 对应为 h2d.comp.Itemlist

  • input : 对应为 h2d.comp.Input，注: 不支持 IME 输入（即不支持输法入输入）

  • color : 对应为 h2d.comp.Color。一个颜色方块，点击后将自动打开 colorpicker

  • colorpicker : 对应为 h2d.comp.Colorpicker

  • gradienteditor : 对应为 h2d.comp.Gradienteditor

  • select : 对应为 h2d.comp.Select

    • option : 父元素必须为 select，因为这个元素的 innerData 将会添加到 select 对象上去

  • value : 对应为 h2d.comp.Value

Attribute

元素所支持的属性

  • class : 同样可以使用空格分隔多个类名

  • id : 参考 h2d.comp.JQuery 及 sample/comp 示例

  • value : 作用于 slider, input, color, value, button, option

  • style :

  • selected: Bool 类型（只要不为 "false"，那就为 true），仅作用于 itemlist 元素

  • checked : Bool 类型，仅作用于 checkbox 元素

  • x, y : Float 类型

  • max, min : Float 类型，仅作用于 slider, value 这些元素

  • increment : Float 类型，仅作用于 value 元素

  • onchange : 仅作用于 slider, checkbox, itemlist, input, color, select, value 这些元素

  • onblur, onfocus : 仅作用于 input 元素

  • onmouseover, onmouseout, onmousedown, onmouseup, onclick, onrclick :

  • disabled : Bool 类型，这个属性会使得这个元素 addClass(":disabled")

CSS

参考 h2d.css.Parser 文件

VGroup(list) : 表示用空格分隔的值 VList(list) : 表示用逗号分隔的值

由于 h2d.css.default.css 中设置了默认字体 "Arial", 12px 大小，因此可能需要将这个字体在资源根目录。

TODO: 不知道 BitmapFont 是否能行

Layout

  • layout : horizontal, vertical, absolute, dock, inline

  • dock : top, left, right, bottom, full

  • offset : 默认为 offset 0 0

    • offset-x : “数值”
    • offset-y : “数值”

  • spacing :

    • vertical-spacing : “数值”
    • horizontal-spacing : “数值”

  • overflow : hidden, visible

  • position : absolute, relative

  • display : none, block, inline-block。后边二个相等

Text

  • text-align : left, center, right。 默认为 left

Style

  • font-family : 字符串 or 标识符（允许有空格，因为只能设置一个字体），默认为 "Arial"

  • font-size : “单位值”，默认为 12px

  • color : “颜色值”。默认为 white

  • background : 目前它就等于 background-color

  • background-color : “填充颜色值”，默认为 : transparent

  • border-radius : “数值”

  • increment : “数值”，TODO: 用于 slider 元素拖动滑动条时的增量???

  • max-increment : “数值”，用于 slider 元素???

  • tick-color : “填充颜色值”，用于 checkbox 元素???

  • tick-spacing : “数值”，用于 checkbox 元素???

  • cursor-color : “颜色值”， 用于 input, itemlist 元素表示光标颜色???

  • selection-color : “颜色值”， 用于 itemlist 元素???

  • icon : “图片值”，只有当这个的值存在时, icon-XXXX 之类的属性才有效。

    • 注意: 这个 tile 的 colorKey 值为 0xFFFF00FF

  • icon-color : “颜色值”， 默认为 white

  • icon-left : “数值”

  • icon-top : “数值”

Box Model

  • border : (1) none，(2) border: width style color

    • border-width : “数值”
    • border-style : (1) solid
    • border-color : “填充颜色值”

  • padding : (1) 全部 : padding: 0;，(2) 上下 左右 : padding: 0 0;。 默认为 0;

    • padding-top :
    • padding-left :
    • padding-right :
    • padding-bottom :

  • margin: 同 padding。默认为 0;

  • margin-top :
  • margin-left :
  • margin-right :
  • margin-bottom :
  • width, height : (1) “数值”，(2) auto

Misc

  • 整数值: e.g: (1) 100px，(2) 100pt，(3) 100

  • 数值: (1) “整数值”，(2) 100.0

  • 单位值: (1) “数值”，(2) 100%

  • 颜色值: (1) #FFF, (2) #FFFFFF, (3) rgba(255, 255, 255, 1.0), (4)下列枚举值 :

    black :  0x000000;
red   :  0xFF0000;
lime  :  0x00FF00;
blue  :  0x0000FF;
white :  0xFFFFFF;
aqua  :  0x00FFFF;
fuchsia :  0xFF00FF;
yellow  :  0xFFFF00;
maroon  :  0x800000;
green :  0x008000;
navy  :  0x000080;
olive :  0x808000;
purple:  0x800080;
teal  :  0x008080;
silver:  0xC0C0C0;
gray, grey :  0x808080;

  • 填充颜色值: (1) “颜色值”，(2) transparent，(3) gradient(a, b, c, d)

    a, b ,c ,d 的取值范围全为“颜色值”，分别为 左上, 右上, 左下, 右下。

  • 图片值: 例: url("res://path/to/file.png")，url("data:image/png/base64,....")

    对于上边示例中的第一个，其实只要把文件相对于资源文件夹的文件名放在 "res://" 之后即可。

  • 支持 !important

示例: samples/VisualComponents.hx