Scroll

Installation

npm i @snack-uikit/scroll

Changelog

Description

• Пакет @snack-uikit/scroll предоставляет компонент Scroll для создания прокручиваемых контейнеров с кастомизируемыми скроллбарами на основе библиотеки OverlayScrollbars.
• Компонент поддерживает различные размеры скроллбаров (size: "s" | "m") и стратегии их скрытия (barHideStrategy): всегда показывать, скрывать при уходе курсора, показывать только при скроллинге или при движении курсора.
• Позволяет настроить автоскролл при монтировании и изменении размера контента в направлении вниз (autoscrollTo: "bottom") или вправо (autoscrollTo: "right"), что удобно для чатов, логов и динамически обновляемого контента.
• Поддерживает настройку возможности изменения размера контейнера (resize): запрет изменения, только горизонтальное, только вертикальное или в обеих координатах.
• Предоставляет возможность отключить клик по скроллбару для прокрутки (clickScrolling) и сделать скроллбары недоступными для взаимодействия мышью (untouchableScrollbars).
• Компонент возвращает ref на viewport-элемент и поддерживает колбэки для событий скролла (onScroll) и инициализации (onInitialized).
• Figma: Scroll.

Example

import { Scroll } from '@snack-uikit/scroll';
import { Card } from '@snack-uikit/card';

function Example() {
  return (
    <Scroll
      size="m"
      barHideStrategy="leave"
      autoscrollTo="bottom"
      onScroll={(event) => console.log('Scrolled', event)}
    >
      <div>
        {Array.from({ length: 10 }).map((_, index) => (
          <Card key={index} header={<Card.Header title={`Card ${index + 1}`} />} outline>
            Контент карточки с прокруткой
          </Card>
        ))}
      </div>
    </Scroll>
  );
}

setNonce

setNonce

Установить nonce атрибут для инлайн стилей.

Scroll

Props

| name | type | default value | description | |------|------|---------------|-------------| | className | string | - | CSS-класс | | size | enum Size: "s", "m" | m | Размер скролбаров | | clickScrolling | boolean | true | Скролить ли по клику в скроллбар. | | autoscrollTo | enum AutoscrollTo: "bottom", "right" | - | Включает автоскрол при маунте и изменении размера контента: - bottom - автоскрол вниз, - right - автоскрол вправо, | | barHideStrategy | enum BarHideStrategy: "never", "leave", "scroll", "move" | leave | Управление скрытием скролл баров: - Never - показывать всегда - Leave - скрывать когда курсор покидает компонент - Scroll - показывать только когда происходит скроллинг - Move - показывать при движении курсора над компонентом | | onScroll | (event?: Event) => void | - | Колбек события скрола. | | resize | enum Resize: "none", "horizontal", "vertical", "both" | none | Настройка возможности регулировать Scroll-контейнер: - None - нельзя изменять размер - Horizontal - можно изменять размер только по горизонтали - Vertical - можно изменять размер только по вертикали - Both - можно изменять размер в обеих координатах | | untouchableScrollbars | boolean | - | Отключает возможность взаимодействовать со скролбарами мышью. | | paddingAbsolute | boolean | - | Должны ли паддинги быть абсолютными | | onInitialized | () => void | - | Коллбэк вызывающийся на инициализацию скролла | | ref | LegacyRef<HTMLElement> | - | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} | | key | Key | - | |