HTML Design System

CSS/JS библиотека компонентов, вдохновленная современными мобильными паттернами: табличные списки, navigation bar, tab bar, toolbar, action sheet, segmented control, switches, steppers, sliders, collection view, progress и activity indicators.

Подключение

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="dist/html-design.css">
<script src="dist/html-design.js" defer></script>

Цвета и токены

Акцентные цвета

Доступны CSS variables: `--hds-blue`, `--hds-green`, `--hds-indigo`, `--hds-orange`, `--hds-pink`, `--hds-purple`, `--hds-red`, `--hds-teal`, `--hds-yellow`, `--hds-gray`.

Поверхности

`--hds-surface` используется для navigation/tab/toolbar с blur. `--hds-card` используется для table views, action sheets и collection cells.

Dark mode

Темная тема включается автоматически через `prefers-color-scheme`. Компоненты используют semantic variables, поэтому ручная замена цветов обычно не нужна.

Table views с иконками

ПереходСтрока может быть ссылкой или кнопкой
СтатусПравая часть может быть значением Готово 
<div class="hds-table">
  <button class="hds-list-item" data-hds-push="#view-settings">
    <span class="hds-list-icon blue"><i class="fa-solid fa-gear"></i></span>
    <span><span class="hds-list-title">Настройки</span></span>
    <i class="fa-solid fa-chevron-right hds-chevron"></i>
  </button>
</div>

Navigation bar, tab bar, toolbar

Navigation bar

`.hds-nav-bar` делится на `.hds-nav-leading`, `.hds-nav-title`, `.hds-nav-trailing`.

Tab bar

`.hds-tab-bar` содержит `.hds-tab-list`, автоматически добавляет движущийся indicator и поддерживает badges. Отдельная `.hds-tab-search` создает круглую кнопку справа.

Toolbar

`.hds-toolbar` размещает группы действий снизу или внутри любого контейнера.

Tab bar

<div class="hds-tab-bar" role="tablist">
  <div class="hds-tab-list">
    <button class="hds-tab is-active" aria-selected="true">...</button>
    <button class="hds-tab">...<span class="hds-tab-badge">80</span></button>
  </div>
  <button class="hds-tab-search" aria-label="Поиск">...</button>
</div>

Action sheet

<button data-hds-action-open="#sheet">Открыть</button>
<div class="hds-action-backdrop" id="sheet" aria-hidden="true">
  <div class="hds-action-sheet" role="dialog" aria-modal="true">
    <div class="hds-action-group">
      <button class="hds-action">Действие</button>
      <button class="hds-action destructive">Удалить</button>
    </div>
    <div class="hds-action-group">
      <button class="hds-action cancel" data-hds-action-close>Отмена</button>
    </div>
  </div>
</div>

Controls

Segmented
Switch
Stepper
2
Slider045100

Collection views

Cell

Grid item

Adaptive

Auto-fit layout

Progress и activity

Progress bar

Activity indicator

<div class="hds-progress" style="--progress: 68"><span></span></div>
<span class="hds-activity" aria-label="Загрузка"></span>

JavaScript API

`html-design.js` автоматически инициализируется на `DOMContentLoaded`. Для динамически добавленного HTML вызовите `HTMLDesign.init(container)`.

const fragment = document.querySelector("#new-content");
HTMLDesign.init(fragment);

Attribution

Icons: Font Awesome Free by Fonticons, Inc. Free icons are licensed under CC BY 4.0; fonts under SIL OFL 1.1; code under MIT License. See fontawesome.com/license/free.

Color names follow commonly documented system color names. This project is not affiliated with Apple and does not include Apple-owned images, names as branding, or copyrighted interface assets.