Skip to content

Commit

Permalink
Updates to plugins. Fixed samples and layout attrs guide
Browse files Browse the repository at this point in the history
  • Loading branch information
@ebidel
ebidel committed Feb 21, 2015
1 parent b7b968f commit e64ffc0
Show file tree
Hide file tree
Showing 15 changed files with 182 additions and 187 deletions.
128 changes: 96 additions & 32 deletions 0.5/docs/elements/layout-elements.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ title: Layout elements
subtitle: Guide
---

<link rel="import" href="/components/google-youtube/google-youtube.html">
<link rel="import" href="../../components/google-youtube/google-youtube.html">

<style shim-shadowdom>
.app-demo {
Expand All @@ -22,8 +22,7 @@ The core-elements and paper-elements collections include a number of elements th

- `<core-drawer-panel>`. A responsive container that combines a left- or right-side drawer panel for navigation or other options and a main content area.

- `<core-scaffold>`. A quick responsive app layout that includes a navigation drawer, main app bar and content area (implemented using a core-drawer-panel, core-header-panel and core-toolbar.) The core-scaffold element is a quick way to structure an app’s UI.

- `<core-scaffold>`. A quick responsive app layout that includes a navigation drawer, main app bar and content area (implemented using a core-drawer-panel, core-header-panel and core-toolbar.) The core-scaffold element is a quick way to structure an app's UI.

## App Bars and Toolbars

Expand All @@ -37,41 +36,54 @@ The core-elements and paper-elements collections include a number of elements th
</google-youtube>
</div>

[`<core-header-panel>`](/docs/elements/core-elements.html#core-header-panel) is often combined with a
[`<core-toolbar>`](/docs/elements/core-elements.html#core-toolbar). When you use a `<core-toolbar>`,
[`<core-header-panel>`](core-elements.html#core-header-panel) is often combined with a
[`<core-toolbar>`](core-elements.html#core-toolbar). When you use a `<core-toolbar>`,
the panel automatically places it in the header area. You can also use any type of element in your
header by adding the `core-header` class to its class list.

Other elements placed in the core-header-panel end up in the content area.

`<core-header-panel>` is `position: relative`, and always needs to have a height set on it explicitly. An easy way to go about this is to use [layout attributes](/docs/polymer/layout-attrs.html). Add `fullbleed`, `vertical`, and `layout` attributes to the `<body>` and then add a `flex` attribute to the `<core-header-panel>` itself.
`<core-header-panel>` is `position: relative`, and always needs to have a height set on it explicitly. An easy way to go about this is to use [layout attributes](../polymer/layout-attrs.html). Add `fullbleed`, `vertical`, and `layout` attributes to the `<body>` and then add a `flex` attribute to the `<core-header-panel>` itself.

The following example app uses a `<core-header-panel>` as its top-level layout:

<a href="/samples/layout-elements/header-app.vulcanized.html" target="_blank">
<a href="../../samples/layout-elements/header-app.vulcanized.html" target="_blank">
<img class="app-demo" src="/images/layout-elements/header-app.png">
</a>

<a href="/samples/layout-elements/header-app.vulcanized.html" target="_blank">Click image for demo</a>
<a href="../../samples/layout-elements/header-app.vulcanized.html" target="_blank">Click image for demo</a>

Use the following code to create the header panel app.

{% include samples/layout-elements/header-app.html %}

<demo-tabs selected="0">
<demo-tab heading="HTML">
{% highlight html %}
{% include_external /samples/layout-elements/header-app.html html version_prefix:0.5 %}
{% endhighlight %}
</demo-tab>
<demo-tab heading="CSS">
{% highlight html %}
{% include_external /samples/layout-elements/header-app.html styles version_prefix:0.5 %}
{% endhighlight %}
</demo-tab>
<demo-tab heading="Imports">
{% highlight html %}
{% include_external /samples/layout-elements/header-app.html imports version_prefix:0.5 %}
{% endhighlight %}
</demo-tab>
</demo-tabs>

The following example uses a plain `<div>` as the header element, using the `core-header` class:

<core-header-panel flex>
<div class=“core-header”>
<div class="core-header">
My App
</div>
<div>
My app content.
</div>
</core-header-panel>



Setting the `mode` attribute on the header panel controls how the header area and content area interact. There are several modes:

- `standard`. The header appears at a higher level than the content area, with a drop shadow. Content scrolls under the header.
Expand All @@ -81,7 +93,7 @@ Setting the `mode` attribute on the header panel controls how the header area an
- `scroll`. The header is seamed with the content and scrolls with the content.
- `cover`. The content scrolls over the header. This mode is designed to be used with narrow content (for example cards).

See the [`<core-header-panel>` demo](/components/core-header-panel/demo.html) for examples of all of the modes in action.
See the [`<core-header-panel>` demo](../../components/core-header-panel/demo.html) for examples of all of the modes in action.

<div class="yt-embed">
<google-youtube
Expand All @@ -93,32 +105,47 @@ See the [`<core-header-panel>` demo](/components/core-header-panel/demo.html) fo
</google-youtube>
</div>

In addition, you manually choose from several sizes of toolbar by adding one of the following classes to the core-toolbar’s class list:
In addition, you manually choose from several sizes of toolbar by adding one of the following classes to the core-toolbar's class list:

- medium-tall (2x normal height)
- tall (3x normal height)
- medium-tall (2x normal height)
- tall (3x normal height)

Taller toolbars are useful when you want to create an app bar with tabs, for example:

<a href="/samples/layout-elements/toolbar-sample.vulcanized.html" target="_blank">
<a href="../../samples/layout-elements/toolbar-sample.vulcanized.html" target="_blank">
<img class="app-demo" src="/images/layout-elements/toolbar-sample.png">
</a>

<a href="/samples/layout-elements/toolbar-sample.vulcanized.html" target="_blank">Click image for demo</a>
<a href="../../samples/layout-elements/toolbar-sample.vulcanized.html" target="_blank">Click image for demo</a>

Use the following code to create the toolbar shown above:

{% include samples/layout-elements/toolbar-sample.html %}
<demo-tabs selected="0">
<demo-tab heading="HTML">
{% highlight html %}
{% include_external /samples/layout-elements/toolbar-sample.html html version_prefix:0.5 %}
{% endhighlight %}
</demo-tab>
<demo-tab heading="CSS">
{% highlight html %}
{% include_external /samples/layout-elements/toolbar-sample.html styles version_prefix:0.5 %}
{% endhighlight %}
</demo-tab>
<demo-tab heading="Imports">
{% highlight html %}
{% include_external /samples/layout-elements/toolbar-sample.html imports version_prefix:0.5 %}
{% endhighlight %}
</demo-tab>
</demo-tabs>

If the core-header-panel is in `waterfall-tall` mode, it controls the height of the toolbar automatically, so you shouldn't set `medium-tall` or `tall` on the toolbar yourself.

**Tip:** For fancy scrolling effects where the toolbar animates between tall and condensed states, you can use [`<core-scroll-header-panel>`](/docs/elements/core-elements.html#core-scroll-header-panel). See the [demos](/components/core-scroll-header-panel/demo.html) here. You may need to look at the source for the demos to implement the more complicated effects.
**Tip:** For fancy scrolling effects where the toolbar animates between tall and condensed states, you can use [`<core-scroll-header-panel>`](core-elements.html#core-scroll-header-panel). See the [demos](../../components/core-scroll-header-panel/demo.html) here. You may need to look at the source for the demos to implement the more complicated effects.
{: .alert .alert-info }


## Responsive side nav

The [`<core-drawer-panel>`](/docs/elements/core-elements.html#core-drawer-panel)
The [`<core-drawer-panel>`](core-elements.html#core-drawer-panel)
element creates a left or right side nav area alongside
the main content area. On narrow screens, the nav area acts as a drawer that can
be hidden or revealed by calling the drawer panel's `togglePanel` method.
Expand All @@ -140,38 +167,75 @@ You can nest `<core-header-panel>` and `<core-toolbar>` elements inside a
`<core-drawer-panel>` to create the layout for the content area and navigation
drawer, as shown in the following example:

<a href="/samples/layout-elements/drawer-app.vulcanized.html" target="_blank">
<a href="../../samples/layout-elements/drawer-app.vulcanized.html" target="_blank">
<img class="app-demo" src="/images/layout-elements/drawer-app-closed.png">
</a>

<a href="/samples/layout-elements/drawer-app.vulcanized.html" target="_blank">Click image for demo</a>
<a href="../../samples/layout-elements/drawer-app.vulcanized.html" target="_blank">Click image for demo</a>

Use the following code to create the drawer panel app:

{% include samples/layout-elements/drawer-app.html %}

**Note: ** On wide screens, the drawer is always open and the menu button is hidden.
<demo-tabs selected="0">
<demo-tab heading="HTML">
{% highlight html %}
{% include_external /samples/layout-elements/drawer-app.html html version_prefix:0.5 %}
{% endhighlight %}
</demo-tab>
<demo-tab heading="JS">
{% highlight html %}
{% include_external /samples/layout-elements/drawer-app.html javascript version_prefix:0.5 %}
{% endhighlight %}
</demo-tab>
<demo-tab heading="CSS">
{% highlight html %}
{% include_external /samples/layout-elements/drawer-app.html styles version_prefix:0.5 %}
{% endhighlight %}
</demo-tab>
<demo-tab heading="Imports">
{% highlight html %}
{% include_external /samples/layout-elements/drawer-app.html imports version_prefix:0.5 %}
{% endhighlight %}
</demo-tab>
</demo-tabs>

**Note:** On wide screens, the drawer is always open and the menu button is hidden.
On narrow screens, you can press the button or swipe from the left to show the drawer.
On desktop, resize the browser window to see the different modes.
{: .alert .alert-info }

### Side nav with `<core-scaffold>`

The [`<core-scaffold>`](/docs/elements/core-elements.html#core-scaffold) element
The [`<core-scaffold>`](core-elements.html#core-scaffold) element
assembles a commonly-used combination of components:
a `<core-drawer-panel>` with a `<core-header-panel>` and `<core-toolbar>` for the
main content area. It also includes a button to display the navigation drawer.

The following example produces the same basic layout as the drawer panel example above:

<a href="/samples/layout-elements/scaffold-app.vulcanized.html" target="_blank">
<a href="../../samples/layout-elements/scaffold-app.vulcanized.html" target="_blank">
<img class="app-demo" src="/images/layout-elements/scaffold-app.png">
</a>

<a href="/samples/layout-elements/scaffold-app.vulcanized.html" target="_blank">Click image for demo</a>
<a href="../../samples/layout-elements/scaffold-app.vulcanized.html" target="_blank">Click image for demo</a>

Use the following code to create the scaffold app:

{% include samples/layout-elements/scaffold-app.html %}
<demo-tabs selected="0">
<demo-tab heading="HTML">
{% highlight html %}
{% include_external /samples/layout-elements/scaffold-app.html html version_prefix:0.5 %}
{% endhighlight %}
</demo-tab>
<demo-tab heading="CSS">
{% highlight html %}
{% include_external /samples/layout-elements/scaffold-app.html styles version_prefix:0.5 %}
{% endhighlight %}
</demo-tab>
<demo-tab heading="Imports">
{% highlight html %}
{% include_external /samples/layout-elements/scaffold-app.html imports version_prefix:0.5 %}
{% endhighlight %}
</demo-tab>
</demo-tabs>


Loading

0 comments on commit e64ffc0

Please sign in to comment.