Skip to main content

A ranked list with proportional bars, links and a show-more toggle.

  1. Images 412 files
  2. Documents 268 files
  3. Spreadsheets 131 files
  4. Videos 54 files

Usage

Example.svelte 
<script lang="ts">
	import FileIcon from "@lucide/svelte/icons/file";
	import FileImageIcon from "@lucide/svelte/icons/file-image";
	import FileTextIcon from "@lucide/svelte/icons/file-text";
	import FileVideoIcon from "@lucide/svelte/icons/file-video";

	import BarList from "@zedensix/ui/components/bar-list";
</script>

<BarList
	max={4}
	format={(value) => `${value} files`}
	items={[
		{ label: "Images", value: 412, icon: FileImageIcon, href: "#images" },
		{ label: "Documents", value: 268, icon: FileTextIcon, href: "#documents" },
		{ label: "Videos", value: 54, icon: FileVideoIcon, href: "#videos" },
		{ label: "Spreadsheets", value: 131, icon: FileIcon },
		{ label: "Archives", value: 17, icon: FileIcon },
		{ label: "Other", value: 9, icon: FileIcon },
	]}
/>