Skip to Content
UI DocsVIGORSegmented

Segmented Bar

Overwatch-style health bar done using UI Toolkit’s Vector API.

import { h } from "preact"
import { useRandomHealthValues } from "@/comps/vigor/utils"
import { SegmentedBar } from "@/comps/vigor/segmented"
import { LerpNum } from "@/comps/varia/lerpnum"
import { Color } from "UnityEngine"
 
export const SegmentedDemo = () => {
    // Using `useRandomHealthValues()` to mimic random value changes for fast testing
    const [health, maxHealth] = useRandomHealthValues(50, 500, 1000, 3000)
 
    return <div class="p-10 bg-teal-500/10 rounded flex-col justify-center items-center">
        <div class="text-white font-bold text-4xl mb-4 flex-row">
            <LerpNum value={health} />
            <div class="px-2">{`/`}</div>
            <LerpNum value={maxHealth} />
        </div>
        <SegmentedBar value={health} maxValue={maxHealth} borderWidth={2} borderColor={Color.white} />
    </div>
}

Multi-Value Segmented Bar

Allows you to display multiple values in a single segmented bar, useful for showing different stats like health, shield, and armor.

import { h } from "preact"
import { getSortedRandomIntegers, useRandomHealthValues } from "@/comps/vigor/utils"
import { MultiValueSegmentedBar, SegmentedBar } from "@/comps/vigor/segmented"
import { LerpNum } from "@/comps/varia/lerpnum"
import { Color } from "UnityEngine"
 
const colors = [
    new Color(0.85, 0.25, 0.25), // HP - Crimson Red (#D94141)
    new Color(0.27, 0.51, 0.71), // Armor - Steel Blue (#4682B4)
    new Color(0.2, 0.84, 0.76)   // Shield - Electric Teal (#33D6C1)
]
 
export const MultiValueSegmentedDemo = () => {
    // Using `useRandomHealthValues()` to mimic random value changes for fast testing
    const [health, maxHealth] = useRandomHealthValues(250, 500, 1000, 3000)
 
    const values = [...getSortedRandomIntegers(3, maxHealth, 150)]
 
    return <div class="p-10 bg-teal-500/10 rounded flex-col justify-center items-center">
        <div class="text-white font-bold text-2xl mb-4 flex-row">
            <LerpNum value={values[0]} style={{ color: colors[0] }} />
            <div class="px-2">,</div>
            <LerpNum value={values[1]} style={{ color: colors[1] }} />
            <div class="px-2">,</div>
            <LerpNum value={values[2]} style={{ color: colors[2] }} />
            <div class="px-2">{`/`}</div>
            <LerpNum value={maxHealth} />
        </div>
        <MultiValueSegmentedBar values={values} maxValue={maxHealth} colors={colors} borderWidth={2} borderColor={Color.white} />
    </div>
}
HeartAutotext