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