api-console-assets
Version:
This repo only exists to publish api console components to npm
89 lines (65 loc) • 4.04 kB
Markdown
[](https://travis-ci.org/advanced-rest-client/paper-input)
# paper-input
`<paper-input>` single line text input styled for the Anypoint platform as a Polymer
powered web component
It may include an optional error message.
```
<paper-input required error-message="Value is required"></paper-input>
```
It may include a custom validator(s).
```
<paper-input validator="my-validator" error-message="Value is required"></paper-input>
```
See `Anypoint.AnypointValidatableBehavior` for API and examples.
### Styling
See `anypoint-text-container` for styling options.
### Events
| Name | Description | Params |
| --- | --- | --- |
| change | Fired when the input changes due to user interaction. | __none__ |
# paper-textarea
`<paper-textarea>` is a multi line text input styled for the Anypoint platform
as a Polymer powered web component
### Example
```
<paper-textarea></paper-textarea>
```
### Styling
See `paper-input-container` for styling options.
# paper-input-container
The `<paper-input-container>` is a container for a `label` and input text styled to match the
Anypoint platform styling.
### Styling
`<paper-input-field>` provides the following custom properties and mixins for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-input-container` | Mixin applied to the input container | `{}`
`--paper-input-container-disabled` | Mixin applied to the disabled container | `{}`
`--paper-input-container-border` | Mixin applied to the border element on the left and right hand side of the input | ``
`--paper-input-container-border-focused` | Mixin applied to the border element on the left and right hand side of the input | ``
`--paper-input-container-border-color` | Color of the right and left border of the input | `--anypoint-color-aluminum4`
`--paper-input-container-border-focused-color` | Color of the right and left border of the input when the input is focused | `--anypoint-color-steel2`
`--paper-input-container-invalid-color,` | Error color | `--anypoint-color-danger`
`--paper-input-container-label-color` | Color of the label | `--anypoint-color-aluminum5`
`--paper-input-container-label` | Mixin applied to the label | `{}`
`--paper-input-container-label-floating` | Mixin applied to the floating label | `{}`
`--paper-input-container-label-focus` | Mixin applied to the label when focused | `{}`
`--paper-input-container-focus-color` | Color applied to the label and input when focused | `--anypoint-color-aluminum5`
`--paper-input-field-prefix` | Mixin applied to any prefix element added to the container | `{}`
`--paper-input-field-suffix` | Mixin applied to any suffix element added to the container | `{}`
`--paper-input-container-input` | Mixin applied to the input control | ``
`--paper-input-container-input-color` | Color of the input control | `--anypoint-color-steel5`
`--paper-input-container-input-focus-color` | Color of the input control when focused | `--anypoint-color-steel5`
`--paper-input-container-input-background-colol` | Background color of the input element | `#fff`
`--paper-input-container-input-focus-background-color` | Background color of the input element when focused | `#fff`
# paper-input-error
The `<paper-input-error>` is a container for an error message or list of validation
rules if the input element uses `validator`s.
### Styling
Custom property | Description | Default
----------------|-------------|----------
`--paper-input-error-container` | Mixin applied to the element | `{}`
`--paper-input-error-border-color` | Border color of the popover | `--anypoint-color-aluminum3`
`--paper-input-error-left-border` | Color of the right border of the popover | `--anypoint-color-steel4`
`--anypoint-text-container-invalid-color` | Color of error messages and borders when corresponding form control is invalid | `--anypoint-color-danger`
`--paper-input-error-message-size` | Font size of the validation message. | `12px`