PrayerTimes

Row of daily prayer times; next is the index of the upcoming prayer and gets highlighted. The size prop (xs, sm, md, lg, xl) scales padding, text and avatar size.

Jump to API reference

Import

Vue

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

Next: Asr

Fajr04:52

Dhuhr12:21

Asr15:48

Maghrib18:35

Isha20:05

Vue

<UiPrayerTimes
  :items="[{ name: 'Fajr', time: '04:52' }, { name: 'Dhuhr', time: '12:21' }, { name: 'Asr', time: '15:48' }, { name: 'Maghrib', time: '18:35' }, { name: 'Isha', time: '20:05' }]"
  :next="2"
 />

Next: Fajr

Fajr04:52

Dhuhr12:21

Asr15:48

Maghrib18:35

Isha20:05

Vue

<UiPrayerTimes
  :items="[{ name: 'Fajr', time: '04:52' }, { name: 'Dhuhr', time: '12:21' }, { name: 'Asr', time: '15:48' }, { name: 'Maghrib', time: '18:35' }, { name: 'Isha', time: '20:05' }]"
  :next="0"
 />

Sizes

Fajr04:52

Dhuhr12:21

Asr15:48

Maghrib18:35

Isha20:05

Fajr04:52

Dhuhr12:21

Asr15:48

Maghrib18:35

Isha20:05

Fajr04:52

Dhuhr12:21

Asr15:48

Maghrib18:35

Isha20:05

Fajr04:52

Dhuhr12:21

Asr15:48

Maghrib18:35

Isha20:05

Fajr04:52

Dhuhr12:21

Asr15:48

Maghrib18:35

Isha20:05

Vue

<UiPrayerTimes
  :items="[{ name: 'Fajr', time: '04:52' }, { name: 'Dhuhr', time: '12:21' }, { name: 'Asr', time: '15:48' }, { name: 'Maghrib', time: '18:35' }, { name: 'Isha', time: '20:05' }]"
  :next="2"
  size="xs"
 />

<UiPrayerTimes
  :items="[{ name: 'Fajr', time: '04:52' }, { name: 'Dhuhr', time: '12:21' }, { name: 'Asr', time: '15:48' }, { name: 'Maghrib', time: '18:35' }, { name: 'Isha', time: '20:05' }]"
  :next="2"
  size="sm"
 />

<UiPrayerTimes
  :items="[{ name: 'Fajr', time: '04:52' }, { name: 'Dhuhr', time: '12:21' }, { name: 'Asr', time: '15:48' }, { name: 'Maghrib', time: '18:35' }, { name: 'Isha', time: '20:05' }]"
  :next="2"
  size="md"
 />

<UiPrayerTimes
  :items="[{ name: 'Fajr', time: '04:52' }, { name: 'Dhuhr', time: '12:21' }, { name: 'Asr', time: '15:48' }, { name: 'Maghrib', time: '18:35' }, { name: 'Isha', time: '20:05' }]"
  :next="2"
  size="lg"
 />

<UiPrayerTimes
  :items="[{ name: 'Fajr', time: '04:52' }, { name: 'Dhuhr', time: '12:21' }, { name: 'Asr', time: '15:48' }, { name: 'Maghrib', time: '18:35' }, { name: 'Isha', time: '20:05' }]"
  :next="2"
  size="xl"
 />

API reference

Row of daily prayer times with the upcoming prayer highlighted.

Props

PropType and valuesDefaultDescription

items{ name: string; time: string }[]'[]'Prayers in display order; time is shown as-is, e.g. "05:12".

nextnumber—Index in items of the next prayer; sets aria-current on it.

sizexssmmdlgxl'md'Scales padding, text and avatars.