api-console-assets
Version:
This repo only exists to publish api console components to npm
57 lines (40 loc) • 2.25 kB
Markdown
[](https://travis-ci.org/advanced-rest-client/headers-list-view)
# headers-list-view
`<headers-list-view>` An element that displays a list of headers.
List items are active and on double click it will send the `query-headers`
event. Hosting app should handle this event to display header details.
Such behavior is supported by the `arc-definitions` element.
Any links in the header value will be converted to anchor and hosting app
can handle click on this link by listening for click event and checking if the
target element contains `auto-link` class name. If the click is not prevented
then it will open the target in new tab.
The `headers` accepts a HTTP headers string or the Headers object.
It will be parsed to array of objects with `name` and `value` keys and
passed to the `_headers` property.
### Example
```
<headers-list-view headers="[[myHeaders]]"></headers-list-view>
```
### Styling
`<headers-list-view>` provides the following custom properties and mixins for styling:
Custom property | Description | Default
----------------|-------------|----------
`--headers-list-view` | Mixin applied to the element | `{}`
`--arc-font-body1` | Mixin applied to the example section in the details dialog. | `{}`
`--arc-font-body2` | Mixin applied to the description section in the details dialog. | `{}`
# headers-list-item-value
An element that will display a header list value as a link.
Regular data binding in Polymer is using innerText setter to assign the value.
Thus any HTML tag won't be recognized and displayed as text.
This element will find links in the header value and display it as a link
if necessary.
Parent elements may catch link action and prohibit from navigation and use
the link value somehow.
To catch autogenerated link check class name on an event target. It should
contain `auto-link` CSS class name.
### Styling
`<headers-list-view>` provides the following custom properties and mixins for styling:
Custom property | Description | Default
----------------|-------------|----------
`--headers-list-item-value` | Mixin applied to the element | `{}`
`--arc-link` | Mixin applied to autogenerated link | `{}`