Reading Progress
Полоса прогресса чтения. Pro · Контент и соцсети › Чтение и автор
Установка
npx valyro-cli@latest login
npx valyro-cli@latest add reading-progressnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ReadingProgress } from 'valyro-ui-pro';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
target | RefObject<HTMLElement | null> | The article being read: the bar fills from its top reaching the viewport top to its end reaching the bottom. Default: the whole scrollable content. | |
container | RefObject<HTMLElement | null> | Scrolling element that holds the article, when it is not the window (a reader pane, a modal). | |
position | 'fixed' | 'sticky' | 'static' | 'fixed' | fixed: pinned to the top of the viewport (default); sticky: to the top of its scroll container; static: in the flow. |
thickness | number | 3 | Height of the bar in px (default 3). |
Похожие компоненты
- Article Toc — Оглавление статьи с подсветкой текущего раздела
- Share Bar — Поделиться: Telegram, VK, X, WhatsApp, почта и копирование ссылки
- Author Bio — Карточка автора в конце статьи с подпиской
- Article Header — Шапка статьи: рубрика, заголовок, лид, авторы и дата
- Byline — Подпись: авторы, дата публикации и обновления, время чтения
- Article Figure — Иллюстрация с подписью и автором фото
- Pull Quote — Выносная цитата с атрибуцией
- Key Points — Блок «Главное» с ключевыми тезисами
- Editor Note — Обновление, исправление, раскрытие и пометка о спонсорстве
- Article Card — Карточка новости: вертикальная, горизонтальная и поверх фото
- Live Blog — Онлайн-трансляция: лента обновлений, закреплённые и важные события
- Breaking News — Плашка «Срочно» с ротацией заголовков
Назад: Article Toc · Далее: Share Bar · Весь раздел «Контент и соцсети»