UNPKG

api-console-assets

Version:

This repo only exists to publish api console components to npm

49 lines (37 loc) 2.72 kB
[![Build Status](https://travis-ci.org/advanced-rest-client/raml-docs-response-panel.svg?branch=stage)](https://travis-ci.org/advanced-rest-client/raml-docs-response-panel) # raml-docs-response-panel `<raml-docs-response-panel>` Element that displays response documentation for RAML This element is used in `<raml-docs-method-viewer>` element. See it's demo for demo. ### Example ``` <raml-docs-response-panel responses="[[raml.responses]]"></raml-docs-response-panel> ``` The `raml.responses` is a list of responses for current method. It can be obtained using a `raml-path-to-object` element or by passing method Definition from RAML's JSON structure. Note, you have to use ARC's `<raml-js-parser>` since it is also responsoble for transformind parser JSON output to internal data structure. ## Element's width and overflow The code blocks generated by the element can be wide. This is why this element has the CSS `overflow` property set to `auto` by default. In this case you can set the `max-width` or `width` propety on this element (or any parent element) and it will be respected. ### Styling `<raml-docs-response-panel>` provides the following custom properties and mixins for styling: Custom property | Description | Default ----------------|-------------|---------- `--raml-docs-response-panel` | Mixin applied to the element | `{}` `--arc-status-code-color-200` | Color of the 200 status code (ARC theme option) | `rgba(56, 142, 60, 1)` | `--arc-status-code-color-300` | Color of the 300 status code (ARC theme option) | `rgba(48, 63, 159, 1)` | `--arc-status-code-color-400` | Color of the 400 status code (ARC theme option) | `rgba(245, 124, 0, 1)` | `--arc-status-code-color-500` | Color of the 500 status code (ARC theme option) | `rgba(211, 47, 47, 1)` | `--arc-status-code-bgcolor-200` | Background color of the 200 status code | `rgba(56, 142, 60, 0.12)` | `--arc-status-code-bgcolor-300` | Background color of the 300 status code | `rgba(48, 63, 159, 0.12)` | `--arc-status-code-bgcolor-400` | Background color of the 400 status code | `rgba(245, 124, 0, 0.12)` | `--arc-status-code-bgcolor-500` | Background color of the 500 status code | `rgba(211, 47, 47, 0.12)` | `--raml-docs-response-panel-codes-border-color` | Border color of the response codes column | `rgba(0, 161, 223, 0.24)` `--no-info-message` | A mixin applied to the "missing type" paragraph. | `{}` | `--raml-docs-response-panel-container` | A mixin applied to the element's main container | `{}` `--raml-docs-response-panel-codes-content` | A mixin applied to the element's status codes container | `{}` `--raml-docs-response-panel-docs-content` | A mixin applied to the element's documentation content container | `{}`