rest-api-language-selector.html

<link rel="import" href="../polymer/polymer.html">

<link rel="import" href="../iron-selector/iron-selector.html">

<link rel="import" href="../paper-button/paper-button.html">

<!--
`rest-api-language-selector` injects a horizontal scrollable language selector into your page.

Example:

      <rest-api-language-selector language="{{language}}"></rest-api-language-selector>

@group REST Elements
@element rest-api-language-selector
@hero hero.svg
-->
<dom-module id="rest-api-language-selector">
  <template>
    <style>
      /* Styling for the scrollbars */
      ::-webkit-scrollbar {
        height: 3px;
      }
      ::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.4);
        border-radius: 2px;
      }
      :host {
        position: relative;
        display: block;
        width: calc(100% + 32px);
        height: calc(100% + 32px);
        margin: -16px;
      }
      .container {
        position: absolute;
        display: flex;
        width: 100%;
        height: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
      }
      button {
        flex: 1;
        padding: 8px;
        background: transparent;
        color: #fff;
        border: none;
        margin: 12px 8px;
        border-radius: 3px;
        font-weight: bold;
      }
      button.iron-selected {
        background: var(--accent-color);
        color: #fff;
      }
    </style>
    <iron-selector class="container" attr-for-selected="lang" selected="{{language}}">
      <button lang="curl">curl</button>
      <button lang="js">JS</button>
      <button lang="python">Python</button>
      <button lang="swift">Swift</button>
      <button lang="go">Go</button>
      <button lang="ruby">Ruby</button>
      <button lang="php">PHP</button>
      <button lang="java">Java</button>
    </iron-selector>
  </template>
  <script>
    (function () {
      'use strict';

      Polymer({
        is: 'rest-api-language-selector',

        properties: {
          /**
           * The selected language
           */
          language: {
            type: String,
            notify: true
          }
        }
      });
    })();
  </script>
</dom-module>