PagePrayer Pro

Part of Pro. Versions up to 0.10 of the open source package include it under MIT; later releases keep it in Pro.

Prayer times page. Slots: location, today, month, qibla.

Jump to API reference

Import

Vue
import { UiPagePrayer } from '@ziyarago/ui-pro/vue'

Default

Prayer times

Makkah

Location slot
Today slot
Month table slot
Qibla slot
Vue
<UiPagePrayer title="Prayer times" subtitle="Makkah">
  <template #location>Location slot</template>
  <template #today>Today slot</template>
  <template #month>Month table slot</template>
  <template #qibla>Qibla slot</template>
</UiPagePrayer>

API reference

Prayer times template: a location picker, today's times with the next prayer highlighted, a month table and a sticky Qibla compass.

Props

PropType and valuesDefaultDescription
titlestring—Page heading. The built-in header renders only when title is set and the header slot is empty.
subtitlestring—Caption under the heading.
crumbs{ label: string; href?: string }[]—Breadcrumb trail above the title.

Slots

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

headerCustom page header; replaces the built-in title/subtitle/crumbs header.
actionsButtons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
locationCity and method pickers; Select, PillSelect, SegmentedControl.
todayToday's prayers and the countdown to the next one; Card, PrayerTimes.
monthPrayer times for the whole month; Card, DataTable.
qiblaQibla direction; Card, QiblaCompass.

Notes

  • Place inside AppShell; fill only the slots you need.
  • The Qibla card stays visible on the right and goes below the times under 860 px.