Создатели UI библиотеки
Отличительные особенности - headless, a11y
Основана на другой их UI библиотеке - zag.js, которая работает на технике конечных автоматов состояния
Разрабатывает команда из Нигерии
#ui #lib #headless #arkui
chakra-ui для React создали еще одну приятно смотрящуюся библиотеку для различных фреймворков, в том числе и Vue - ArkОтличительные особенности - headless, a11y
Основана на другой их UI библиотеке - zag.js, которая работает на технике конечных автоматов состояния
Разрабатывает команда из Нигерии
#ui #lib #headless #arkui
Ark-Ui
Home | Ark UI
A headless UI library with over 45+ components designed to build reusable, scalable Design Systems that works for a wide range of JS frameworks.
❤5👍1
Мы уже писали об Ark UI библиотеке
На днях видный член
Выглядит очень хорошей альтернативой
Попробовал на своем проекте. Сперва заменил FilePond на
Ну и правильный
#ui #lib #headless #arkui
На днях видный член
vuejs core team и VitePress maintainer Divyansh Singh назвал их лучшей альтернативой React Aria во Vue экосистемеUnstyled, хорошая поддержка A11y. Vue версия еще неполная. Документация скудная, не для вкатунов. Нужно думать. Основана библиотека на zag.js, документацию можно смотреть там.Выглядит очень хорошей альтернативой
radix/reka/shadcn|vue, только без встроенных tailwind-ов, vueuse-ов, unjs-ов, tanstack-ов и других скрытых зависимостей и обмана типа "copy-paste и всё".Попробовал на своем проекте. Сперва заменил FilePond на
FileUpload - (-100Kb; +30Kb). Стало значительно красивей и намного кастомизируемей (стили генерил AI). Затем добавил Tabs (+20Кб). Затем - Combobox с тэгами и выпадающим меню, которое во многих UI библиотеках тащит 200-400Кб из-за позиционирования - (+70Кб). В общем, вполне экономично и удобно для создания своего небольшого UI kit с требованиями к A11y.Ну и правильный
DatePicker можно собрать.#ui #lib #headless #arkui
🔥11👎1
Технические детали проекта выше
Для графика (
Используются разные
Кнопка справа внизу (
Её задача - сделать удобный
#lissa #pet #arkui
ark-ui в некоторых местах глючит, но как UI библиотека понравилась, буду использовать.Для графика (
chart) модели из TS переделал на классы (без реактивности внутри), стало намного удобнейAI очень помогает делать перевод сайта сразу на нескольких языках одновременно с кодингомИспользуются разные
LLM для парсинга файлов и аналитических отчетов (подешевле и подороже)Кнопка справа внизу (
FAB) идет как волшебная палочка - в ней разные действия в зависимости от страницы и контекста.Её задача - сделать удобный
UX, чтобы пользователь не бегал по всему экрану пальцемPWA, variable fonts, JSON-RPC, JSON5#lissa #pet #arkui
👍3🔥1
Хорошая библиотека
Долго мучился с расположением при динамично меняющемся таргет элементе - все как-то через одно место криво работало. Решил поставить
Немного радует, что довольно часто обновляется и фиксят баги.
P.S. Ререндеринг через `:key` - плохая практика. Последний вариант.
#lib #arkui
Ark-ui, но с особенностями. Особенно у "выпадашки" HoverCard (для меню которая)Долго мучился с расположением при динамично меняющемся таргет элементе - все как-то через одно место криво работало. Решил поставить
:key на HoverCard и инкрементить его при апдейтах - и всё сразу заработало как надо. Ну, ё-моё...Немного радует, что довольно часто обновляется и фиксят баги.
P.S. Ререндеринг через `:key` - плохая практика. Последний вариант.
#lib #arkui
👍2
Получил очень интересный и полезный опыт:
1. Выделив
2. Добавив дизайн систему на
3. Выделив в отдельный репозиторий, который ставится как
4. Создав документацию
5. Добавив темизацию и кастомизацию компонентов
6. Переиспользовав его в других проектах
На
Alt-UI
#arkui #altui #ui
1. Выделив
UI часть проекта Lissa Health в отдельный модуль (привет, #fsd)2. Добавив дизайн систему на
CSS свойствах и оформив всё как UI kit3. Выделив в отдельный репозиторий, который ставится как
Git submodule и подключается через npm локально (для быстрых правок)4. Создав документацию
5. Добавив темизацию и кастомизацию компонентов
6. Переиспользовав его в других проектах
На
npmjs.org не публиковал, на универсальность, полноту (не собираюсь выпускать ее как общую библиотеку) и актуальность документации не претендую, но можно просто посмотреть как работать с Ark-UI.Alt-UI
#arkui #altui #ui
GitHub
GitHub - vuesence/alt-ui: Alt-UI Vue library (based on Ark-UI)
Alt-UI Vue library (based on Ark-UI). Contribute to vuesence/alt-ui development by creating an account on GitHub.
👍7