摘要:如圖所示還有其它很多項(xiàng)的更新,比如新增屬性,可以設(shè)置面板展開時(shí)默認(rèn)顯示的日期。目前最新版本支持鍵盤可訪問性的組件有。期待你的加入下個(gè)版本預(yù)告下個(gè)版本計(jì)劃重構(gòu)組件,以全面支持表單組件的鍵盤可訪問性,敬請期待。
在過去的兩個(gè)多月里,iView 陸續(xù)發(fā)布了 2.9.0 和 2.10.0 兩個(gè)重要版本。這兩個(gè)版本總共有 255 個(gè) commit,超過 40 項(xiàng)更新。來看一下,iView 具體都更新了些什么。
完整的更新日志可以到 GitHub releases 查看:
2.9.0: https://github.com/iview/iview/releases/tag/v2.9.0
2.10.0: https://github.com/iview/iview/releases/tag/v2.10.0
或者在 iView 文檔的更新日志查看:
https://www.iviewui.com/docs/guide/update
說明:由于 2.10.0 存在編譯后文件過大的問題,請更新至 2.10.1“看得見”的更新
所謂看得見的更新,就是更新后能真實(shí)感受到的東西。這兩個(gè)版本都得感謝兩位瑞典大神
SergioCrisostomo 和 Xotic750 的貢獻(xiàn),iView 才得以越來越完善。
首先是在 2.10.0 對日期組件 DatePicker 的重構(gòu)。DatePicker 是 iView 48 個(gè)組件里最復(fù)雜的組件之一。復(fù)雜的功能使得代碼邏輯非常重,在許多新特性的支持上,比如兼容不同國家的日歷規(guī)范等都很難在此基礎(chǔ)上迭代,不得不推倒重來。
SergioCrisostomo 之前有開發(fā)過日期相關(guān)的 JS 庫(https://github.com/SergioCrisostomo/js-calendar),所以對日期相關(guān)的功能點(diǎn)和 API 非常熟,iView 也是基于此庫進(jìn)行的重構(gòu)。
新的日期組件主要增加了以下功能:
1.范圍選擇支持從右往左選擇了。
之前在范圍選擇時(shí),必須先選起點(diǎn),再選終點(diǎn),也就是從左往右選,但很多用戶的習(xí)慣卻剛好相反。該版本則同時(shí)支持兩個(gè)方向的選擇。
2.新增 split-panels 屬性,開啟后,左右兩面板可以不聯(lián)動(dòng)。
之前在范圍選擇時(shí),左右兩個(gè)面板是聯(lián)動(dòng)的,也就是右邊永遠(yuǎn)比左邊大一個(gè)月,任何一個(gè)面板切換月份或年份,另一個(gè)面板都會(huì)自動(dòng)切換。該版本則可以設(shè)置為不聯(lián)動(dòng),這樣方便定位起始月份和結(jié)束月份。如圖所示:
3.新增 multiple 屬性,開啟后,可以選擇多個(gè)日期。
雖然之前版本可以用其它 iView 組件組合出來一個(gè)多選的日期,但效果和交互多少會(huì)打折扣,該版本只要增加屬性 multiple,就可以在一個(gè)日期面板上同時(shí)選擇和呈現(xiàn)多個(gè)日期了。如圖所示:
4.新增屬性 show-week-numbers,開啟后,可以顯示星期數(shù)。
增加這個(gè)屬性,就可以在日歷面板上顯示當(dāng)前是一年的第幾周。如圖所示:
還有其它很多項(xiàng)的更新,比如新增 start-date 屬性,可以設(shè)置面板展開時(shí)默認(rèn)顯示的日期。新增屬性 time-picker-options,可以在 type 為 datetime 和 datetimerange 下,配置 TimePicker 的屬性,比如時(shí)間間隔 steps。完整的更新可以產(chǎn)看更新日志,這里不一一列舉了。
鍵盤可訪問性的支持鍵盤的可訪問性,主要是通過鍵盤的方向鍵、tab鍵、空格鍵等完成表單組件的切換和交互。在填寫一個(gè)表單時(shí)(iView Form 組件),尤其有用,你可以離開鼠標(biāo),就完成一個(gè)復(fù)雜表單的填寫與提交。
目前 iView 最新版本支持鍵盤可訪問性的組件有:
Button、Input、Radio、Checkbox、Switch、AutoComplete、Slider、InputNumber。更多組件還在陸續(xù)支持中。
事實(shí)上,原生的表單控件,瀏覽器都是支持鍵盤的可訪問性的,比如 、 等等。iView 對這些原生控件進(jìn)行了重塑,不僅僅使得 UI 好看和統(tǒng)一,更重要的是功能的豐富和交互體驗(yàn)的提升。
目前上述的組件,都是可以通過鍵盤的 tab鍵 選中的,這是第一步,如圖所示:
可以看到,組件在被選中時(shí),外面多了一個(gè)高亮層,表明當(dāng)前選中的控件,這時(shí)就可以通過鍵盤其它按鍵繼續(xù)操作了,比如單選組件 Radio,在選中狀態(tài)下,可以通過鍵盤的方向鍵直接切換選項(xiàng);Checkbox 在被激活時(shí),可以通過空格鍵選擇和取消選擇某小項(xiàng),通過 tab 鍵激活下一個(gè)小項(xiàng)。
“看不見”的更新還有一些更新,是無法直接看見和體會(huì)到的。
比如更新了大量的依賴:
babel 系列全部更新
使用了 browserslist
使用了 sourcemap。
部分組件的重構(gòu),雖然功能無任何變化,但代碼結(jié)構(gòu)和邏輯都做了優(yōu)化和可維護(hù)性設(shè)計(jì)。
還有部分組件的自動(dòng)化測試、持續(xù)集成對 GitHub travis-ci 的兼容等等。
外表需要優(yōu)化,內(nèi)部同樣也是,就像一個(gè)人,既要有外在美,也要有內(nèi)在美。
“不為人知”的故事在開源工作中,發(fā)生過許多有趣的事,這里分享幾個(gè)有意思的。
在瑞典,想用開源項(xiàng)目,得先改 bug在瑞典使用開源項(xiàng)目到生產(chǎn)環(huán)境時(shí),開發(fā)者有義務(wù)來修復(fù)開源項(xiàng)目的 bug。這一刻,覺得瑞典好好啊。
“吵”不過老外Sorry for my poor english. 已經(jīng)成為一個(gè)段子了,然后不得不用 english。但是老外一句 Sorry for my poor Chinese 就會(huì)讓你無話可說。所以,英語不好的我,有時(shí)候就“吵”不過老外們了。
當(dāng)我還在查 “optimisation” 是啥意思的時(shí)候,對方已經(jīng) balabala 說一堆了,吵不過就妥協(xié)吧。
就像你跟仰慕的女神聊天,你 bibibi 說了一大堆,對方半天回你一句 “哦” 一樣,哈哈。
不過,妥協(xié)歸妥協(xié),講的還是有道理的,不能為了妥協(xié)而妥協(xié),真理才是最重要的。
講這些,更多想說的是,iView 的每個(gè)功能點(diǎn),都是我們精心揣摩探討出來的,不會(huì)憑借主觀意識(shí)去做,也不會(huì)因?yàn)槿魏我粋€(gè) Feature Request 就去支持,每個(gè) feature 都是討論出的結(jié)果。所以,這是一個(gè)既有情懷,又負(fù)責(zé)的開源項(xiàng)目。
目前的 iView 核心團(tuán)隊(duì)有 3 人在同時(shí)維護(hù),相比以前獨(dú)立奮斗的我要好的多了,但仍然需要更多像瑞典開發(fā)者這樣有開源精神的工程師們加入,致力把 iView 打造成全球最好用、最好看的 UI 組件庫。期待你的加入!
下個(gè)版本預(yù)告:下個(gè)版本計(jì)劃重構(gòu) Select 組件,以全面支持表單組件的鍵盤可訪問性,敬請期待。完整的計(jì)劃見里程碑 https://github.com/iview/iview/milestone/9
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/93345.html
摘要:在許多志愿者的幫助下,將文檔全部翻譯為英文,在開發(fā)者社區(qū)頗受歡迎。有了英文版后,更多的國外開發(fā)者也參與到討論之中,相信接下來會(huì)有更多來自國外的。英文版的翻譯離不開社區(qū)的貢獻(xiàn),在此特別感謝和三位熱心志愿者。 showImg(https://segmentfault.com/img/bVRG13?w=2880&h=1800); 兩年前,我開始接觸 Vue.js 框架,當(dāng)時(shí)就被它的輕量、組件...
摘要:在許多志愿者的幫助下,將文檔全部翻譯為英文,在開發(fā)者社區(qū)頗受歡迎。有了英文版后,更多的國外開發(fā)者也參與到討論之中,相信接下來會(huì)有更多來自國外的。英文版的翻譯離不開社區(qū)的貢獻(xiàn),在此特別感謝和三位熱心志愿者。 showImg(https://segmentfault.com/img/bVRG13?w=2880&h=1800); 兩年前,我開始接觸 Vue.js 框架,當(dāng)時(shí)就被它的輕量、組件...
摘要:原文鏈接時(shí)代,架構(gòu)該怎么跟進(jìn),來自于微信公眾號次靈均閣作為核心開發(fā)者,請先簡單介紹下自己答大家好,我是小馬哥,一名學(xué)習(xí)當(dāng)爸爸的父親,勸退師,項(xiàng)目架構(gòu)師,編程思想的作者。因此,需求的來源不再已阿里為絕對主導(dǎo),社區(qū)共建和共制的發(fā)展模式已成事實(shí)。 原文鏈接:Service Mesh 時(shí)代,Dubbo 架構(gòu)該怎么跟進(jìn)?,來自于微信公眾號:次靈均閣 作為 Duboo 核心開發(fā)者,請先簡單介紹下...
摘要:原文鏈接時(shí)代,架構(gòu)該怎么跟進(jìn),來自于微信公眾號次靈均閣作為核心開發(fā)者,請先簡單介紹下自己答大家好,我是小馬哥,一名學(xué)習(xí)當(dāng)爸爸的父親,勸退師,項(xiàng)目架構(gòu)師,編程思想的作者。因此,需求的來源不再已阿里為絕對主導(dǎo),社區(qū)共建和共制的發(fā)展模式已成事實(shí)。 原文鏈接:Service Mesh 時(shí)代,Dubbo 架構(gòu)該怎么跟進(jìn)?,來自于微信公眾號:次靈均閣 作為 Duboo 核心開發(fā)者,請先簡單介紹下...
閱讀 898·2021-11-23 09:51
閱讀 1111·2021-11-15 17:57
閱讀 1680·2021-09-22 15:24
閱讀 823·2021-09-07 09:59
閱讀 2238·2019-08-29 15:10
閱讀 1859·2019-08-29 12:47
閱讀 763·2019-08-29 12:30
閱讀 3386·2019-08-26 13:51