摘要:是一套基礎樣式庫,同微信原生視覺體驗一致,由微信官方設計團隊為微信內網頁和微信小程序量身設計的。為了更好的說明這個基礎樣式庫的使用,接下來我將介紹兩個例子。
WeUI是一套基礎樣式庫,同微信原生視覺體驗一致,由微信官方設計團隊為微信內網頁和微信小程序量身設計的。
我們來看看這個基礎庫樣式到底長什么樣。
這些密密麻麻的就是壓縮后的樣式庫。密密麻麻地看起來簡直要急死密集恐懼癥啊。不要急,您請往下看。
仔細看我們能看到,這個樣式庫為很多類寫了樣式。也就是說,我們只要在html頁面中使用這些樣式,就能構建一個頁面了。【只要寫類名,省去了為很多標簽定義樣式,是不是省事多了呢?】
對WeUI的介紹就到這了,下面都是滿滿的干貨啦。
要想有這個樣式庫,當然要先下載WeUI的樣式庫啦,我提供了兩個下載的地址。
一個是騰訊的GitHub下載地址:https://github.com/weui/weui
另一個是我放在GitHub上的weui.min.css樣式:https://raw.githubusercontent...
接下來就為我們的頁面引入這個基礎樣式庫。
我把這個基礎樣式庫放在本地了,就這么引入。
為了更好的說明這個基礎樣式庫的使用,接下來我將介紹兩個例子。單頁應用頁面和彈出框。
單頁應用頁面我們致敬vue,模仿這個頁面。
縱觀整個頁面,可以分為以下幾個模塊。
最頂上放置logo
中間有兩個cells 也就是單元格,來顯示數據
最底部有一個tabbar導航條
引入代碼:
current vue version 2.5.2
頂部的圖片插入比較簡單,直接引入圖片就行。我們說說中間cells中內容的添加。
我們看一個單元格,很典型的左中右格式,分為三個結構層次,
左邊是一張圖片,WeUI樣式庫為我們定義了類名,也就是單元格的頭部:weui-cell__hd
中間是一段文字,也就是這個單元格的身體:weui-cell__bd
最右邊是一個小箭頭,也就是單元格的尾部:weui-cell__ft
引入代碼:
這樣,我們就寫完了一個單元格。
第二個單元格有兩個小格怎么辦呢?
不要緊,weui-cell是單元格中的一個小格子,有多少個小格子就嵌套在一個weui-cells中就可以了,每一格weui-cell還是按照上面的左中右方式進行命名:
接下來是最底部的tabbar。
最尾部的導航條類名為weui-tabbar,里面有三項內容,也就是有三個weui-tabbar__item。
為每一個weui-tabbar__item添加內容吧:
我放在GitHub上的項目地址:https://github.com/TeanLee/qs...
這就完成了第一個單頁頁面的編寫。
接下來我們說說一個彈出框。
放上我們要寫的頁面成品圖:
這就是我們平常很常見的彈出框了。這里是點擊了第一個按鈕就彈出這個彈框,點擊取消,彈框消失,當然你也可以添加別的事件,點擊取消和保存都會讓彈框消失并且執行相應的步驟。
首先,我們為dialog彈出框制作一個“家”,也就是dialog放置的頁面:
weui-btn 是weui的基本組件是一個按鈕
接下來,我們的dialog就要登場了。直接把dialog的div放在放置按鈕div的后面。
這里的遮罩層是為整個頁面蒙上一層灰色的背景,把用戶的吸引力引到彈框上。
彈框的內容還是分為三個層次:weui-dialog__hd:彈框的頭部寫標題;
weui-dialog__bd:彈框的身體寫具體內容;
weui-dialog__ft:彈框的尾部放置按鈕;
接下來,就是給第一個按鈕添加綁定事件了,點擊第一個按鈕就跳出來彈框。
我放在GitHub上的彈框具體代碼:https://github.com/TeanLee/qs...
當然,weu基礎樣式庫還有很多很多組件可以使用,可以進入https://weui.io/ 查看更多的基礎組件。
接下來讓我們一起學習更多吧!文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51517.html
摘要:是一套基礎樣式庫,同微信原生視覺體驗一致,由微信官方設計團隊為微信內網頁和微信小程序量身設計的。為了更好的說明這個基礎樣式庫的使用,接下來我將介紹兩個例子。 WeUI是一套基礎樣式庫,同微信原生視覺體驗一致,由微信官方設計團隊為微信內網頁和微信小程序量身設計的。我們來看看這個基礎庫樣式到底長什么樣。showImg(https://segmentfault.com/img/bVYCKd?...
摘要:是一套基礎樣式庫,同微信原生視覺體驗一致,由微信官方設計團隊為微信內網頁和微信小程序量身設計的。為了更好的說明這個基礎樣式庫的使用,接下來我將介紹兩個例子。 WeUI是一套基礎樣式庫,同微信原生視覺體驗一致,由微信官方設計團隊為微信內網頁和微信小程序量身設計的。我們來看看這個基礎庫樣式到底長什么樣。showImg(https://segmentfault.com/img/bVYCKd?...
摘要:簡潔直觀強悍的前端開發框架,讓開發更迅速簡單。是一套基于的前端框架。首個版本發布于年金秋,她區別于那些基于底層的框架,卻并非逆道而行,而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...
摘要:簡潔直觀強悍的前端開發框架,讓開發更迅速簡單。是一套基于的前端框架。首個版本發布于年金秋,她區別于那些基于底層的框架,卻并非逆道而行,而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...
閱讀 2675·2023-04-25 15:15
閱讀 1316·2021-11-25 09:43
閱讀 1604·2021-11-23 09:51
閱讀 1079·2021-11-12 10:36
閱讀 2880·2021-11-11 16:55
閱讀 955·2021-11-08 13:18
閱讀 723·2021-10-28 09:31
閱讀 2048·2019-08-30 15:47