資訊專欄INFORMATION COLUMN
摘要：最近組件庫支持了，并且做了功能的升級，文檔看這里下文不談論這門技術，我打算從組件的設計以及一些細節(jié)來談談組件庫這件事。組件細節(jié)舉幾個例子來談談組件設計和細節(jié)固釘當滾動條滑動，固釘元素劃出視界時候，我們希望它能仍然釘在那里，展示在視界內。
最近組件庫 N3 支持了 vue 2.0 ，并且做了功能的升級， 文檔看這里 https://n3-components.github....
下文不談論 vue 這門技術，我打算從組件的設計以及一些細節(jié)來談談組件庫這件事。
UI組件庫是什么？
瀏覽器的UI組件是 web 程序中離用戶最近的功能性部件，交互基本都通過它們實現(xiàn)。
由于瀏覽器提供的原生組件數(shù)量有限，又存在很多限制，所以我們需要更豐富的ui組件來幫助我們的應用突破邊界，更好的與用戶溝通。
隨著 web 的崛起，大量的網頁程序出現(xiàn)，各種組件也被設計出來，好的，用戶接受的，喜歡的組件設計被留下來，用戶覺得難用的，變扭的組件設計就被淘汰。
這些被留下來的，使用場景比較廣泛，功能性強，比較實用的組件們被放到了一起組成一個組件庫，1.方便我們使用 2.統(tǒng)一界面風格 3.統(tǒng)一管理(維護和升級)
基礎組件
我以為基礎組件的功能已經比較明確了，應該有個規(guī)范，包括所需要實現(xiàn)的功能，接口以及表現(xiàn)等，組件開發(fā)者都按照這個規(guī)范開發(fā)，提高效率。
基礎組件是只有很明確的功能，他只完成他的使命，不應該有太多主張。
組件細節(jié)
舉幾個例子來談談組件設計和細節(jié)
固釘: 當滾動條滑動，固釘元素劃出視界時候，我們希望它能仍然釘在那里，展示在視界內。實現(xiàn)可能就是監(jiān)聽滾動事件，然后設置元素的定位，當元素設置為 position:fixed 的時候，由于其脫離文檔流，頁面的其它元素可能會上移，那在原來的位置放置一個同樣高寬的占位元素就能避免抖動。
按鈕：按鈕的設計是擬物而來，但是隨著扁平化設計流行已久，現(xiàn)在的按鈕基本已經被拍扁，用戶也已經習慣。N3 也是遵從扁平化的設計，但在按鈕上，我給他的按壓狀態(tài)添加了內部陰影，試圖營造一種軟按鈕的按壓效果，看起來不那么扁平。
時間選擇: 在 N3 中，時間選擇器用了一個滑塊的設計，我承認這是一個低效的設計，直接用數(shù)字的滾動能讓用戶更快達到目的。在鐘表中，轉動旋鈕來撥動指針，那是我會很仔細，因為不容易。時間選擇是個得出精確值的操作，希望借此提醒用戶慎重操作，也讓過程不那么無趣。
以上是我在寫 N3 過程中的一些想法, N3 還需要不斷完善， 也會繼續(xù)和大家一起交流分享。
感謝 @x-cold , @Dafrok ,@chanyying 三位對 N3 做出的貢獻
2017 大家一起加油: )
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81423.html
摘要：最近組件庫支持了，并且做了功能的升級，文檔看這里下文不談論這門技術，我打算從組件的設計以及一些細節(jié)來談談組件庫這件事。組件細節(jié)舉幾個例子來談談組件設計和細節(jié)固釘當滾動條滑動，固釘元素劃出視界時候，我們希望它能仍然釘在那里，展示在視界內。 最近組件庫 N3 支持了 vue 2.0 ，并且做了功能的升級， 文檔看這里 https://n3-components.github.... 下文不...
摘要：引言組件中有很多彈出式組件，常見的如，以及等。這樣一種層次結構在實踐中大大降低了各類彈層組件的實現(xiàn)和維護成本。但是的組件實現(xiàn)了一個大多數(shù)組件庫都沒有實現(xiàn)的功能彈層的嵌套處理。 引言 UI 組件中有很多彈出式組件，常見的如 Dialog，Tooltip 以及 Select 等。這些組件都有一個特點，它們的彈出層通常不是渲染在當前的 DOM 樹中，而是直接插入在 body （或者其它類似的...
閱讀 1229·2021-11-24 09:39
閱讀 379·2019-08-30 14:12
閱讀 2592·2019-08-30 13:10
閱讀 2434·2019-08-30 12:44
閱讀 957·2019-08-29 16:31
閱讀 845·2019-08-29 13:10
閱讀 2434·2019-08-27 10:57
閱讀 3152·2019-08-26 13:57
