css.md

由 louistru 创建, 最后一次修改 2017-11-22

ngui/css

  • css样式表类似于html css样式表,支持使用多级样式表,但只支持class

  • 支持3种伪类型normalhoverdown

    对应View.onHighlighted事件中的 HIGHLIGHTED_NORMALHIGHLIGHTED_HOVERHIGHLIGHTED_DOWN

  • 这里的样式表没有权重的概念,使用直接赋值的方式与使用样式表权重都相同,

    但需要注意先后顺序小心直接赋值会被样式表覆盖,

    因为每次修改的样式表不会立即生效都会在渲染前才应用到视图。

  • 样式表级数越多越复杂也表示需要更多的时间查询与处理。

create(sheets)

  • 创建样式表

  • @arg sheets {Object}

check(cssName)

  • 检查样式名称是否有效

  • @arg cssName {String}
  • @ret {bool}

CSS(sheets)

  • 创建样式表,在调式状态时会检查样式名称是否有效

  • @arg sheets {Object}

Example:

import CSS from 'ngui/css'
import { GUIApplication, Root, Div } from 'ngui'
import 'ngui/dialog'
// 样式表都是全局的
CSS({
    '.test': {
        width: '50%',
        height: '50%',
        backgroundColor: '#00f',
    },
    '.test .a': {
        width: 50,
        height: 50,
    },
    '.test .a.b': { // 这种选择器会优先级会更高
        height: 60,
    },
    // 应用这些伪类到目标,要使用它们对目标生效,需目标视图能够接收事件
    '.test:normal .a': {
        backgroundColor: '#0000',
    },
    '.test:hover': {
        backgroundColor: '#f0f',
    },
    '.test:hover .a': {
        backgroundColor: '#f00',
    },
})
new GUIApplication().start(
    // 需要注意jsx语法只能存在于.jsx文件中
    <Root>
        <Div class="test"onClick=(e=>{ dialog.alert('Hello!') })>
            <Div class="a b" />
        </Div>
    </Root>
)

Enum PropertyName

  • 以下是所有支持的样式表属性

  • 这也是KeyframeActionFrame所支持的所有动作属性

PROPERTY_X

PROPERTY_Y

PROPERTY_SCALE_X

PROPERTY_SCALE_Y

PROPERTY_SKEW_X

PROPERTY_SKEW_Y

PROPERTY_ROTATE_Z

PROPERTY_ORIGIN_X

PROPERTY_ORIGIN_Y

PROPERTY_OPACITY

PROPERTY_VISIBLE

PROPERTY_WIDTH

PROPERTY_HEIGHT

PROPERTY_MARGIN_LEFT

PROPERTY_MARGIN_TOP

PROPERTY_MARGIN_RIGHT

PROPERTY_MARGIN_BOTTOM

PROPERTY_BORDER_LEFT

PROPERTY_BORDER_TOP

PROPERTY_BORDER_RIGHT

PROPERTY_BORDER_BOTTOM

PROPERTY_BORDER_LEFT_WIDTH

PROPERTY_BORDER_TOP_WIDTH

PROPERTY_BORDER_RIGHT_WIDTH

PROPERTY_BORDER_BOTTOM_WIDTH

PROPERTY_BORDER_LEFT_COLOR

PROPERTY_BORDER_TOP_COLOR

PROPERTY_BORDER_RIGHT_COLOR

PROPERTY_BORDER_BOTTOM_COLOR

PROPERTY_BORDER_RADIUS_LEFT_TOP

PROPERTY_BORDER_RADIUS_RIGHT_TOP

PROPERTY_BORDER_RADIUS_RIGHT_BOTTOM

PROPERTY_BORDER_RADIUS_LEFT_BOTTOM

PROPERTY_BACKGROUND_COLOR

PROPERTY_NEWLINE

PROPERTY_CONTENT_ALIGN

PROPERTY_TEXT_ALIGN

PROPERTY_MAX_WIDTH

PROPERTY_MAX_HEIGHT

PROPERTY_START_X

PROPERTY_START_Y

PROPERTY_RATIO_X

PROPERTY_RATIO_Y

PROPERTY_REPEAT

PROPERTY_TEXT_BACKGROUND_COLOR

PROPERTY_TEXT_COLOR

PROPERTY_TEXT_SIZE

PROPERTY_TEXT_STYLE

PROPERTY_TEXT_FAMILY

PROPERTY_TEXT_LINE_HEIGHT

PROPERTY_TEXT_SHADOW

PROPERTY_TEXT_DECORATION

PROPERTY_TEXT_OVERFLOW

PROPERTY_TEXT_WHITE_SPACE

PROPERTY_ALIGN_X

PROPERTY_ALIGN_Y

PROPERTY_SHADOW

PROPERTY_SRC

PROPERTY_BACKGROUND_IMAGE

以上内容是否对您有帮助:

二维码
建议反馈
二维码