01 · эффективность
Опирайтесь на общие основы.
Используйте одни компоненты и токены во всём продукте. Уделяйте время его поведению и содержимому, улучшая общие основы в одном месте.
Изучить Mercury UI →Система интерфейсов Mercury
Создавайте интерфейсы с Mercury.
Собирайте Mercury UI с Hyperscript и Hypergraph. Нативный mx готовит HTML и JavaScript для любой веб-платформы.
- 4.1.1 Mercury UI
- mx Нативные инструменты
- Hyperscript Собственная среда DOM
- HTML + JS Любая веб-платформа
01ценности и принципы
Дизайн-система для продуктов. Для вашей работы.
Переиспользуемые компоненты, явное состояние и нативный цикл разработки. У каждой части своя задача.
02 · гибкость
Меняйте интерфейс, сохраняя модель.
Hypergraph разделяет события, состояние и эффекты. Hyperscript отображает интерфейс с нативной семантикой DOM браузера.
Изучить Hypergraph →03 · качество
Понимайте контракт.
Читайте о поведении, ограничениях и примерах каждого компонента. Документация различает готовые возможности и то, что ещё разрабатывается.
Проверить готовность →02почему mercury
Общая система. Разные продукты.
Общие элементы позволяют каждому продукту выразить себя через содержимое, композицию и токены.
Общий язык интерфейса
Кнопки, формы, навигация и обратная связь используют одинаковые контракты компонентов во всём продукте.
Меньше повторной работы
Разработчики собирают интерфейс из готовых элементов. Исправление общего компонента действует везде, где он используется.
Понятное состояние
Hypergraph явно описывает события, производные значения и эффекты, включая изолированное состояние серверных запросов.
Нативный цикл разработки
mx компилирует приложения Mercury, запускает сервер разработки и собирает бандлы. Hyperscript использует class, for и нативные события DOM.
Ваш выбор сервера
Страницы Mercury можно обслуживать через Go, Phoenix или статический хостинг. Live Mercury добавляет острова в существующие приложения Phoenix и LiveView.
03основы
Сначала токены. Затем компоненты.
У цветов, отступов, шрифтов и поверхностей есть имена. Светлая и тёмная темы используют общий словарь компонентов.
Семантические цвета
Поверхность
Текст
Акцент
Успех
Предупреждение
Ошибка
Шрифт по назначению
Aa Bb Cc
Аа Бб Вв
DM Sans для интерфейса. DM Mono для кода. Одна читаемая шкала на главной странице и в курсах.
font-family: var(--font-primary);04компоненты
Собирайте интерфейс. Сохраняйте поведение.
Mercury UI охватывает раскладку, формы, выбор, навигацию и обратную связь. Начните с нужного семейства и прочитайте его контракт состояния и доступности.
Действия и раскладка
Button · Stack · Grid · Container
Поля ввода и формы
Field · Input · DateField · ErrorSummary
Выбор значений
Checkbox · ListBox · Combobox
Обратная связь и данные
Alert · Toast · Table · DataGrid
Навигация
Tabs · Breadcrumbs · Tree · Toolbar
Основы
Locale · Direction · Environment
05начало работы
Ваша первая страница. Попробуйте здесь.
Попробуйте страницу в браузере, разрабатывайте локально с mx и публикуйте результат на своей платформе. Go и Phoenix — варианты интеграции, а не обязательные зависимости.
Попробовать в браузере
Обычный JavaScript
import { h, render } from "@fiberfx/hyperscript";
import { useState } from "@fiberfx/hyperscript/hooks";
import { Card, Button } from "@fiberfx/ui";
function Counter() {
const [count, setCount] = useState(0);
return h(Card, { title: "My first Mercury page", variant: "raised" },
h("p", { id: "count", "aria-live": "polite" }, `Count: ${count}`),
h(Button, { onClick: () => setCount(count + 1) }, "Increment")
);
}
render(h(Counter, null), document.getElementById("app"));
Полный HTML связывает эти импорты с модулями Mercury 4.1.1 и подключает стили UI. Сохраняйте карту импортов вместе с CSS; браузерному примеру нужен доступ к unpkg.com.
Установить mx ↑ · Руководство первой страницы · Установка и поддерживаемые платформы
Готовы создать свой интерфейс?
Начните в браузере или с нативного mx, затем выберите свой сервер. Ваш агент может следовать тому же руководству.