Ngui樣式表(CSS)規則及用法

来源:http://www.cnblogs.com/ngui/archive/2017/11/24/7887879.html
-Advertisement-
Play Games

CSS樣式表全稱叫Cascading Style Sheets是一種用來表現HTML文件樣式的語言,是Web前端開發中一定會用到的排版語言,那麼Ngui中css的靈感就來自於此。與其說是靈感還不如果說是借鑒並通過精簡而來,因為開發這個框架的初衷效率一直就是最重的目標,其次才是使用體驗 ...


CSS樣式表簡介

CSS樣式表全稱叫Cascading Style Sheets是一種用來表現HTML文件樣式的語言,是Web前端開發中一定會用到的排版語言,那麼Ngui中css的靈感就來自於此。與其說是靈感還不如果說是借鑒並通過精簡而來,因為開發這個框架的初衷效率一直就是最重的目標,其次才是使用體驗。

下麵是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樣式表運行時

這裡說的是新式表到底是什麼時間應用到視圖上的。樣式表並不會主動去查詢View.class,繪圖線程在渲染幀畫面前會先查詢並解決所有需要更新的樣式表class。請記住樣式表只是靜態的屬性集合,樣式表的應用是需要的視圖對像主動查詢。所以當一個視圖先前已經應用過樣式表,然後樣式表屬性被更改後並不會影響到先前應用樣式表的視圖。需要註意的一點是樣式表樣表應用只是簡單的對視圖對像屬性的更改,並沒有權重的概念,所以在應用樣式表時需要註意與直接設置屬性的先後順序,很有可能先前設置的視圖屬性被樣式表覆蓋,因為樣式表class的設置並不會立即生效它總是在渲染開始前才應用到視圖。

CSS樣式表名稱規則

非常抱歉的告訴各位,現在的樣式表體系只支持class並不支持idtagName。還是因為同樣的原因效率問題,所以我希望儘量簡單。當然這一切都需要在使用體驗上付出代價,也許在某一天會有人想出更好的替代方案也說不定,要知道眾人的力量是無窮的況且現在框架本身不需限制於任何標準。

名稱組合

樣式表首先都是全局的,後面定義的同名樣式表會與前面定義的樣式表合併如果有重覆的屬性會進行替換。怎樣的名字是同名的呢?並不是說定義時的名稱組合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表示其實是同一個名稱。並且最後的width為200。
並且越長的名稱組合就會有越多的組合結果,也就是說查詢也會需要更多的時間。比如class="a b c"的樣式組合會有.a.b.c.a.b.a.c.b.c.a.b.c 7種結果,當視圖應用這個樣式時需要查詢這7種可能性。所以在Ngui中CSS樣式表的組合限制在4個,多於4個時的組合時可能會出現意想不到結果。

多級名稱

樣式表的數據結構其實是個樹狀結構,每個具名的樣式表都可以有子樣式表,子級樣式表以空格區分且級數沒有限制但理論來說越多的級數查詢的速度也會越慢。如:

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>
);
  • 子級樣式表權重會更高上面的例子中Textheight應該是200 .a .b的樣式表屬性會覆蓋.b

  • 多級樣式表的應用也必須對應視圖的嵌套關係,這樣樣式才能生效,比如上面的例子中.a .b這個樣式表應用於視圖時,這個視圖的父級或頂級視圖的樣式表必須亦一個.a

偽類

偽類有三種類型分為normalhoverdown 分別對應正常、游標進入、游標按下。當然在觸摸屏上沒有游標所有hover也不會存在。只有normaldown 對應觸摸開始與觸摸結束。

例:

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

有一點需要註意偽類不可以再有子級偽類,如:

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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Pipeline在Jenkins里的作用 最近一直在使用jenkins進行自動化部署的工作,開始覺得很爽,省去了很多重覆的工作,它幫助我自動拉伺服器的代碼,自動還原包包,自動編譯項目,自動發佈項目,自動打包鏡像,自動上傳倉庫,自動啟動docker服務,這一系列動作都是自動化的,聽起來確實很絢,但是, ...
  • Java 5以前實現多線程有兩種實現方法:一種是繼承Thread類;另一種是實現Runnable介面。 兩種方式都要通過重寫run()方法來定義線程的行為,推薦使用後者,因為Java中的繼承是單繼承,一個類有一個父類,如果繼承了Thread類就無法再繼承其他類了,顯然使用Runnable介面更為靈活 ...
  • 雙向綁定是Angular的核心概念之一,它給我們帶來了思維方式的轉變:不再是DOM驅動,而是以Model為核心,在View中寫上聲明式標簽。然後,Angular就會在後臺默默的同步View的變化到Model,並將Model的變化更新到View。 雙向綁定帶來了很大的好處,但是它需要在後臺保持一隻“眼 ...
  • 1、什麼是響應式佈局 響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念,這個概念是為解決移動互聯網瀏覽而誕生的。 簡而言之,就是一個網站能夠相容多個終端——而不是為每個終端做一個特定的版本。 響應式網路設計 ( RWD / AWD)的出現,目的是為移動設備提供更好的體驗,並且 ...
  • 什麼是組合模式? 組合模式(Composite):將對象組合成樹形結構以表示“部分-整體”的層次結構。 組合模式使得用戶對單個對象和組合對象的使用具有一致性。 何時使用組合模式? 當需求中是體現部分與整體層次的結構時,以及你希望用戶可以忽略組合對象與單個對象的不同,同意地使用組合結構中的所有對象時, ...
  • 將從mysql資料庫查詢的信息,遍歷到List<>以及一些隨機數的生成。 代碼比較亂,但是方法還是對的,大家又需要的選擇看,希望對博友 有幫助,歡迎留言分享! public class subject { public string sub { get; set; } } //public clas ...
  • 1、簡述 代理模式中可以映射為現實生活中的生產者、中介商、消費者,生產者可抽象為委托類,中介商可抽象為代理類,消費者可以抽象為調用者對象。代理模式可以簡化消費者購買商品的模式,比如超市裡面可以購買各種商品,消費者只需要找到超市和超市裡面商品即可,不需跑到各個生產商品的工廠。 優點一:可以隱藏委托類的 ...
  • "《淺出篇》" "《深入篇》" ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...