application: polymer-project

runtime: python27

api_version: 1

threadsafe: yes

<h2><a href="/docs/elements/core-elements.html#core-ajax">{{site.project_title}} core elements</a></h2>

<p>{{site.project_title}}'s core elements are a set of visual and non-visual utility elements. They include elements for working with layout, user input, selection, and scaffolding apps.</p>

<div horizontal layout>

</div>

</section>

<a href="/components/core-elements/demo.html#core-scroll-header-panel" target="_blank">

<h2><a href="/docs/elements/paper-elements.html#paper-button">Paper elements</a></h2>

<p>{{site.project_title}}'s paper elements collection implements material design for the web. They're a set of highly visual, highly interactive elements that include things like controls, layouts, hero transitions, and scrolling effects.</p>

<p>

</p>

</section>

<a href="/components/paper-elements/demo.html#core-toolbar" target="_blank">

width: 150px;

}

color: #9f499b;

}

.demo-card {

<tr>

<td>Button<br>

<a href="/docs/elements/paper-elements.html#paper-button"><code>&lt;paper-button&gt;</code></a></td>

<td><a href="/components/paper-elements/demo.html#paper-button"><core-icon icon="arrow-forward" size="16"></core-icon> More examples</a></td>

</tr>

<tr>

transition="paper-dialog-transition-bottom">

<p>This app would like to launch a small, unmanned vehicle

into space.</p>

</paper-dialog>

<paper-dialog id="dialog" heading="Launch?" transition="paper-dialog-transition-bottom">

<p>This app would like to launch a small, unmanned vehicle into space.</p>

</paper-dialog>

In this example, the default button has a `default` attribute. The dialog

doesn't apply any special treatment for a default option; you can style it

<paper-toast id="toast" text="Your draft has been discarded."></paper-toast>

Like a dialog, a `<paper-toast>` is hidden by default. Call the element's

`open` method to display it. The toast disappears after a timeout, or can be

into the

[paper elements collection](paper-elements.html):

When working with other elements, you can use the `<paper-ripple>` element to

create a touch ripple effect.

To use `<paper-ripple>`, declare a `<paper-ripple>` element as a child of the

element you want to add the effect to:

<paper-ripple fit></paper-ripple>

</div>

Touch the cards and icon below to see ripple effects.

<div layout horizontal wrap>

<div class="labeled-card" layout vertical>

<paper-ripple fit></paper-ripple>

</div>

<p>Default ripple</p>

</div>

<div class="labeled-card" layout vertical>

<paper-ripple fit style="color: red;"></paper-ripple>

</div>

<p>Colored ripple</p>

</div>

<div class="labeled-card" layout vertical>

<core-icon icon="info"></core-icon>

<paper-ripple fit class="circle"></paper-ripple>

</div>

and other layout attributes.)

You can clip the ripple to a circle by adding the `circle` class to the

layout (for example, icon buttons, number pads).

You can set the color of the ripple using the `color` CSS property.

}

When using a paper element, check the element API doc to find the CSS selector

color: blue;

}

To style a checkbox:

color: blue;

}

response to user input.

The `paper-elements` have shadow effects built-in. For example, a

When building your own elements or using standard DOM elements, you can use

the `<paper-shadow>` element to create the appropriate shadow effect.

Continue on to:

<a href="/docs/polymer/binding-types.html">

</a>

<a href="/docs/polymer/expressions.html">

</a>

The bookmarklet checks for element that look like custom elements, but have the generic `HTMLElement` constructor. An element "looks like" a custom element if it has a dash in its name or uses the `is` attribute:

Since this method doesn't use any Polymer APIs, it works for any custom element, Polymer or otherwise.

Now that you know how to create your own elements, dive deeper and read up on [{{site.project_title}}'s core API](/docs/polymer/polymer.html). If you'd like to know more about the underlying technologies that make {{site.project_title}} and Web Components possible, check out [the Platform guide](/docs/start/platform.html). Continue on to:

<a href="/docs/polymer/polymer.html">

</a>

<a href="/docs/start/platform.html">

</a>