Обмен знаниями о Frontend-Design # 30

React Three Fiber, Aria Tablist, React Spring, 30 секунд кода, плавная прокрутка Sticky Scrollspy Navigation, Calcolor

Оглавление

- Фронтенд-переговоры

• Реагировать на три волокна
• Таблист Арии
• React Spring
• 30 секунд кода
• Плавная прокрутка Sticky Scrollspy Navigation

- Design Talks

• Calcolor

Реагировать на три волокна

Это средство рендеринга React для Threejs (веб и реагировать). Это средство рендеринга React для Threejs в Интернете и поддерживает реакцию. Построение динамического графа сцены становится намного проще, если вы можете разбить его на декларативные, повторно используемые компоненты, которые реагируют на изменения состояния.

Производительность рендеринга составляет до Threejs и GPU, react-three-fiber управляет циклом рендеринга за пределами React без накладных расходов. В остальном React очень эффективен в создании и обновлении деревьев компонентов, что может позволить ему потенциально превзойти ручные приложения в масштабе.

npm install three react-three-fiber

Посетите сайт здесь

Таблист Арии

Свободный от зависимостей простой модуль JavaScript для совместимых с WCAG таблистов.
Также отлично подходит для аккордеонов.

Ключевые цели и особенности дизайна:

• режимы множественного и одиночного выбора
• горизонтальный и вертикальный режимы: регулирует использование клавиш со стрелками для перемещения фокуса между вкладками
• прогрессивное улучшение: позволяет указывать только отношения вкладки и панели в DOM и автоматически добавляет атрибуты role и aria по мере необходимости
• доступность: соответствует спецификации WCAG
• совместимость: широкая поддержка браузеров и устройств (IE9 +)
• начальные состояния: можно использовать aria-selected="true", чтобы указать, какие вкладки должны быть включены по умолчанию.
• удаление: можно включить удаление вкладки (и панели)

Возьмите из NPM и используйте в модульной системе:

npm install aria-tablist

Требования к HTML

<div id="tabs">
    <div id="tab-1">Panel 1</div>
    <div id="tab-2">Panel 2</div>
    <div id="tab-3">Panel 3</div>
</div>

<div aria-labelledby="tab-1">...</div>
<div aria-labelledby="tab-2">...</div>
<div aria-labelledby="tab-3">...</div>

<script>
    new AriaTablist(document.getElementById('tabs'));
</script>

Посетите сайт здесь

React Spring

Это библиотека анимации на основе весенней физики, которая должна покрыть большую часть ваших потребностей в анимации, связанной с пользовательским интерфейсом. Это дает вам достаточно гибкие инструменты, чтобы уверенно воплощать ваши идеи в движущиеся интерфейсы.

Эта библиотека представляет собой современный подход к анимации. Он очень вдохновлен анимацией Кристофера Чедо и реактивным движением Ченга Лу. Он унаследовал мощную интерполяцию и производительность анимации, а также простоту использования реакции-движения. Но хотя анимация является наиболее обязательной, а реакция-движение в основном декларативной, реакция-пружина объединяет и то, и другое. Вы будете удивлены, насколько легко статические данные приводятся в движение с помощью небольших явных служебных функций, которые не обязательно влияют на то, как вы формируете свои представления.

Установка

npm install react-spring

Посетите сайт здесь

30 секунд кода

Коллекция быстрых фрагментов кода для ваших проектов.

Посетите сайт здесь

Плавная прокрутка Sticky Scrollspy Navigation

Это может быть полезно, особенно на страницах документации, где макет страницы довольно прост, так как панели содержимого находятся слева, а навигационная панель - справа. Вот статья Bram.us

Требования:

1. Плавная прокрутка при переходе по внутренним ссылкам
2. Липкая навигация, чтобы навигация на боковой панели всегда оставалась в поле зрения
3. «ScrollSpy» для обновления активного состояния навигации.

Эти три дополнения делают страницу более привлекательной, и, что самое главное, их очень легко реализовать!

Главный трюк для получения эффекта плавной прокрутки заключается в следующем:

html {
	scroll-behavior: smooth;
}

Посетите сайт здесь

Calcolor

Он вычисляет цвета, и вы можете делиться палитрами. Это новый способ управления цифровыми цветами. Оставьте абстрактные цветовые модели позади и сосредоточьтесь на важных вещах.

Говорить о цветах без контекста сложно. Вот почему мы предоставляем отдельную страницу для каждого цветового кода. Используйте его, чтобы найти подходящие варианты цвета, узнать больше о свойствах цвета или преобразовать значения цвета.

Посетите сайт здесь

Прочтите наш предыдущий блог

На этой неделе все. Следите за новостями в следующих блогах, до тех пор

Продолжайте взламывать !!