Ngui簡介

這是一個GUI的排版顯示引擎和跨平臺的GUI應(yīng)用程序開發(fā)框架，基于NodeJS/OpenGL，這也是第一個在移動端Android/iOS融合NodeJS的前端GUI項(xiàng)目，至此JavaScript成為了真正意義上前后端通吃的語言。

Ngui的目標(biāo)：在此基礎(chǔ)上開發(fā)GUI應(yīng)用程序可擁有開發(fā)WEB應(yīng)用般簡單與速度同時兼顧Native應(yīng)用程序的性能與體驗(yàn)。

開源跨平臺移動項(xiàng)目Ngui【簡介】

開源跨平臺移動項(xiàng)目Ngui【入門】

開源跨平臺移動項(xiàng)目Ngui【視圖與布局系統(tǒng)】

開源跨平臺移動項(xiàng)目Ngui【Action動作系統(tǒng)】

開源跨平臺移動項(xiàng)目Ngui【CSS樣式表規(guī)則及用法】

Ngui API 文檔

CSS樣式表到底是什么

CSS樣式表全稱叫Cascading Style Sheets是一種用來表現(xiàn)HTML文件樣式的語言，是Web前端開發(fā)中一定會用到的排版語言，那么Ngui中css的靈感就來自于此。與其說是靈感還不如果說是借鑒并通過精簡而來，因?yàn)殚_發(fā)這個框架的初衷效率一直就是最重的目標(biāo)，其次才是使用體驗(yàn)。

下面是Ngui中CSS樣式表的寫法：

import { CSS, Div, Text } from 'ngui';
CSS({
    '.a': {
        width: '100%',
        height: '100%',
        contentAlign: 'center',
    },
    '.a .b': {
        width: 100,
        height: 100,
        marginTop: 'auto',
        marginBottom: 'auto',
        backgroundColor: '#f00',
    },
});
const vx = (
    <Div class="a">
        <Text class="b">Hello!</Text>
    </Div>
);

是不是很熟悉呢。

CSS樣式表運(yùn)行時

這里說的是新式表到底是什么時間應(yīng)用到視圖上的。樣式表并不會主動去查詢View.class，繪圖線程在渲染幀畫面前會先查詢并解決所有需要更新的樣式表class。請記住樣式表只是靜態(tài)的屬性集合，樣式表的應(yīng)用是需要的視圖對像主動查詢。所以當(dāng)一個視圖先前已經(jīng)應(yīng)用過樣式表，然后樣式表屬性被更改后并不會影響到先前應(yīng)用樣式表的視圖。需要注意的一點(diǎn)是樣式表樣表應(yīng)用只是簡單的對視圖對像屬性的更改，并沒有權(quán)重的概念，所以在應(yīng)用樣式表時需要注意與直接設(shè)置屬性的先后順序，很有可能先前設(shè)置的視圖屬性被樣式表覆蓋，因?yàn)闃邮奖?code>class的設(shè)置并不會立即生效它總是在渲染開始前才應(yīng)用到視圖。

CSS樣式表名稱規(guī)則

非常抱歉的告訴各位，現(xiàn)在的樣式表體系只支持class并不支持id與tagName。還是因?yàn)橥瑯拥脑蛐蕟栴}，所以我希望盡量簡單。當(dāng)然這一切都需要在使用體驗(yàn)上付出代價，也許在某一天會有人想出更好的替代方案也說不定，要知道眾人的力量是無窮的況且現(xiàn)在框架本身不需限制于任何標(biāo)準(zhǔn)。

名稱組合

樣式表首先都是全局的，后面定義的同名樣式表會與前面定義的樣式表合并如果有重復(fù)的屬性會進(jìn)行替換。怎樣的名字是同名的呢？并不是說定義時的名稱組合key本身，看下面的例子。

CSS({
    '.a': { height: 100 },
    '.b': { backgroundColor: '#f00' },
    '.c': { border: '1 #000' },
    '.a.b': { width: 100 },
    '.b.a': { width: 200 },
});
const vx = (
    <Div class="a b c" />
);

上面.a.b與.b.a表示其實(shí)是同一個名稱。并且最后的width為200。并且越長的名稱組合就會有越多的組合結(jié)果，也就是說查詢也會需要更多的時間。比如class="a b c"的樣式組合會有.a、.b、.c、.a.b、.a.c、.b.c、.a.b.c 7種結(jié)果，當(dāng)視圖應(yīng)用這個樣式時需要查詢這7種可能性。所以在Ngui中CSS樣式表的組合限制在4個，多于4個時的組合時可能會出現(xiàn)意想不到結(jié)果。

多級名稱

樣式表的數(shù)據(jù)結(jié)構(gòu)其實(shí)是個樹狀結(jié)構(gòu)，每個具名的樣式表都可以有子樣式表，子級樣式表以空格區(qū)分且級數(shù)沒有限制但理論來說越多的級數(shù)查詢的速度也會越慢。如：

CSS({
    '.a': { width: 200, height: 200 },
    '.b': { height: 100 },
    '.a .b': { width: 100, height: 200 },
});
const vx = (
    <Div class="a">
        <Text class="b">Hello!</Text>
    </Div>
);

子級樣式表權(quán)重會更高上面的例子中Text的height應(yīng)該是200 .a .b的樣式表屬性會覆蓋.b。

多級樣式表的應(yīng)用也必須對應(yīng)視圖的嵌套關(guān)系，這樣樣式才能生效，比如上面的例子中.a .b這個樣式表應(yīng)用于視圖時，這個視圖的父級或頂級視圖的樣式表必須亦一個.a。

偽類

偽類有三種類型分為normal、hover、down 分別對應(yīng)正常、光標(biāo)進(jìn)入、光標(biāo)按下。當(dāng)然在觸摸屏上沒有光標(biāo)所有hover也不會存在。只有normal、down 對應(yīng)觸摸開始與觸摸結(jié)束。

例：

CSS({
    '.a': { width: 100, height: 100 },
    '.a:normal': { backgroundColor: '#aaa' },
    '.a:hover': { backgroundColor: '#f00' },
    '.a:down': { backgroundColor: '#f0f' },
});
const vx = (
    <Div class="a" />
);

有一點(diǎn)需要注意偽類不可以再有子級偽類，如：

CSS({
    '.a:hover': { backgroundColor: '#f00' },
    '.a:hover .b': { width: 200 },
    '.a:hover .b:hover': { backgroundColor: '#ff0' }, // 這條規(guī)則會拋出異常
});

開源跨平臺移動項(xiàng)目Ngui【CSS樣式表規(guī)則及用法】