Partition Bar

A horizontal proportional bar chart for effectively visualizing part-to-whole distributed data relationships.

Installation

npx raya-ui@latest add partition-bar

File Structure

your-project

components

partition-bar

PartitionBar.vue

PartitionBarSegment.vue

PartitionBarSegmentTitle.vue

PartitionBarSegmentValue.vue

API Reference

PartitionBar Props

gap

number

1

Space between segments (multiplied by 4px internally).

size

enum

"md"

Height of the bar segments. Accepts 'sm', 'md', or 'lg'.

PartitionBarSegment Props

num

number

0

The value of this segment relative to the sum of all segments in the bar.

variant

string

"default"

Theme color matching standard Shadcn variants (default, secondary, destructive, outline, muted).

alignment

enum

"center"

Horizontal alignment of the content under the bar segment. Accepts 'left', 'center', or 'right'.

Source content adapted from 8 Star labs.

System
50GB
Apps
30GB
Free
20GB

Settings

Example Variant

Gap Spacing1 (4px)

Bar Size

source-code.vue

<script setup lang="ts">
import { PartitionBar, PartitionBarSegment, PartitionBarSegmentTitle, PartitionBarSegmentValue } from '@/components/ui/partition-bar'
</script>

<template>
  <PartitionBar>
    <PartitionBarSegment :num="50">
      <PartitionBarSegmentTitle>System</PartitionBarSegmentTitle>
      <PartitionBarSegmentValue>50GB</PartitionBarSegmentValue>
    </PartitionBarSegment>

    <PartitionBarSegment :num="30" variant="secondary">
      <PartitionBarSegmentTitle>Apps</PartitionBarSegmentTitle>
      <PartitionBarSegmentValue>30GB</PartitionBarSegmentValue>
    </PartitionBarSegment>

    <PartitionBarSegment :num="20" variant="muted">
      <PartitionBarSegmentTitle>Free</PartitionBarSegmentTitle>
      <PartitionBarSegmentValue>20GB</PartitionBarSegmentValue>
    </PartitionBarSegment>
  </PartitionBar>
</template>