remote-input

back edit

Use to live preview a slugify username. (This demo uses static HTML as responses.)

<remote-input src="../../support/deferred_content_with_param.html" aria-owns="preview">
  <input autofocus type="text" class="form-control mb-2 container-sm width-full" aria-label="Username">
</remote-input>
<div id="preview"></div>

Use inside of <details-menu> to fetch menu items from a remote endpoint.

This demo uses SelectMenu from Primer CSS.

<details class="details-reset details-overlay">
  <summary class="btn">Settings <span class="dropdown-caret"></span></summary>
  <details-menu class="SelectMenu">
    <div class="SelectMenu-modal">
      <remote-input src="../../support/deferred_menu_content_with_param.html" aria-owns="menu" class="SelectMenu-filter">
        <input type="text" autofocus class="SelectMenu-input form-control" aria-label="Search options">
      </remote-input>
      <div id="menu" class="SelectMenu-list"></div>
    </div>
  </details-menu>
</details>

Use to filter a list of result. (This demo uses static HTML as responses)

This demo uses Box and Blankslate from Primer CSS.

<div class="Box">
  <div class="Box-header d-flex flex-items-center">
    <strong class="f4">Repositories</strong>
    <remote-input src="../../support/deferred_list_with_param.html" aria-owns="list" class="ml-3 flex-auto">
      <input aria-label="Filter repositories" type="text" class="form-control container-sm width-full">
    </remote-input>
  </div>
  <div id="list">
    <div class="blankslate">
      <img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3" />
      <div class="f3 text-bold">This is a blank slate</div>
      <p>Use it to provide information when no dynamic content exists.</p>
    </div>
  </div>
</div>