39 lines
1.2 KiB
Markdown
39 lines
1.2 KiB
Markdown
|
[](https://travis-ci.org/PolymerElements/paper-input)
|
||
|
|
[](https://beta.webcomponents.org/element/PolymerElements/paper-input)
|
||
|
|
|
||
|
|
## <paper-input>
|
||
|
|
|
||
|
|
Material design: [Text fields](https://www.google.com/design/spec/components/text-fields.html)
|
||
|
|
|
||
|
|
`<paper-input>` is a single-line text field with Material Design styling.
|
||
|
|
|
||
|
|
<!---
|
||
|
|
```
|
||
|
|
<custom-element-demo>
|
||
|
|
<template>
|
||
|
|
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||
|
|
<link rel="import" href="paper-input.html">
|
||
|
|
<link rel="import" href="../iron-icons/iron-icons.html">
|
||
|
|
<style>
|
||
|
|
paper-input {
|
||
|
|
max-width: 400px;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
iron-icon, div[suffix] {
|
||
|
|
color: hsl(0, 0%, 50%);
|
||
|
|
margin-right: 12px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<next-code-block></next-code-block>
|
||
|
|
</template>
|
||
|
|
</custom-element-demo>
|
||
|
|
```
|
||
|
|
-->
|
||
|
|
```html
|
||
|
|
<paper-input always-float-label label="Floating label"></paper-input>
|
||
|
|
<paper-input label="username">
|
||
|
|
<iron-icon icon="mail" prefix></iron-icon>
|
||
|
|
<div suffix>@email.com</div>
|
||
|
|
</paper-input>
|
||
|
|
```
|