Display

Folder

A folder that looks like one: a frosted front with papers behind it, tipping open as you point at it or move to it with the keyboard. For file browsers and anywhere things are grouped.

Installation

npx sinaui add folder

Copy src/lib/ui/Folder.svelte and tokens.css. No dependencies.

Examples

Basic

Point at it, or tab to it, and it tips open.

<script lang="ts">
	import Folder from '#lib/ui/Folder.svelte';
</script>

<Folder name="Manuscripts" count={214} />

Your own color

Any color; the back is a shade darker and the front lets the papers show through.

<script lang="ts">
	import Folder from '#lib/ui/Folder.svelte';
</script>

<Folder name="Star tables" count={38} color="#3b82f6" />

Empty

A count of zero still says so: 0 items.

<script lang="ts">
	import Folder from '#lib/ui/Folder.svelte';
</script>

<Folder name="Archive" count={0} color="#64748b" />

Small

For lists and sidebars.

<script lang="ts">
	import Folder from '#lib/ui/Folder.svelte';
</script>

<Folder name="Letters" size="sm" color="#f43f5e" />

Large

For a grid of folders.

<script lang="ts">
	import Folder from '#lib/ui/Folder.svelte';
</script>

<Folder name="Translations" size="lg" count={91} color="#f59e0b" />

Props

Prop	Type	Default
`name`	`string`	required
`count`	`number`, items inside
`color`	any CSS color	the accent
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`open`	`boolean`: held open, while something is dragged over it	`false`
`selected`	`boolean`	`false`

It's a button: add onclick, ondblclick or any other attribute.

Accessibility

A button named by the folder's name, with its item count read after.
It opens on keyboard focus just as on hover.
With reduced motion it opens without moving.