Примитивы

Scroll

Скроллируемая область. Граница — это проп maxHeight: контейнер, свободный расти, никогда не переполнится, поэтому область скролла без высоты — обычный div. Место под скроллбар зарезервировано всегда, поэтому текст не дёргается вбок в момент, когда контент переваливает за границу, а докрутив до конца, область не отдаёт колесо странице позади.

чистая разметка — библиотеки на странице нет

отрендерил aura-react

отрендерил aura-vue

отрендерил aura-svelte

собрано из классов самого aura-angular

Row 1 — scroll to see the styled scrollbar.

Row 2 — scroll to see the styled scrollbar.

Row 3 — scroll to see the styled scrollbar.

Row 4 — scroll to see the styled scrollbar.

Row 5 — scroll to see the styled scrollbar.

Row 6 — scroll to see the styled scrollbar.

Row 7 — scroll to see the styled scrollbar.

Row 8 — scroll to see the styled scrollbar.

Row 9 — scroll to see the styled scrollbar.

Row 10 — scroll to see the styled scrollbar.

Row 11 — scroll to see the styled scrollbar.

Row 12 — scroll to see the styled scrollbar.

Row 1 — scroll to see the styled scrollbar.

Row 2 — scroll to see the styled scrollbar.

Row 3 — scroll to see the styled scrollbar.

Row 4 — scroll to see the styled scrollbar.

Row 5 — scroll to see the styled scrollbar.

Row 6 — scroll to see the styled scrollbar.

Row 7 — scroll to see the styled scrollbar.

Row 8 — scroll to see the styled scrollbar.

Row 9 — scroll to see the styled scrollbar.

Row 10 — scroll to see the styled scrollbar.

Row 11 — scroll to see the styled scrollbar.

Row 12 — scroll to see the styled scrollbar.

Row 1 — scroll to see the styled scrollbar.

Row 2 — scroll to see the styled scrollbar.

Row 3 — scroll to see the styled scrollbar.

Row 4 — scroll to see the styled scrollbar.

Row 5 — scroll to see the styled scrollbar.

Row 6 — scroll to see the styled scrollbar.

Row 7 — scroll to see the styled scrollbar.

Row 8 — scroll to see the styled scrollbar.

Row 9 — scroll to see the styled scrollbar.

Row 10 — scroll to see the styled scrollbar.

Row 11 — scroll to see the styled scrollbar.

Row 12 — scroll to see the styled scrollbar.

Row 1 — scroll to see the styled scrollbar.

Row 2 — scroll to see the styled scrollbar.

Row 3 — scroll to see the styled scrollbar.

Row 4 — scroll to see the styled scrollbar.

Row 5 — scroll to see the styled scrollbar.

Row 6 — scroll to see the styled scrollbar.

Row 7 — scroll to see the styled scrollbar.

Row 8 — scroll to see the styled scrollbar.

Row 9 — scroll to see the styled scrollbar.

Row 10 — scroll to see the styled scrollbar.

Row 11 — scroll to see the styled scrollbar.

Row 12 — scroll to see the styled scrollbar.

Row 1 — scroll to see the styled scrollbar.

Row 2 — scroll to see the styled scrollbar.

Row 3 — scroll to see the styled scrollbar.

Row 4 — scroll to see the styled scrollbar.

Row 5 — scroll to see the styled scrollbar.

Row 6 — scroll to see the styled scrollbar.

Row 7 — scroll to see the styled scrollbar.

Row 8 — scroll to see the styled scrollbar.

Row 9 — scroll to see the styled scrollbar.

Row 10 — scroll to see the styled scrollbar.

Row 11 — scroll to see the styled scrollbar.

Row 12 — scroll to see the styled scrollbar.

Код

index.html

<div class="aura-scroll" style="max-block-size:140px;">
  <p class="aura-text aura-text--body" style=""> Row 1 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body aura-text--muted" style=""> Row 2 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body" style=""> Row 3 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body aura-text--muted" style=""> Row 4 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body" style=""> Row 5 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body aura-text--muted" style=""> Row 6 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body" style=""> Row 7 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body aura-text--muted" style=""> Row 8 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body" style=""> Row 9 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body aura-text--muted" style=""> Row 10 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body" style=""> Row 11 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body aura-text--muted" style=""> Row 12 — scroll to see the styled scrollbar. </p>
</div>

Demo.tsx

import { Scroll, Typography } from '@ilomee/aura-react';

export default function Demo() {
  return (
    <Scroll maxHeight={140}>
      {Array.from({ length: 12 }, (_, i) => (
        <Typography key={i} variant="body" tone={i % 2 ? 'muted' : 'default'}>
          Row {i + 1} — scroll to see the styled scrollbar.
        </Typography>
      ))}
    </Scroll>
  );
}

Demo.vue

<script setup lang="ts">
import { Scroll } from '@ilomee/aura-vue';
</script>

<template>
  <Scroll :max-height="200">…long content…</Scroll>
</template>

Demo.svelte

<script lang="ts">
  import { Scroll } from '@ilomee/aura-svelte';
</script>

<Scroll maxHeight={200}>…long content…</Scroll>

Используется как [auraScroll] — директива, которую вы вешаете на свой элемент.

demo.component.ts

import { AuraScroll } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraScroll],
  template: `<div auraScroll [maxHeight]="200">…long content…</div>`,
})
export class DemoComponent {}

Атрибутная директива — вешается на тот элемент, который должен скроллиться, поэтому as ей не нужен.

Пропсы

У чистой разметки нет пропсов — классы ниже и есть весь API. Четыре пакета не делают ничего сверх того, что проставляют вам те же самые классы.

Имя	Тип	По умолчанию	Примечания
as	`ElementType`	`'div'`
maxHeight	`number \| string`	—	Растёт вместе с контентом до этой высоты, дальше скроллится. Число — пиксели.
height	`number \| string`	—	Фиксированная высота — для панели, которая не должна менять размер вслед за контентом.
…HTMLAttributesатрибуты	`HTMLAttributes<HTMLElement>`	—

Имя	Тип	По умолчанию
as	`string`	`'div'`
maxHeight	`number \| string`	—
height	`number \| string`	—
defaultслот	`Slot`	—

Имя	Тип	По умолчанию
as	`string`	`'div'`
maxHeight	`number \| string`	—
height	`number \| string`	—
childrenслот	`Snippet`	—

Имя	Тип	По умолчанию	Примечания
maxHeight	`number \| string`	—
height	`number \| string`	—

Какие классы отдаёт

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

Класс	Роль	Примечания
.aura-scroll	база	Обязательный. Без него модификатор не работает.

Токены и правила

components.css

overflow: auto
место под полосу: stable
overscroll: contain
полоса: 8px · thin
ползунок: var(--border-strong)
дорожка: transparent