Data Patterns

Toolbar, search field, pagination, empty state и skeleton закрывают типовые состояния таблиц, списков и страниц с данными.

https://

No results

Nothing matched the current filters. Reset the query or create a new item.

Toolbar HTML

<div class="toolbar">
  <div class="toolbar-group">
    <div>
      <h3 class="toolbar-title">Projects</h3>
      <span class="toolbar-meta">24 items</span>
    </div>
  </div>
  <div class="toolbar-group">
    <div class="input-group input-group-compact search-field">
      <span class="input-group-addon"><i class="ph ph-magnifying-glass"></i></span>
      <input class="input-group-input" type="search" placeholder="Search">
      <button class="input-group-action" type="button" data-input-clear aria-label="Clear search">
        <i class="ph ph-x"></i>
      </button>
    </div>
    <button class="btn btn-accent btn-small">Create</button>
  </div>
</div>

Input Group HTML

<div class="input-group">
  <span class="input-group-addon">https://</span>
  <input class="input-group-input" type="text" placeholder="Domain">
  <button class="input-group-action" type="button">Save</button>
</div>

Pagination HTML

<nav class="pagination" aria-label="Pagination">
  <button class="pagination-item" type="button" disabled>Prev</button>
  <button class="pagination-item pagination-item-active" type="button" aria-current="page">1</button>
  <button class="pagination-item" type="button">2</button>
  <span class="pagination-ellipsis">...</span>
  <button class="pagination-item" type="button">12</button>
  <button class="pagination-item" type="button">Next</button>
</nav>

Empty State HTML

<div class="empty-state">
  <div class="empty-state-icon"><i class="ph ph-package"></i></div>
  <h3 class="empty-state-title">No results</h3>
  <p class="empty-state-text">Nothing matched the current filters.</p>
  <div class="empty-state-actions">
    <button class="btn btn-secondary btn-small">Reset</button>
    <button class="btn btn-accent btn-small">Create</button>
  </div>
</div>

Skeleton HTML

<div class="skeleton-stack" aria-label="Loading preview">
  <span class="skeleton skeleton-title"></span>
  <span class="skeleton skeleton-line"></span>
  <span class="skeleton skeleton-line" style="width: 84%"></span>
  <span class="skeleton skeleton-block"></span>
</div>

Input Patterns JS

InputPatterns.init();

// Available on the global namespace too:
GNexusUIKit.InputPatterns.init();