css.md

ngui/css

• css樣式表類似于html css樣式表，支持使用多級樣式表，但只支持class類

• 支持3種偽類型normal、hover、down

對應(yīng)View.onHighlighted事件中的 HIGHLIGHTED_NORMAL 、HIGHLIGHTED_HOVER、HIGHLIGHTED_DOWN

• 這里的樣式表沒有權(quán)重的概念，使用直接賦值的方式與使用樣式表權(quán)重都相同，

但需要注意先后順序小心直接賦值會被樣式表覆蓋，

因為每次修改的樣式表不會立即生效都會在渲染前才應(yīng)用到視圖。

• 樣式表級數(shù)越多越復雜也表示需要更多的時間查詢與處理。

create(sheets)

• 創(chuàng)建樣式表

• @arg sheets {Object}

check(cssName)

• 檢查樣式名稱是否有效

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

CSS(sheets)

• 創(chuàng)建樣式表，在調(diào)式狀態(tài)時會檢查樣式名稱是否有效

• @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': { // 這種選擇器會優(yōu)先級會更高
        height: 60,
    },
    // 應(yīng)用這些偽類到目標，要使用它們對目標生效，需目標視圖能夠接收事件
    '.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

• 以下是所有支持的樣式表屬性

• 這也是KeyframeAction中Frame所支持的所有動作屬性

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