歡迎光臨
每天分享高質量文章

用Web Components構建單頁面應用

你是如何使用Polymer構建一個單頁應用的?這個問題我們在Polymer團隊裡已經問過很多遍了。我們的答案(一如既往地)是“使用元件(component)!”。然而,使用新技術去解決現有的問題往往不會馬上得到顯著的效果。如何把一堆模組化元件組合到一個大型的實用的應用中去?

在本教程,我將會給你展示如何去構建一個功能完整的單頁應用:

  • 完全使用Polymer的核心元素構建

  • 使用響應式設計

  • 使用資料系結特性過渡檢視

  • 使用URL路由和深層連結特性

  • 可訪問鍵盤

  • 按需動態載入內容(可選)

應用架構

設計佈局是開始一個專案的首要任務之一。作為核心元素集合的一部分,Polymer透過幾個佈局元素 來支撐應用程式的構架(, , )。這些元件本身就很好用,但是為了更快地開始專案,我們打算著重於。有了它你可以透過組裝幾個基本的元素就能做出一個響應式的移動端佈局。

的子元素可以是指定特定的元素或使用特定的標簽(或兩者一起使用)。舉個例子,使用

例子

Application

Main content

讓我們一起來深入這些內容的每一部分

抽屜選單

你放在導航元素裡的標記都定義在滑走的應用抽屜選單裡。為了我們的標的 ,我堅持使用標題()和導航連結 ():

贊(0)

分享創造快樂