Polymer App Layout
The app-layout elements are comprised of components such as toolbars, drawers, and headers. These are used for building high-quality, responsive layouts just with markup. Some of the elements are listed in the following table.
Table:
Index |
Elements |
Description |
1) |
app-box |
This element works as container and has scroll effects, visual effects based on the scroll position. |
2) |
app-drawer |
This is a navigation drawer which will slide in and out from left or right. |
3) |
app-drawer-layout |
This will position the app-drawer and other content. |
4) |
app-grid |
This is used for creating responsive and fluid grid layouts using custom properties. |
5) |
app-header |
This element works at the top of the screen as a container for app-toolbars and has scroll effects, visual effects based on the scroll position. |
6) |
app-header-layout |
This element acts as a cover that positions the app-header and other content. |
7) |
app-scrollpos-control |
This element is used for saving and restoring the scroll position when multiple pages share the same document scroller. |
8) |
app-toolbar |
It is a horizontal toolbar which contains items that can be used for labeling, navigating, searching and other actions. |
Example:
Use the following command on command prompt to use app layout elements to move into the project directory.
It will install the app-layout elements in bower-component folder. Then, you can import the file using <link> tag in your index.htmlfile.
Output:
|