VersusBar

Head-to-head comparison of two values on one proportional bar. The size prop (xs, sm, md, lg, xl) sets the bar thickness.

Jump to API reference

Import

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

Missing side

Direct
42
VS
0
Vue
<UiVersusBar :left="{ label: 'Direct', value: 42 }" />

Comparison

Umrah
840
VS
Hajj
460
Vue
<UiVersusBar
  :left="{ label: 'Umrah', value: 840 }"
  :right="{ label: 'Hajj', value: 460 }"
 />

Sizes

Umrah
840
VS
Hajj
460
Umrah
840
VS
Hajj
460
Umrah
840
VS
Hajj
460
Umrah
840
VS
Hajj
460
Umrah
840
VS
Hajj
460
Vue
<UiVersusBar
  :left="{ label: 'Umrah', value: 840 }"
  :right="{ label: 'Hajj', value: 460 }"
  size="xs"
 />

<UiVersusBar
  :left="{ label: 'Umrah', value: 840 }"
  :right="{ label: 'Hajj', value: 460 }"
  size="sm"
 />

<UiVersusBar
  :left="{ label: 'Umrah', value: 840 }"
  :right="{ label: 'Hajj', value: 460 }"
  size="md"
 />

<UiVersusBar
  :left="{ label: 'Umrah', value: 840 }"
  :right="{ label: 'Hajj', value: 460 }"
  size="lg"
 />

<UiVersusBar
  :left="{ label: 'Umrah', value: 840 }"
  :right="{ label: 'Hajj', value: 460 }"
  size="xl"
 />

API reference

Head-to-head comparison of two values with a proportional two-color bar.

Props

PropType and valuesDefaultDescription
leftrequired{ label: string; value: number }—Left side. Its share of the bar is value / (left.value + right.value) in the brand color.
rightrequired{ label: string; value: number }—Right side, filling the remainder of the bar in sky.
sizexssmmdlgxl'md'Value font size and bar thickness.

Notes

  • A missing side renders an empty label and 0; with both at 0 the bar is split with no brand share.