ScrollArea

Scrollable region with a capped height.

Jump to API reference

Import

Vue
import { UiScrollArea } from '@ziyarago/ui/vue'

Max height 120px

Day 1: Arrival in Jeddah and transfer to Makkah.

Day 2: Umrah rituals with a guide.

Day 3: Free day for prayers at the Haram.

Day 4: Visit Jabal al-Nour.

Day 5: Train to Madinah.

Day 6: Masjid an-Nabawi and Quba.

Day 7: Departure.

Vue
<UiScrollArea max-height="120px">
  <UiVStack :gap="8">
    <UiText>
      Day 1: Arrival in Jeddah and transfer to Makkah.
    </UiText>
    <UiText>
      Day 2: Umrah rituals with a guide.
    </UiText>
    <UiText>
      Day 3: Free day for prayers at the Haram.
    </UiText>
    <UiText>
      Day 4: Visit Jabal al-Nour.
    </UiText>
    <UiText>
      Day 5: Train to Madinah.
    </UiText>
    <UiText>
      Day 6: Masjid an-Nabawi and Quba.
    </UiText>
    <UiText>
      Day 7: Departure.
    </UiText>
  </UiVStack>
</UiScrollArea>

API reference

Vertically scrollable container with a max height and styled scrollbar.

Props

PropType and valuesDefaultDescription
maxHeightstring'240px'CSS max-height; content scrolls beyond it. Must be a string with a unit.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultScrollable content.