НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

Область прокрутки

Scroll area — блок с ограниченным размером, содержимое которого прокручивается. Его можно прокрутить с клавиатуры, а полоса прокрутки окрашена по теме.

Стабильный Figma
ОбзорИспользованиеAPIДоступность

1.4.0: Tables can pin their first column.

1.3.0: Date picker supports ranges.

1.2.0: Toasts stack and expand on hover.

1.1.0: Menus open submenus to the side.

1.0.0: First stable release.

<tk-scroll-area label="Release notes" fade style="max-block-size: 160px">
  <p>1.4.0: Tables can pin their first column.</p>
  <p>1.3.0: Date picker supports ranges.</p>
  <p>1.2.0: Toasts stack and expand on hover.</p>
  <p>1.1.0: Menus open submenus to the side.</p>
  <p>1.0.0: First stable release.</p>
</tk-scroll-area>

Анатомия

Часть Что это
tk-scroll-area сам элемент; размер задаёте вы
слот по умолчанию содержимое, любое
part scroll прокручиваемый блок; одна остановка Tab, пока содержимое не помещается

Размер

Высоту область прокрутки не выбирает. Ограничьте её через height, max-height или дорожку flex или grid. Без ограничения она растёт вместе с содержимым и не прокручивается.

Ось

Ada LovelaceGrace HopperAlan Turing Katherine JohnsonEdsger DijkstraBarbara Liskov 
<tk-scroll-area label="Team" axis="horizontal">
  <div style="display: flex; gap: var(--space-8); inline-size: max-content">
    <tk-tag>Ada Lovelace</tk-tag><tk-tag>Grace Hopper</tk-tag><tk-tag>Alan Turing</tk-tag>
    <tk-tag>Katherine Johnson</tk-tag><tk-tag>Edsger Dijkstra</tk-tag><tk-tag>Barbara Liskov</tk-tag>
  </div>
</tk-scroll-area>
  • vertical (по умолчанию): прокрутка вверх и вниз; что не влезает по ширине, обрезается.
  • horizontal: прокрутка вбок, для ленты карточек или широкого графика.
  • both: прокрутка в любую сторону, для схемы или широкого журнала.

Настройки

  • fade: у края, за которым есть ещё содержимое, оно плавно растворяется, а в конце растворение пропадает. Нужно там, где обрезанный край можно принять за конец. Глубину задаёт --tk-scroll-area-fade-size.
  • gutter: оставляет место под полосу прокрутки, чтобы содержимое не сдвигалось, когда перестаёт помещаться. В системах с плавающими полосами, например в macOS по умолчанию, место не резервируется.

Полоса прокрутки — собственная полоса браузера, тонкая и окрашенная по теме. В разных системах она выглядит немного по-разному. На тёмном или цветном фоне задайте её цвет через --tk-scroll-area-thumb-color.