ZUI 3

ZUI 3 — это новый открытый набор компонентов пользовательского интерфейса, который предоставляет множество полезных компонентов и предлагает свободные способы кастомизации, не зависящие от каких-либо JavaScript-фреймворков. Это позволяет использовать его в любом веб-приложении с помощью нативных методов.

Просмотрите https://easysoft.github.io/zui/3/, чтобы заранее ознакомиться с набором компонентов.

👉 Если вам требуется доступ к ZUI 1, переходите на https://openzui.com/. Исходный код ZUI 1 был перемещён на ветку zui1.

Основные характеристики* 🌸 Богатые CSS-классы: основаны на Tailwind CSS и предоставляют множество CSS-классов, включая семантические классы внешнего вида;

• 💠 Мощные JS-компоненты: основанные на Preact и предоставляющие множество JavaScript-компонентов, каждый из которых имеет множество полезных опций;

• 💖 Дружественный современный дизайн: предлагается стиль дизайна, тщательно продуманный, все компоненты прошли многочисленные оптимизации и проверки для обеспечения наилучшего использования;

• 🌗 Темы и темная тема: базируются на темах CSS-переменных, позволяющих быстро создавать новые темы, а также поддерживают встроенную темную тему;

• 📦 Свободное использование: не зависит от конкретных фреймворков, все CSS-классы готовы к использованию, все JS-компоненты поддерживают нативное вызывание, множество способов импорта, поддержка импорта через ESM, либо прямого использования в браузере, поддержка сборки и кастомизации своих версий;

• ⚙️ Высокая степень кастомизации: помимо возможности выборочной загрузки, поддерживается сборка и кастомизация своих версий, что позволяет избежать избыточности.Некоторые захватывающие новые возможности находятся в процессе разработки, включая:

• Интерактивные примеры документации;

• Онлайн-площадка для тестирования;

• Дизайнер тем;

• Гайды по дизайну;

• Конфигурируемые механизмы сборки, поддерживающие онлайн-генерацию конфигураций;

• Набор компонентов для React и Preact;

• Общий механизм плагинов для компонентов, позволяющий расширять все компоненты.

Быстрое знакомство

Использование CSS-классов

<button class="btn primary">ZUI 3</button>
<button class="btn primary-outline">Читайте больше</button>

Использование JS-компонентов

<menu id="colorPicker"></menu>

<script>
const colorPicker = new ColorPicker('#colorPicker', {
    heading: 'Выберите цвет',
    defaultValue: '#0ea5e9',
});
</script>

Разработка

Установка

$ pnpm install

Запуск сервера разработки

$ pnpm dev

Сборка

$ pnpm build

Предварительный просмотр разработки документации

$ pnpm docs:dev

Построение документации

$ pnpm docs:build

Технологический стек

• Node.js 18+
• Управление пакетами: pnpm
• Инструменты сборки: Vite
• Библиотека CSS: TailwindCSS
• Создание статических веб-сайтов с документацией: VitePress
• TypeScript 4.5+
• Генерация шрифтовых иконок: Fantasticon
• Разработка компонентов JS: Preact

Часто задаваемые вопросы* Почему нет ZUI 2?

• Интервал между версиями ZUI 3 и ZUI 1 слишком велик, поэтому пропущена промежуточная версия.
• Можно ли использовать это в проектах?
  • В настоящее время ZUI 3 находится в состоянии быстрого развития и может быть нестабильной. Без глубокого понимания исходного кода проекта не рекомендуется использовать её в реальных проектах. Приглашаем вас принять участие в развитии проекта.