RamadanTracker

Thirty-day Ramadan grid that marks past days, the current day and the last ten nights. The size prop (xs, sm, md, lg, xl) scales padding, text and avatar size.

Jump to API reference

Import

Vue

import { UiRamadanTracker } from '@ziyarago/ui/vue'

Day 7

Vue

<UiRamadanTracker :day="7" />

Day 24

Vue

<UiRamadanTracker :day="24" />

Sizes

Vue

<UiRamadanTracker :day="7" size="xs" />

<UiRamadanTracker :day="7" size="sm" />

<UiRamadanTracker :day="7" size="md" />

<UiRamadanTracker :day="7" size="lg" />

<UiRamadanTracker :day="7" size="xl" />

API reference

Thirty-day Ramadan progress strip; the last ten days and odd nights are marked.

Props

PropType and valuesDefaultDescription

dayrequirednumber—Current day 1-30. Earlier days render as past, later days as upcoming.

sizexssmmdlgxl'md'Scales padding, text and avatars.

Notes

Exposed as role="img" with aria-label "Day N of 30".